/* ==========================================================================
 * LE PIED DE PAGE — l'aplat de marque qui ferme la page
 *
 * Reference : ~/heop-prompts/cibles-visuelles/cible-header-footer.html
 * « identite a gauche, colonnes a grille, bandeau legal UNE ligne »
 *
 * POURQUOI CETTE FEUILLE EXISTE
 * -----------------------------
 * Les regles du pied vivaient dans base.css, sur 452 lignes, sedimentees par
 * couches successives. L'etat mesure avant reprise :
 *
 *   - `.site-footer__links a` declare TROIS fois au niveau base, avec des
 *     valeurs contradictoires (`display: inline-block` puis `flex`,
 *     `padding-block: 7px` puis `padding: 0`, trois tailles de police). La
 *     derniere gagnait, et personne ne pouvait le savoir sans lire les trois.
 *   - `.site-footer__identity` declare trois fois, `.site-footer__bottom`
 *     quatre fois, dont deux dans la MEME media query.
 *   - `grid-template-columns: repeat(4, auto)` pose puis rendu inerte par un
 *     `display: flex` declare vingt lignes plus bas dans la meme requete : les
 *     liens tombaient en rangees irregulieres — le defaut « Contact orphelin »
 *     que Julien a refuse.
 *   - le pseudo-element `::after` des liens revendique par trois regles
 *     concurrentes, dont deux le supprimaient — tuant au passage le filet
 *     terracotta du registre commun `.ui-sweep`, a TOUTES les largeurs.
 *
 * Aucun de ces quatre defauts ne se voit en lisant une regle. Ils ne se voient
 * qu'en lisant la cascade entiere, ce qu'aucun relecteur ne fait a la 452e
 * ligne. D'ou la sortie en feuille dediee, sur le patron deja pose par
 * components/site-header-public.css : UN selecteur, UNE declaration.
 *
 * LES TROIS PALIERS, MESURES
 * --------------------------
 * Le plan compte onze destinations. La piste qui les accueille vaut 2/3.1 de
 * la carte moins la gouttiere de 48px. Largeur demandee par le mot le plus
 * long de chaque colonne, plus les gouttieres :
 *
 *   2 colonnes  : 237px demandes  — tient des 320px
 *   3 colonnes  : 343px demandes  — tient des 720px (piste : 415px)
 *   4 colonnes  : 417px demandes  — ne tient QU'A PARTIR de 900px
 *                                   (a 720px la piste vaut 415px : 2px de
 *                                    trop, et l'estimation est optimiste)
 *
 * C'est pourquoi la cible bascule a 900px et non a 720px. Le palier
 * intermediaire a trois colonnes n'est pas dans la cible : il est ajoute
 * parce que la directive demande « un maximum de tailles de rupture », et
 * qu'entre 720 et 900px deux colonnes laisseraient 240px de vide a droite
 * pour six rangees de haut.
 * ========================================================================== */

.site-footer {
    padding: 26px var(--page-gutter) calc(26px + var(--hp-bottom-nav-height, 0px) + env(safe-area-inset-bottom));
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-cream, #FFF8EC);
}

/* Le contenu vit A MEME l'aplat. Il etait pose sur une carte claire qui
   redecoupait le vert en deux tons et cassait justement l'effet de pleine
   surface — le seul endroit du site ou la marque s'exprime sans partage. */
.site-footer__card {
    display: grid;
    gap: 22px;
    width: min(var(--page-max), 100%);
    margin-inline: auto;
}

