/*
 * Pied de page — Figma node 2644:67570.
 *
 * Cadrage de la maquette : 96 au-dessus du panneau et 64 en dessous, panneau bleu à rayon 4,
 * 96 de padding vertical, blocs espacés de 64. L'en-tête (emblème + signature) est bridé à 894,
 * le reste sur la largeur de contenu (1490) — la même que toutes les sections du site, ce qui
 * fait tomber le filet de séparation exactement là où la maquette le dessine.
 *
 * Feuille commune aux deux variantes de pied de page, chargée sur toutes les pages : ce
 * composant est présent partout, un chargement conditionnel n'aurait rien à conditionner.
 */

.site-footer {
    padding-block: var(--space-big-hero) var(--space-hero);
    /*
     * Le panneau ne touche pas les bords : la maquette le pose à x=64 sur une page de 1920,
     * soit exactement la gouttière du site. C'est ce retrait qui rend son rayon de 4 visible.
     */
    padding-inline: var(--container-gutter);
}

.site-footer__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-hero);
    padding-block: var(--space-big-hero);
    border-radius: var(--radius-xxs);
    background-color: var(--color-primary);
    color: var(--color-text-invert);
}

/* ---- Emblème, signature, retour en haut ---- */

.site-footer__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-l);
    /* 894 dans la maquette. */
    width: min(894px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.site-footer__emblem {
    /* 61 x 85 dans la maquette. */
    width: 61px;
    height: auto;
}

.site-footer__tagline {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    /* Regular et non Bold : c'est la seule occurrence d'Orbital en graisse normale du site. */
    font-weight: 400;
    /* 61px sur 49px */
    line-height: 1.245;
    /* Ce n'est pas un titre, donc la coupure des mots trop longs de base.css ne s'y applique
       pas : elle est reprise ici, sans quoi un mot de 49px pousserait le panneau. */
    overflow-wrap: break-word;
}

/*
 * 80 entre la signature et le bouton dans la maquette, contre 64 entre les autres blocs : c'est
 * le seul écart particulier du pied de page.
 */
.site-footer__intro + .site-footer__top {
    margin-top: calc(var(--space-large) - var(--space-hero));
}

.site-footer__top {
    display: flex;
    /* 62px de cible, au-delà des 44 recommandés : rien à rattraper. */
    color: var(--color-neutral-50);
    transition: opacity var(--hover-dur) var(--hover-ease);
}

.site-footer__top:hover,
.site-footer__top:focus-visible {
    opacity: 0.7;
}

.site-footer__top-icon {
    display: block;
}

/* ---- Corps : marque à gauche, colonnes de liens à droite ---- */

.site-footer__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-hero);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    /*
     * Le filet de séparation de la maquette, en bordure plutôt qu'en élément : sa largeur est
     * exactement celle de ce bloc (1489,5 contre 1490), et le gap de 64 du panneau se place
     * alors tout seul au-dessus.
     */
    padding-top: var(--space-hero);
    border-top: 1px solid var(--color-primary-400);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-l);
}

.site-footer__logo {
    /* 184,25 dans la maquette. */
    width: 184px;
    height: auto;
}

.site-footer__socials {
    display: flex;
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    /* L'icône ne fait que 24 : la cible de 44 est obtenue par le padding, sans grossir le
       dessin. Marge négative pour que les icônes restent espacées de 12 à l'œil. */
    padding: 10px;
    margin: -10px;
    color: var(--color-primary-100);
    transition: color var(--hover-dur) var(--hover-ease);
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
    color: var(--color-text-invert);
}

.social-icon {
    display: block;
    width: 24px;
    height: 24px;
}

/* ---- Colonnes de liens ---- */

.site-footer__nav {
    display: flex;
    gap: var(--space-m);
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    /* 285 par colonne dans la maquette. */
    width: 285px;
}

.site-footer__column-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-p);
    font-weight: 700;
    line-height: var(--line-height-body);
}

/* Le titre de colonne est souvent un lien : sans cette ligne il sort souligné par défaut, ce
   que la maquette réserve au survol et à la page courante. */
.site-footer__column-title a {
    text-decoration: none;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sous un titre de colonne, les liens se resserrent à 8 — le 12 sert alors d'écart entre le
   titre et sa liste. */
.site-footer__column-title + .site-footer__links {
    gap: var(--space-compact);
}

/* Trait toujours présent, transparent au repos : seule sa couleur change, et une couleur
   s'anime — contrairement à text-decoration. */
.site-footer__link,
.site-footer__column-title a {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--hover-dur) var(--hover-ease);
}

.site-footer__link:hover,
.site-footer__link:focus-visible,
.site-footer__column-title a:hover,
.site-footer__column-title a:focus-visible,
/* La page en cours reste repérable à l'œil, pas seulement par aria-current. */
.site-footer__link[aria-current],
.site-footer__column-title a[aria-current] {
    text-decoration-color: currentColor;
}

/* ---- Mentions ---- */

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    text-align: center;
}

/* Le séparateur est décoratif : en CSS, il n'est pas lu comme un mot par les lecteurs
   d'écran. */
.site-footer__legal span + span::before {
    content: "•";
    margin-inline: 0.5ch;
}

/* ---- Variante simple ---- */

/* Une ligne de mentions, pas un panneau : le cadrage du pied de page complet serait ici un
   grand vide. */
.site-footer--simple {
    padding-block: var(--space-bloc);
}

.site-footer--simple .site-footer__inner {
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    text-align: center;
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .site-footer {
        --container-gutter: var(--space-bloc);
        padding-block: var(--space-large) var(--space-bloc);
    }

    .site-footer__panel {
        gap: var(--space-xl);
        padding-block: var(--space-large);
    }

    .site-footer__body {
        /* La marque au-dessus des colonnes : côte à côte, les quatre colonnes de 285 et le logo
           réclament 1324 alors qu'il n'en reste que 1136. */
        flex-direction: column;
        align-items: center;
        gap: var(--space-xl);
        padding-top: var(--space-xl);
    }

    .site-footer__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xl) var(--space-bloc);
        width: 100%;
    }

    .site-footer__column {
        /* Les colonnes se partagent la place au lieu de rester à 285, pour éviter une dernière
           rangée d'une seule colonne collée à gauche. */
        flex: 1 1 240px;
        width: auto;
        max-width: 285px;
    }
}

@media (max-width: 768px) {
    .site-footer {
        --container-gutter: var(--space-m);
    }

    .site-footer__nav {
        gap: var(--space-bloc) var(--space-list);
    }

    .site-footer__column {
        /* Deux colonnes tant que la place le permet, une seule en dessous. */
        flex: 1 1 140px;
    }

    /* Sur mobile, la navigation est dans le menu burger : seuls restent les liens légaux. */
    .site-footer__column:not(.site-footer__column--legal) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__top,
    .site-footer__social {
        transition: none;
    }
}