/* ==========================================================
FITZUNIVERSE — QUESTIONNAIRE 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)
========================================================== */

/* Fond navy (audit du 2026-08-15) : même identité que eligibility-test.css
(voir son commentaire pour le détail) — --gradient-primary, déjà le
fond de repli du hero d'index.html sous sa photo, remplace le
--gradient-hero clair par défaut de body. .container garde son fond
clair (var(--background)) : seul l'arrière-plan de la page change,
jamais la lisibilité du champ de saisie, des cartes de choix ou du
curseur. */
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 — même changement et même
raison que le body de eligibility-test.css (voir son commentaire) :
sur un fond plein écran, le stop clair de --gradient-primary donnait
un bleu vif en haut de page, alors que c'est le marine presque noir de
l'autre extrémité qui a été retenu. */
background:var(--gradient-deep);

}

@media(max-height:760px){

body{

padding:20px 16px;

}

}

/* Enveloppe non-clippée autour de .container, seule pour porter le
halo ambré ci-dessous : .container a overflow:hidden (nécessaire à
son liseré de tête, .container::before) qui aurait rogné un halo posé
directement dessus. Suit .container dans le flux (aucune dimension
propre) au lieu d'un centrage en position:absolute sur body, qui se
désynchronisait de la carte dès que le contenu dépassait 100vh
(1re tentative, corrigée le 2026-08-15). */
.container-wrap{

position:relative;

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

isolation:isolate;

display:flex;

justify-content:center;

width:100%;

}

/* 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é du .container-wrap parent, 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. */
.container{

position:relative;

overflow:hidden;

width:100%;

max-width:720px;

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:48px;

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, en même temps que son jumeau dans eligibility-test.css
(retour utilisateur). Voir le commentaire là-bas pour le détail.

Note : .container garde overflow:hidden, qui existait à l'origine POUR
ce liseré (l'empêcher de dépasser des angles arrondis). Il sert
désormais au lavage ambré de .fitz-surface — à ne pas retirer en
croyant nettoyer un reste. */

/* ==========================================================
BADGE IA
Identité visuelle du badge "Fitz" : voir .fitz-badge dans
css/ai-suite.css (composant partagé avec eligibility-test.html et
les pages ai-*.html). Ici, seul l'espacement propre à cette page
est conservé.
========================================================== */

.fitz-badge{

margin:0 auto 28px;

}

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

.progress-info{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-weight:700;

font-size:.88rem;

color:var(--text-light);

}

.progress{

height:8px;

background:var(--background-alt);

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

overflow:hidden;

margin-bottom:32px;

}

.progress-bar{

width:10%;

height:100%;

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

background:var(--gradient-primary);

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

}

/* ==========================================================
CONVERSATION — FITZ AI
L'avatar (.fitz-avatar) et la ligne de statut (.fitz-status,
id="fitzHint") viennent du composant partagé dans
css/ai-suite.css — même identité que sur eligibility-test.html et
les pages ai-*.html. Le conteneur de conversation et la bulle de
message restent propres à cette page.
========================================================== */

/* Fond de la bulle "Fitz vous parle" — même identité violet/bleu que
--gradient-fitz (voir .fitz-badge dans css/ai-suite.css), pas l'aplat
--background-light générique utilisé ailleurs sur le site. */
.chat-box{

position:relative;

isolation:isolate;

overflow:hidden;

display:flex;

align-items:flex-start;

gap:16px;

padding:22px;

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

margin-bottom:32px;

}

.assistant-bubble{

flex:1;

min-width:0;

}

.assistant-message{

color:var(--text-color);

line-height:1.7;

font-weight:500;

}

/* ==========================================================
QUESTION
========================================================== */

.question-header{

display:flex;

align-items:center;

gap:14px;

margin-bottom:26px;

}

/* Plus de pastille ronde derrière l'icône de la question (règle
« Icônes » de DESIGN_SYSTEM.md, arrêtée le 2026-08-22).

Le <div id="questionIcon"> est conservé, contrairement à ce que la
règle « aucun conteneur » suggérerait : eligibility-questions.js le
cible par son id et y réinjecte un <i data-lucide> à CHAQUE question
(renderIcon(), le glyphe change d'une question à l'autre et un <svg>
déjà transformé par Lucide n'est pas réutilisable). Le supprimer
casserait ce rendu. Il ne dessine plus rien : ni fond, ni rayon, ni
dimensions — c'est une ancre, plus une pastille.

28px au lieu de 24 : l'icône occupe seule la place que tenait le
disque de 48px, elle doit grandir pour ne pas paraître perdue à côté
d'un titre de question en 1.7rem. */
.question-icon{

flex-shrink:0;

display:flex;

align-items:center;

color:var(--primary-color);

}

.question-icon i,
.question-icon svg{

width:28px;

height:28px;

}

.question-header h2{

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

font-size:clamp(1.35rem,2.6vw,1.7rem);

line-height:1.3;

font-weight:700;

color:var(--text-color);

}

/* ==========================================================
CHAMP DE RECHERCHE
========================================================== */

#textContainer{

position:relative;

margin-bottom:32px;

}

input#answer{

width:100%;

padding:16px 18px;

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

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

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

font-size:1rem;

color:var(--text-color);

background:var(--background);

transition:var(--transition);

}

