/* ==========================================================
FITZUNIVERSE — ÉCRAN D'INTRODUCTION DU TEST D'ÉLIGIBILITÉ
Repose sur les variables et le reset définis dans css/base.css
(même palette, même typographie, même système que index.html
et eligibility-questions.html)
========================================================== */

/* Fond navy (audit du 2026-08-15) : reprend l'identité du hero
d'index.html — --gradient-primary est déjà ce que .hero (css/hero.css)
utilise comme fond de repli sous sa photo, le même bleu→marine sans
photo ni overlay en couches convient donc directement ici, aucune
nouvelle valeur. Remplace --gradient-hero (fond clair par défaut de
body, css/base.css) qui donnait à ces 2 pages un ton "app générique"
déconnecté du reste de la marque. .card garde son fond clair
(var(--background)) : seul l'arrière-plan de la page change, jamais la
lisibilité du contenu du questionnaire. L'accent ambré du hero, un
temps limité à #startButton (--amber-500) pour éviter de réintroduire
un blob radial, est revenu en halo décoratif sur .container le
2026-08-15 (même jour, demande explicite malgré l'audit initial) —
voir le commentaire sur .container::after plus bas. */
body{

min-height:100vh;

display:flex;

/* "safe center" et non "center" seul : quand la carte est plus haute
que la fenêtre (petit écran, zoom, question à longue liste d'options),
un centrage classique la fait déborder des DEUX côtés — et le haut,
sorti par le bord supérieur, devient inatteignable au défilement. Le
mot-clé safe bascule automatiquement en alignement haut dans ce cas.
La ligne "center" nue juste avant sert de repli : un navigateur qui ne
comprend pas "safe" ignore la seconde déclaration et garde la
première. */
align-items:center;

align-items:safe center;

justify-content:center;

/* Le halo ambré (.container::after / .container-wrap::after) est posé
avec inset:-70px, donc il déborde volontairement de 70px hors de la
carte pour se fondre en douceur. Sans ce clip, ces 70px comptaient dans
la largeur de défilement et provoquaient une barre horizontale de ~50px
sur une page qui n'a rien à faire défiler latéralement (mesuré :
scrollWidth 1330 pour un viewport de 1280). On ne coupe que la part
hors écran, le halo visible est intact. */
overflow-x:hidden;

padding:40px 20px;

/* box-sizing:border-box (css/base.css) fait entrer le padding DANS les
100vh du min-height : la hauteur réellement offerte au contenu n'est
donc pas 100vh mais 100vh - 80px. Une carte de 541px dans une fenêtre
de 600px passait ainsi à 621px de body, soit 21px de défilement pour
une carte qui tenait visuellement — un ascenseur pour presque rien.
Sur les fenêtres basses (portable en 720p, navigateur zoomé), on rend
ces marges au contenu plutôt que de déclencher un défilement. */

/* --gradient-deep depuis le 2026-08-22 (retour utilisateur : "ramène
le fond noir"). Le fond couvre tout l'écran autour de la carte : avec
--gradient-primary, le haut de page tombait sur son stop clair
(#4A5BC4) et virait au bleu vif, tandis que le bas — le marine presque
noir qui a été retenu — n'apparaissait qu'une fois défilé. D'où
l'impression de deux fonds différents selon l'endroit de la page.
--gradient-deep est sombre sur toute sa longueur. */
background:var(--gradient-deep);

}

@media(max-height:760px){

body{

padding:20px 16px;

}

}

.container{

position:relative;

/* Au-dessus du halo fixe de body::before (voir plus haut). */
z-index:1;

isolation:isolate;

width:100%;

max-width:640px;

}

/* Halo ambré derrière la carte. Passé en position:fixed sur body le
2026-08-22 (retour utilisateur : "ce sont ces débordements qui me
gênent") — il était auparavant un ::after absolu à inset:-70px sur le
conteneur de la carte.

Le problème n'était pas visuel mais de mise en page : un élément
absolu à inset négatif AGRANDIT la zone de défilement de son ancêtre.
Ces 70px de débord comptaient donc dans scrollWidth ET scrollHeight,
et faisaient apparaître des barres de défilement sur une page dont le
contenu tenait à l'écran (mesuré à 1000x600 : 50px de trop en largeur,
30px en hauteur, pour une carte qui tenait sans peine).

position:fixed règle ça par construction : un élément fixe est retiré
du flux ET ne contribue jamais à la taille de défilement, quelle que
soit sa dimension. Le halo couvre désormais toute la fenêtre et son
dégradé radial rayonne depuis le centre — c'est-à-dire exactement où la
carte est centrée, donc le rendu est le même qu'avant.

z-index:0 + source order : le pseudo-élément est déclaré avant tout
contenu, il passe donc sous la carte sans qu'on ait à empiler
davantage. pointer-events:none pour ne rien intercepter. */
body::before{

content:"";

position:fixed;

inset:0;

z-index:0;

/* Sans filter:blur (lot DEUX-MOTEURS, 2026-09-11) : un calque plein
écran, fixe et flouté, sous tout le diagnostic — la douceur est dans
les arrêts du dégradé. */
background:radial-gradient(circle at center, rgba(233,163,25,.55) 0%, rgba(233,163,25,.38) 20%, rgba(233,163,25,.22) 38%, rgba(233,163,25,.09) 52%, transparent 66%);

pointer-events:none;

}

