/* ==========================================================
HERO — une photo, plein cadre, derrière tout
==========================================================

LA STRUCTURE
------------
Une seule photo occupe tout le cadre. Le contenu vit dans le tiers
gauche ; les trois chiffres et la ligne de preuve se posent en pied de
cadre, la preuve à gauche, les chiffres à droite. Ni bande d'encre, ni
ligne ambre, ni chevauchement du titre : le hero est une image dans
laquelle on écrit, pas deux zones empilées.

Le téléphone (≤640 px) a toujours eu cette structure ; il la garde
telle quelle, y compris sa lueur ambre en soft-light, que l'ordinateur
échange contre un second voile (voir .hero-photo-glow).

DEUX VOILES, PAS UN
-------------------
.hero-photo-veil court à l'HORIZONTALE : sombre à gauche, où vit le
texte, clair à droite, où sont les toques et le bâtiment. Ce que la
photo raconte reste visible.
.hero-photo-glow court à la VERTICALE : il rend la navigation lisible
en haut et fait le lit des chiffres en bas. Les deux se multiplient
là où ils se croisent — le pied de cadre, à gauche, est donc le point
le plus sombre de l'image, et c'est exactement là que passent les
deux textes les plus petits.

LES COULEURS ET LES POLICES SONT ÉCRITES EN LITTÉRAL
-----------------------------------------------------
#14100D (encre), #F5F1E8 (papier) et #E9A319 (l'ambre de la marque)
existent tous dans css/base.css — --primary-900, --primary-50,
--amber-500. Mais css/homepage-redesign.css, chargée APRÈS ce fichier
sur l'accueil, redéfinit --amber-500 en terracotta (#D9805A) ET
--primary-900 en --ink-surface (#211D18) : le hero ne serait plus
celui de la maquette. Il porte donc les valeurs, pas les tokens —
même règle que .hero-h1-accent depuis le lot C. Pour les polices,
c'est base.css elle-même qui l'impose (« jamais var(--font-display) » :
dix-sept feuilles le redéfinissent, ici en Sora).
========================================================== */

.hero{

position:relative;

/* La photo dérive (fitz-derive, +7,5 %) : sans cela elle déborderait
sur la section suivante. */
overflow:hidden;

/* Le hero occupe l'écran, mais jamais moins de 620 px (un portable
1366 × 768 n'offre qu'environ 640 px utiles) ni plus de 820 px (sur
un grand écran, un hero qui remplit 1200 px de haut fait passer le
reste de la page pour une deuxième page). svh et non vh : sur
téléphone, vh compte la barre d'adresse rétractée et laisse le pied
de cadre sous le pouce.

Lot FINITIONS-VISUELLES (2026-09-11) : min-height et non height. Sur
un portable 1366 × 768 (≈ 640 px utiles), le contenu centré dépassait
le cadre des deux côtés et remontait SOUS l'en-tête fixe : le logo se
collait au surtitre. Un minimum laisse le cadre grandir avec son
contenu ; rien ne déborde plus, rien ne passe sous l'en-tête. */
min-height:clamp(620px, 100svh, 820px);

display:flex;

flex-direction:column;

/* Le contenu est centré dans ce qui reste une fois retirés le
dégagement sous l'en-tête fixe et la place du pied de cadre (124 px).

Le dégagement haut = la hauteur RÉELLE de l'en-tête (82 px,
.header-container dans css/header.css) + 32 px. Il valait 76 px, soit
moins que l'en-tête lui-même : dès que le contenu était plus haut que
l'espace disponible, le logo chevauchait le surtitre (capture de
Charles, portable). Le harnais (scripts/verifier/finitions.mjs) mesure
désormais l'écart logo → premier contenu sur toutes les pages à
en-tête fixe : jamais moins de 24 px. */
justify-content:center;

padding:114px 0 124px;

/* LE CORPS DU TITRE, UNE SEULE FOIS
La maquette pose 70 px sur une planche de 1366 px, soit 5,1vw. Le
plancher (2,8rem) tient « faites-vous accompagner » dans les 590 px
d'une tablette de 641 px ; le plafond (4,5rem) l'empêche de dominer
sur un écran très large. La variable existe pour que le téléphone
n'ait qu'un seul endroit à contredire. */
--hero-title-size:clamp(2.8rem, 5.1vw, 4.5rem);

color:#F5F1E8;

background:#14100D;

}

/* ==========================================================
LA PHOTO
========================================================== */

.hero-photo{

position:absolute;

inset:0;

background:#14100D;

}