input#answer:focus{

outline:none;

border-color:var(--primary-color);

box-shadow:0 0 0 4px rgba(233,163,25,.16);

}

.suggestions{

position:absolute;

left:0;

right:0;

top:calc(100% + 8px);

z-index:5;

display:none;

background:var(--background);

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

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

overflow:hidden;

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

}

.suggestion{

padding:14px 18px;

cursor:pointer;

transition:background-color .2s ease;

font-size:.95rem;

color:var(--text-color);

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

}

.suggestion:last-child{

border-bottom:none;

}

.suggestion:hover,
.suggestion.active{

background:var(--background-light);

color:var(--primary-color);

}

/* ==========================================================
CARTES DE CHOIX
========================================================== */

.cards-container{

display:none;

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

gap:16px;

margin-bottom:32px;

}

.option-card{

display:flex;

align-items:center;

gap:14px;

background:var(--background);

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

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

padding:18px;

cursor:pointer;

font-weight:600;

font-size:.98rem;

color:var(--text-color);

line-height:1.35;

transition:var(--transition);

}

.option-card i,
.option-card svg{

flex-shrink:0;

width:22px;

height:22px;

color:var(--primary-color);

transition:var(--transition);

}

.option-card:hover{

transform:translateY(-3px);

border-color:var(--primary-color);

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

}

.option-card.selected{

background:var(--gradient-primary);

border-color:var(--primary-color);

color:#fff;

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

}

.option-card.selected i,
.option-card.selected svg{

color:#fff;

}

/* ==========================================================
SÉLECTEUR D'ÉCHELLE (MOYENNE) — audit du 2026-08-14. Une puce par
système de notation (question.scales, questions.js) ; le curseur ou
les boutons de lettres juste en dessous s'adaptent à la sélection
(eligibility-questions.js).
========================================================== */

.scale-selector{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

margin-bottom:24px;

}

.scale-chip{

padding:8px 16px;

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

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

background:var(--background);

color:var(--text-light);

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

font-size:.85rem;

font-weight:600;

cursor:pointer;

transition:var(--transition);

}

.scale-chip:hover{

border-color:var(--primary-color);

color:var(--primary-color);

}

.scale-chip.selected{

background:var(--gradient-primary);

border-color:var(--primary-color);

color:#fff;

}

/* ==========================================================
BOUTONS DE LETTRES (échelle "Lettres A-F" uniquement)
========================================================== */

.letters-container{

display:none;

justify-content:center;

gap:12px;

margin-bottom:32px;

}

.letter-chip{

display:flex;

align-items:center;

justify-content:center;

width:56px;

height:56px;

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

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

background:var(--background);

color:var(--text-color);

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

font-size:1.3rem;

font-weight:800;

cursor:pointer;

transition:var(--transition);

}

.letter-chip:hover{

transform:translateY(-3px);

border-color:var(--primary-color);

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

}

.letter-chip.selected{

background:var(--gradient-primary);

border-color:var(--primary-color);

color:#fff;

}

/* ==========================================================
CURSEUR (MOYENNE)
========================================================== */

.slider-container{

margin-bottom:32px;

text-align:center;

}

.slider-container output{

display:block;

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

font-size:3rem;

font-weight:800;

color:var(--primary-color);

margin-bottom:20px;

}

.slider-container input[type="range"]{

width:100%;

accent-color:var(--primary-color);

}

/* ==========================================================
NAVIGATION
========================================================== */

.nav-buttons{

display:flex;

gap:14px;

}

.nav-buttons button{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 24px;

border:none;

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

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

font-size:1rem;

font-weight:600;

cursor:pointer;

transition:var(--transition);

}

