/*
 | Le pied — quatre colonnes sur blanc, puis une barre sombre.
 |
 | Relevé dans le Figma : fond `#ffffff`, rangée de colonnes en `padding 40`
 | et `gap 40`, titres de colonne en STIX Two Text 20 px, liens en Familjen
 | Grotesk 14 px, barre du bas en `#2d3e46`, `padding 24 40`, `gap 24`.
 |
 | Sur mobile, les colonnes s'empilent (`padding 40 16`) et la barre du bas passe
 | en colonne (`padding 24 18`, `gap 24`).
 */

.bt-pied {
    background: var(--bt-fond-clair);
    color: var(--bt-neutral-900);
}

.bt-pied-colonnes {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px;
}

/*
 | `min-width: 0` n'est pas une precaution de style : un element flex vaut par
 | defaut au moins la largeur de son contenu insecable, et refuse donc de
 | retrecir. Sans lui, une colonne un peu trop pleine pousse les suivantes hors
 | de l'ecran — ce qui s'est produit.
 */
.bt-pied-colonne {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* La colonne de marque est plus large que les autres : 334 contre 216,5. */
.bt-pied-marque {
    flex: 0 0 334px;
}

/*
 | Le logo du pied est le meme fichier que celui de l'en-tete : ses parties
 | blanches sont en `currentColor`, il suffit donc de lui donner l'encre sombre
 | pour qu'il tienne sur le blanc. Deux fichiers auraient fini par diverger.
 */
.bt-logo--pied {
    display: block;
    color: var(--bt-encre);
}

.bt-logo--pied svg,
.bt-logo--pied img {
    height: 68px;
}

/*
 | Les réseaux dans le pied : plus petits que dans le bandeau — 41 px contre 56,
 | et sans marge de section. Le plugin les dimensionne par sa propre variable ;
 | on la change ici plutôt que de redessiner les icônes.
 */
.bt-pied-marque .cw-res {
    --cw-res-pastille: 41px;
    --cw-res-marge: 0;

    padding: 0;
}

.bt-pied-marque .cw-res-entete {
    margin: 0;
    padding: 0;
}

.bt-pied-marque .cw-res-liens {
    justify-content: flex-start;
}

/*
 | ⚠️ Le Figma emploie **Graphik** sur cette seule ligne. Police commerciale,
 | absente de Google Fonts : la ligne est rendue dans la police de texte du site.
 | Le corps et la couleur, eux, sont ceux de la maquette.
 */
.bt-pied-baseline {
    margin: 0;
    color: #32302e;
    font-size: var(--bt-corps-sm);
}

.bt-pied-titre {
    margin: 0;
    font-family: var(--bt-titre);
    font-size: var(--bt-h6);
    font-weight: 400;
    letter-spacing: var(--bt-titre-lettres);
}

.bt-pied-liens {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-pied-liens a {
    color: var(--bt-neutral-700);
    font-size: var(--bt-corps-sm);
    text-decoration: none;
}

.bt-pied-liens a:hover {
    text-decoration: underline;
}

/* ── Les encarts d'avis ──────────────────────────────────────────────────── */

/*
 | Relevé dans le Figma : deux blocs de 82 px, écartés de 32. Chacun porte un
 | wordmark de 20 px de haut, cinq étoiles de 20 px en #ffcd36, et la note en
 | 16 px / #44403c.
 */
.bt-pied-avis {
    gap: 32px;
    justify-content: center;
}

.bt-avis {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.bt-avis-marque {
    color: #00665c;
    font-family: var(--bt-titre);
    font-size: 20px;
    letter-spacing: -0.03em;
    line-height: 1;
}

.bt-avis-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bt-avis-etoiles {
    display: flex;
    gap: 2px;
}

.bt-avis-etoiles svg {
    display: block;
    width: 20px;
    height: 20px;
    /* #ffcd36 : la teinte exacte des étoiles dans la maquette. */
    fill: #ffcd36;
}

.bt-avis-chiffre {
    color: var(--bt-neutral-700);
    font-size: var(--bt-corps-md);
}

/* ── La barre du bas ─────────────────────────────────────────────────────── */

.bt-pied-bas {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 24px 40px;
    background: var(--bt-fond-sombre);
    color: var(--bt-neutral-200);
    font-size: var(--bt-corps-sm);
}

.bt-pied-droits {
    flex: 1 1 auto;
    margin: 0;
}

.bt-pied-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 | ⚠️ ÉCART ASSUMÉ AVEC LA MAQUETTE.
 |
 | Le Figma pose ces liens en `#44403c` sur le fond `#2d3e46` de la barre : un
 | rapport de contraste de **1,3:1**, quand le minimum lisible est de 4,5:1. Sur
 | l'écran du concepteur comme sur celui du visiteur, ces liens sont des taches
 | sombres sur un fond sombre — on ne les voit pas, et on ne peut donc pas
 | cliquer dessus.
 |
 | Ils reprennent ici l'encre du copyright, qui est à 9,7:1. C'est le seul
 | endroit du thème où l'on s'écarte du fichier, et c'est pour rendre lisible ce
 | que la loi impose d'afficher.
 */
.bt-pied-legal a {
    color: var(--bt-neutral-200);
    text-decoration: none;
}

.bt-pied-legal a:hover {
    text-decoration: underline;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .bt-pied-colonnes {
        flex-direction: column;
        gap: 40px;
        padding: 40px 16px;
    }

    .bt-pied-marque {
        flex: 0 0 auto;
    }

    .bt-pied-bas {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
        padding: 24px 18px;
    }

    .bt-pied-legal {
        flex-direction: column;
        gap: 12px;
    }
}