.hero-photo-img{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

/* On garde les toques, le bâtiment, les bras levés et les visages ;
le ciel du haut et les jambes sortent du cadre. */
object-position:58% 38%;

filter:saturate(.82) contrast(1.06);

/* LA DÉRIVE — une seule animation de toute la page d'accueil, sur
l'image elle-même, en TRANSFORM seul : aucune boîte ne change de
taille, donc aucun décalage de mise en page (CLS 0). 26 s en
aller-retour : le mouvement ne se remarque pas, il se sent.

Pas de will-change : une transformation animée en continu obtient
déjà sa propre couche dans tous les moteurs actuels, et sur
téléphone la photo occupe tout l'écran — épingler une texture de
cette taille en mémoire GPU pour toute la session coûterait plus
qu'elle ne rapporte. */
animation:fitz-derive 26s ease-in-out infinite alternate;

transform-origin:58% 45%;

}

@keyframes fitz-derive{

from{ transform:scale(1); }

to{ transform:scale(1.075); }

}

/* Impératif d'accessibilité : qui demande moins de mouvement voit une
image fixe, pas une image ralentie. */
@media (prefers-reduced-motion: reduce){

.hero-photo-img{ animation:none; }

}

.hero-photo-veil,
.hero-photo-glow,
.hero-photo-grain{

position:absolute;

inset:0;

pointer-events:none;

}

/* 1. LE VOILE HORIZONTAL — le texte à gauche, la photo à droite. */
.hero-photo-veil{

background:linear-gradient(100deg,
rgba(20,16,13,.90) 0%,
rgba(20,16,13,.80) 30%,
rgba(20,16,13,.42) 58%,
rgba(20,16,13,.20) 100%);

}

/* 2. LE VOILE VERTICAL — la navigation en haut, le pied de cadre en
bas. Transparent au milieu (20 % → 44 %) : c'est la bande où vivent
les visages, elle ne doit rien perdre.

Les deux derniers arrêts (.66 et .96, et non .52 et .88 comme sur la
maquette) sont MESURÉS, pas choisis. Sous « ÉTABLISSEMENTS » — 9,5 px,
le texte le plus petit du cadre, posé le plus à droite, là où le voile
horizontal est le plus clair — les valeurs de la maquette tombaient à
3,98:1 sur un pixel de ciel brûlé, pour un seuil de 4,5:1 ; deux crans
plus loin (.62 / .94) elles remontaient à 4,49, soit un centième sous
le seuil. Le voile s'épaissit donc jusqu'à .66 / .96 ; le texte, lui,
ne s'éclaircit pas. Toute retouche de ces deux arrêts se remesure. */
.hero-photo-glow{

background:linear-gradient(180deg,
rgba(20,16,13,.80) 0%,
rgba(20,16,13,0) 36%,
rgba(20,16,13,0) 48%,
rgba(20,16,13,.66) 76%,
rgba(20,16,13,.96) 100%);

}

/* 3. Le grain : un feTurbulence SVG en data-URI. Aucun fichier image
de plus à charger, aucune requête. */
.hero-photo-grain{

opacity:.07;

background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

}

/* ==========================================================
LE CONTENU — surtitre, titre, promesse, portes
==========================================================
Les quatre calques ci-dessus sont positionnés : sans position ni
z-index, le contenu en flux normal passerait DESSOUS eux (les éléments
positionnés se peignent après les blocs en flux). D'où le z-index sur
.hero-inner et sur .hero-foot.
========================================================== */

.hero-inner{

position:relative;

z-index:2;

/* margin-top / margin-bottom à ZÉRO, et c'est le point délicat de tout
le cadre : .container pose « margin:auto », et dans un conteneur flex
une marge automatique sur l'axe principal absorbe l'espace libre AVANT
que justify-content ne s'applique. Les deux enfants en flux portaient
donc quatre marges automatiques qui se partageaient les 198 px libres
d'un écran de téléphone — le contenu remontait de 149 px et le pied
flottait à 50 px du bas au lieu de 26. Mesuré, puis corrigé ici. Les
marges HORIZONTALES restent automatiques : c'est elles qui centrent. */
margin-top:0;

margin-bottom:0;

}

/* .hero-content reste le parent direct des éléments échelonnés :
css/animations.css cale ses délais sur
« .hero-content > .hero-stagger:nth-child(N) ». Aucune feuille
d'animation touchée. */
.hero-content{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:24px;

}