.nav-buttons button i,
.nav-buttons button svg{

width:18px;

height:18px;

}

#nextButton{

flex:1;

background:var(--text-light);

color:#fff;

}

#nextButton:hover{

background:var(--text-color);

transform:translateY(-2px);

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

}

.back-button{

flex:0 0 130px;

background:var(--background-alt);

color:var(--text-color);

}

.back-button:hover{

background:var(--border-color);

}

.back-button:disabled{

opacity:.45;

cursor:not-allowed;

transform:none;

}

.visually-hidden{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

white-space:nowrap;

border:0;

}

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

@media(max-width:1023px){

.container{

padding:36px 28px;

}

}

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

@media(max-width:767px){

body{

padding:20px 14px;

}

.container{

padding:28px 20px;

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

}

.cards-container{

grid-template-columns:1fr;

}

.chat-box{

padding:18px;

gap:12px;

}

.fitz-avatar{

width:38px;

height:38px;

}

.fitz-avatar i,
.fitz-avatar svg{

width:19px;

height:19px;

}

.question-header{

gap:12px;

}

/* Réduisait le disque de 48 à 42px ; celui-ci n'existe plus (voir la
règle .question-icon plus haut), la surcharge ne faisait donc plus
rien. Reportée sur le glyphe lui-même, qui est désormais le seul
élément visible. */
.question-icon i,
.question-icon svg{

width:24px;

height:24px;

}

.slider-container output{

font-size:2.4rem;

}

.letter-chip{

width:46px;

height:46px;

font-size:1.1rem;

}

.nav-buttons{

flex-direction:column-reverse;

}

.back-button{

flex:1;

}

}

@media(max-width:380px){

.container{

padding:22px 16px;

}

}

/* Badge "Fitz" — respiration légère, propre à cette page (le badge
identique d'eligibility-test.html n'est pas concerné). Juste un
scale + micro-décalage vertical, jamais assez pour distraire de la
question. Neutralisé comme toute animation par la règle
prefers-reduced-motion globale (animations.css) et locale ci-dessous. */
@keyframes fitzBadgeBreathe{

0%,100%{ transform:translateY(0) scale(1); }

50%{ transform:translateY(-2px) scale(1.02); }

}

.fitz-badge--breathe{

animation:fitzBadgeBreathe 4s var(--ease-standard) infinite;

}

/* Avatar de la bulle Fitz, sans icône ET sans carré : plus proche
d'un indicateur "de réflexion" façon Claude qu'un logo — un halo flou
qui respire, sans contour ni fond plein. Scopé à .chat-box .fitz-avatar
(le .fitz-avatar générique, css/ai-suite.css, garde sa forme carrée et
son icône partout ailleurs, ex. en-têtes d'outils ai-*.html). Même
traitement sur .advisor-intro .fitz-avatar (eligibility-test.html,
eligibility-test.css) pour rester cohérent entre les deux pages du
parcours diagnostic. Réutilise les couleurs de --gradient-fitz et le
keyframe fitzPulse déjà en place (voir ai-suite.css, .fitz-status)
plutôt que d'inventer une nouvelle animation. */
.chat-box .fitz-avatar{

background:none;

box-shadow:none;

overflow:visible;

}

.chat-box .fitz-avatar::before{

display:none;

}

.chat-box .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;

}

/* ==========================================================
ACCESSIBILITÉ — prefers-reduced-motion (audit du 2026-08-14). Absent
jusqu'ici sur cette page, contrairement à eligibility-test.css : les
transitions/transforms ci-dessous restent, seules les micro-animations
de mouvement sont coupées.
========================================================== */

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

.option-card,
.letter-chip,
.scale-chip,
.nav-buttons button,
input#answer,
.suggestion,
.progress-bar{

transition:none;

}

.option-card:hover,
.letter-chip:hover,
.nav-buttons button:hover{

transform:none;

}

.fitz-badge--breathe,
.chat-box .fitz-avatar::after{

animation:none;

}

}

/* ==========================================================
MOBILE — le contenu passe SOUS la barre de marque (2026-09-01)
==========================================================
Même correctif que sur eligibility-test.css (voir son commentaire) :
sous ~900px, le lien « Retour au diagnostic » venait s'imprimer sur le
lockup de .page-brandbar--overlay. Le corps réserve la hauteur de la
barre ; posé en FIN de fichier pour gagner sur les @media précédents
qui réécrivent le padding du body en entier. */
@media(max-width:899px){

body{

padding-top:84px;

}

}