/* Fond vitré, même traitement que .hero-demo (css/hero.css, carte
"Fitz en action" d'index.html) plutôt que le var(--background) opaque
par défaut : cohérent avec le halo ambré juste au-dessus, qui a besoin
de transparence pour se voir légèrement à travers le bord de la carte
plutôt que de s'arrêter net dessous. Ombre reprise à l'identique
(3 couches, dont le liseré clair inset qui donne l'effet "carte qui
flotte") plutôt que var(--shadow-lg) — c'est elle, pas seulement le
fond, qui donne à .hero-demo son relief. */
.card{

position:relative;

overflow:hidden;

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);

padding:52px 44px;

text-align:center;

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);

}

/* Le liseré --gradient-fitz de 4px en tête de carte a été retiré le
2026-08-22 (retour utilisateur : "enlève le trait bleu qui est en haut
de la carte"). Il datait du 2026-08-15 et servait d'accent de signature
"espace Fitz" ; depuis, la carte a gagné le lavage ambré (.fitz-surface)
qui remplit ce rôle de façon moins appuyée, et le badge Fitz dit déjà
qui parle. Rien d'autre ne dépendait de ce ::before — .card garde son
overflow:hidden, utile au lavage ambré. */

/* ==========================================================
ENTRÉE ÉCHELONNÉE
========================================================== */

.advisor-intro,
h1,
#dynamicText,
.trust-strip,
.benefits,
.trust-box,
.progress,
.info,
#startButton,
.features{

opacity:0;

animation:cardItemIn .7s var(--ease-premium) forwards;

}

/* Cascade resserrée de 0,10s après le retrait de la pastille .logo
(2026-08-22), qui occupait le palier .15s. Sans ce décalage, la
cascade gardait un trou de 0,20s entre .advisor-intro et h1 là où
tous les autres paliers sont espacés de 0,10s — une hésitation
visible au chargement, à l'endroit exact où l'élément avait
disparu. Tous les écarts d'origine sont conservés à l'identique,
l'ensemble se termine juste 0,10s plus tôt. */
.advisor-intro{ animation-delay:.05s; }
h1{ animation-delay:.15s; }
#dynamicText{ animation-delay:.25s; }
.trust-strip{ animation-delay:.3s; }
.benefits{ animation-delay:.38s; }
.trust-box{ animation-delay:.48s; }
.progress{ animation-delay:.58s; }
.info{ animation-delay:.62s; }
#startButton{ animation-delay:.7s; }
.features{ animation-delay:.82s; }

@keyframes cardItemIn{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================================
CONSEILLER IA
Avatar/badge/statut de "Fitz qui parle" : voir .fitz-avatar/
.fitz-badge/.fitz-status dans css/ai-suite.css (composant partagé
avec eligibility-questions.html et les pages ai-*.html). Ici, on ne
garde que la mise en page locale de l'intro (positionnement du
badge à côté de l'avatar).
========================================================== */

.advisor-intro{

position:relative;

isolation:isolate;

overflow:hidden;

display:flex;

align-items:center;

gap:14px;

width:max-content;

max-width:100%;

margin:0 auto 22px;

padding:16px 20px;

text-align:left;

}

.advisor-copy{

min-width:0;

}

/* ==========================================================
REPÈRES DE CONFIANCE
========================================================== */

.trust-strip{

display:flex;

align-items:center;

justify-content:center;

flex-wrap:wrap;

gap:10px 20px;

margin-bottom:28px;

}

.trust-strip span{

display:inline-flex;

align-items:center;

gap:6px;

color:var(--text-muted);

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

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

}

.trust-strip i,
.trust-strip svg{

width:14px;

height:14px;

color:var(--accent-color);

}

/* ==========================================================
LOGO — supprimé le 2026-08-22
==========================================================
La pastille bleue de 76 px à mortier de diplômé qui vivait ici a
été retirée du HTML (voir le commentaire dans eligibility-test.html
pour le raisonnement). Ces règles n'avaient plus de cible : elles
sont retirées plutôt que laissées en place, sinon la prochaine
lecture du fichier laisse croire que la pastille existe encore.

L'espace qu'elle occupait n'est pas remplacé : l'avatar Fitz de
.advisor-intro est désormais la seule marque visuelle du haut de
carte, ce qui est le but. Ne pas y remettre une icône "pour
équilibrer" — c'est ce raisonnement qui avait mis le mortier là. */

/* ==========================================================
TITRE & TEXTE
========================================================== */

h1{

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

font-size:clamp(1.7rem,4vw,2.2rem);

line-height:1.25;

font-weight:800;

color:var(--text-color);

margin-bottom:16px;

}

#dynamicText{

color:var(--text-light);

font-size:1.05rem;

line-height:1.8;

margin-bottom:32px;

}