.hero-eyebrow{

display:flex;

align-items:center;

gap:14px;

margin:0;

font-family:'Public Sans','Segoe UI',Helvetica,sans-serif;

font-size:12px;

font-weight:600;

line-height:16px;

letter-spacing:.2em;

text-transform:uppercase;

/* CRÈME, ET NON L'AMBRE DE LA MARQUE — décision mesurée.
Cette ligne traverse le cadre jusqu'à la moitié de sa largeur, là où le
voile horizontal est déjà clair et où passe le bâtiment blanc. En ambre
elle tombait à 1,30:1 sur téléphone et 2,22:1 sur ordinateur, pour un
seuil de 4,5:1.

Le garder en ambre aurait demandé un voile à .80 sous cette ligne, soit
la photo écrasée sur toute sa moitié haute ; en crème il suffit de .63.
C'est la photo qu'on préserve, pas la couleur.

L'ambre ne quitte pas le surtitre pour autant : le trait de 28 px juste
en dessous le garde. L'accent reste, il change de porteur. */
color:#F5F1E8;

}

.hero-eyebrow-rule{

display:block;

flex:none;

width:28px;

height:1px;

background:#E9A319;

}

/* .hero .hero-title, et non .hero h1 : css/homepage-typography.css pose
« .hero h1{font-family:var(--font-affirmation);font-weight:var(--fw-bold)} »
et se charge APRÈS ce fichier — à spécificité égale (0,1,1) c'est elle
qui l'emporterait, et le titre repasserait en 700. Deux classes (0,2,0)
tranchent, sans !important.

Newsreader 500 (et non le 800 d'août) : c'est la graisse de la maquette
confirmée — plus éditoriale, moins empâtée aux grands corps. La graisse
est déjà chargée par le <link> Google Fonts d'index.html (0,500 et
1,500 pour l'italique des deux mots ambrés), rien à ajouter. */
.hero .hero-title{

margin:0;

font-family:'Newsreader',Georgia,serif;

font-weight:500;

font-size:var(--hero-title-size);

line-height:1;

letter-spacing:-.02em;

color:#F5F1E8;

max-width:830px;

/* Les <br> du HTML tiennent la coupe en trois lignes : un équilibrage
automatique la contredirait. */
text-wrap:initial;

text-shadow:none;

}

/* Le LITTÉRAL #E9A319, jamais var(--amber-500) — voir l'en-tête.
Italique : « Bourse ou préinscription » est le choix, le reste de la
phrase est la promesse. */
.hero-h1-accent{

color:#E9A319;

font-style:italic;

}

/* max-width et non width : dans une colonne flex alignée au début, un
paragraphe dont la ligne naturelle dépasse largement 560 px prend
exactement ces 560 px — le rendu est celui de la maquette — mais il
n'a plus besoin d'être remis à zéro sur chaque écran étroit, où un
width figé déborderait. */
/* SOUS-TITRE EN NEWSREADER (2026-09-12) — et non plus Public Sans :
la phrase du sous-titre est la promesse, elle doit avoir la même voix
éditoriale que le h1. Le contraste avec le titre ne vient plus de la
police mais du CORPS (≈72px contre 19,5px) et de la graisse (500
contre 400) — c'est la hiérarchie des pages éditoriales haut de gamme,
et elle tient sans ajouter de troisième police. Le 400 de Newsreader
est déjà chargé par le <link> Google Fonts d'index.html, rien à
ajouter. Opacité remontée de .80 à .88 : un sérif de corps moyen sur
photo sombre a besoin d'un peu plus de blanc que le sans. */
.hero-subtitle{

margin:0;

max-width:600px;

font-family:'Newsreader',Georgia,'Times New Roman',serif;

font-size:19.5px;

font-weight:400;

line-height:1.6;

letter-spacing:.004em;

color:rgba(245,241,232,.88);

}

/* ==========================================================
LES DEUX PORTES
==========================================================
De poids STRICTEMENT égal : même fond crème, même corps, même flèche,
même rembourrage. Aucune des deux n'est « la » porte principale — c'est
tout le propos du titre.

L'AMBRE N'EST PAS UN BOUTON : il reste aux deux mots du titre, au
surtitre et à la ligne. Un bouton ambre ferait de l'une des deux portes
la bonne réponse.

Lot HERO-PIED (2026-09-11) : « attrayants pour attirer le clic » — les
deux remontent ENSEMBLE, l'égalité reste : 52 px de haut, ombre portée,
flèche qui glisse au survol, enfoncement au clic, anneau au clavier.

Lot PORTES-COULEUR (2026-09-11, Charles : « une couleur plus attrayante
et cohérente au site ») : le crème sur photo sombre était un bouton
fantôme. Les DEUX portes passent à l'ambre #E9A319 — la couleur
invariante de la marque, déjà dans ce bloc (elle soulignait le lien du
diagnostic) : aucune couleur nouvelle sur la page. Toujours le LITTÉRAL,
jamais var(--amber-500) : onze feuilles redéfinissent l'échelle ambre en
terracotta. Survol : #F2B640, l'ambre clair que le hero employait déjà.
Texte encre #14100D. L'égalité reste stricte : même fond, même poids.
L'anneau au clavier passe au crème #F5F1E8 — un anneau ambre sur un
fond ambre ne se verrait pas.
========================================================== */

