/* ==========================================================
FITZUNIVERSE - SECTIONS DE LA PAGE D'ACCUEIL
========================================================== */

.section{
/* 110px -> 128px : espacement vertical plus généreux entre sections
(révision structure 2026-08-13), la page ayant gagné 2 sections
(bandeau logos + Fitz en action) qui doivent se lire comme des temps
distincts plutôt que s'enchaîner trop vite. */
padding:128px 0;
}

/* Aligné à gauche plutôt que centré (révision "décalage éditorial") :
casse la symétrie centrée qui rendait les sections why-us/how-it-works/
teaser visuellement plates par rapport au hero, déjà lui-même aligné à
gauche (.hero-content). Cohérent avec cette asymétrie existante plutôt
que d'en inventer une nouvelle. */
.section-header{
max-width:640px;
margin:0 0 64px;
text-align:left;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:20px;
}

/* ==========================================================
TYPOGRAPHIE DE LA PAGE D'ACCUEIL — révision 2026-08-02
L'écart entre les titres et le texte courant était trop faible pour
accrocher : les h2 étaient en graisse 600, à peine au-dessus du gras
d'un paragraphe, et les sur-titres se lisaient comme du texte normal.
La hiérarchie repose maintenant sur trois leviers cumulés — graisse,
approche (letter-spacing) et casse — plutôt que sur la seule taille,
qui restait déjà correcte via --fs-h2.
========================================================== */

.section-badge{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
padding:7px 15px;
border-radius:999px;
background:var(--background-light);
color:var(--primary-color);
/* Sur-titre : petit, gras, espacé et en capitales — il annonce la
section sans concurrencer le h2 qui le suit. */
font-family:var(--font-display);
font-weight:var(--fw-bold);
font-size:var(--fs-badge);
letter-spacing:.08em;
text-transform:uppercase;
/* Les capitales et l'approche élargie rallongent le libellé : sans
ces deux lignes, un sur-titre long ("Un aperçu, pas le catalogue
entier") dépassait la fenêtre à 375px, la pastille étant en
width:max-content. */
max-width:100%;
text-align:left;
}

.section-badge i,
.section-badge svg{
width:15px;
height:15px;
}

.section-header h2{
font-family:var(--font-display);
/* 600 -> 800 : c'est le premier mot que lit un visiteur. */
font-weight:var(--fw-extrabold);
font-size:var(--fs-h2);
line-height:1.12;
letter-spacing:-.028em;
color:var(--primary-dark);
text-wrap:balance;
}

.section-header p{
color:var(--text-light);
font-size:var(--fs-lead);
line-height:var(--lh-relaxed);
max-width:62ch;
text-wrap:pretty;
}

/* Redéfinition de .btn-lg, composant de css/base.css (16px 28px,
1.05rem). Elle est conservée — la page l'utilise telle quelle depuis
longtemps et la modifier déplacerait tous les grands boutons de
l'accueil — mais elle est signalée ici parce qu'elle a coûté du temps :
c'est ELLE, et non la valeur de base.css, qui s'appliquait au CTA du
hero, et css/homepage-sections.css étant chargée après css/hero.css,
toute correction écrite sur un simple `.hero-cta` restait sans effet.
D'où le `.btn.hero-cta` du correctif responsive (voir css/hero.css).
Règle générale : ne pas redéfinir un composant de base.css dans une
feuille de page — c'est la dérive que le système de design nomme.

RETIRÉE avec le lot VITRINE-COMMERCIALE (2026-09-11) : les boutons sont
définis une seule fois, dans css/base.css. Elle ne s'appliquait plus
qu'aux deux boutons du pied d'étapes et au CTA final, à 2 px et
0,03 rem près de la valeur de base — rien à l'écran, un piège de
cascade en moins. */

/* ==========================================================
BLOC MORT, VÉRIFIÉ LE 2026-09-08 — CONSERVÉ HORS PÉRIMÈTRE
Tout ce qui suit jusqu'à .info-card (.trust, .trust-marquee*,
.trust-logo, .trust-stat*, .trust-testimonials, .trust-transparency,
.testimonial-*) ne correspond à aucun élément d'aucun fichier html/js
suivi : la section #trust a quitté l'accueil au lot ACCUEIL-3, et
renderTrustLogos/renderTestimonialCard n'existent plus. Les mentions de
« .teaser » et « #teaser » dans les commentaires ci-dessous visent une
section supprimée au lot ACCUEIL-4 — les lire comme de l'historique.
Non supprimé ici : ce lot avait un périmètre nommé (teaser/assurance/
portes), et ce bloc-ci lui est antérieur. À retirer dans une passe
dédiée, avec les 24 classes listées dans le rapport ACCUEIL-4.

CONFIANCE / PREUVE SOCIALE (bandeau après le hero) — version condensée
Anciennement une section complète (liste intégrale des universités +
compteurs + transparence) : trop lourde si tôt dans le parcours. Réduite
à un badge/titre + un bandeau de logos en défilement continu, une seule
ligne, perçu en entier sans scroll. Compteurs/transparence/témoignages
ont rejoint #teaser plus bas (voir les règles .trust-stat,
.trust-transparency/.testimonial-card, toujours définies ici mais
utilisées dans #teaser désormais — inchangées, seul leur parent HTML a
bougé). Logos calculés en direct depuis Firestore par
js/homepage-teaser.js (renderTrustLogos), jamais codés en dur ici.
========================================================== */

.trust{
/* Bandeau plus compact qu'une section pleine (.section = 128px) :
même mécanisme que .teaser plus haut (override padding-top/bottom
après .section dans la cascade, seule et unique déclaration). 64px ->
80px (audit du 2026-08-13) : alignée sur .teaser pour ne garder que 2
valeurs de rythme vertical sur la page (80/128) plutôt que 3
(64/80/128). */
padding-top:80px;
padding-bottom:80px;
/* --background-light -> --background-soft le 2026-08-28, en même temps
que .teaser juste au-dessus reçoit la même valeur. Depuis la
réorganisation, #teaser et #trust se suivent et défendent le même
argument (voir leurs commentaires dans index.html) : une seule teinte
continue les fait lire comme UN bloc de preuve, là où deux fonds
différents auraient redécoupé en deux ce qu'on venait de réunir. */
background:var(--background-soft);
}

