/* ===== Pied de page (commun) ===== */

.site-footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0;
    margin-top: auto;
    /* Annule le z-index:1000 du Visa.css legacy (footer{z-index:1000}).
       Spécificité (0,1,0) > (0,0,1) — prend le dessus indépendamment de l'ordre. */
    z-index: auto;
}

.site-footer__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* --footer-top-padding-y réutilisée par .site-footer__logo (top) pour rester
       synchronisée avec le padding-top réel, sans dupliquer la valeur. */
    --footer-top-padding-y: 1rem;
    /* > 93.75em : réserve symétrique de la place du logo => nav CENTRÉE SUR LA PAGE. */
    padding: var(--footer-top-padding-y) 16rem;

    /* 960px..1500px : on GARDE le logo à gauche. On réduit la réserve : à gauche = zone
       du logo (14rem), à droite = normal (4rem), pour laisser la place aux 3 colonnes. */
    @media (max-width: 93.75em) {
        --footer-top-padding-y: 2.4rem;
        padding: var(--footer-top-padding-y) var(--spacing-xxl) var(--footer-top-padding-y) 14rem;
    }

    /* 960px ÷ 16 = 60em : plus assez de place pour logo + colonnes côte à côte => on empile. */
    @media (max-width: 60em) {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-lg2) var(--spacing-md2);
        gap: var(--spacing-md2);
    }
}

.site-footer__logo {
    position: absolute;
    left: var(--layout-gutter-x);
    /* padding-top + petit décalage : aligne le haut du logo sur le texte de la 1ère ligne
       de liens plutôt que sur le haut du conteneur (le texte a lui-même un peu d'espace
       au-dessus, dû au line-height). */
    top: calc(var(--footer-top-padding-y) + 0.4rem);

    /* Empilé (≤60em) : le logo repasse dans le flux, au-dessus de la nav. */
    @media (max-width: 60em) {
        position: static;
    }
}

.site-footer__logo img {
    height: 1.82rem;
    width: auto;
    filter: brightness(0) invert(1);
}

.site-footer__nav {
    width: 100%;
}

.site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: start;
    width: 100%;
    max-width: 90rem;

    /* 850px ÷ 16 = 53.125em : empilement en 1 colonne (sous le logo). */
    @media (max-width: 53.125em) {
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        justify-content: start;
        justify-items: start;
    }
}

/* Séparateurs de groupes en 1 colonne : après "Taxes d'aéroport" (3e) et après "Préférences cookies" (6e) */
.site-footer__links li:nth-child(4),
.site-footer__links li:nth-child(7) {
    @media (max-width: 53.125em) {
        padding-top: var(--spacing-sm2);
    }
}

/* Spécificité (0,2,1) > a:not([class]) (0,1,1) dans VisaCSS — protège la couleur blanche sur fond sombre. */
.site-footer .site-footer__links a,
.site-footer__links button {
    color: var(--color-footer-link, var(--color-white));
    text-decoration: none;
    font-size: 1rem;
    font-family: var(--font-family-footer, var(--font-family-base));
    font-weight: var(--font-weight-normal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: var(--line-height-relaxed);
    white-space: nowrap;
    border-radius: var(--border-radius-xs);
    transition: opacity var(--transition-fast);

    &:hover {
        text-decoration: underline;
        opacity: 0.85;
    }

    &:focus-visible {
        /* Override couleur : fond sombre → anneau blanc (global = bleu primaire). */
        outline-color: var(--color-footer-link, var(--color-white));
    }
}

.site-footer__bottom {
    text-align: center;
    padding: 0 var(--spacing-xxl);
    font-size: 0.875rem; /* 14px (1rem = 16px) */
    font-family: var(--font-family-footer, var(--font-family-base));
    font-weight: var(--font-weight-normal);
    color: var(--color-footer-copyright);
    border-top: 0.1rem solid rgba(var(--color-white-rgb), 0.2);
}