/* ==========================================================
AVANTAGES
========================================================== */

.benefits{

display:flex;

flex-direction:column;

gap:12px;

margin-bottom:26px;

text-align:left;

}

.benefit{

display:flex;

align-items:center;

gap:14px;

padding:14px 16px;

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

background:var(--background-soft);

color:var(--text-color);

font-weight:600;

font-size:.95rem;

}

.benefit i,
.benefit svg{

flex-shrink:0;

width:20px;

height:20px;

color:var(--primary-color);

}

/* ==========================================================
MESSAGE DE CONFIANCE
========================================================== */

.trust-box{

display:flex;

align-items:center;

gap:12px;

padding:16px 18px;

margin-bottom:26px;

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

background:var(--background-light);

border:1px solid rgba(26,23,20,.12);

color:var(--text-light);

font-size:.88rem;

line-height:1.6;

text-align:left;

}

.trust-box i,
.trust-box svg{

flex-shrink:0;

width:20px;

height:20px;

color:var(--primary-color);

}

/* ==========================================================
PROGRESSION
========================================================== */

.progress{

width:100%;

height:8px;

background:var(--background-alt);

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

overflow:hidden;

margin-bottom:14px;

}

.progress-bar{

width:11%;

height:100%;

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

background:var(--gradient-primary);

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

}

.info{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

margin-bottom:28px;

color:var(--text-muted);

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

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

}

.info i,
.info svg{

width:16px;

height:16px;

}

/* ==========================================================
BOUTON
========================================================== */

button#startButton{

position:relative;

overflow:hidden;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

width:100%;

padding:18px 28px;

border:none;

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

background:var(--amber-500);

color:var(--primary-900);

font-family:"Inter",sans-serif;

font-size:1.05rem;

font-weight:700;

cursor:pointer;

transition:var(--transition);

}

button#startButton i,
button#startButton svg{

width:20px;

height:20px;

}

button#startButton:hover{

background:var(--amber-600);

transform:translateY(-2px);

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

}

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

.features{

display:grid;

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

gap:16px;

margin-top:36px;

text-align:left;

}

.feature-card{

padding:20px 18px;

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

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

background:var(--background);

transition:var(--transition);

}

.feature-card:hover{

transform:translateY(-10px);

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

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

}

/* Plus de pastille ronde derrière l'icône (règle « Icônes » de
DESIGN_SYSTEM.md, arrêtée le 2026-08-22) : le disque de 44px ajoutait
une forme à lire pour zéro information. Le <div> reste dans le HTML
comme simple ancre de mise en page — il ne dessine plus rien, seul le
glyphe est visible.

L'icône passe de 22 à 26px : privé de son disque, un glyphe doit être
plus grand pour garder le même poids visuel dans la carte. */
.feature-icon{

display:flex;

align-items:center;

margin-bottom:14px;

color:var(--primary-color);

}

.feature-icon i,
.feature-icon svg{

width:26px;

height:26px;

}

.feature-card h3{

font-size:1rem;

font-weight:700;

color:var(--text-color);

margin-bottom:8px;

}

.feature-card p{

font-size:.85rem;

line-height:1.6;

color:var(--text-light);

}

/* ==========================================================
RESPONSIVE — TABLETTE (768–1023px)
========================================================== */

@media(max-width:1023px){

.card{

padding:44px 34px;

}

}

/* ==========================================================
RESPONSIVE — MOBILE (< 768px)
========================================================== */