/* Piste en défilement continu : le conteneur masque le débordement et
estompe les bords (fondu plutôt que coupure nette) ; la piste interne,
deux fois plus large que son contenu (2 copies identiques, voir
renderTrustLogos), glisse de -50% pour boucler sans à-coup. Fondu à
plusieurs paliers (au lieu d'une rampe linéaire à 2 points) pour une
courbe plus douce, moins mécanique. */
.trust-marquee{
position:relative;
overflow:hidden;
-webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 3%, #000 10%, #000 90%, rgba(0,0,0,.35) 97%, transparent 100%);
mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 3%, #000 10%, #000 90%, rgba(0,0,0,.35) 97%, transparent 100%);
}

/* Profondeur aux bords : un vrai transform:scale() par logo suivrait sa
position réelle à chaque instant, ce qui suppose de la lire en JS à
chaque frame (coûteux sur un défilement infini, contraire à l'objectif
"léger en performance") — la piste avance par transform CSS, pas par
scroll natif, donc les timelines de scroll CSS (animation-timeline:
view()) ne s'y accrochent pas non plus. À la place : un flou qui
s'intensifie vers les bords (masqué en dégradé, donc progressif, pas
un bandeau flou net) — même principe qu'une profondeur de champ
photo : la mise au point (netteté + pleine opacité) reste au centre,
les bords se "reculent" visuellement sans qu'aucun logo ne bouge plus
vite ni ne change réellement de taille. pointer-events:none pour ne
jamais intercepter le survol qui met la piste en pause ci-dessus. */
.trust-marquee::before,
.trust-marquee::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:16%;
z-index:2;
pointer-events:none;
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
}

