/* ==========================================================
FITZUNIVERSE — SYSTÈME TYPOGRAPHIQUE DE LA PAGE D'ACCUEIL (2026-08-13)
index.html UNIQUEMENT — chargé en dernier (voir index.html) pour
gagner la cascade sur les font-family déclarés dans hero.css et
css/homepage-sections.css.

Trois identités de titre par groupe de sections + une police de corps
partagée, plutôt que la seule paire Sora/Inter (css/base.css, toujours
le défaut du reste du site — non touché ici, voir plus bas) :

- --font-affirmation (Space Grotesk)  : Hero + CTA final
- --font-narrative    (Fraunces)       : Le problème + Notre vision
- --font-product       (Plus Jakarta Sans) : Fitz en action + Comment
  ça fonctionne — et le défaut de tout le reste (voir --font-display
  ci-dessous), y compris le bandeau logos et l'échantillon
  d'universités, qui n'appartiennent à aucun des 3 groupes.
- --font-body          (Plus Jakarta Sans) : corps de texte partout.

Technique : base.css définit déjà --font-display/--font-body et les
applique via `h1,h2,h3,h4,h5,h6{font-family:var(--font-display)}` et
`body{font-family:"Inter"}` — plutôt que de dupliquer un sélecteur par
titre, on REDÉFINIT ces deux variables au niveau :root ci-dessous. La
cascade CSS (ce fichier charge après base.css) fait le reste pour tous
les titres qui n'ont pas d'override plus spécifique — d'où le nombre
réduit de règles ci-dessous : seuls les groupes Affirmation et Récit
Humain ont besoin d'un override explicite, "Produit" et "tout le
reste" héritent déjà du nouveau défaut. base.css lui-même n'est pas
modifié : les autres pages (qui ne chargent pas ce fichier) gardent
Sora/Inter sans rien changer.
========================================================== */

:root{

--font-affirmation:'Space Grotesk', sans-serif;
--font-narrative:'Fraunces', serif;
--font-product:'Plus Jakarta Sans', sans-serif;
--font-body:'Plus Jakarta Sans', sans-serif;

/* Redéfinit les 2 variables de base.css pour cette page : tout titre
h1-h6 qui n'a pas d'override plus bas devient Plus Jakarta Sans au
lieu de Sora (bandeau logos, échantillon, sous-titres de carte h3...). */
--font-display:var(--font-product);

}

body{
font-family:var(--font-body);
}

/* ==========================================================
AFFIRMATION — Hero + CTA final
Space Grotesk ne charge que 600/700 (voir index.html) : pas de 800
disponible, fw-bold (700) est déjà le poids maximal ici. Tracking
resserré mais moins que l'ancien -.035em/-.028em (réglé pour Sora) —
Space Grotesk a des formes de lettres plus larges nativement, un
resserrement identique l'aurait fait paraître compressé plutôt que
"affirmé".
========================================================== */

.hero h1,
.cta-box h2{

font-family:var(--font-affirmation);
font-weight:var(--fw-bold);
letter-spacing:-.02em;

}

/* ==========================================================
RÉCIT HUMAIN — Le problème + Notre vision
Fraunces en 600 (medium/semibold disponible), jamais 400 : à ces
tailles de titre (--fs-h2, jusqu'à 2.75rem), un serif display en 400
se serait lu comme fin/fragile à côté du reste de la page en 700/800.
Tracking neutre plutôt que négatif : un tracking serré comme sur les
titres sans-serif écrase le dessin d'un serif display et casse le ton
"récit" recherché. em = mot-clé en italique (voir index.html), pour
appuyer le ton narratif sans tout mettre en italique.
Ni l'un ni l'autre de ces 2 titres n'est sur fond sombre dans la
maquette actuelle (why-us : texte marine sur blanc, déjà 17,8:1 ;
vision : texte marine sur --background-light, un blanc teinté à 8% —
donc l'avertissement du brief sur "Fraunces sur fond sombre" ne
s'applique pas ici tel quel. Le contraste texte/fond ne dépend de
toute façon jamais de la graisse de police (seule la lisibilité
perçue en dépend) — 600 plutôt que 400 couvre ce risque perceptif
séparément, voir plus haut. */

#why-us .section-header h2,
.vision-content h2{

font-family:var(--font-narrative);
font-weight:600;
line-height:1.18;
letter-spacing:-.006em;

}

/* --amber-700 sur les deux fonds concernés : 5,8:1 sur --background
(blanc pur, "Le problème") et 5,06:1 sur --background-light
(rgba(51,65,140,.08) sur blanc → effectivement rgb(239,240,246),
"Notre vision") — les deux au-dessus du seuil AA 4,5:1. */
#why-us .section-header h2 em,
.vision-content h2 em{

font-style:italic;
font-weight:400;
color:var(--amber-700);

}

