/* Heop — le hero de l'accueil et le bandeau du moment.
 *
 * Reference : ~/heop-prompts/cibles-visuelles/cible-accueil.html (v4).
 *
 * L'accueil n'avait PAS de hero : elle ouvrait sur un <h1> masque puis
 * directement sur un carrousel vide. Rien ne disait ce que fait ce site avant
 * de montrer ce qu'il n'a pas encore — c'est la premiere raison pour laquelle
 * la page paraissait vide.
 *
 * MOBILE D'ABORD : le socle decrit le plus petit ecran ; les requetes
 * n'AJOUTENT que ce que la place permet. Trois paliers, pas un de plus.
 *
 * LE MOUVEMENT VIT A TOUS LES PALIERS. Les classes de mouvement sont posees
 * dans le GABARIT, hors de toute requete media : la cascade d'entree joue au
 * pouce comme a la souris. Un mobile sans reponse au geste est un mobile
 * statique, et c'est un defaut — pas une economie.
 */

/* =====================================================================
 * LE HERO
 * ===================================================================== */

/* LA REGLE ANTI-DEFILEMENT S'APPLIQUE AUSSI A L'ACCUEIL.
 *
 * Julien, en direct a 375x667 : le hero « force a scroller pour atteindre LES
 * CATEGORIES ET LES PRODUITS EN VENTE ». Mesure sur le rendu servi : 454px de
 * hero sous un en-tete de 120px, soit 574px des 667 de la vue. Le bandeau du
 * moment commencait a un pixel du pli — donc invisible.
 *
 * La cible re-poussee donne les valeurs : respirations resserrees, titre a
 * clamp(1.55rem…) au lieu de clamp(2rem…). Avec la ligne de preuve fusionnee
 * dans le rail des reperes, le hero retombe a 355px — 53 % de la vue, sous la
 * barre des 55 % — et le bandeau du moment POINTE de 191px au-dessus du pli.
 * apps/public_site/test_hero_compact.py refait la mesure a chaque execution. */
.home-hero {
    /* 10px de haut : le hero est une porte, pas un salon. La carte juste
       dessous est l argument de vente — chaque pixel de respiration ici la
       repousse vers le pli. */
    padding-block: clamp(8px, 2vw, 16px) 6px;
    text-align: center;
}

.home-hero__chip {
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-brand, #245A3B);
    font-size: .78rem;
    font-weight: 600;
}

.home-hero__title {
    /* La police d'affichage, auto-hebergee. Georgia prend le relais pendant le
       telechargement et pour qui la refuse : les proportions sont proches, la
       bascule se voit peu. */
    margin: 4px auto 2px;
    max-width: 19ch;
    font-family: var(--ui-font-display, Georgia, serif);
    /* 1,55rem au pouce et non 2rem : vingt et un pixels de titre rendus au
       contenu, sans rien perdre de la hardiesse — a 375px le titre tient
       toujours trois lignes, elles sont simplement moins hautes. */
    /* 1.3rem au pouce : une ligne d identite, pas une affiche. Les references
       de Julien — Airbnb, Leboncoin — n ont pas de hero : une ligne, les
       gestes, l outil. Le corps remonte au bandeau du 640. */
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.018em;
    /* Le titre se coupe sur un equilibre de lignes, pas la ou la largeur tombe :
       un titre en trois lignes dont la derniere porte un mot est mal compose. */
    text-wrap: balance;
}