.trust-marquee::before{
left:0;
-webkit-mask-image:linear-gradient(to right, #000 0%, transparent 100%);
mask-image:linear-gradient(to right, #000 0%, transparent 100%);
}

.trust-marquee::after{
right:0;
-webkit-mask-image:linear-gradient(to left, #000 0%, transparent 100%);
mask-image:linear-gradient(to left, #000 0%, transparent 100%);
}

.trust-marquee-track{
display:flex;
width:max-content;
animation:trust-marquee-scroll 34s linear infinite;
}

/* Pause au survol : laisse le temps de lire un nom précis sans que la
piste continue de glisser sous le curseur. */
.trust-marquee:hover .trust-marquee-track{
animation-play-state:paused;
}

.trust-marquee-set{
display:flex;
flex-shrink:0;
align-items:center;
gap:40px;
padding-right:40px;
}

/* Nom d'établissement, en frise. Retour au texte nu après un essai en
vignettes encadrées (code pays + pays) le 2026-08-22 : jugé trop lourd,
le bandeau se lisait comme une grille de cartes au lieu d'une frise qui
défile.

L'identité visuelle demandée tient donc à la seule couleur. Avant, ces
noms étaient en --primary-dark à 72% d'opacité, soit un gris-marine à
un cheveu de la couleur du titre juste au-dessus : rien ne les
distinguait du texte de la section. --amber-700 les détache
franchement, et raccorde la frise au trait ambré du kicker et aux
libellés d'étapes plus bas — un même accent pour tout ce qui n'est pas
du texte courant sur cette page.

--amber-700 et pas --amber-500 : c'est du TEXTE sur fond clair, et seul
le 700 y tient le contraste (5,8 / 5,5 / 5,3 selon le fond — voir la
note --amber-* dans css/base.css). Plus d'opacité non plus : elle
abaissait le contraste sans rien apporter. */
.trust-logo{
font-family:var(--font-display);
font-weight:var(--fw-bold);
font-size:1.05rem;
letter-spacing:-.01em;
color:var(--amber-700);
white-space:nowrap;
}

@keyframes trust-marquee-scroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}

/* La règle globale (voir css/animations.css) ramène déjà toute
animation à .01ms sous prefers-reduced-motion, ce qui figerait la piste
à mi-défilement (liste coupée en plein milieu) plutôt que de l'arrêter
proprement à zéro : on la fige explicitement et on rend le survol
inutile en repassant en défilement horizontal manuel. */
@media(prefers-reduced-motion:reduce){

.trust-marquee-track{
animation:none !important;
}

.trust-marquee{
overflow-x:auto;
}

}

.trust-stats{
display:flex;
flex-wrap:wrap;
gap:36px 56px;
margin-bottom:56px;
}

.trust-stat{
display:flex;
flex-direction:column;
gap:4px;
}

/* Encre plutôt que --primary-color (bleu) et chiffres tabulaires, le
2026-08-28. Deux raisons : le bleu était un reste de l'ancienne palette
sur une page qui n'en a plus nulle part ailleurs ; et un grand nombre
posé en encre pleine se lit comme un fait, là où la même valeur en
couleur d'accent se lit comme un argument de vente. tabular-nums aligne
les chiffres d'une colonne à l'autre — sans quoi « 53 » et « 81 » ne
tombent pas sur la même largeur et la rangée paraît bancale. */
.trust-stat strong{
font-family:var(--font-display);
font-weight:var(--fw-extrabold);
font-size:2.4rem;
letter-spacing:-.03em;
font-variant-numeric:tabular-nums;
color:var(--text-color);
}

.trust-stat span{
font-size:.92rem;
color:var(--text-light);
font-weight:500;
}

.trust-testimonials{
margin-top:56px;
padding-top:48px;
border-top:1px solid var(--border-color);
}

.trust-testimonials h3{
font-family:var(--font-display);
font-weight:var(--fw-extrabold);
font-size:var(--fs-h3);
color:var(--primary-dark);
margin-bottom:28px;
}

.testimonial-card{
display:flex;
flex-direction:column;
gap:14px;
}

.testimonial-avatar{
width:40px;
height:40px;
border-radius:var(--radius-full);
background:var(--amber-500);
color:#1A1400;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-display);
font-weight:var(--fw-bold);
font-size:.95rem;
}

.testimonial-card blockquote{
font-size:var(--fs-body);
line-height:var(--lh-relaxed);
color:var(--text-color);
margin:0;
}

.testimonial-card footer strong{
display:block;
color:var(--primary-dark);
font-weight:var(--fw-bold);
}

.testimonial-card footer span{
font-size:.88rem;
color:var(--text-light);
}

@media(max-width:640px){

.trust-marquee-set{
gap:28px;
padding-right:28px;
}

.trust-stats{
gap:28px 40px;
margin-bottom:44px;
}

.trust-stat strong{
font-size:1.7rem;
}

}

/* ==========================================================
FITZ EN ACTION
Carte reprise telle quelle de l'ancien .hero-visual (voir css/hero.css,
commentaire au-dessus de .hero-demo) : sa charte visuelle ne change pas
ici, seul son conteneur passe d'un collage en position absolue à une
section en flux normal, sur le même dégradé bleu (--gradient-primary)
que le hero pour lui garder le fond sombre qui fait ressortir son verre
dépoli blanc.

Fond enrichi (2026-08-13) : --gradient-primary seule lisait comme un
aplat sur une zone aussi grande. Deux voiles neutres (blanc/noir, pas
de nouvelle teinte — voir la règle "un jeu de dégradés limité" en tête
de css/base.css) accentuent l'écart clair/sombre déjà présent entre les
deux coins du 135deg existant, sans le remplacer. Contraste texte
blanc revérifié après coup : le voile clair à 6% au coin opposé au
texte ne l'éclaircit pas assez pour s'approcher du seuil AA. */
/* Base passée à --gradient-deep le 2026-08-22 (même retour utilisateur
que .hero, css/hero.css) : sur une section pleine largeur, le stop clair
de --gradient-primary occupait tout un coin en bleu vif. Les deux voiles
neutres ci-dessus sont conservés tels quels — ils creusent l'écart
clair/sombre de la diagonale, et ressortent d'autant mieux sur une base
sombre. --gradient-deep lui-même recoloré du marine vers un graphite
neutre le 2026-08-28 (voir sa note dans css/base.css) : rien à changer
ici, cette section suit le token. */
.fitz-demo{
background:
linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 32%),
linear-gradient(315deg, rgba(0,0,0,.22) 0%, transparent 48%),
var(--gradient-deep);
color:#fff;
}

.fitz-demo-panel{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:64px;
}

.fitz-demo-intro{
max-width:420px;
display:flex;
flex-direction:column;
gap:18px;
}

.fitz-demo-intro h2{
font-family:var(--font-display);
font-weight:var(--fw-extrabold);
font-size:var(--fs-h2);
line-height:1.15;
letter-spacing:-.026em;
color:#fff;
text-wrap:balance;
}

.fitz-demo-intro p{
font-size:var(--fs-lead);
line-height:var(--lh-relaxed);
color:rgba(255,255,255,.82);
}

/* Neutralise le position:absolute de .hero-demo (css/hero.css, pensé
pour un collage superposé à une photo) : ici la carte est un élément de
flux normal, centrée à côté de son texte d'intro plutôt qu'ancrée à un
coin. position:relative (plutôt que static) + isolation:isolate sert
d'ancre au halo ambré ci-dessous (même technique que .demo-avatar::before,
css/hero.css) sans réintroduire l'ancien collage — right/bottom restent
neutralisés. */
.fitz-demo .hero-demo{
position:relative;
isolation:isolate;
/* Lot DEUX-MOTEURS (2026-09-11) : le fond de la carte est opaque à 97 %
(css/hero.css) — le backdrop-filter hérité n'a aucun effet visible et
coûte un calque composé de plus sous WebKit. */
backdrop-filter:none;
-webkit-backdrop-filter:none;
right:auto;
bottom:auto;
width:100%;
max-width:340px;
flex-shrink:0;
}

/* Touche d'ambre — seul accent hors bleu de la section, en halo flouté
derrière la carte plutôt qu'en surface pleine (voir --amber-500 dans
css/base.css : réservé aux surfaces, jamais au texte). z-index:-1 reste
sous la carte grâce à l'isolation ci-dessus ; inset largement négatif +
flou pour qu'il déborde en douceur au lieu de s'arrêter net à un bord. */
.fitz-demo .hero-demo::after{
content:"";
position:absolute;
inset:-70px;
z-index:-1;
/* Sans filter:blur (lot DEUX-MOTEURS) : voir .fitz-surface::after dans
css/base.css, même recette, même raison. */
background:radial-gradient(circle, rgba(233,163,25,.38) 0%, rgba(233,163,25,.26) 24%, rgba(233,163,25,.14) 45%, rgba(233,163,25,.05) 62%, transparent 78%);
pointer-events:none;
}

@media(max-width:640px){

.fitz-demo-panel{
gap:36px;
}

.fitz-demo .hero-demo{
padding:15px;
}

.fitz-demo .hero-demo::after{
inset:-36px;
}

}

/* ==========================================================
POURQUOI NOUS CHOISIR
========================================================== */

.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:32px;
}

/* #why-us .cards-grid + le décalage vertical alterné qui l'accompagnait
ont disparu avec la grille à cartes (refonte 2026-08-22) : #why-us
utilise désormais .problem-list, une liste au trait qui n'a plus besoin
de ce traitement. Le bento de .steps qui suivait ici (1re étape en
bannière pleine largeur, "Préparer"/"Suivre" en duo dessous) a disparu
le même jour avec la grille de 3 cartes elle-même — voir .steps-card
plus haut, une timeline à carte unique qui n'a plus besoin de mise en
page par palier selon la largeur d'écran. */

/* CE COMMENTAIRE N'EST PLUS VRAI (relevé le 2026-09-08, non corrigé
au-delà de cette note). Il disait que .info-card / .cards-grid étaient
gardées pour les témoignages rendus par renderTestimonialCard : cette
fonction n'existe plus dans js/homepage-teaser.js, et .info-card comme
.cards-grid n'apparaissent dans AUCUN fichier html/js suivi. Elles font
partie des 24 classes mortes de cette feuille listées dans le rapport
du lot ACCUEIL-4 — laissées en place parce qu'elles sont antérieures à
ce lot, pas parce qu'elles servent encore.
La .assurance-list que ce commentaire citait est, elle, partie avec la
section « Comment ce catalogue est fait » le 2026-09-08. */
.info-card{

/* Tokens plutôt que valeurs en dur (2026-08-28) : le filet était
rgba(226,232,240,.8), l'ancien slate FROID, qui ressortait en gris
bleuté sur les neutres papier. */
background:var(--background);

border:1px solid var(--border-color);

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

padding:26px 24px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

position:relative;

overflow:hidden;

}


.info-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

border-color:rgba(26,23,20,.18);

}