/* ==========================================================
PRODUIT/FONCTIONNEL — Fitz en action + Comment ça fonctionne
Déjà Plus Jakarta Sans via --font-display ci-dessus (aucun override
de font-family nécessaire) : ces 2 titres utilisent encore
--fw-extrabold (800) déclaré dans hero.css/homepage-sections.css,
directement dans le nouveau système, "sans fioriture" comme demandé —
rien à faire de plus ici. Section conservée pour la documentation, pas
pour le code : voir .fitz-demo-intro h2 (css/homepage-sections.css) et
.how-it-works-intro h2 (idem) pour la déclaration de poids réelle.
========================================================== */

/* ==========================================================
KICKER — refonte 2026-08-22 (structure + visuel, audit "trop d'icônes,
trop grandes"). Remplace .section-badge (pastille arrondie + icône
Lucide, css/base.css) partout sur index.html : un simple repère
typographique (trait ambre + libellé capitales) plutôt qu'une pastille
avec pictogramme. .section-badge portait un data-lucide différent par
section (compass/workflow/sparkles/earth...) — 6 icônes rien que pour
ces sur-titres, la moitié du total de la page pour un rôle purement
décoratif (le libellé se suffit à lui-même). .section-badge reste
inchangé dans base.css : scholarships.html/universities.html le
chargent encore tel quel, aucune page hors index.html n'est concernée
par ce remplacement.
========================================================== */

/* Libellé passé de --primary-color (bleu) à --amber-700 le 2026-08-28.
Le repère portait jusqu'ici DEUX accents dans un seul élément de trois
centimètres : un trait ambre suivi d'un libellé bleu. Aucun des deux
ne renforçait l'autre — l'œil lisait deux signaux là où il n'y a qu'un
rôle ("ceci ouvre une section"). Tout passe à l'or, celui du logo et
du CTA principal, désormais la seule couleur d'accent des grandes
surfaces sombres de la page (voir --gradient-deep, css/base.css).
Contraste #8A5D00 sur blanc : 5,8:1, au-dessus du seuil AA — c'est
d'ailleurs la seule valeur ambre que base.css admet comme texte.

Corps resserré (.78 -> .72rem) et interlettrage ouvert (.14 -> .18em) :
à ce format, un sur-titre en capitales se lit mieux petit et aéré que
grand et compact — il doit signaler sans concurrencer le h2 qu'il
annonce. */
.kicker{

display:flex;

align-items:center;

gap:10px;

width:max-content;
max-width:100%;

font-family:var(--font-body);

font-weight:var(--fw-bold);

font-size:.72rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--amber-700);

}

/* ==========================================================
ICÔNE PAR SECTION — remplace la numérotation éditoriale du 2026-08-28
— 2026-09-01
==========================================================
Le repère « 01 —— LE PROBLÈME » (numéro CSS auto-incrémenté) cède la
place à une icône Lucide propre à chaque section, sur demande
explicite de l'utilisateur : plus un seul chiffre sur la page d'accueil
(kickers, ÉTAPE 01/02/03, numéros 01/02/03 de la liste des problèmes),
pour un rendu plus moderne.

Le compteur CSS (main{counter-reset}, :has(){counter-increment}) et son
repli @supports disparaissent avec lui : ils n'existaient que pour
calculer CE numéro, et une icône n'a pas besoin d'ordre — elle porte
son sens par elle-même. Ce qui reste vrai de la note d'origine : le
repère doit continuer à distinguer les sections d'une page longue,
juste par une icône propre à chacune plutôt qu'un rang.

Icône ajoutée dans index.html en premier enfant de chaque .kicker
NUMÉROTÉ (les 5 sections en flux normal — problème/comment ça
fonctionne/catalogue/établissements/vision), une par section, choisie
pour son sens. Elle hérite --amber-700 du kicker via currentColor :
aucune couleur n'est fixée ici. Ciblage par la structure
(.kicker > i, .kicker > svg) et non par une classe posée sur le <i>,
que Lucide ne reporte pas forcément sur le <svg> qui le remplace (voir
DESIGN_SYSTEM.md, section « Icônes »).

Les .kicker--on-dark (démo Fitz, CTA final) ne sont PAS concernés : ils
n'ont jamais porté de chiffre, seulement le trait ambre seul — inchangé
ci-dessous, ce sont les seules règles qui restent de l'ancien système.
========================================================== */

.kicker > i,
.kicker > svg{

width:16px;
height:16px;

flex-shrink:0;

}

/* Sur fond sombre (.fitz-demo, .cta-box) : le bleu --primary-color de la
règle par défaut n'a presque aucun contraste sur --gradient-primary
(bleu sur bleu). Blanc translucide, même valeur que .fitz-demo-intro p/
.cta-box p juste à côté. */
.kicker--on-dark{

color:rgba(255,255,255,.85);

}

/* Pas de numéro sur fond sombre : voir la note de la numérotation plus
haut (la démo Fitz et le CTA final ne sont pas des étapes du récit).
Retour au repère d'origine, le trait ambre seul. */
.kicker--on-dark::before{

content:"";

width:22px;
height:2px;

padding-right:0;

border-radius:1px;

background:var(--amber-500);

}