/* ==========================================================
   site-footer.css
   Le pied de page, pour tout le site, a un seul endroit.

   Il en existait trois versions : celle de l'accueil et d'A propos (signature
   en italique, trois pastilles dont WhatsApp, liens sur une ligne centree au
   telephone), une version a quatre colonnes sur les pages d'atelier, et une a
   trois colonnes sur les pages legales. Chaque page portait sa propre copie
   des styles dans son <style> : les corrections faites d'un cote ne suivaient
   pas de l'autre, et la mise en page telephone n'avait ete ecrite que pour la
   premiere version.

   Cette feuille est desormais la seule source. Elle est chargee apres le
   <style> de chaque page, donc elle a le dernier mot sur les eventuels restes.
   Toute retouche du pied de page se fait ici, et vaut pour les quatorze pages.
   ========================================================== */

.footer {
    background: linear-gradient(180deg, #faf6f0 0%, #f4ece2 100%);
    border-top: 1px solid rgba(90, 62, 62, .10);
    /* Aucun retrait porte par le <footer> : ce sont .footer__top et
       .footer__bottom-inner qui le donnent, sinon les deux s'additionnent. */
    padding: 0;
}

.footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 48px;
    padding: 64px 0 46px;
    align-items: start;
}

.footer__brand {
    max-width: 340px;
}
.footer__brand .logo {
    margin-bottom: 18px;
}
.footer__tagline {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.14rem;
    line-height: 1.55;
    color: var(--brown-soft);
    max-width: none;
    margin-bottom: 22px;
}

.footer__social {
    display: flex;
    gap: 12px;
}
.footer__social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--rose);
    color: var(--rose);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all var(--transition);
}
.footer__social a:hover {
    background: var(--rose);
    color: var(--white);
    transform: translateY(-2px);
}
/* WhatsApp garde sa couleur : c'est a ce vert qu'on le reconnait. */
.footer__social .footer__wa {
    border-color: #3a9b7f;
    color: #3a9b7f;
}
.footer__social .footer__wa:hover {
    background: #3a9b7f;
    color: #fff;
}

.footer__col h2 {
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brown);
    font-weight: 700;
    margin-bottom: 18px;
}
.footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer__col ul li {
    margin-bottom: 11px;
    color: var(--brown-soft);
    font-size: .9rem;
    line-height: 1.5;
}
.footer__col ul li a {
    color: var(--brown-soft);
    font-size: inherit;
    text-decoration: none;
}
.footer__col ul li a:hover {
    color: var(--rose);
}

.footer__bottom {
    border-top: 1px solid rgba(90, 62, 62, .08);
    /* Ancienne version : le bandeau du bas etait lui-meme la rangee flex. Il
       enveloppe maintenant .footer__bottom-inner, qui porte la mise en page. */
    display: block;
    padding: 0;
}
.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding: 18px 0;
    font-size: .78rem;
    color: var(--muted);
}
.footer__legal {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer__bottom a {
    color: var(--brown-soft);
    font-weight: 600;
    text-decoration: none;
}
.footer__bottom a:hover {
    color: var(--rose);
}

/* --- Tablette : la marque prend la largeur, les deux listes se partagent --- */
@media (max-width: 960px) {
    .footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .footer__brand {
        grid-column: 1 / -1;
        max-width: none;
    }
}

/* --- Telephone ---
   Empile en deux colonnes, le pied de page reprenait a gauche la liste du menu
   et les coordonnees, puis trois lignes de mentions : deux ecrans de fin de
   page. Ici une seule colonne centree, les liens sur une ligne qui se replie,
   et le bas ramene a deux lignes. Le logo et les pastilles, cales a gauche par
   heritage du dessin en trois colonnes, se recentrent. --- */
@media (max-width: 767px) {
    .footer__top {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 34px 0 26px;
        text-align: center;
    }
    /* Le bloc se centre par ses marges, pas par « justify-items » : celui-ci
       reduirait aussi la colonne des liens a la largeur de son contenu, et la
       ligne de liens deborderait de l'ecran. */
    .footer__brand {
        max-width: 34ch;
        margin-left: auto;
        margin-right: auto;
    }
    .footer__brand .logo {
        justify-content: center;
        margin-bottom: 12px;
    }
    .footer__tagline {
        margin-bottom: 16px;
        font-size: 1.05rem;
    }
    .footer__social {
        justify-content: center;
    }
    /* Le rappel des coordonnees ne tombe que sur les pages qui portent la
       section Contact (l'accueil) : adresse, telephone et e-mail y sont donnes
       juste au-dessus, en grand et avec la carte. Ailleurs, la colonne reste le
       seul endroit ou les trouver, donc elle reste. */
    body:has(#contact) .footer__col--contact {
        display: none;
    }
    .footer__col h2 {
        margin-bottom: 10px;
    }
    .footer__col ul li {
        margin-bottom: 7px;
    }
    .footer__col--explorer ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 20px;
    }
    .footer__col--explorer ul li {
        margin-bottom: 0;
    }
    /* Les liens se touchent au doigt : la boite s'etire un peu en hauteur. */
    .footer__col--explorer ul li a {
        display: inline-block;
        padding: 5px 0;
    }
    .footer__bottom-inner {
        gap: 2px 14px;
        padding: 12px 0;
        font-size: .72rem;
    }
    .footer__legal {
        gap: 0 14px;
    }
}

/* --- Petit telephone : les trois mentions du bas s'empilent --- */
@media (max-width: 560px) {
    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
}