.info-card h3{

font-family:var(--font-display);
font-size:var(--fs-h3);

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

letter-spacing:-.015em;

margin-bottom:8px;

color:var(--text-color);

}


.info-card p{

font-size:var(--fs-body);

line-height:var(--lh-relaxed);

color:var(--text-light);

}

/* ==========================================================
LE PROBLÈME — liste au trait (refonte 2026-08-22, icône 2026-09-01)
Remplace la grille de 3 cartes à pastille+icône (.cards-grid/.info-card/
.card-icon, toujours définies plus haut pour les témoignages) : une
liste au trait plutôt que 3 pictogrammes de plus. Change la structure
de la section, pas seulement son habillage — c'est aussi une réponse à
la consigne d'aller plus loin que l'habillage visuel seul.

Le repère de chaque ligne était un numéro fantôme (01/02/03, --text-
decorative) plutôt qu'un pictogramme — décision du 2026-08-22 listée
juste au-dessus. Sur demande explicite du 2026-09-01 (retirer les
chiffres de toute la page d'accueil), ce numéro cède à son tour la
place à une icône Lucide propre à chaque ligne, dans le même ton
décoré/non-textuel : --text-decorative reste le bon token (voir sa
note dans css/base.css — réservé au non-textuel dont le sens est déjà
donné à côté, exactement le cas ici). Ciblage par la structure
(.problem-item > i, .problem-item > svg), pas par une classe posée sur
le <i> — voir DESIGN_SYSTEM.md, section « Icônes ». */

.problem-list{

border-top:1px solid var(--border-color);

}

.problem-item{

display:grid;

grid-template-columns:32px 1fr;

gap:24px;

align-items:start;

padding:36px 0;

border-bottom:1px solid var(--border-color);

}

.problem-item > i,
.problem-item > svg{

width:28px;
height:28px;

margin-top:2px;

color:var(--text-decorative);

flex-shrink:0;

}

.problem-item h3{

font-family:var(--font-display);
font-size:var(--fs-h3);

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

letter-spacing:-.015em;

margin-bottom:8px;

color:var(--text-color);

}

.problem-item p{

font-size:var(--fs-body);

line-height:var(--lh-relaxed);

color:var(--text-light);

max-width:58ch;

}

@media(max-width:640px){

.problem-item{

grid-template-columns:24px 1fr;

gap:16px;

padding:26px 0;

}

.problem-item > i,
.problem-item > svg{

width:22px;
height:22px;

}

}

.why-us-bridge{

max-width:640px;

margin:64px auto 0;

text-align:center;

font-size:var(--fs-lead);

line-height:var(--lh-relaxed);

color:var(--text-light);

}

/* --amber-700 plutôt que --text-color (retour utilisateur 2026-08-22 :
"les phrases d'accroche/conclusion doivent avoir une couleur différente
du noir") — fait aussi écho au mot-clé <em> ("réellement") du h2 juste
au-dessus dans la même section, même teinte ambrée. 5,8:1 sur
--background : passe l'AA. */
.why-us-bridge strong{

color:var(--amber-700);

}


/* ==========================================================
COMMENT ÇA FONCTIONNE
========================================================== */

.how-it-works{

background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);

}

/* Intro texte + photo côte à côte (international-students.jpg) — la
grille .steps plus bas reste pleine largeur et inchangée : un
accompagnement visuel pour la section, pas un fond derrière les
cartes. Remplace hero-bg.jpg (2026-08-13) : hero-bg.jpg reste utilisée
ailleurs (scholarships.js, voir GENERIC_FALLBACK_IMAGES) donc jamais
supprimée, juste retirée d'ici. */
.how-it-works-intro{
display:flex;
align-items:center;
justify-content:space-between;
gap:56px;
margin-bottom:64px;
}

.how-it-works-intro .section-header{
margin-bottom:0;
flex:1 1 380px;
}

.how-it-works-photo{
flex:0 0 auto;
width:400px;
max-width:100%;
}

.how-it-works-photo img{
display:block;
width:100%;
height:300px;
object-fit:cover;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);
}

@media(max-width:900px){

.how-it-works-intro{
flex-direction:column;
align-items:stretch;
gap:32px;
margin-bottom:48px;
}

/* Sans cette ligne, le `flex:1 1 380px` déclaré plus haut continue de
s'appliquer — mais l'axe principal vient de basculer en colonne, donc
les 380px cessent d'être une LARGEUR pour devenir une HAUTEUR. Mesuré
sur un écran de 390px : le titre et son paragraphe occupent 205px, et
les 163px restants s'affichaient en blanc entre « Trois étapes, et Fitz
à vos côtés sur chacune. » et la carte des étapes. Un demi-écran de
vide au milieu de la section qui explique le produit.

Le piège est propre au passage row → column : la même déclaration est
correcte au-dessus de 900px et fausse en dessous. (2026-08-27) */
.how-it-works-intro .section-header{
flex:0 0 auto;
}

.how-it-works-photo{
width:100%;
order:-1;
}

.how-it-works-photo img{
height:220px;
}

}

/* Carte unique regroupant les 3 étapes (refonte 2026-08-22, remplace
la grille de 3 cartes .step — retour utilisateur : 3 CTA identiques
répétés faisaient doublon). .steps-card porte l'habillage "carte" que
chaque .step portait individuellement avant ; les colonnes n'ont plus
de fond ni d'ombre propres, seulement un filet de séparation. */
.steps-card{

/* Tokens plutôt que valeurs en dur (2026-08-28) : le filet était
rgba(226,232,240,.8), l'ancien slate FROID, qui ressortait en gris
bleuté sur les neutres papier. */
background:var(--background);

border:1px solid var(--border-color);

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

padding:40px 40px 32px;

box-shadow:var(--shadow-sm);

margin-top:20px;

}