.hero-doors{

display:flex;

align-items:center;

gap:14px;

margin-top:4px;

}

.hero-door{

display:inline-flex;

align-items:center;

gap:12px;

min-height:52px;

padding:0 30px;

border-radius:999px;

background:#E9A319;

color:#14100D;

font-family:'Public Sans','Segoe UI',Helvetica,sans-serif;

font-size:16px;

font-weight:700;

line-height:1.2;

text-decoration:none;

box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.22);

transition:transform .18s ease, background .18s ease, box-shadow .18s ease;

}

.hero-door svg{

flex:none;

transition:transform .18s ease;

}

.hero-door:hover{

transform:translateY(-2px);

background:#F2B640;

color:#14100D;

box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 28px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.24);

}

.hero-door:hover svg,
.hero-door:focus-visible svg{ transform:translateX(4px); }

.hero-door:active{

transform:translateY(1px);

box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 3px 10px rgba(0,0,0,.28);

}

/* Anneau crème au clavier : un anneau ambre sur un fond ambre ne se
verrait pas. */
.hero-door:focus-visible{

outline:3px solid #F5F1E8;

outline-offset:3px;

background:#F2B640;

color:#14100D;

}

/* LA LIGNE DU DIAGNOSTIC (lot PORTES-COULEUR) : sous les portes, une
ligne de texte crème avec sa flèche — lisible comme une action,
visiblement plus légère que les portes. Zone de clic de 44px. */
.hero-diag{

display:inline-flex;

align-items:center;

gap:10px;

min-height:44px;

margin-top:14px;

font-family:'Public Sans','Segoe UI',Helvetica,sans-serif;

font-size:15px;

line-height:1.4;

color:rgba(245,241,232,.92);

text-decoration:none;

}

.hero-diag strong{

font-weight:700;

color:#F5F1E8;

text-decoration:underline;

text-underline-offset:4px;

text-decoration-thickness:1.5px;

}

.hero-diag svg{

flex:none;

transition:transform .18s ease;

}

.hero-diag:hover,
.hero-diag:focus-visible{

color:#FFFFFF;

}