.home-hero__title em {
    font-style: normal;
    color: var(--ui-color-accent, #C86138);
}

.home-hero__sous {
    /* LA LIGNE DE MISSION QUITTE L ECRAN, PAS LE DOCUMENT. Les references
       n ont pas de tagline : la carte et les pastilles disent deja ce qu on
       trouve ici. Elle reste dans le document — lecteurs d ecran et moteurs
       la lisent — et la mesure du contrat la compte encore : le contrat
       annonce un hero PLUS haut que le vrai, l erreur du bon cote. */
    display: none;
    margin: 0 auto;
    max-width: 48ch;
    font-size: .95rem;
    color: var(--ui-color-muted, #6E6252);
    text-wrap: pretty;
}

.home-hero__gestes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

/* Un seul aplat plein par ecran. Le geste d'achat porte le vert ; le geste de
   vente est en trait, pas en fond — deux boutons pleins cote a cote, c'est une
   hesitation rendue visible. */
.home-hero__vends {
    background: transparent;
    color: var(--ui-color-accent, #C86138);
    box-shadow: inset 0 0 0 1.5px var(--ui-color-accent, #C86138);
}

.home-hero__vends:hover,
.home-hero__vends:focus-visible {
    background: var(--ui-color-accent, #C86138);
    color: #FFFFFF;
}


/* =====================================================================
 * LE BANDEAU DU MOMENT
 * La geolocalisation vit DEDANS : un module, pas deux.
 * ===================================================================== */

.moment-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.moment-topline h2 {
    margin: 0;
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -.012em;
}

.moment-contexte {
    margin: 6px 0 14px;
    color: var(--ui-color-muted, #6E6252);
    font-size: .86rem;
}

.moment-position {
    /* Le bouton est masque tant que le script ne l'a pas relie : un bouton qui
       ne repond pas au clic fait croire que le site est casse. */
    gap: 8px;
    font-size: .9rem;
}

.moment-vide {
    padding: 20px;
    border-radius: var(--ui-radius-card, 14px);
    background: var(--ui-plan-sunk, #F4EBD9);
    text-align: center;
    color: var(--ui-color-muted, #6E6252);
}

.moment-vide p { margin: 0; }
.moment-vide strong { color: var(--ui-color-ink, #241D16); }

.moment-vide__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    min-height: var(--tap-size, 44px);
    color: var(--ui-color-brand, #245A3B);
    font-weight: 600;
    text-decoration: none;
    --ui-sweep-inset: 0px;
    --ui-sweep-bottom: 10px;
}

/* =====================================================================
 * LES PALIERS
 * ===================================================================== */

/* LE PALIER DE BUREAU — H-23, « le hero est ENCORE trop haut ».
 *
 * Mesure au navigateur a 1280x800 avant ce bloc : 396,2px de hero, soit 49,5 %
 * de la vue, quand ce fichier annonce lui-meme « ~45vh au desktop » quelques
 * lignes plus bas. Le titre du bandeau tombait a 520,7px et les cartes a
 * 578,9 : tout tenait dans une vue de 800 pixels EXACTEMENT, et se coupait des
 * qu'un vrai navigateur prend sa centaine de pixels de barres d'outils.
 *
 * D'OU VIENT LA MARGE : la respiration de bureau ne vient d'aucune source. La
 * maquette de reference (cible-accueil.html v4) ecrit
 * `padding: clamp(14px,3.5vw,44px) 0 14px` et n'ouvre AUCUN palier au-dela ;
 * les 64px de haut et 26px de bas etaient une invention du code, qui est la
 * derniere des trois sources. On les rend.
 *
 * Les trois leviers sont ceux que Julien a nommes : titre plus petit,
 * respiration verticale reduite, pastilles de reperes compactes. Rien n'est
 * retire — pas un mot, pas un geste, pas un repere.
 *
 * apps/core/test_accueil_sur_ecran_large.py refait la mesure AU NAVIGATEUR a
 * chaque execution, sur les deux branches du bandeau. */

@media (min-width: 640px) {
    /* LE BANDEAU — la forme des references de Julien. Titre a gauche, gestes
       a droite, reperes dans la meme rangee quand la place le permet.
       ~60px la ou le hero en prenait 170 : l ecran d accueil devient
       carte + catalogue, l editorial se contente d une signature. */
    .home-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 18px;
        padding-block: 10px 6px;
        text-align: left;
    }

    .home-hero__title {
        flex: 1 1 auto;
        margin: 0;
        max-width: none;
        font-size: 1.45rem;
    }

    .home-hero__gestes {
        flex: 0 0 auto;
        margin: 0;
    }

    .home-hero__reperes {
        flex: 0 0 auto;
        margin: 0;
        justify-content: flex-end;
    }
}

/* Le troisieme levier — les pastilles de reperes — vit plus bas, apres les
   regles qui les definissent : ici, l'ordre de lecture le mangerait. */

/* Le paysage telephone : une vue de 390px de haut ne peut pas donner 100px au
   seul chapeau du hero. On resserre, on ne retire rien. */
@media (orientation: landscape) and (max-height: 520px) {
    .home-hero { padding-block: 16px 14px; }
    .home-hero__title { font-size: 1.6rem; margin-block: 8px 6px; }
    .home-hero__sous { font-size: .875rem; }
    .home-hero__gestes { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__vends { transition: none; }
}

/* --- LES REPERES, EN MICRO-PASTILLES -----------------------------------
 *
 * Ils occupaient une section entiere sous le hero. En pastilles sous les
 * appels a l'action, ils disent la meme chose en une rangee — et la section
 * disparait, ce qui rend au contenu la place qu'elle prenait.
 *
 * Discrets par construction : ce sont des reperes, pas des arguments. S'ils
 * criaient plus fort que les deux boutons au-dessus, ils leur voleraient le
 * geste. */

.home-hero__reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
    justify-content: center;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.home-hero__reperes li {
    padding: 4px 11px;
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-brand, #245A3B);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Le troisieme levier de H-23, pose ICI et pas dans le palier de bureau plus
   haut : les regles ci-dessus le suivent dans le fichier et l'annuleraient. */
@media (min-width: 640px) {
    .home-hero__reperes { margin-top: 9px; }

    .home-hero__reperes li {
        padding: 3px 10px;
        font-size: .7rem;
    }
}

/* --- LE BUDGET DE HAUTEUR ----------------------------------------------
 *
 * « Il faut scroller pour comprendre, le hero est trop haut. » Deux paliers,
 * deux plafonds : ~40 % de la vue au pouce, ~45vh au desktop. Ce qui suit
 * resserre ce qui restait a resserrer une fois les reperes remontes.
 *
 * LES DEUX PLAFONDS SONT DESORMAIS TENUS PAR UN CONTRAT, ce qui n'a pas
 * toujours ete le cas : celui du desktop a vecu ecrit ici et verifie nulle
 * part, et le palier de bureau le depassait de trente-six pixels.
 * Pouce  : apps/public_site/test_hero_compact.py (calcule, 375x667).
 * Bureau : apps/core/test_accueil_sur_ecran_large.py (navigateur, 1280x800). */

@media (max-width: 479px) {
    /* SEPT PIXELS RENDUS ICI, TRENTE-DEUX PLUS BAS.
     *
     * Julien a redit trois fois « le hero est trop haut, on ne voit pas les
     * rubriques ». Le contrat du hero etait pourtant vert : il mesurait la
     * hauteur du hero et la position de la premiere CARTE, or ce que Julien
     * cherchait des yeux, c'etait le LIBELLE des rubriques — et les tuiles sont
     * collees en bas, donc leur libelle tombait a 702px pour une vue de 667.
     *
     * apps/core/test_rubriques_au_premier_ecran.py mesure desormais cette
     * ligne-la. Ce qui suit lui rend les pixels que le hero pouvait rendre sans
     * rien perdre : des respirations, jamais du contenu. */
    .home-hero {
        padding-block: 6px 6px;
    }

    /* LE TITRE PREND TOUTE LA LARGEUR AU POUCE.
     *
     * `max-width: 19ch` est une mesure de confort de LECTURE, taillee pour un
     * titre pose au milieu d'un ecran large. A 375px elle ne protege plus rien
     * — la colonne fait deja 347px — et elle coute UNE LIGNE entiere, soit
     * vingt-sept pixels de plus haut que le pli. */
    .home-hero__title {
        max-width: none;
    }

    /* La pastille d'annonce se fait discrete : elle situe, elle ne proclame
       pas. Sa graisse et sa taille descendent d'un cran. */
    .home-hero__chip {
        padding: 3px 10px;
        font-size: .68rem;
        font-weight: 500;
    }

    .home-hero__title {
        margin-block: 6px 4px;
    }

    /* La ligne de mission tient toujours en DEUX lignes a 375px — elle en
       prenait deja deux a .95rem. Neuf dixiemes de millimetre de corps en moins
       ne coutent donc pas une ligne : ils rendent quatre pixels et laissent au
       titre, juste au-dessus, toute sa voix. */
    .home-hero__sous {
        font-size: .86rem;
    }

    .home-hero__gestes {
        /* UNE SEULE LIGNE. Deux boutons empiles coutent cinquante pixels et
           donnent l'impression de deux etapes plutot que d'un choix. */
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 8px;
    }

    .home-hero__gestes .ui-cta {
        min-width: 0;
        padding-inline: 12px;
        font-size: .82rem;
        white-space: nowrap;
    }

    /* LES TROIS REPERES TIENNENT SUR UNE SEULE LIGNE.
     *
       337px demandes pour 347 disponibles — dix pixels de marge, et c'est
       mesure : le contrat refait le calcul a chaque execution plutot que de me
       croire sur parole. Deux lignes coutaient vingt pixels, soit la difference
       entre 42 % et 39 % de la vue.

       Une pastille de repere n'a pas besoin d'etre grande : elle rassure du
       coin de l'oeil, elle ne se lit pas mot a mot. */
    .home-hero__reperes {
        margin-top: 7px;
        gap: 4px;
    }

    .home-hero__reperes li {
        padding: 3px 7px;
        font-size: .66rem;
    }
}

/* Le geste vendeur, en second role assume : une ligne, pas un trone. */
.home-hero__pro {
    margin: 7px 0 0;
    font-size: .78rem;
    color: var(--ui-color-muted, #6E6252);
}

.home-hero__pro a {
    color: var(--ui-color-accent, #C86138);
    font-weight: 700;
    text-decoration: none;
}

.home-hero__pro a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .home-hero__pro { flex: 0 0 100%; text-align: right; margin-top: 2px; }
}


/* =====================================================================
 * LE HERO PREND VIE — trois gestes de mouvement, pas un carnaval.
 *
 * 1. Une lueur de terroir derriere le titre : un degrade radial terracotta
 *    tres dilue qui DERIVE lentement (background-position, jamais transform :
 *    un transform sur un conteneur fabriquerait un bloc conteneur pour les
 *    elements fixes — le piege tenu par test_lint_position_fixe).
 * 2. « Sortir maintenant » bat : un point lumineux qui pulse — le signal
 *    « c est vivant, la, tout de suite ».
 * 3. Les pastilles repondent au survol : elles se soulevent d un souffle.
 *
 * Tout est coupe par prefers-reduced-motion : le mouvement est un accent,
 * jamais une condition de lecture.
 * ===================================================================== */
.home-hero {
    position: relative;
    background:
        radial-gradient(420px 180px at 18% 20%,
                        rgba(200, 97, 56, .07), transparent 70%),
        radial-gradient(380px 200px at 82% 75%,
                        rgba(36, 90, 59, .06), transparent 70%);
    background-size: 200% 200%;
}

.home-hero__title em {
    position: relative;
    font-style: normal;
    color: inherit;
}

/* Le trait qui s ecrit sous le titre a l arrivee : la signature du geste. */
.home-hero__title::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: 6px auto 0;
    border-radius: 3px;
    background: var(--ui-color-accent, #C86138);
    transform-origin: left center;
}

@media (min-width: 640px) {
    .home-hero__title::after { margin-inline: 0; }
}

/* LE POINT QUI BATTAIT EST PARTI AVEC L'ARRIVEE DES ICONES (08/09).
   Il disait « c'est vivant, maintenant » sur la premiere pastille. L'onglet
   porte desormais une horloge — le glyphe le dit mieux, et il le dit meme a
   l'arret. Deux marqueurs pour une seule idee sur une puce de quatre-vingts
   points, c'est le doublon en petit. */

@media (prefers-reduced-motion: no-preference) {
    .home-hero {
        animation: hero-lueur 16s ease-in-out infinite alternate;
    }

    @keyframes hero-lueur {
        from { background-position: 0% 0%, 100% 100%; }
        to   { background-position: 30% 40%, 70% 60%; }
    }

    .home-hero__title::after {
        animation: hero-trait .7s cubic-bezier(.2, .7, .3, 1) both;
        animation-delay: .25s;
    }

    @keyframes hero-trait {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }

}

/* Densite mobile ciblee (26/08) : le titre et la scene se tassent
   encore d'un cran sous 640px — la carte et la liste gagnent l'espace. */
@media (max-width: 639px) {
    .home-hero__title {
        font-size: 1.14rem;
        /* Six points au-dessus et quatre au-dessous d'une ligne de titre : sur
           un ecran ou la premiere fiche produit affleure, cette respiration-la
           coute plus qu'elle ne donne. Quatre et deux se lisent pareil. */
        margin-block: 4px 2px;
    }

    /* LE TRAIT DE SIGNATURE NE PAIE PAS SA PLACE AU POUCE.
       Trois points de filet et six de marge, soit neuf, pour un ornement —
       « moins de bla-bla en general », Julien, 08/09. Il reste a partir de
       640px, ou le hero devient un bandeau et ou la place ne se dispute plus.
       LA BOITE EST MISE A ZERO EN MEME TEMPS QUE L'AFFICHAGE, et ce n'est pas
       une ceinture-bretelles : `test_premier_ecran_pouce` lit la HAUTEUR et la
       MARGE declarees pour ce pseudo-element ; `display: none` seul lui
       laisserait compter neuf points qui n'existent plus. */
    .home-hero__title::after {
        display: none;
        height: 0px;
        margin: 0px auto;
    }

    .home-hero__sous {
        font-size: .78rem;
    }

    /* La rangee d'intentions se resserre contre le titre : dix points de
       gouttiere separaient deux blocs qui se lisent d'un seul coup d'oeil. */
    .home-hero__gestes {
        margin-top: 6px;
    }
    .home-hero {
        padding-block: 6px 4px;
    }
}

/* Frapper fort sous 640px (26/08) : le hero se reduit au titre et aux
   portes — les reperes de confiance et la ligne vendeur vivent plus bas
   dans la page (a-propos, seller-landing), pas sur le premier ecran. */
@media (max-width: 639px) {
    .home-hero__sous,
    .home-hero__reperes,
    .home-hero__pro {
        display: none;
    }

    /* « ICI, ON CULTIVE LE LIEN » DISPARAIT DE L'ECRAN, PAS DE LA PAGE.
     *
     * Julien, 09/09 a 17 h : « encore plus grand ». Il ne restait plus rien a
     * prendre ailleurs — les 125 autres points du premier ecran sont l'en-tete,
     * le titre du carrousel et quatre respirations. Ce titre coutait 33,2
     * points pour une phrase qu'on ne relit pas.
     *
     * ON NE L'EFFACE PAS, ON LE SORT DU FLUX. C'est le `h1` de la page : le
     * supprimer priverait les lecteurs d'ecran de son titre et les moteurs de
     * sa promesse. La technique du masquage visuel le garde entier pour les
     * uns et les autres, et rend ses 33 points a la carte. Il reapparait
     * a 640px, ou la place ne se dispute plus. */
    .home-hero {
        padding-block: 0;
    }

    .home-hero__title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}


/* LA RANGEE D'INTENTIONS N'EST PLUS DANS LE HERO (09/09), ET SES REGLES SONT
 * PARTIES AVEC ELLE.
 *
 * Ses quatre valeurs — Maintenant, A reserver, Dormir, A acheter — sont
 * devenues les quatre choix du critere « Envie » de la barre de filtres
 * (public_site/partials/home_filtres.html), qui porte son propre habillage dans
 * home/scene.css. Julien, 09/09 : « les filtres il faudrai plus un systeme type
 * leboncoin » — une pastille par CRITERE, pas par valeur.
 *
 * POURQUOI EFFACER PLUTOT QUE LAISSER DORMIR. Les contrats de ce depot lisent
 * la feuille SERVIE : tant que `.home-hero__intention` y declarait
 * `min-height: 44px`, la mesure du hero comptait quarante-quatre points qui
 * n'existaient plus a l'ecran. Une regle orpheline ne fait pas que salir — elle
 * fausse l'instrument.
 *
 * CE QUI A ETE REPRIS PLUTOT QUE PERDU : le degrade de bord (le motif, pas la
 * propriete — voir scene.css et son `::after`), la cible tactile de 44, le
 * glyphe ramene a 15px et la respiration laterale de 10. Ce sont les arbitrages
 * du 08/09, et ils valaient pour une rangee de pastilles au pouce, pas pour un
 * emplacement.
 */