/* Trois colonnes séparées d'un filet vertical, à la place de la
timeline verticale à repères ronds de la première version (rejetée le
même jour : "ces ronds ne me plaisent pas, cette structure et ce bleu
foncé me déplaisent").

Ce qui change, et pourquoi :
- plus aucune pastille — l'étape est signalée par un libellé
  typographique + un trait court, conformément à la règle « Icônes »
  de DESIGN_SYSTEM.md (aucun conteneur, la couleur porte le sens) ;
- structure horizontale : les 3 étapes se lisent d'un coup d'œil au
  lieu de s'empiler, et la carte cesse d'être une longue colonne ;
- l'accent passe du bleu foncé à l'ambre, en petite touche seulement
  (libellé + trait de 34px), ce qui reste dans la règle --amber-500
  de css/base.css et fait écho à la surface Fitz.

Les filets sont portés par border-left des colonnes 2 et 3 plutôt que
par des séparateurs dédiés : rien à ajouter au DOM, et ils
disparaissent d'eux-mêmes quand la grille repasse sur une colonne. */
.steps-cols{

display:grid;

grid-template-columns:repeat(3,1fr);

}

.step-col{

padding:0 28px;

border-left:1px solid rgba(226,232,240,.9);

}

.step-col:first-child{

padding-left:0;

border-left:0;

}

.step-col:last-child{

padding-right:0;

}

/* « Étape 0N » + le trait ambre remplacés par une icône, une par étape
(Trouver/Préparer/Suivre) — demande explicite du 2026-09-01 de retirer
les chiffres de la page d'accueil. --amber-700 et non --amber-500 :
l'icône reprend la couleur que portait le libellé « Étape 0N », pas
celle du trait (voir la note --amber-* dans css/base.css — le 500 est
réservé aux surfaces, le 700 est le seul à tenir le contraste en usage
texte/icône sur fond clair). Ciblage par la structure (.step-col > i,
.step-col > svg), pas par une classe posée sur le <i> — voir
DESIGN_SYSTEM.md, section « Icônes ». */
.step-col > i,
.step-col > svg{

display:block;

width:26px;
height:26px;

margin-bottom:16px;

color:var(--amber-700);

}

.step-col h3{

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

font-size:var(--fs-card-title);

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

letter-spacing:-.015em;

margin-bottom:8px;

color:var(--text-color);

}

.step-col p{

font-size:var(--fs-small);

line-height:var(--lh-relaxed);

color:var(--text-light);

}

/* Un seul CTA pour les 3 étapes plutôt qu'un lien répété sous chaque
carte (retour utilisateur 2026-08-22) — séparé de la liste par un
filet, comme le pied d'un formulaire plutôt que la suite d'une étape
en particulier. */
/* Deux boutons depuis le 2026-09-08 (voir le commentaire au-dessus de
.steps-footer dans index.html) : le pied était un bloc simple portant
un seul .btn en inline-flex, donc collé à gauche. Le flex reprend
exactement cet alignement — la position du bouton primaire ne bouge
pas — et le flex-wrap fait passer le secondaire sur une seconde ligne
dès que les deux ne tiennent plus.

justify-content:flex-start est ÉCRIT, pas laissé au défaut (2026-09-08,
lot 5). La valeur calculée d'un conteneur flex qui n'a rien déclaré est
« normal », pas « flex-start » : les deux se placent pareil, mais on ne
peut pas vérifier « normal » — un contrôle qui lit justify-content ne
sait pas distinguer « voulu » de « jamais écrit ». La déclarer rend la
règle lisible à la mesure autant qu'au rendu.

gap : 18px de rang au lieu de 14. La cible était « 16px au minimum,
mesurés » ; posé à 16 tout juste, l'écart réellement mesuré entre les
deux boîtes tombait à 15,52px. Ce n'est pas le gap qui se perd — un
témoin flex à row-gap:16px posé dans la même page mesure 15,996 — mais
la boîte des boutons : leur bordure d'un pixel se résout à 0,641px dans
ce rendu, la hauteur de ligne du flex s'aligne sur des pixels
d'appareil, et la demi-différence est prise sur l'écart visible, en
haut comme en bas. 18 laisse la marge nécessaire pour que la valeur
mesurée reste au-dessus de 16 quel que soit l'arrondi du rendu. */
.steps-footer{

margin-top:4px;

padding-top:28px;

border-top:1px solid rgba(226,232,240,.8);

display:flex;

flex-wrap:wrap;

justify-content:flex-start;

align-items:center;

gap:18px 20px;

}

/* MÊME BOÎTE, PAS SEULEMENT MÊME GABARIT (2026-09-08, lot 5).
btn-lg a mis les deux boutons au même rembourrage et à la même taille
de texte, et il restait tout de même 2px d'écart de hauteur : .btn-secondary
porte `border:1px solid var(--border-color)` (base.css), .btn-primary
n'a aucune bordure. Deux fois un pixel, en haut et en bas.

Une bordure transparente de même épaisseur sur le primaire remet les
deux dans la même boîte. Elle ne se voit pas — le fond du bouton passe
dessous, background-clip valant border-box par défaut — et elle est
préférable à un min-height, qui aurait figé une hauteur calculée pour
une police donnée et se serait décalé au premier changement de
libellé ou de taille de texte.

Depuis le lot VITRINE-COMMERCIALE (2026-09-11), cette bordure
transparente est portée par .btn lui-même dans css/base.css, pour
toutes les variantes : la règle locale est partie avec. */

/* Le doublet .steps-cta-text-full / .steps-cta-text-short a disparu le
2026-09-01 : le bouton portait "Commencer mon diagnostic gratuit" (33
caractères) qui débordait sous 640px, d'où un second libellé court
réservé à ce palier. Le libellé est désormais "Commencer
gratuitement" (choix utilisateur du 2026-09-01) — un seul geste ne
méritant qu'un seul libellé. Il fait 22 caractères, contre 23 pour la
formulation précédente sur laquelle la mesure ci-dessous a été faite :
elle reste donc valable telle quelle.

Un libellé unique ne suffisait PAS à lui seul : mesuré à 360px, le
texte réclamait 303px (233 de texte + 60 de rembourrage + 10 de gap)
pour 281px disponibles, et le bouton repassait sur deux lignes — le
bug même que le doublet évitait. .btn étant en
inline-flex/align-items:center, la flèche se retrouve alors centrée
sur la hauteur des DEUX lignes et flotte à mi-hauteur, détachée du
texte. Le rembourrage réduit ci-dessous + white-space:nowrap tiennent
le libellé sur une ligne jusqu'à 320px inclus (vérifié à 320, 360 et
375px : bouton 263px, hauteur 56px, aucun débordement de page).
Si un libellé plus long revient ici un jour, c'est cette mesure-là
qu'il faut refaire — pas seulement compter les caractères. */