.site-footer a {
    color: var(--ui-color-cream, #FFF8EC);
    text-decoration: none;
}

/* Sur l'aplat, un survol franc plutot qu'un frolement : l'etat doit se voir.
   Le blanc pur est le seul cran au-dessus du creme qui se lise sur ce vert. */
.site-footer a:hover,
.site-footer a:focus-visible {
    color: #FFFFFF;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--ui-color-cream, #FFF8EC);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Les pictogrammes suivent la couleur du texte quoi qu'il arrive, et se
   ravivent avec lui. Une couleur propre — terracotta, par exemple — donnerait
   1,13:1 sur ce vert : invisible. */
.site-footer .ui-icon {
    color: inherit;
    opacity: .72;
    transition: opacity .16s ease;
}

.site-footer__links a:hover .ui-icon,
.site-footer__links a:focus-visible .ui-icon {
    opacity: 1;
}


/* --- L'IDENTITE ---------------------------------------------------------
 * Wordmark et signature. Au pouce, les deux se rangent sur une ligne, la
 * signature calee a droite : c'est la seule facon de ne pas consommer deux
 * rangees pour six mots. Des que la carte passe en deux pistes, la signature
 * revient sous le wordmark, alignee a gauche comme dans la cible. */

.site-footer__identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.site-footer__brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    font-weight: 700;
}

.site-footer__brand .heop-logo {
    width: 60px;
}

.site-footer__identity p {
    max-width: 30ch;
    margin: 0;
    color: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: right;
    text-wrap: balance;
}


/* --- LE PLAN DU SITE, A PLAT --------------------------------------------
 *
 * La version precedente rangeait les destinations en colonnes titrees. Trois
 * defauts mesures en sont sortis : quatre pistes declarees pour trois groupes
 * laissaient une colonne VIDE au-dela de 720px ; un seul palier faisait passer
 * les pistes de 298px a 78px en un pixel, coupant deux libelles ; et le pied
 * etait PLUS HAUT qu'avant a toutes les largeurs sauf 320px.
 *
 * Le plan est donc plat, comme la cible : une grille de destinations, sans
 * intitules. Le regroupement declare cote Python (PUBLIC_FOOTER_GROUPS)
 * survit — il fixe l'ORDRE de lecture — mais ne se rend plus. */

.site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 22px;
    min-width: 0;
}

/* =====================================================================
 * LE PLAN NE REPETE PAS LA BARRE BASSE, AU POUCE SEULEMENT (08/09)
 *
 * Julien : « allege les doublons de liens sur la version mobile pour gagner en
 * experience ». Trois entrees du plan sont deja des pastilles a portee du
 * pouce — Explorer, Carte, Se connecter — et les relire tout en bas de page
 * n'apprend rien : c'est du defilement en plus pour la meme destination.
 *
 * POURQUOI LA FEUILLE ET PAS LE GABARIT. La barre basse n'existe pas partout :
 * ni au-dela de 900px avec une souris, ni sur une tablette couchee. Retirer
 * ces entrees du DOCUMENT les rendrait introuvables sur un ordinateur, ou le
 * pied EST le plan du site. Un plan qui omet une page n'est plus un plan.
 *
 * LES DEUX CONDITIONS SONT INDISPENSABLES, ET C'EST LA LECON DU 26/08.
 *   `:has(.home-bottom-nav)` — la barre est rendue par cette page ;
 *   `max-width: 899px`      — et elle est effectivement affichee.
 * La classe, elle, est posee au rendu a partir des URL que la barre porte
 * REELLEMENT pour ce visiteur (build_footer_groups) : rien n'est recopie, donc
 * rien ne peut se cacher dans le pied sans etre dans la barre. C'est le
 * controle qui manquait le jour ou « Inscription » a disparu du pouce sur la
 * foi d'une phrase.
 * ===================================================================== */

@media (max-width: 899px) {
    body:has(.home-bottom-nav) .site-footer__links .nav-lien--porte-par-la-barre {
        display: none;
    }
}

/* PAS de min-height ici. Chaque lien portait 44px, soit onze fois douze pixels
   de mou : le pied faisait 514px a 375px de large contre 393px pour la cible,
   31 % de trop. La cible tactile est tenue par la hauteur de ligne plus la
   respiration — 18 + 2 x 7 = 32px — et rien ici n'est a portee de doigt
   maladroit : les liens sont ranges en grille, pas isoles au milieu d'un
   ecran. */
.site-footer__links a {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block: 7px;
    color: inherit;
    font-size: .8rem;
    font-weight: 500;
    line-height: 18px;
    /* Le filet terracotta du registre commun se cale au bord du texte et sous
       la ligne de base — c'est .ui-sweep qui le dessine, dans SON `::after`.
       Aucune regle de cette feuille ne touche a ce pseudo-element : c'est
       exactement ce qui avait tue le registre. */
    --ui-sweep-inset: 0px;
    --ui-sweep-bottom: 2px;
}

