/* Le plan du site, au bas de chaque page.

   Les liens qui relient les pages entre elles étaient tous construits par
   JavaScript : une page produit livrée ne contenait qu'un seul lien. Ce
   bloc les remet dans le fichier, en clair. Il sert autant au lecteur
   qu'au robot — c'est pourquoi il est visible, et non caché. */

.plan-site {
    background: #f6f7f9;
    border-top: 1px solid #e3e6ea;
    padding: 44px 20px 40px;
    font-size: 14px;
}

.plan-site-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 3fr;
    gap: 36px;
}

.plan-site h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7a828c;
    margin: 0 0 14px;
}

.plan-site ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-site li {
    margin-bottom: 7px;
    line-height: 1.45;
}

/* Quarante produits en colonne feraient une page à eux seuls. */
.plan-site-produits {
    columns: 4 190px;
    column-gap: 28px;
}

.plan-site-produits li {
    break-inside: avoid;
}

.plan-site a {
    color: #414a55;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.plan-site a:hover,
.plan-site a:focus-visible {
    color: #0b63b8;
    border-bottom-color: currentColor;
}

/* La page où l'on se trouve n'est pas un lien vers elle-même. */
.plan-site [aria-current="page"] {
    color: #9aa1a9;
}

/* L'arabe se lit dans l'autre sens : le texte s'aligne à droite, et les
   colonnes du catalogue se remplissent de droite à gauche. */
.rtl .plan-site {
    direction: rtl;
    text-align: right;
}

@media (max-width: 720px) {
    .plan-site-inner { grid-template-columns: 1fr; gap: 26px; }
    .plan-site-produits { columns: 2 140px; }
}

/* Le sélecteur de langue est passé de quatre `<button>` à quatre liens,
   pour qu'un moteur puisse enfin atteindre l'anglais, l'allemand et
   l'arabe. Un lien ne porte pas l'habillage d'un bouton : on le lui
   rend, pour que rien ne change à l'écran. */

a.lang-btn {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    padding: 3px 6px;
    border-radius: 4px;
}

a.lang-btn:hover,
a.lang-btn:focus-visible {
    background-color: rgba(46, 125, 93, .14);
}

/* Le fil d'Ariane.

   Il était déclaré aux moteurs mais n'existait pas à l'écran. Google
   demande que le chemin annoncé soit visible ; le lecteur, lui, gagne un
   retour au catalogue depuis une fiche qui n'en offrait aucun. */

.fil-ariane {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px 0;
    font-size: 13px;
    color: #7a828c;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.fil-ariane a {
    color: #414a55;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.fil-ariane a:hover,
.fil-ariane a:focus-visible {
    color: #0b63b8;
    border-bottom-color: currentColor;
}

.rtl .fil-ariane { direction: rtl; }
.rtl .fil-ariane [aria-hidden="true"] { transform: scaleX(-1); }

/* Les produits de la même famille, au bas de chaque fiche. */

.meme-famille {
    padding: 46px 20px 8px;
}

.meme-famille-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.meme-famille h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7a828c;
    margin: 0 0 18px;
}

.meme-famille ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}

.meme-famille a {
    display: block;
    color: #2b323b;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.35;
}

.meme-famille img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 7px;
    background: #eef0f3;
    margin-bottom: 9px;
    transition: opacity .18s;
}

.meme-famille a:hover img,
.meme-famille a:focus-visible img {
    opacity: .82;
}

.meme-famille a:hover span,
.meme-famille a:focus-visible span {
    color: #0b63b8;
}

.rtl .meme-famille { direction: rtl; text-align: right; }

@media (max-width: 720px) {
    .meme-famille ul { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .meme-famille img { height: 92px; }
}