.steps-cta-arrow{

display:inline-block;

transition:transform .25s ease;

}

.steps-cta:hover .steps-cta-arrow{

transform:translateX(4px);

}

/* ==========================================================
FONCTIONNALITÉS
========================================================== */

/* Bug corrigé le 2026-08-22 : ce commentaire contenait un astérisque
collé à une barre oblique en plein milieu du texte, juste après
"pillar-group" — cette paire de deux caractères ferme un commentaire
CSS dès qu'elle apparaît, où qu'elle soit. Tout ce qui suivait jusqu'au
prochain "fin de commentaire" légitime (soit toute la phrase listant
les classes mortes) se retrouvait donc interprété comme du vrai code
CSS invalide. Un sélecteur invalide n'est pas juste ignoré : toute la
RÈGLE qui suit jusqu'à la prochaine accolade fermante saute avec lui —
ici .feature-link{...} tout entier, resté sans effet dans tous les
navigateurs depuis sa création, bien avant cette refonte (vérifié : le
bug était déjà présent avant le 2026-08-22).
.pillars-grid/.pillar-group/.features-grid/.feature-card(-disabled)/
.feature-link-soon retirés le 2026-08-07 : confirmés morts (aucune
référence dans index.html ni scholarships.html, les deux pages qui
chargent ce fichier, ni dans aucun .js du dépôt) — restes de l'ancienne
section "Fonctionnalités" d'avant sa fusion avec "Comment ça
fonctionne". .feature-link lui-même est parti le 2026-08-22 : les 3
.step qui le réutilisaient depuis cette fusion sont devenues .step-col
(carte unique à CTA unique, voir .steps-card plus haut) — plus aucune
référence dans index.html ni scholarships.html. */

/* ==========================================================
VISION
========================================================== */

/* --background-light -> --background-alt le 2026-08-28.
--background-light vaut rgba(51,65,140,.08), c'est-à-dire un voile du
bleu #33418C : après le passage des grandes surfaces sombres au
graphite (--gradient-deep) et du sur-titre à l'or, cette section
restait la SEULE surface teintée de bleu de toute la page d'accueil —
un reste isolé plutôt qu'un choix. --background-alt (#F1F5F9) est le
neutre déjà prévu par base.css pour ce rôle, et se détache du
--background-soft de #teaser/#trust juste au-dessus.

Override local volontaire : --background-light est consommé par tout
l'espace admin et d'autres pages, le token lui-même n'est donc pas
touché ici. */
.vision{
background:var(--background-alt);
}

.vision-container{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:60px;
align-items:center;
}

.vision-content{
display:flex;
flex-direction:column;
gap:20px;
align-items:flex-start;
}

.vision-content h2{
font-family:var(--font-display);
font-weight:var(--fw-extrabold);
font-size:var(--fs-h2);
line-height:1.12;
letter-spacing:-.028em;
color:var(--primary-dark);
text-wrap:balance;
}

.vision-content p{
font-size:var(--fs-lead);
color:var(--text-light);
line-height:var(--lh-relaxed);
}

.vision-illustration{
position:relative;
display:flex;
justify-content:center;
padding-bottom:70px;
}

.vision-photo{
width:100%;
max-width:420px;
aspect-ratio:4/5;
object-fit:cover;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
filter:saturate(1.08) contrast(1.02);
}

.vision-card{
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:calc(100% - 20px);
max-width:340px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.6);
border-radius:var(--radius-lg);
padding:22px 20px;
box-shadow:var(--shadow-lg);
text-align:center;
}

.vision-card > i,
.vision-card > svg{
width:30px;
height:30px;
color:var(--primary-color);
margin:0 auto 14px;
}

.vision-card h3{
font-family:var(--font-display);
font-weight:600;
font-size:var(--fs-h3);
letter-spacing:var(--ls-snug);
margin-bottom:8px;
color:var(--text-color);
}

.vision-card p{
font-size:var(--fs-small);
color:var(--text-light);
line-height:var(--lh-relaxed);
}

/* ==========================================================
CTA
========================================================== */

/* Photo de remise de diplômes en plein cadre, sans voile bleu/marine :
la lisibilité du texte vient d'un panneau verre dépoli centré
(.cta-box-panel) plutôt que d'assombrir toute la photo, pour que la
photo reste réellement visible sur les bords. img (pas de background
CSS) depuis l'audit du 2026-08-13 : srcset, comme .hero-visual-bg et
.footer-photo-img. */
.cta-box{
position:relative;
border-radius:var(--radius-lg);
padding:40px 22px;
display:flex;
justify-content:center;
overflow:hidden;
}

.cta-box-bg{
position:absolute;
inset:0;
z-index:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center 42%;
}

.cta-box-panel{
position:relative;
z-index:1;
max-width:660px;
width:100%;
background:rgba(14,14,16,.62);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.14);
border-radius:calc(var(--radius-lg) - 6px);
padding:56px 40px;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
text-align:center;
color:#fff;
box-shadow:0 24px 60px rgba(0,0,0,.35);
}

.cta-box h2{
font-family:var(--font-display);
font-weight:var(--fw-extrabold);
font-size:var(--fs-h2);
line-height:1.12;
letter-spacing:-.028em;
max-width:680px;
text-wrap:balance;
/* La règle globale h1-h6 (css/base.css) cible h2 directement et gagne
sur le color:#fff hérité de .cta-box (une valeur héritée perd toujours
face à une règle déclarée sur l'élément, quelle que soit sa spécificité)
— sans ce color explicite le titre restait bleu marine sur son propre
fond bleu marine, quasi illisible. Même chose pour .cta-box p ci-dessous. */
color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2);
}

.cta-box p{
font-size:var(--fs-lead);
max-width:600px;
opacity:.92;
line-height:var(--lh-relaxed);
color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.25);
}

.cta-buttons{
display:flex;
gap:16px;
flex-wrap:wrap;
justify-content:center;
margin-top:8px;
}

/* Flèche du CTA « Choisir ma formule » (passe mobile 2026-09-01) :
sans taille explicite, un data-lucide sort à 24px — la classe exacte
de dérive relevée à l'audit « icônes trop grandes » du 2026-08-22.
Ciblage par la structure, règle « Icônes » de DESIGN_SYSTEM.md. */
.cta-buttons .btn > i,
.cta-buttons .btn > svg{
width:18px;
height:18px;
flex-shrink:0;
}