/* La branche intranet passe par components/footer_link.html, qui porte un
   pictogramme a cote de l'intitule. Le public, lui, rend un <a> nu. */
.site-footer__link-main {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.site-footer__link-label {
    min-width: 0;
    font-weight: 600;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
}


/* --- LE BANDEAU LEGAL ---------------------------------------------------
 * Un filet creme translucide plutot qu'une bordure franche : sur un aplat
 * sature, une ligne pleine ferait cicatrice. */

.site-footer__bottom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 4px 8px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 248, 236, .22);
    color: inherit;
    font-size: .8rem;
    line-height: 1.35;
}

.site-footer__bottom > span:first-child {
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.site-footer__legal {
    justify-self: end;
    min-width: 0;
    max-width: 46ch;
    opacity: .78;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
}

.site-footer__bottom nav {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 7px;
    padding-top: 3px;
}

.site-footer__bottom a {
    color: inherit;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Au pouce, les liens legaux s'enchainent sur une ligne : la barre oblique
   evite trois rangees pour trois mots. Elle disparait des que la place existe
   pour les espacer. */
.site-footer__bottom nav a + a::before {
    display: inline-block;
    margin-right: 8px;
    opacity: .6;
    content: "/";
}


/* ==========================================================================
 * PALIER 1 — 720px : la carte s'ouvre en deux pistes, le plan en trois
 * colonnes. C'est ici que le pied cesse d'etre une pile et devient une
 * composition : identite a gauche, destinations a droite.
 * ========================================================================== */

@media (min-width: 720px) {

    .site-footer {
        padding: 10px var(--page-gutter) calc(12px + var(--hp-bottom-nav-height, 0px) + env(safe-area-inset-bottom));
    }

    .site-footer__card {
        grid-template-columns: 1.1fr 2fr;
        align-items: start;
        column-gap: 48px;
    }

    .site-footer__identity {
        grid-column: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }

    .site-footer__identity p {
        max-width: 34ch;
        text-align: left;
    }

    .site-footer__links {
        grid-column: 2;
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        gap: 2px 34px;
    }

    .site-footer__links a {
        padding-block: 4px;
        font-size: .82rem;
        line-height: 1.3;
    }

    /* ECART DECLARE CONTRE LA CIBLE.
       Dans cible-header-footer.html, `.ft-legal` est le troisieme enfant d'une
       grille a DEUX pistes : il se range donc en rangee 2, piste 1 — sur 1,1fr,
       soit ~400px. Les quatre liens plus la mention commerciale y tiennent sur
       trois lignes, pas une. La cible se contredit elle-meme sur ce point.
       L'arbitrage de Julien tranche — « bandeau legal UNE ligne » — et la
       hierarchie CDC > maquette > code lui donne raison contre le HTML de la
       maquette. Le bandeau prend donc toute la largeur. */
    .site-footer__bottom {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 18px;
        padding-top: 12px;
        border-top-color: rgba(255, 248, 236, .22);
    }

    .site-footer__bottom nav {
        grid-column: auto;
        gap: 2px 14px;
        padding-top: 0;
    }

    .site-footer__bottom nav a + a::before {
        display: none;
    }

    /* La mention commerciale part a droite, comme `.rcs` dans la cible. Elle
       est la seule a pouvoir ceder de la place : c'est aussi la seule que
       personne ne cherche. */
    .site-footer__legal {
        max-width: none;
        margin-left: auto;
        text-align: right;
    }

    .site-footer__bottom a {
        font-size: .76rem;
    }
}


/* ==========================================================================
 * PALIER 2 — 900px : les quatre colonnes de la cible. C'est la largeur a
 * partir de laquelle « Aide & tutoriels » et « Vendre sur HEOP » tiennent
 * cote a cote sans rogner. Mesure, pas recopie.
 * ========================================================================== */

@media (min-width: 900px) {

    .site-footer__links {
        grid-template-columns: repeat(4, auto);
    }
}