@media(max-width:767px){

body{

padding:20px 14px;

}

.card{

padding:32px 22px;

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

}

.features{

grid-template-columns:1fr;

}

/* (le rétrécissement mobile de .logo est parti avec la pastille,
supprimée le 2026-08-22 — voir la section LOGO plus haut) */

}

@media(max-width:380px){

.card{

padding:26px 18px;

}

}

/* Avatar Fitz de l'en-tête, sans icône ET sans carré : même
indicateur "de réflexion" flou que .chat-box .fitz-avatar
(eligibility-questions.css) — voir son commentaire pour le détail.
Scopé à .advisor-intro pour ne pas toucher .fitz-avatar--sm ailleurs
sur le site. */
.advisor-intro .fitz-avatar{

background:none;

box-shadow:none;

overflow:visible;

}

.advisor-intro .fitz-avatar::before{

display:none;

}

.advisor-intro .fitz-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){

.advisor-intro,
h1,
#dynamicText,
.trust-strip,
.benefits,
.trust-box,
.progress,
.info,
#startButton,
.features{

opacity:1;

animation:none;

}

.advisor-intro .fitz-avatar::after{

animation:none;

}

}

/* ==========================================================
MOBILE — le contenu passe SOUS la barre de marque (2026-09-01)
==========================================================
.page-brandbar--overlay est posée en absolu AU-DESSUS du contenu. Sur
grand écran la carte est centrée (max-width 640px) et son lien
« Retour à l'accueil » démarre loin du logo ; dès que la fenêtre passe
sous ~900px, le bord gauche de la carte rejoint celui de la barre et
le lien vient s'imprimer SUR le lockup (constaté sur capture téléphone
de l'utilisateur, 2026-09-01). Sous ce seuil, le corps réserve donc la
hauteur de la barre (22px de padding + lockup 30px + respiration) et
le lien retrouve sa place, sous le logo. Posé en FIN de fichier pour
gagner sur @media(max-height:760px), qui réécrit le padding entier. */
@media(max-width:899px){

body{

padding-top:84px;

}

}

/* Rembourrage de la carte sur téléphone (2026-09-01, lot 5) : 52x44px
de bureau jusqu'à 380px laissait, entre 381 et 576px, une carte au
cadre plus épais que son contenu. Palier intermédiaire aligné sur le
reste de la passe mobile ; la règle ≤380px existante plus haut reste
le plancher des très petits écrans. */
@media(max-width:576px){

.card{

padding:34px 22px;

}

}

/* ==========================================================
CARTE D'INTRODUCTION DÉSENCOMBRÉE SUR TÉLÉPHONE (2026-09-01, lot 6)
==========================================================
Demande utilisateur, capture à l'appui : « le rendu mobile doit pas
être encombré ». Trois gestes, tous limités au ≤576px — le bureau ne
change pas :

1. Le badge ne dit plus que « Fitz » : le rôle (« votre conseiller
   intelligent ») est déjà raconté par le titre et le paragraphe juste
   dessous. On masque le SPAN du descripteur, on ne redéfinit PAS
   .fitz-badge lui-même (règle design_badge_fitz : composant unique de
   css/base.css, jamais redéfini dans une feuille de page).
2. L'avatar-halo est masqué : il prenait un tiers de la largeur pour
   un signal d'activité que la ligne de statut animée porte déjà —
   l'en-tête se centre et respire.
3. Repères de confiance resserrés pour tenir sur UNE rangée, et lignes
   de bénéfices allégées d'un cran. */
@media(max-width:576px){

.advisor-intro .fitz-badge-role{

display:none;

}

.advisor-intro .fitz-avatar{

display:none;

}

.advisor-intro{

justify-content:center;

text-align:center;

gap:0;

padding:10px 0;

margin-bottom:16px;

}

/* text-align:center ne suffit pas pour le badge : .fitz-badge est en
display:flex + width:max-content (css/base.css — voulu, c'est ce qui
permet margin:0 auto sur results/offers/payment), donc c'est une boîte
de BLOC insensible au text-align du parent — il restait collé à gauche
(capture utilisateur : « Fitz ne doit pas aller dans tous les sens, il
doit rester au milieu »). La colonne centrée règle le badge ET la
ligne de statut d'un coup, sans redéfinir .fitz-badge lui-même. */
.advisor-intro .advisor-copy{

display:flex;

flex-direction:column;

align-items:center;

}

.trust-strip{

gap:8px 14px;

margin-bottom:22px;

}

.trust-strip span{

font-size:.74rem;

}

.trust-strip i,
.trust-strip svg{

width:12px;

height:12px;

}

.benefit{

padding:12px 14px;

gap:12px;

}

}