/* Refonte 2026-08-22 : 3 chips verre + icône (shield-check/landmark/bot)
→ une ligne de texte séparée par des traits verticaux. Le fond du bloc
CTA est sombre et déjà chargé (photo + panneau verre) ; ces 3 pastilles
supplémentaires en rajoutaient sans que l'icône n'apporte rien que le
libellé ne dise déjà. */
/* LES FILETS SONT PARTIS (2026-09-08, lot 5).
Ils étaient posés en border-left sur chaque enfant sauf le premier —
« premier » au sens du DOM, pas au sens de la ligne affichée. Dès que
les trois mentions ne tenaient plus sur une ligne, l'élément qui
passait à la ligne suivante emportait son filet et l'affichait seul
devant lui, en tête de ligne. Constaté à 1366 comme à 390.

Aucune correction n'était possible en gardant le principe : CSS ne sait
pas dire « premier de sa ligne ». :first-child, :nth-child, les
sélecteurs de fratrie raisonnent tous sur le DOM ; seul le moteur de
rendu sait où la ligne s'est coupée, et il ne l'expose pas. Toute
variante à base de filets aurait donc reproduit le même défaut à une
largeur non testée — ce qui est exactement ce qui vient de se passer.

Le séparateur devient donc de l'espace : gap 22px en colonne. L'espace
se recalcule tout seul à chaque retour à la ligne, sans jamais laisser
de trace en tête de ligne.

Le rang vaut 10px et non 8. 8px était le plancher visé, mais posé tel
quel il se mesurait à 7,99 : la mise en page fractionnaire rend
toujours un cheveu de moins que la valeur déclarée (même effet que sur
.steps-footer, voir sa note). Une valeur de plancher ne doit pas être
posée à l'exact : elle doit être dépassée. */
.cta-trust{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 22px;
margin-top:8px;
font-size:.92rem;
color:rgba(255,255,255,.82);
}

.cta-trust > div{
padding:4px 0;
}

/* ==========================================================
FOOTER — parti dans css/pied-de-page.css (lot LANGAGE, 2026-09-10)
==========================================================
Le pied de page est un composant partagé (js/pied-de-page.js) posé
sur toutes les pages publiques ; il charge sa propre feuille. Ne rien
remettre ici : cette feuille n'est chargée que par index.html et
scholarships.html. */

.social-links{
display:flex;
gap:10px;
margin-top:14px;
}

.social-links a{
width:34px;
height:34px;
border-radius:var(--radius-sm);
background:rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
transition:background .2s ease, transform .2s ease;
}

/* Survol en bleu marine (le "Scholar" du logo) plutôt qu'un ambre sur
ambre à peine visible, maintenant que le fond du footer est ambre. */
.social-links a:hover{
background:var(--primary-dark);
transform:translateY(-2px);
}

.social-links a:hover svg{
color:#fff;
}

.social-links svg{
width:18px;
height:18px;
color:rgba(255,255,255,.85);
}

/* ==========================================================
RESPONSIVE — SECTIONS
========================================================== */

@media(max-width:992px){

.section{
padding:92px 0;
}

.vision-container{
grid-template-columns:1fr;
text-align:center;
}

.vision-content{
align-items:center;
}

}

/* Rythme vertical mobile (passe mobile 2026-09-01, lot 3) — cette
feuille redéfinit .section APRÈS base.css, son palier ≤576px doit donc
vivre ici aussi (voir la note du même jour dans base.css) : 128→92px
au palier 992 ci-dessus, puis 64px sous 576px, le pas des sites
mobiles actuels. */
@media(max-width:576px){

.section{
padding:64px 0;
}

}

/* .steps-card est une seule carte en flux normal (plus une grille à
1/2/3 colonnes) : elle n'a plus besoin de paliers de mise en page par
largeur d'écran comme l'ancienne grille .steps ci-dessus dans
l'historique git — juste moins de padding sous 640px, où la carte
touche presque les bords du viewport. */

@media(max-width:1023px){

/* Sous 1024px, 3 colonnes de texte deviennent trop étroites : on
repasse en pile. Les filets verticaux disparaissent avec elles et
sont remplacés par un filet horizontal entre les étapes, pour garder
la séparation sans la faire tourner à 90°. */
.steps-cols{
grid-template-columns:1fr;
}

.step-col{
padding:26px 0 0;
border-left:0;
border-top:1px solid rgba(226,232,240,.9);
}

.step-col:first-child{
padding-top:0;
border-top:0;
}

}

@media(max-width:640px){

.steps-card{
padding:28px 20px 24px;
}

/* Voir le commentaire de .steps-cta-arrow plus haut : c'est ce couple
qui remplace l'ancien second libellé court. */
.steps-cta{
white-space:nowrap;
}

/* PLEINE LARGEUR UNE FOIS EMPILÉS (2026-09-08, lot 5).
Sous 640px les deux boutons passent l'un sous l'autre. Laissés à leur
largeur propre, ils donnaient deux pastilles de 276 et 313px calées à
gauche : deux bords droits différents à 37px l'un de l'autre, ce qui se
lit comme un défaut de gabarit et non comme un choix. En pleine largeur
ils partagent leurs DEUX bords, le gauche comme le droit — l'alignement
devient vérifiable au lieu d'être approximatif — et c'est la forme que
prennent déjà les gestes principaux du site sur téléphone.

Le rembourrage horizontal retombe à 16px (il valait 30 via .btn-lg) :
le libellé le plus long réclame ~253px, et 318 - 2×30 n'en laissait que
258 — cinq pixels de marge, donc un retour à la ligne à la première
police un peu plus large. À 16px la réserve passe à ~33px. */
.steps-footer .btn{
flex:1 1 100%;
padding-left:16px;
padding-right:16px;
}

/* LES TROIS MENTIONS S'EMPILENT SUR UN SEUL BORD (2026-09-08, lot 5).
Elles ne tiennent de toute façon pas côte à côte à cette largeur : en
flex-wrap + justify-content:center, chacune finissait seule sur sa
ligne et se centrait sur SA propre largeur — trois bords gauches à
105, 46 et 86px, un escalier que rien ne justifiait puisque les trois
disent la même sorte de chose.

Le passage en colonne + align-items:flex-start leur donne le bord
gauche du panneau, donc un seul. text-align:left est nécessaire en
plus : sans lui les boîtes seraient alignées mais leur TEXTE resterait
centré (hérité de .cta-box-panel), et l'escalier reviendrait à
l'identique, un cran plus bas.

Assumé : à cette largeur ces trois lignes ne suivent plus le centrage
du reste du panneau. Trois phrases empilées de longueurs différentes ne
se lisent pas comme de la prose centrée mais comme une liste, et une
liste s'aligne. */
.cta-trust{
flex-direction:column;
align-items:flex-start;
text-align:left;
}

}