.hero-diag:hover strong,
.hero-diag:focus-visible strong{ color:#E9A319; }

.hero-diag:hover svg,
.hero-diag:focus-visible svg{ transform:translateX(4px); }

.hero-diag:focus-visible{

outline:3px solid #F5F1E8;

outline-offset:4px;

border-radius:6px;

}

@media (prefers-reduced-motion: reduce){

.hero-door,
.hero-door svg,
.hero-diag svg{ transition:background .18s ease, box-shadow .18s ease; }

.hero-diag:hover svg,
.hero-diag:focus-visible svg{ transform:none; }

.hero-door:hover,
.hero-door:active{ transform:none; }

.hero-door:hover svg,
.hero-door:focus-visible svg{ transform:none; }

}

/* ==========================================================
LE PIED DE CADRE — la ligne de preuve, les trois chiffres
==========================================================
Ancré au bas du cadre plutôt qu'au bas du contenu : c'est ce qui fait
que la photo se termine sur une ligne d'information et non dans le
vide. Le décalage left:50% + translateX(-50%) reprend le centrage de
.container sans réintroduire une marge automatique, qu'un élément
absolu n'obtiendrait pas.
========================================================== */

.hero-foot{

position:absolute;

z-index:2;

/* Même raison que .hero-inner : .container pose margin:auto, et le pied
revient dans le flux sur téléphone. */
margin-top:0;

margin-bottom:0;

left:50%;

transform:translateX(-50%);

bottom:46px;

display:flex;

align-items:flex-end;

justify-content:space-between;

/* Le pied se replie sur deux rangées plutôt que de comprimer les
chiffres quand la largeur ne suffit plus (voir la tablette). */
flex-wrap:wrap;

gap:40px;

}

/* Les deux enfants du pied ont changé de parent : css/animations.css
n'écrit ses délais que pour « .hero-content > » et « .hero-visual > ».
Ils portent donc les leurs ici, à la suite des quatre du contenu
(.05 / .16 / .27 / .38) — de gauche à droite, la preuve puis les
chiffres, jamais deux éléments sans délai au milieu de la séquence. */
.hero-foot > .hero-stagger:nth-child(1){ transition-delay:.49s; }
.hero-foot > .hero-stagger:nth-child(2){ transition-delay:.60s; }

.hero-proof{

display:flex;

flex-direction:column;

gap:6px;

margin:0;

max-width:360px;

font-family:'Public Sans','Segoe UI',Helvetica,sans-serif;

font-size:12.5px;

line-height:1.6;

color:rgba(245,241,232,.66);

}

.hero-proof a{

color:#E9A319;

text-decoration:underline;

text-underline-offset:3px;

}

.hero-proof a:hover,
.hero-proof a:focus-visible{ color:#F2B640; }

.hero-figures{

display:flex;

gap:38px;

}

.hero-figure{

display:flex;

flex-direction:column;

/* Aligné à droite : la rangée se termine sur le bord du cadre, pas
dans le vide. .hero-side portait cet alignement, elle n'existe plus. */
text-align:right;

}

.hero-figure strong{

font-family:'Newsreader',Georgia,serif;

font-size:34px;

font-weight:500;

line-height:1;

/* Les chiffres sont animés par setCount() (js/homepage-teaser.js) :
sans chasse fixe, la rangée entière tremblerait à chaque incrément. */
font-variant-numeric:tabular-nums;

color:#F5F1E8;

}

.hero-figure > span{

font-family:'Public Sans','Segoe UI',Helvetica,sans-serif;

font-size:9.5px;

letter-spacing:.18em;

text-transform:uppercase;

color:rgba(245,241,232,.55);

margin-top:7px;

}

/* ==========================================================
TABLETTE (641 → 1023 px)
==========================================================
Même structure immersive. Deux ajustements seulement : le pied passe
sur deux rangées — 360 px de preuve plus 386 px de chiffres ne tiennent
pas dans les 706 px d'une tablette de 768 — et le cadre lui rend la
hauteur que cette seconde rangée réclame.
========================================================== */

@media(max-width:1023px){

.hero{

/* L'en-tête mesure 76 px sous 992 px (css/header.css) : 76 + 32. */
padding:108px 0 172px;

}

.hero-foot{

flex-direction:column;

align-items:flex-start;

gap:22px;

bottom:40px;

}

/* Les chiffres reprennent la tête, comme sur téléphone : une rangée de
chiffres sous une ligne de mention se lit comme une note de bas de
page. Le pied garde sa séquence — .49 puis .60 suit l'ordre du DOM,
donc la preuve reste la première à paraître. */
.hero-figures{

order:1;

gap:clamp(18px, 3.6vw, 38px);

}

.hero-proof{

order:2;

max-width:none;

}

.hero-figure{ text-align:left; }

}

/* ==========================================================
TÉLÉPHONE (≤640 px) — RIEN NE CHANGE
==========================================================
Le téléphone était déjà immersif et le reste, au pixel près : photo
plein cadre, contenu empilé dans le tiers bas, ancré en bas, chiffres
au-dessus de la ligne de preuve. Comme .hero-band / .hero-band-inner /
.hero-side n'existent plus, leurs déclarations sont reportées sur
.hero, .hero-inner et .hero-foot — même rendu, autres sélecteurs.
========================================================== */

@media(max-width:640px){

.hero{

/* Le cadre reprend la hauteur d'écran et le contenu redescend en bas :
ni la hauteur bornée ni le centrage du bureau. Les 18 px d'écart que
.hero-band-inner posait entre le contenu et le pied deviennent le gap
du cadre — les quatre calques sont absolus, donc hors flux, et ne
comptent pas comme éléments flexibles. */
height:auto;

min-height:660px;

min-height:100svh;

justify-content:flex-end;

gap:18px;

padding:0;

--hero-title-size:min(40px, 8.4vw);

}

.hero-photo{ z-index:0; }

.hero-photo-img{

/* Les toques et le bâtiment restent visibles AU-DESSUS du surtitre. */
object-position:50% 30%;

transform-origin:50% 40%;

}

/* Dégradé renforcé vers le bas : le contenu occupe le tiers inférieur,
il lui faut un fond franc — et la nav garde le sien en haut. */
.hero-photo-veil{

background:linear-gradient(180deg,
rgba(20,16,13,.92) 0%,
rgba(20,16,13,.44) 22%,
rgba(20,16,13,.80) 44%,
rgba(20,16,13,.93) 66%,
rgba(20,16,13,.97) 100%);

}

/* Le téléphone garde SA lueur ambre en soft-light : le voile ci-dessus
fait déjà tout le travail vertical, et l'ordinateur est le seul à
avoir besoin du second voile d'encre. */
.hero-photo-glow{

mix-blend-mode:soft-light;

background:linear-gradient(160deg,rgba(233,163,25,.4) 0%,rgba(233,163,25,0) 55%);

}

/* Marges de 20 px (regles_mobile.md) plutôt que les 4 % de .container :
à 375 px, 4 % ne feraient que 15 px de chaque côté. Le rembourrage
haut ne sert que de garde contre la nav quand le contenu devient
assez haut pour la toucher. */
.hero-inner{

width:calc(100% - 40px);

padding:104px 0 0;

}

/* align-items:stretch et non flex-start : en colonne flex, un enfant
aligné au début est dimensionné sur son contenu maximal et peut donc
sortir de son parent — c'est ce qui laissait le titre déborder. Étirés,
les enfants prennent la largeur disponible, et les deux portes gagnent
au passage la pleine largeur que demande la planche. */
.hero-content{

width:100%;

max-width:none;

align-items:stretch;

gap:18px;

}

/* Le surtitre peut passer sur deux lignes : le trait se cale sur la
PREMIÈRE, il n'est pas centré sur un bloc de deux lignes. */
.hero-eyebrow{

align-items:flex-start;

gap:10px;

font-size:10.5px;

line-height:1.4;

letter-spacing:.16em;

}

.hero-eyebrow-rule{

width:22px;

margin-top:.65em;

}

/* 40 px est la valeur de la maquette, mais elle est dessinée sur une
planche de 390 px qui ROGNE ce qui dépasse : à cette taille, « faites-
vous accompagner » réclame 407 px pour 350 px disponibles, et le titre
partait sur quatre lignes en sortant du cadre (mesuré à 375 et à
390 px, avec la vraie Newsreader chargée). Le corps suit donc la
largeur — 8,4vw plafonné aux 40 px de la maquette : 31,5 px à 375,
32,8 à 390, 40 à partir de 476 px. La coupe en TROIS lignes tient
partout, et le « ou » n'est jamais seul. */
.hero .hero-title{

line-height:1.02;

max-width:none;

}

.hero-subtitle{

max-width:none;

/* 17px et non 15,5 : un sérif paraît plus petit qu'un sans au même
corps — c'est l'ajustement optique, pas un grossissement. */
font-size:17px;

line-height:1.52;

color:rgba(245,241,232,.88);

}

.hero-doors{

flex-direction:column;

align-items:stretch;

gap:10px;

margin-top:4px;

}

/* Texte à gauche, flèche à droite : sur une cible pleine largeur, un
libellé centré laisse la flèche flotter sans rien dire. */
.hero-door{

justify-content:space-between;

min-height:52px;

padding:0 22px;

font-size:15.5px;

}

/* La ligne du diagnostic, sous les portes empilées : pleine largeur,
texte à gauche, flèche à droite, 48px de zone de clic. */
.hero-diag{

display:flex;

justify-content:space-between;

width:100%;

min-height:48px;

margin-top:10px;

padding:0 4px;

font-size:14.5px;

}

/* Le pied revient dans le flux, au bas de la pile : sur un écran de
téléphone, un pied ancré au cadre passerait sous le pouce. */
.hero-foot{

position:static;

left:auto;

bottom:auto;

transform:none;

width:calc(100% - 40px);

flex-direction:column;

align-items:stretch;

gap:18px;

padding:0 0 26px;

}

/* Une rangée nue sous un filet — plus de cartes de verre : trois
chiffres n'ont pas besoin de trois boîtes. */
.hero-figures{

order:1;

justify-content:space-between;

gap:12px;

margin-top:8px;

padding-top:16px;

border-top:1px solid rgba(245,241,232,.14);

}

.hero-figure{ text-align:left; }

.hero-figure strong{ font-size:28px; }

.hero-figure > span{

font-size:10.5px;

letter-spacing:.08em;

margin-top:5px;

color:rgba(245,241,232,.6);

}

/* Le troisième aligné à droite : la rangée se termine sur le bord du
texte, pas dans le vide. */
.hero-figure:last-child{ text-align:right; }

/* Une seule ligne coupée naturellement, plutôt que deux blocs. */
.hero-proof{

order:2;

display:block;

max-width:none;

font-size:12.5px;

line-height:1.5;

color:rgba(245,241,232,.6);

}

.hero-proof span{ display:inline; }

}

/* ==========================================================
FITZ AI CARD
========================================================== */

/* Refonte "carte produit" — l'ancienne carte (fond blanc plat, liste
brute, aucune hiérarchie) lisait comme un composant de maquette plutôt
qu'un vrai produit. Deux changements : une ombre en deux couches façon
carte flottante premium plutôt que --shadow-lg seule, et un statut "en
direct" (voir .demo-status) emprunté au vocabulaire des vrais outils IA
(badge + point qui pulse) pour que la démo se lise comme un produit qui
tourne réellement, pas une capture figée. (Le bandeau d'accent Fitz en
haut de carte, présent un temps, a été retiré — retour utilisateur
2026-08-22, même chose sur .floating-card juste plus haut : trop
chargé visuellement sur les deux familles de cartes.)

Composant repris tel quel par la section #fitz-demo (index.html,
css/homepage-sections.css) : ce fichier définit toujours son apparence
(couleurs, ombre, contenu), mais elle n'habite plus .hero-visual — le
position:absolute ci-dessous est neutralisé pour ce nouveau contexte par
.fitz-demo .hero-demo (css/homepage-sections.css), qui repasse la carte
en flux normal. */
.hero-demo{

position:absolute;

right:0;

bottom:0;

width:312px;

padding:20px 20px 22px;

background:rgba(255,255,255,.97);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.6);

border-radius:var(--radius-lg);

box-shadow:0 4px 12px rgba(20,16,13,.10), 0 24px 48px -12px rgba(20,16,13,.28), inset 0 1px 0 rgba(255,255,255,.8);

z-index:6;

display:block;

overflow:hidden;

transition:var(--transition);

}

/* Mène vers eligibility-test.html (voir index.html) — même traitement
au survol que .info-card/.teaser-card, pour que le seul aperçu concret
de Fitz sur la page se signale comme cliquable. */
.hero-demo:hover{

transform:translateY(-6px);

box-shadow:0 4px 12px rgba(20,16,13,.10), 0 30px 56px -12px rgba(20,16,13,.32), inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(255,255,255,.4);

}

/* overflow:hidden ci-dessus : anneau dédié plutôt que l'outline par
défaut du navigateur, pour être sûr qu'il reste visible au clavier
(audit du 2026-08-13) — même couleur d'anneau que .btn:focus-visible
(css/base.css). */
.hero-demo:focus-visible{

outline:none;

box-shadow:0 4px 12px rgba(20,16,13,.10), 0 30px 56px -12px rgba(20,16,13,.32), inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 4px rgba(233,163,25,.45);

}

.demo-header{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:10px 10px;

margin-bottom:16px;

}

/* Statut "en direct" — pastille qui pulse + libellé, pour que la carte
se lise comme un outil réellement actif plutôt qu'une image statique.
Passe sur sa propre ligne (flex-basis:100%) et s'aligne sous le texte
du titre (margin-left = largeur avatar + gap) plutôt que de forcer
"Votre conseiller intelligent" à partager sa ligne avec un badge : à
312px de large la carte n'a pas la place pour les deux sans wrap
disgracieux. */
.demo-status{

display:flex;

align-items:center;

gap:6px;

flex-basis:100%;

margin-left:52px;

padding:5px 10px 5px 8px;

background:rgba(34,197,94,.10);

border-radius:var(--radius-full);

font-size:.68rem;

font-weight:700;

letter-spacing:.01em;

color:#15803D;

white-space:nowrap;

width:fit-content;

}

.demo-status-dot{

width:6px;

height:6px;

border-radius:50%;

background:var(--success);

flex-shrink:0;

animation:demoStatusPulse 1.8s ease-in-out infinite;

}

@keyframes demoStatusPulse{

0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(34,197,94,.45); }
50%{ opacity:.7; box-shadow:0 0 0 4px rgba(34,197,94,0); }

}

