/* Pied de page commun (templates/base.html), 01/10/2026 : marque, 3 colonnes (13 thematiques sur 2 sous-colonnes : maillage SEO), barre du bas.
   Couleurs du site uniquement ($color-* de web/frontend/style/sass/_settings.colors.scss).
   Les anciens styles .footer__* (bundles compiles) ne sont plus utilises ; .footer garde margin-top: auto
   (pied colle en bas des pages courtes). ?v= du lien dans base.html : a augmenter a chaque modification. */

.pied {
    --pied-fond: #2D4F48;          /* vert profond des vagues du site */
    --pied-bas: rgba(0, 0, 0, .16);/* barre du bas : le meme vert, assombri */
    --pied-creme: #F6E9D4;         /* $color-bg */
    --pied-texte: rgba(246, 233, 212, .84);
    --pied-titre: #E5CBA0;         /* $color-bg-dark */
    width: 100%;
    color: var(--pied-creme);
    background: var(--pied-fond);
    margin-top: 60px;
}
.section--end + .pied,
.accueil + .pied { margin-top: 0; }   /* accueil : les 4 blocs (section--end) touchent le pied */

.pied__principal {
    position: relative;
    overflow: hidden;
}
.pied__vagues {                    /* formes tres discretes, jamais sous un texte en contraste reduit */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pied__contenu {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 32px;
}
.pied__principal .pied__contenu {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    padding-top: 52px;
    padding-bottom: 44px;
}

/* ---------- Marque ---------- */
.pied__logo { display: inline-block; }
.pied__logo img { display: block; height: 28px; width: auto; }
.pied__accroche {
    margin: 14px 0 0;
    max-width: 300px;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--pied-texte);
}

/* ---------- Navigation ---------- */
.pied__nav {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 2.1fr);   /* Thematiques : 13 liens sur 2 sous-colonnes */
    gap: 32px;
}
.pied__titre {
    margin: 4px 0 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pied-titre);
}
.pied__liste, .pied__reseaux, .pied__legal { list-style: none; margin: 0; padding: 0; }
.pied__liste li + li { margin-top: 6px; }

.pied__lien {
    display: inline-block;
    padding: 3px 0;                /* zone de clic confortable */
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pied-texte);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition: color .2s ease, background-size .25s ease;
}
.pied__lien:hover,
.pied__lien:focus-visible {
    color: var(--pied-creme);
    background-size: 100% 1px;     /* soulignement qui se dessine */
}
.pied__colonne--themes .pied__liste { columns: 2; column-gap: 28px; }
.pied__colonne--themes .pied__liste li { break-inside: avoid; }
.pied__colonne--themes .pied__liste li + li { margin-top: 0; }
.pied__colonne--themes .pied__lien { font-size: .88rem; padding: 4px 0; }

.pied a:focus-visible {
    outline: 2px solid var(--pied-creme);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Barre du bas ---------- */
.pied__bas {
    background: var(--pied-bas);
    border-top: 1px solid rgba(246, 233, 212, .12);
}
.pied__contenu--bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.pied__reseaux { display: flex; gap: 6px; }
.pied__reseau {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--pied-texte);
    transition: background-color .2s ease, color .2s ease;
}
.pied__reseau svg { width: 18px; height: 18px; }
.pied__reseau svg path { fill: currentColor; }
.pied__reseau:hover { background-color: rgba(246, 233, 212, .1); color: var(--pied-creme); }

.pied__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 22px;
}
.pied__legal .pied__lien { font-size: .82rem; }
.pied__copyright { font-size: .82rem; color: rgba(246, 233, 212, .68); }

/* ---------- Ecran moyen et tablette : logo au-dessus, la navigation prend toute la largeur ---------- */
@media (max-width: 1180px) {
    .pied__principal .pied__contenu { grid-template-columns: 1fr; gap: 28px; }
    .pied__accroche { max-width: 460px; }
}

/* ---------- Mobile : Decouvrir et Creer cote a cote, Thematiques dessous ---------- */
@media (max-width: 640px) {
    .pied { margin-top: 40px; }
    .pied__contenu { padding: 0 20px; }
    .pied__principal .pied__contenu { padding-top: 40px; padding-bottom: 32px; gap: 30px; }
    .pied__nav { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
    .pied__colonne--themes { grid-column: 1 / -1; }
    .pied__colonne--themes .pied__liste { column-gap: 18px; }
    .pied__contenu--bas { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .pied__lien, .pied__reseau { transition: none; }
}