@media(max-width:640px){

/* ==========================================================
LIBELLÉS DE BOUTON COUPÉS EN DEUX SUR TÉLÉPHONE (2026-08-23)
==========================================================
« Choisir ma formule » — trois mots — passait à la ligne à
l'intérieur de son bouton sur un écran de 360px. Non pas faute de
place à l'écran, mais parce que quatre rembourrages pensés
séparément pour le bureau s'additionnaient :

   marge du conteneur   14 x 2
   .cta-box             26 x 2
   .cta-box-panel       40 x 2
   .btn-lg              30 x 2   (28px + la bordure)
   ------------------------------
   221px de rembourrage sur 360px d'écran

Il restait 139px pour un libellé qui en réclame 160. Aucun de ces
quatre chiffres n'est aberrant pris isolément — c'est leur somme
qui l'est, et c'est pourquoi le défaut ne se voit qu'en mesurant la
chaîne entière plutôt qu'un élément.

Les valeurs ci-dessous ramènent la somme à 165px, soit 195px utiles.
Le rembourrage VERTICAL, lui, est conservé : c'est lui qui donne au
bloc son air de respirer, et il ne coûte rien en largeur. */

.cta-box{
padding:44px 14px;
}

.cta-box-panel{
padding:40px 18px;
}

}

/* ==========================================================
RECADRAGE DES GRANDES CARTES SUR TÉLÉPHONE (2026-09-01, lot 5)
==========================================================
Retour utilisateur, captures à l'appui : « le recadrage des cartes
pour une compatibilité avec l'écran du téléphone tout en
redimensionnant les contenus ». Deux blocs de l'accueil débordaient
du cadre d'un écran de téléphone :

— VISION : .vision-photo est un portrait 4/5 (420px max au bureau,
posé à côté du texte). En colonne pleine largeur, 347px de large
donnaient ~434px de photo + la carte-citation par-dessus : un écran
entier pour une illustration. Recadrée en 4/3 (~260px) — object-fit:
cover recadre dans l'image, rien n'est déformé — et la carte resserre
son icône et ses rembourrages d'un cran.

— CTA FINAL : le panneau verre gardait ses rembourrages de bureau à
l'intérieur d'une section déjà rembourrée — deux cadres additionnés
poussaient le bloc au-delà d'un écran. Les deux se resserrent ; le
contenu (kicker, titre, bouton, mentions) tient désormais avec la
photo visible autour, comme au bureau. */
@media(max-width:576px){

.vision-photo{

aspect-ratio:4/3;

max-width:none;

}

/* La carte-citation est calée en bottom:0 de l'illustration, dont le
padding-bottom règle donc la part de carte qui DÉBORDE sous la photo.
Avec 70px (valeur bureau, pensée pour une photo de ~520px), la carte
recouvrait presque toute la photo recadrée en 4/3 : 120px la font
chevaucher le bord bas sur ~60px seulement — la photo reste le sujet,
la carte reste « posée dessus ». */
.vision-illustration{

padding-bottom:120px;

}

.vision-card{

padding:18px 16px;

}

.vision-card > i,
.vision-card > svg{

width:24px;

height:24px;

margin-bottom:10px;

}

.cta-box{

padding:22px 12px;

}

.cta-box-panel{

padding:34px 18px;

}

}



/* La bande « le catalogue en chiffres » (.chiffres*) est partie avec le
lot VITRINE-COMMERCIALE (2026-09-11) : elle répétait les compteurs du
hero. Le bas de page est un appel à l'action (.cta-steps, plus bas). */

/* ==========================================================
LE BLOC DE CONCLUSION (lot VITRINE-COMMERCIALE, 2026-09-11)
==========================================================
À la place de la bande de chiffres : un titre porteur, trois étapes
courtes, UN bouton principal vers le diagnostic gratuit et un lien vers
les formules. Le panneau perd son backdrop-filter (flou de 16 px :
même famille de défauts WebKit que le lot DEUX-MOTEURS) au profit d'un
voile d'encre plus opaque — le contraste ne dépend plus de ce qu'il y
a derrière. Blanc sur rgba(14,14,16,.78) au-dessus de la photo la plus
claire : ≥ 9:1 mesuré. */
.cta-box-panel{
background:rgba(14,14,16,.78);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

/* Trois lignes alignées sur un seul bord gauche, et le bloc centré dans
le panneau : en rangée, les trois libellés de longueurs différentes
faisaient un escalier une fois passés à la ligne (même leçon que
.cta-trust, lot ACCUEIL-5). */
.cta-steps{
list-style:none;
margin:6px auto 0;
padding:0;
display:flex;
flex-direction:column;
align-items:flex-start;
width:max-content;
max-width:100%;
gap:12px;
text-align:left;
}

.cta-steps li{
display:flex;
align-items:center;
gap:10px;
font-size:var(--fs-body);
font-weight:600;
color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* Le numéro : un disque ambre, chiffre encre (7,8:1). */
.cta-step-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:999px;
background:#E9A319;
color:#211D18;
font-family:var(--font-display);
font-size:.86rem;
font-weight:800;
flex-shrink:0;
}

/* Le lien vers les formules, sur le panneau sombre : crème souligné,
ambre au survol. Le niveau « lien » de css/base.css, retinté pour le
fond d'encre. */
.btn-link--on-dark{
color:#F5F1E8;
}

.btn-link--on-dark:hover,
.btn-link--on-dark:focus-visible{
color:#F2B640;
}

@media(max-width:640px){
.cta-steps{
flex-direction:column;
align-items:flex-start;
gap:10px;
}
.cta-buttons .btn{
flex:1 1 100%;
}
}