@media (prefers-reduced-motion: reduce){

.demo-status-dot{ animation:none; }

}

/* Ce premier "Fitz" que voit un visiteur doit porter la même
signature "aurore" violet/indigo/cyan que le reste du site (dashboard,
outils Fitz) — avant ce correctif il utilisait encore
--gradient-primary générique, la seule apparition de Fitz sur le site
à ne pas porter son identité. */
/* Sans icône ET sans carré : même indicateur "de réflexion" flou que
.chat-box .fitz-avatar (eligibility-questions.css) / .advisor-intro
.fitz-avatar (eligibility-test.css) — un halo qui pulse plutôt qu'un
glyphe dans une pastille pleine. Garde position/dimensions d'origine
pour ne pas décaler .demo-info à côté. fitzPulse redéfini ici (pas de
lien vers css/ai-suite.css sur cette page) : même définition que
.fitz-status là-bas. */
.demo-avatar{

position:relative;

display:flex;

align-items:center;

justify-content:center;

width:42px;

height:42px;

isolation:isolate;

}

.demo-avatar::after{

content:"";

position:absolute;

inset:4px;

border-radius:50%;

/* Ambre et non violet (2026-08-27) : halo copié de --gradient-fitz
(css/base.css), qui est passé du violet à l'ambre ce même jour —
voir la note à cet endroit. */
background:radial-gradient(circle, #E9A319 0%, #8A5D00 45%, transparent 72%);

filter:blur(6px);

animation:fitzPulse 2.2s ease-in-out infinite;

}

@media (prefers-reduced-motion: reduce){

.demo-avatar::after{ animation:none; }

}

@keyframes fitzPulse{

0%,100%{ opacity:.4; transform:scale(.85); }

50%{ opacity:1; transform:scale(1); }

}

.demo-info h3{

font-size:.95rem;

font-weight:700;

margin-bottom:2px;

color:var(--text-color);

}

/* .demo-info h3 (élément+classe) est plus spécifique que .fitz-name
(classe seule, css/base.css) et l'écraserait sinon. */
.demo-info h3.fitz-name{

color:var(--amber-700);

}

.demo-info p{

font-size:.8rem;

color:var(--text-light);

}

.demo-body{

display:flex;

flex-direction:column;

gap:11px;

}

/* Bulle de message plutôt que du texte brut posé sur la carte — même
vocabulaire qu'une vraie interface de chat IA (fond teinté Fitz à
faible opacité, coin inférieur gauche resserré pour évoquer une bulle
"reçue"), pour que le message se lise comme une conversation en cours
plutôt qu'une légende statique. */
#fitz-message{

min-height:44px;

margin-bottom:2px;

padding:12px 14px;

/* Ambre et non violet/cyan (2026-08-27) : identité Fitz, comme
--gradient-fitz (css/base.css), qui est passé du violet à l'ambre ce
même jour — voir la note à cet endroit. */
background:rgba(233,163,25,.08);

border:1px solid rgba(233,163,25,.14);

border-radius:14px 14px 14px 4px;

line-height:1.5;

font-size:.9rem;

font-weight:500;

color:var(--text-color);

}

