/* =============================================================
   Sonia Orriger — Pied de page
   ============================================================= */

.site-footer {
    margin-top: var(--e-4xl);
    padding-top: var(--e-3xl);
    background-color: var(--c-creme);
    border-top: 1px solid var(--c-bordure);
}

.site-footer__inner {
    display: grid;
    gap: var(--e-2xl);
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: 0 var(--gouttiere) var(--e-3xl);
}

@media (min-width: 768px) {
    .site-footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr; }
}

.footer-logo {
    margin-bottom: .15em;
    font-family: var(--f-plume);
    font-size: var(--t-signature);
    line-height: 1.1;
}

.footer-baseline {
    margin-bottom: var(--e-lg);
    font-size: var(--t-mini);
    letter-spacing: var(--l-large);
    text-transform: uppercase;
    color: var(--c-encre-doux);
}

.footer-col__titre {
    margin-bottom: var(--e-md);
    font-family: var(--f-condense);
    font-size: var(--t-titre-3);
    letter-spacing: var(--l-moyen);
    text-transform: uppercase;
}

.footer-contact,
.footer-liste,
.footer-reseaux,
.footer-legal { display: grid; gap: var(--e-sm); }

.footer-contact li,
.footer-liste li { font-size: var(--t-petit); }

.footer-contact a,
.footer-liste a,
.footer-reseaux a,
.footer-legal a {
    text-decoration: none;
    color: var(--c-encre);
}

.footer-contact a:hover,
.footer-liste a:hover,
.footer-reseaux a:hover,
.footer-legal a:hover { color: var(--c-coeur); }

.footer-reseaux {
    grid-auto-flow: column;
    justify-content: start;
    gap: var(--e-sm);
    margin-top: var(--e-lg);
}

.footer-reseaux__lien {
    display: grid;
    place-items: center;
    width: 44px;             /* zone tactile minimale */
    height: 44px;
    border-radius: var(--r-rond);
    color: var(--c-encre);
    transition: color var(--t-rapide), background-color var(--t-rapide);
}

.footer-reseaux__lien .svg-reseau { width: 24px; height: 24px; }

.footer-reseaux__lien:hover,
.footer-reseaux__lien:focus-visible { background-color: var(--c-gris-clair); }

.footer-reseaux__lien--facebook:hover  { color: var(--c-facebook); }
.footer-reseaux__lien--instagram:hover { color: var(--c-instagram); }
.footer-reseaux__lien--youtube:hover   { color: var(--c-youtube); }
.footer-reseaux__lien--whatsapp:hover  { color: var(--c-whatsapp); }

.footer-cta__texte {
    margin-bottom: var(--e-lg);
    font-size: var(--t-petit);
    color: var(--c-encre-doux);
}

/* ── Bas de page ────────────────────────────────────────────── */
.site-footer__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-md);
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: var(--e-md) var(--gouttiere);
    border-top: 1px solid var(--c-bordure);
    font-size: var(--t-mini);
    color: var(--c-encre-doux);
}

/* Les cinq liens légaux ne tiennent pas sur une ligne en mobile :
   ils passent à la ligne au lieu d'élargir la page */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-xs) var(--e-md);
}

.footer-copyright { margin: 0; }

.footer-cta__boutons {
    display: grid;
    gap: var(--e-sm);
}

/* Le libellé « Réserver un appel téléphonique de 15 minutes » est long pour une
   colonne étroite : le bouton prend toute la largeur de la colonne et les
   lignes sont équilibrées, plutôt que de laisser un mot orphelin. */
.footer-col--cta .btn {
    width: 100%;
    max-width: 22rem;
    padding-inline: 1.25em;
    font-size: var(--t-petit);
    border-radius: var(--r-lg);
    text-wrap: balance;
}