/* Lot DEUX-MOTEURS (2026-09-11) : chaque message est un NOUVEAU <span>
(js/hero.js, setMessage) qui porte sa propre entrée — on ne modifie plus
le texte d'un élément en cours de transition d'opacité, ce que WebKit
a rendu en superposant l'ancien et le nouveau message sur l'iPhone. */
#fitz-message > span{
display:block;
animation:fitz-message-in .2s ease both;
}

@keyframes fitz-message-in{
from{ opacity:0; }
to{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
#fitz-message > span{ animation:none; }
}

.progress{

height:8px;

background:#E5E7EB;

border-radius:999px;

overflow:hidden;

}

#progress-bar{

position:relative;

height:100%;

width:0;

background:var(--gradient-primary);

border-radius:999px;

box-shadow:0 0 10px rgba(233,163,25,.5);

transition:width .6s var(--ease-premium);

}

#progress-bar::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);

transform:translateX(-100%);

animation:progressShine 1.8s ease-in-out infinite;

}

@keyframes progressShine{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(100%);

}

}

#analysis-list{

display:flex;

flex-direction:column;

gap:7px;

min-height:130px;

}

#analysis-list li{

display:flex;

align-items:center;

gap:9px;

font-size:.83rem;

font-weight:600;

color:var(--text-color);

animation:analysisItemIn .45s var(--ease-premium) both;

}

/* Icône dans un badge teinté plutôt qu'à nu — même logique que les
puces .cta-trust/.floating-icon ailleurs sur la page : un pictogramme
seul sur fond blanc lit comme une liste à puces générique, le badge le
transforme en étape de progression identifiable au premier coup d'œil. */
#analysis-list li i,
#analysis-list li svg{

width:15px;

height:15px;

flex-shrink:0;

padding:4px;

box-sizing:content-box;

background:rgba(26,23,20,.08);

border-radius:8px;

color:var(--primary-color);

}

/* La dernière étape ("12 opportunités trouvées") est un résultat, pas
une étape d'analyse comme les autres : badge vert pour la distinguer
plutôt que le même bleu neutre que "langues prises en compte" etc. */
#analysis-list li:last-child i,
#analysis-list li:last-child svg{

background:rgba(34,197,94,.12);

color:var(--success);

}

@keyframes analysisItemIn{

from{

opacity:0;

transform:translateX(-10px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/* ==========================================================
ANIMATIONS
========================================================== */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}