/* ═══════════════════════════════════════════════════════════════
COMPANIUM — Design tokens (v6 — 09/07/2026)
Polices auto-hébergées (plus de dépendance à Google Fonts, qui
se chargeait mal sur certains réseaux mobiles — rendu dégradé
constaté et corrigé le 03/07/2026).
Palette CITRON & GRAPHITE (P5 — 24/08/2026). Regle des roles :
--cta-bg = #E6FF12 (citron d'action, FONDS de boutons et badges) ;
--cta-text = #14170A (le NOIR de la maison, pose SUR un fond clair) ;
--accent-dark = #16181A (graphite, TEXTE + liens sur fond clair) ;
--texte-sur-sombre = #FFFFFF (texte clair sur fond sombre/photo).
ET LA REGLE DE LISIBILITE (P5-b) : sur un fond CLAIR l'ecriture d'un
bouton est NOIRE, sur un fond SOMBRE elle est BLANCHE. Un fond est
clair si le noir s'y lit mieux que le blanc. Seuil : 4,5 pour 1.
Reperes : blanc sur citron = 1,36 (illisible) ; noir sur citron = 13,35.
═══════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}
:root {
/* 23/07/2026 — CHARTE D'ORIGINE : tokens PARTAGES (source de verite unique, valeurs exactes
du fichier de reference simulateur_companium_etapes.html). Utilises par le parcours ;
le simulateur en a une copie scopee identique (aucune regression). */
--page-bg: #F7F8F5; /* fond de page */
--text-strong: #16181A; /* titres forts */
--text: #2C3033; /* texte / titres courants */
--text-body: #464B4F; /* corps de texte */
--bg: #FFFFFF;
--bg-panel: #EFF1EA; /* 23/07 v4 — charte d'origine (utilise seulement par le parcours) */
--bg-card: #FFFFFF;
--border: #DFE2D6;
/* 23/07/2026 v2 — FOND BLANC PARTOUT ; cadres gris (un cran plus fonce) ; TUILES BLANCHES */
--lvl0: #FFFFFF; /* ecran / page : BLANC PUR */
--lvl05: #FAFBFB; /* 24/07 - gris quasi blanc : zone du parcours */
--lvl1: #EFF1EA; /* cadre principal */
--lvl2: #E6E9DD; /* cadre dans le cadre */
--lvl3: #DFE2D6; /* cadre dans le niveau 2 (porte les tuiles blanches) */
--lvl4: #D2D6C6; /* cadre dans le niveau 3 */
--tile-hover: var(--accent); /* 23/07 v4 — survol lime pale (charte d'origine) */
--field-bg: #FFFFFF; /* champs de saisie : blancs */
--accent: #EFF1EA; /* S1 04/08 : FOND DOUX AU REPOS — gris neutre (ex jaune #DCBC18 trop vif sur les survols/pastilles) ; texte anthracite par-dessus */
--accent-dark: #16181A; /* P1 04/08 : anthracite — TEXTE accent + bordures + liens sur fond clair (plus de vert ici) */
--accent-hover: #E6E9DD; /* S1 04/08 : FOND DOUX AU SURVOL — gris neutre. NB : les 2 usages "texte/dessin sur fond sombre" (sur-titre + simu-liste) pointent directement vers --cta-bg, pas vers ce gris */
--select-ring: #E6FF12; /* 30/08 : suit --cta-bg (etait #D6E82C) — liseré de focus + coche */
--accent-soft: var(--lvl3); /* 23/07/2026 — halos/pastilles gris (glyphe reste accent) */
--picto-size: 48px; /* 21/07/2026 — taille unifiee des pictogrammes (charte) */
--tile-radius: 16px; /* 21/07/2026 — rayon unifie des tuiles (charte) */
--tile-bg: #FFFFFF; /* 23/07/2026 v2 — TUILES BLANCHES */
--tile-shadow: 0 1px 2px rgba(20,25,30,.08); /* 23/07/2026 v3 — ombre COURTE ET NETTE (fini le flou) */
/* 21/07/2026 — palette simulateur epuree (page resultat comprise) */
--cta-bg: #E6FF12; /* 30/08 : le jaune de la charte passe de #D6E82C a #E6FF12 —
plus vif, et le graphite #14170A y monte de 13,35 a 16,15 pour 1 */
--cta-bg-survol: #BFD022; /* P1 04/08 : survol du bouton d'action */
--presse: #BFD022; /* T4 04/08 : etat PRESSE (touch/clic) — jaune legerement plus clair que --cta-bg, pour une reaction sans clignotement (remplace l'ex-surbrillance verte). Texte anthracite lisible par-dessus. */
--cta-text: #14170A; /* P1 04/08 : texte pose SUR --cta-bg (boutons, pastilles, puces) */
--texte-sur-sombre: #FFFFFF; /* P1 04/08 : texte CLAIR sur fond sombre (bandes sombres, badges, hero sur photo) */
--btn-bg: #16181A;
--btn-text: #FFFFFF;
--icon-accent: var(--accent-dark); /* 22/07/2026 — trait des pictos (vert doux) */
--card-bg: #FFFFFF; /* 23/07 v4 — cadre d'etape (charte d'origine, cream) */
--card-radius: 14px; /* 22/07/2026 — rayon commun des cadres */
--band-bg: var(--lvl1); /* 23/07/2026 — bandeau de progression : niveau 1 */
--result-card-bg:var(--lvl4); /* 23/07/2026 — niveau 4 */
--result-num: #22262A; /* grand chiffre des cartes resultat (ex-ambre) */
--grey-soft: var(--lvl3); /* 23/07/2026 — niveau 3 */
--bar-auto: var(--cta-bg); /* barre "ou va la production" : autoconsommee (vert doux) */
--bar-store: #ECD98A; /* S3 04/08 : barre "batterie stockee" — JAUNE CLAIR (ex terracotta #E09B72), coherent avec le jaune d'action mais plus clair pour se distinguer de l'autoconsommee (--bar-auto vif) */
--bar-grid: #D7DBD5; /* injectee / surplus reseau */
--on-accent: #111315; /* couleur de texte à poser SUR un fond fluo */
--text-primary: #16181A;
--text-muted: #7F868B; /* 23/07 v4 — charte d'origine */
--qs-surface: #E9E3DA; /* seq 84 — fond soutenu de la zone de question (defile une question par ecran) */
--qs-muted: #5C6166; /* seq 84 — texte discret (compteur, aide, lien Retour) sur ce fond */
--rail-bg: #EDEDE9; /* seq 90 — fond de la colonne laterale du parcours */
--rail-line: #DDDDD7; /* seq 90 — trait de separation de cette colonne */
--rail-text: #5D6670; /* seq 90 — texte discret de cette colonne */
--font-display: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}
/* T4 04/08 : plus AUCUNE surbrillance verte au toucher (surbrillance tactile par defaut du navigateur) —
site public entier, y compris le parcours (feuille partagee). tap-highlight n'etant pas herite, on cible *. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text-primary);
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ══════════════════════════════════════════════════════════════════════════
REFONTE DU SITE PUBLIC — 05/09/2026
Structure et valeurs RECOPIEES de _maquettes/COMPANIUM_maquette_site_public.html.
⚠️ CETTE FEUILLE EST COMMUNE AUX TROIS ECRANS (accueil, parcours,
simulateur). Toute regle ajoutee ici porte donc un prefixe qui lui est
propre, et AUCUNE regle existante n a ete modifiee :
cp- ce qui est PARTAGE (tuiles, boutons, pictogrammes)
ac- ce qui n appartient qu a l ACCUEIL
Une regle sans prefixe -- « .top », « .sec », « .tu » comme dans la
maquette -- aurait mordu sur le parcours et le simulateur des le premier
depot, sans qu aucun ecran ne le dise.
⚠️ LES REGLAGES ADMINISTRABLES arrivent en proprietes --sd-*, publiees par
resources/views/layouts/app.php depuis la table site_display_settings.
Chacune porte ici un repli : une table absente ne doit pas casser la page.
══════════════════════════════════════════════════════════════════════════ */
/* ── LES JETONS DE LA MAQUETTE ────────────────────────────────────────────
Recopies tels quels. Ils ne remplacent PAS les jetons de charte ci-dessus,
qui servent le parcours et le simulateur : ils s ajoutent, sous leur propre
prefixe, le temps que les trois ecrans soient passes a la maquette. */
:root {
--cp-encre: #111315;
--cp-anthracite: #22262A;
--cp-gris: #383D42;
--cp-jaune: #E6FF12;
--cp-creme: #F7F6F1;
--cp-blanc: #FFFFFF;
--cp-titre: #111315;
--cp-txt: #3A3D40;
--cp-leg: #6E7075;
--cp-filet: #E4E2DA;
--cp-filet-fort: #CFCCC1;
--cp-vert-vif: #2FA84F; /* la pastille « en ce moment » */
}
/* ── LA BANQUE DE PICTOGRAMMES ───────────────────────────────────────────
Le bloc de definitions ne doit rien occuper : sans cette regle il pousse
la page de sa hauteur par defaut, et l on cherche d ou vient le blanc. */
.cp-defs { position:absolute; width:0; height:0; overflow:hidden; }
/* ══ LES BOUTONS — regle d alignement commune ═══════════════════════════
⚠️ LES QUATRE POINTS EXIGES, ET COMMENT ILS SONT TENUS :
centre horizontal et vertical inline-flex + center/center
meme hauteur cote a cote une HAUTEUR fixe, pas un padding vertical
meme air a gauche et a droite un padding horizontal unique
picto sur la ligne du texte align-items:center sur la meme ligne
Un bouton dont la hauteur vient d un padding grandit des que son texte
passe sur deux lignes : deux boutons voisins n ont alors plus la meme
hauteur, et c est exactement le defaut releve. */
.cp-bp, .cp-bs {
font:inherit; border:0; cursor:pointer; text-decoration:none;
display:inline-flex; align-items:center; justify-content:center; gap:11px;
height:56px; padding:0 28px; border-radius:11px; line-height:1.2;
text-align:center; white-space:nowrap;
}
.cp-bp { font-size:16px; font-weight:700; background:var(--cp-jaune); color:var(--cp-encre); }
.cp-bs { font-size:15px; font-weight:600; background:var(--cp-creme); color:var(--cp-encre);
box-shadow:inset 0 0 0 1.5px var(--cp-filet-fort); }
.cp-bp:hover { background:#D9F00E; }
.cp-bs:hover { box-shadow:inset 0 0 0 1.5px var(--cp-encre); }
.cp-bp svg, .cp-bs svg { width:18px; height:18px; flex:none; }
.cp-boutons { display:flex; gap:11px; flex-wrap:wrap; }
/* ══ LES TUILES — une seule famille, partagee par l accueil et le parcours ══
⚠️ TROIS REGLES D ALIGNEMENT, ET AUCUNE N EST DECORATIVE :
1. `grid-auto-rows:1fr` + `height:100%` : toutes les tuiles d une rangee
ont la meme hauteur, meme quand l une porte deux fois plus de texte.
2. `min-height` sur le titre : la place du titre est RESERVEE au nombre de
lignes reglable. Le libelle qui suit demarre donc a la meme distance du
haut dans toutes les tuiles -- c est le defaut que Gerard voyait quand
un nom tenait sur une ligne et son voisin sur deux.
3. un `padding` unique : le picto, le titre et le libelle demarrent tous
a la meme distance du bord. */
.cp-grille { display:grid; gap:var(--sd-tuile-ecart, 2px); grid-auto-rows:1fr; min-width:0; }
.cp-grille > * { min-width:0; }
.cp-g4 { grid-template-columns:repeat(4,1fr); }
.cp-g3 { grid-template-columns:repeat(3,1fr); }
.cp-g2 { grid-template-columns:repeat(2,1fr); }
.cp-tuile {
position:relative; display:block; width:100%; height:100%;
font:inherit; color:inherit; border:0; cursor:pointer; text-decoration:none;
background:var(--cp-blanc); border-radius:var(--sd-tuile-rayon, 10px);
padding:var(--sd-tuile-hauteur, 30px) 17px;
box-shadow:inset 0 0 0 1px var(--cp-filet);
text-align:left; /* cale a gauche, jamais justifie */
transition:transform .13s, box-shadow .13s;
}
.cp-tuile:hover { transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px var(--cp-encre); }
.cp-tuile::before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px;
border-radius:0 3px 3px 0; background:transparent; transition:background .13s; }
.cp-tuile:hover::before { background:var(--cp-jaune); }
.cp-tuile.cp-on { background:var(--tu-fond-on); box-shadow:none; }
.cp-tuile.cp-on::before { background:var(--cp-jaune); }
.cp-tuile > svg { width:var(--sd-tuile-picto, 48px); height:var(--sd-tuile-picto, 48px);
color:var(--cp-gris); display:block; margin-bottom:10px; }
.cp-tuile.cp-on > svg { color:var(--cp-jaune); }
.cp-tuile b { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
-webkit-line-clamp:var(--cp-lignes, 3); line-clamp:var(--cp-lignes, 3);
min-height:calc(var(--cp-lignes, 3) * 1.25em);
font-size:14.5px; font-weight:600; color:var(--cp-titre); margin-bottom:3px; line-height:1.25; }
.cp-tuile.cp-on b { color:#fff; }
.cp-tuile span { font-size:12px; color:var(--cp-leg); display:block; line-height:1.4; }
.cp-tuile.cp-on span { color:#A9B0B6; }
/* Le nombre de lignes reservees differe selon le niveau du catalogue. */
.cp-niveau-famille { --cp-lignes: var(--sd-tuile-lignes-famille, 3); }
.cp-niveau-sous { --cp-lignes: var(--sd-tuile-lignes-sous, 4); }
/* ══ LE CADRE DE L ECRAN ══════════════════════════════════════════════════
Recopie de « .cadre » et « .site » de la maquette : le site est une CARTE
posee sur un fond sombre, avec de l air autour et des coins arrondis.
⚠️ CE FOND SOMBRE N EST PAS UN ARTIFICE DE MAQUETTAGE. Je l avais pris
pour le decor de l outil et j avais refuse de le recopier : c etait une
erreur de jugement. #3D4857 est le cadre de l ecran de la charte.
⚠️ LA LARGEUR DU CADRE SE DEDUIT, elle ne se regle pas. La maquette pose
1264 pour le cadre et 22 d epaisseur : le site fait donc 1220, qui est
deja « contenu_largeur ». Deux reglages pour une seule mesure finiraient
par se contredire. */
.cp-fond { background:var(--sd-page-fond, #14171A); margin:0; }
/* La carte tient la hauteur : sur une page courte, elle descend quand meme
jusqu au bas de la fenetre, et le fond sombre ne reparait pas dessous. */
.cp-cadre { min-height:calc(100vh - 2 * var(--sd-cadre-marge, 24px)); }
.cp-cadre {
/* ⚠️ min-width:0 — LA CAUSE, PAS UN PANSEMENT. Le cadre est un enfant
de , qui est en flex. Un element de flex vaut min-width:auto
par defaut : il refuse de descendre sous la largeur MINIMALE de son
contenu. Or le bandeau du bas est en « nowrap » -- son minimum est
la longueur de sa phrase. Sur un telephone de 390 pixels, le cadre
se posait donc a 616 et TOUTE la page debordait. Mesure du 07/09 :
616 au depart, 390 des que le bandeau est masque. Avec min-width:0,
le cadre suit la fenetre et le bandeau defile chez lui, comme le
veut son overflow-x:auto. */
min-width:0;
max-width:calc(var(--sd-contenu-largeur, 1220px) + 2 * var(--sd-cadre-air, 22px));
margin:var(--sd-cadre-marge, 24px) auto;
padding:var(--sd-cadre-air, 22px);
background:var(--sd-cadre-fond, #3D4857);
border-radius:var(--sd-cadre-rayon, 20px);
}
.cp-site { background:var(--cp-creme); border-radius:var(--sd-site-rayon, 12px);
overflow:hidden; }
/* ⚠️ LA GOUTTIERE SE MESURE MAINTENANT DANS LE SITE, PAS DANS LA FENETRE.
Les bandes vivent a l interieur de la carte : leur largeur est celle du
site, deja bornee. Il ne reste donc que l air interieur des sections --
garder l ancien calcul y ajouterait une seconde gouttiere, et le texte
se retrouverait deux fois plus loin du bord qu il ne doit. */
/* ══════════════════════════════════════════════════════════════════════════
L ACCUEIL
══════════════════════════════════════════════════════════════════════════ */
.ac-page {
/* ⚠️ LA GOUTTIERE — LA SEULE REGLE DE LARGEUR DU SITE.
Chaque bande garde son fond d un bord a l autre de l ecran ; c est le
CONTENU qui est borne et centre. La gouttiere vaut la moitie de ce qui
depasse la largeur maximale -- donc EXACTEMENT la meme a gauche et a
droite -- et jamais moins que l air minimal des sections.
Le pourcentage se resout sur la bande qui l emploie, pas sur .ac-page :
les deux font la largeur de la fenetre, le calcul est le meme. */
--ac-gouttiere: var(--sd-section-air, 32px);
background:var(--cp-creme); color:var(--cp-txt);
font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
font-size:15px; line-height:1.55; }
.ac-page h1, .ac-page h2, .ac-page h3 { font-family:inherit; }
/* ── LA BARRE DU HAUT ─────────────────────────────────────────────────── */
.ac-top { background:var(--cp-blanc); border-bottom:1px solid var(--cp-filet);
display:flex; align-items:center; gap:20px; padding:15px var(--ac-gouttiere);
position:sticky; top:0; z-index:60; }
.ac-marque { display:flex; align-items:center; gap:10px; flex:none;
text-decoration:none; color:inherit; }
.ac-marque > svg { width:30px; height:30px; color:var(--cp-encre); flex:none; }
/* ⚠️ CORRIGE — la marque heritait du gras par defaut du navigateur (900),
ce qui faisait CINQ graisses sur l ecran. La regle est de trois au plus :
400 normal, 600 demi-gras pour les titres, 700 gras pour le seul geste
principal. La marque est un titre. */
.ac-marque b { font-size:16.5px; letter-spacing:.4px; color:var(--cp-encre);
display:block; line-height:1.1; font-weight:600; }
.ac-marque span { font-size:9.5px; letter-spacing:1.4px; color:var(--cp-leg); font-weight:600; }
.ac-nav { display:flex; gap:2px; flex:1; }
/* CORRIGE — la maquette met le menu a 500. Cinquieme graisse sur l ecran ;
un lien de menu n est ni un titre ni un geste : il passe en normal. */
.ac-nav a { font-size:13.5px; color:var(--cp-txt); padding:10px 12px 12px;
font-weight:400; white-space:nowrap; position:relative; text-decoration:none; }
.ac-nav a::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:3px;
border-radius:2px; background:var(--cp-jaune); transform:scaleX(0);
transform-origin:center; transition:transform .18s ease; }
.ac-nav a:hover { color:var(--cp-titre); }
.ac-nav a:hover::after { transform:scaleX(1); }
.ac-bhaut { font:inherit; font-size:13px; font-weight:600; border:0; cursor:pointer;
height:40px; padding:0 16px; border-radius:9px; background:var(--cp-encre);
color:var(--cp-jaune); flex:none; display:inline-flex; align-items:center;
justify-content:center; text-decoration:none; }
/* ── LES SECTIONS ─────────────────────────────────────────────────────── */
.ac-sec { padding:54px var(--ac-gouttiere); scroll-margin-top:70px; }
.ac-sec.ac-clair { background:var(--cp-blanc); }
.ac-sec.ac-creme { background:var(--cp-creme); }
.ac-sec.ac-sombre { background:var(--cp-anthracite); color:#DDE1E4; }
.ac-chapeau { font-size:11px; letter-spacing:1.6px; font-weight:700; color:var(--cp-leg);
margin:0 0 10px; text-transform:uppercase; }
.ac-sec.ac-sombre .ac-chapeau { color:var(--cp-jaune); }
.ac-page h2 { margin:0 0 10px; font-size:30px; line-height:1.15; letter-spacing:-.8px;
color:var(--cp-titre); font-weight:600; }
.ac-sec.ac-sombre h2 { color:#fff; }
.ac-intro { margin:0 0 28px; font-size:15.5px; color:var(--cp-leg); max-width:62ch; }
.ac-sec.ac-sombre .ac-intro { color:#A9B0B6; }
/* ── LE BANDEAU PHOTO ─────────────────────────────────────────────────────
⚠️ LE CADRAGE SE FAIT EN `background-size` + `background-position`, et non
par des calculs de decalage. « 106% 169% » dit exactement de combien la
photo depasse son cadre ; « 0% 0% » dit quelle partie reste visible. Les
quatre reglages de l ecran d administration s y posent tels quels. */
.ac-hero { position:relative; overflow:hidden; }
/* ⚠️ LA PHOTO NE SE DEFORME PLUS — mecanique recopiee de la maquette.
J avais agrandi l IMAGE (background-size: 106% 169%) : elle s etirait,
et un visage devenait large. La maquette agrandit la BOITE, et l image y
entre en « cover » : elle garde son rapport, et c est le CADRAGE qui
choisit la partie visible.
boite largeur = 100% x largeur reglee, hauteur = 100% x hauteur reglee
image center / cover no-repeat
gauche = (1 - largeur reglee) x horizontal x 100%
haut = (1 - hauteur reglee) x vertical x 100%
Les pourcentages du reglage se divisent par 100 pour redevenir des
facteurs -- « 106% » veut dire « 1,06 fois la boite ». */
.ac-hero { --ac-imgL: var(--sd-photo-bandeau-largeur-f, 1.06);
--ac-imgZ: var(--sd-photo-bandeau-hauteur-f, 1.69);
--ac-imgX: var(--sd-photo-bandeau-x-f, 0);
--ac-imgY: var(--sd-photo-bandeau-y-f, 0); }
.ac-hero-cadre { position:absolute; inset:0; overflow:hidden; background:#2B3035; }
.ac-hero-fond { position:absolute; display:block; background:#2B3035 center/cover no-repeat;
background-image:var(--sd-photo-bandeau-fichier, none);
width:calc(100% * var(--ac-imgL));
height:calc(100% * var(--ac-imgZ));
left:calc((1 - var(--ac-imgL)) * var(--ac-imgX) * 100%);
top:calc((1 - var(--ac-imgZ)) * var(--ac-imgY) * 100%); }
.ac-hero-voile { position:absolute; inset:0; background:linear-gradient(92deg,
rgba(9,11,13,calc(var(--sd-photo-bandeau-voile, 0) + .3)) 0%,
rgba(9,11,13,calc(var(--sd-photo-bandeau-voile, 0) + .12)) 52%,
rgba(9,11,13,calc(var(--sd-photo-bandeau-voile, 0) + .02)) 100%); }
/* ── LA HAUTEUR DU BANDEAU, ADMINISTRABLE ─────────────────────────────────
Maquette v2 : « --hero-h:330px » sur ordinateur, « --hero-h-tel:400px »
sur telephone. Notre bandeau n avait AUCUNE hauteur : elle sortait de
l air interieur de son contenu -- mesure du 06/09 sur telephone :
164,7 px pour 400 demandes, d ou la photo « trop plate ».
⚠️ « min-height », PAS « height » : un titre plus long qu aujourd hui
doit pouvoir pousser le bandeau plutot que d en sortir. */
.ac-hero { min-height:var(--sd-hero-hauteur, 330px); }
.ac-hero-in { min-height:var(--sd-hero-hauteur, 330px);
display:flex; flex-direction:column; justify-content:center; }
/* ⚠️ LE TITRE EST CAPE A 760px, PAS LA BOITE. Avec box-sizing:border-box, un
max-width pose sur la boite aurait AVALE la gouttiere : sur un grand ecran
le titre aurait retreci a mesure que la gouttiere grandissait. */
.ac-hero-in { position:relative; padding:76px var(--ac-gouttiere) 72px; }
.ac-hero-in > * { max-width:760px; }
.ac-pastille { display:inline-flex; align-items:center; font-size:10.5px; font-weight:700;
letter-spacing:1.4px; color:#fff; margin-bottom:16px; padding-left:11px;
border-left:3px solid var(--cp-jaune); text-transform:uppercase; }
.ac-hero h1 { margin:0; font-size:50px; line-height:1.06; letter-spacing:-1.7px;
color:#fff; font-weight:700; }
.ac-hero h1 em { font-style:normal; color:var(--cp-jaune); }
/* ── LE BLOC D ACTION ─────────────────────────────────────────────────── */
.ac-action { background:var(--cp-blanc); display:grid; grid-template-columns:1.05fr 1fr;
gap:40px; padding:34px var(--ac-gouttiere) 36px; border-bottom:1px solid var(--cp-filet); }
.ac-action.ac-seul { grid-template-columns:1fr; }
.ac-action-t { display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:20px; }
.ac-action-t b { font-size:20px; color:var(--cp-titre); letter-spacing:-.4px; font-weight:600; }
.ac-action-t span { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--cp-leg); }
.ac-action-t svg { width:16px; height:16px; }
.ac-secu { display:flex; align-items:flex-start; gap:9px;
margin:var(--sd-bouton-dessous, 22px) 0 0; font-size:12.5px; color:var(--cp-leg); }
.ac-secu svg { width:15px; height:15px; flex:none; margin-top:2px; }
/* ── LES DEMANDES RECENTES ────────────────────────────────────────────── */
.ac-dem-l { font-size:10.5px; letter-spacing:1.5px; font-weight:700; color:var(--cp-leg);
margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.ac-dem-l i { width:7px; height:7px; border-radius:50%; background:var(--cp-vert-vif); }
.ac-dem-ligne { display:flex; align-items:center; gap:13px; padding:11px 0;
border-top:1px solid var(--cp-filet); }
.ac-dem-ligne:first-of-type { border-top:0; }
.ac-dem-ligne svg { width:24px; height:24px; flex:none; color:var(--cp-gris); }
.ac-dem-ligne b { display:block; font-size:14.5px; color:var(--cp-titre); font-weight:600; }
.ac-dem-ligne small { font-size:12.5px; color:var(--cp-leg); }
.ac-dem-pied { margin-top:12px; padding-top:11px; border-top:1px solid var(--cp-filet);
font-size:12.5px; color:var(--cp-leg); }
/* ── LES SOURCES OFFICIELLES ──────────────────────────────────────────── */
.ac-srcs { background:var(--cp-blanc); border-bottom:1px solid var(--cp-filet);
padding:15px var(--ac-gouttiere); display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
.ac-srcs-l { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--cp-leg); }
.ac-drapeau { width:20px; height:14px; border-radius:2px; overflow:hidden; display:flex; flex:none; }
.ac-drapeau i { flex:1; }
.ac-drapeau i:nth-child(1) { background:#000091; }
.ac-drapeau i:nth-child(2) { background:#fff; box-shadow:inset 0 0 0 1px #EEE; }
.ac-drapeau i:nth-child(3) { background:#E1000F; }
.ac-srcs-p { display:flex; gap:7px; flex-wrap:wrap; }
.ac-srcs-p span { font-size:12px; color:var(--cp-txt); background:var(--cp-creme);
padding:6px 12px; border-radius:15px; }
/* ── LES QUATRE CHIFFRES ──────────────────────────────────────────────── */
/* ⚠️ CORRIGE — la maquette fait demarrer le premier chiffre a 22px du bord
quand tout le reste demarre a 32 : les deux cellules des extremites
perdent leur retrait, le premier chiffre tombe alors sur la meme
verticale que les titres et le dernier finit sur la meme a droite. */
.ac-chiffres { display:grid; grid-template-columns:repeat(4,1fr);
background:var(--cp-encre); color:#fff; padding-inline:var(--ac-gouttiere); }
.ac-chiffre:first-child { padding-left:0; }
.ac-chiffre:last-child { padding-right:0; }
.ac-chiffre { padding:24px 22px; border-left:1px solid #2A2E32; }
.ac-chiffre:first-child { border-left:0; }
.ac-chiffre b { display:block; font-size:28px; font-weight:700; letter-spacing:-1px;
color:var(--cp-jaune); }
.ac-chiffre span { font-size:12.5px; color:#9BA1A7; display:block; margin-top:3px; }
/* ── COMMENT CA MARCHE ────────────────────────────────────────────────────
Le nombre de colonnes suit le nombre d etapes REELLEMENT en base. La
maquette en dessine quatre ; le registre en porte trois. Un `repeat(4,1fr)`
fige aurait laisse un trou a droite. */
.ac-etapes { display:grid; grid-template-columns:repeat(var(--ac-nb-etapes, 4), 1fr); }
.ac-etape { padding:0 22px; border-left:1px solid var(--cp-filet); }
.ac-etape:first-child { padding-left:0; border-left:0; }
.ac-etape .ac-n { font-size:32px; font-weight:700; letter-spacing:-1.5px;
color:var(--cp-filet-fort); line-height:1; margin-bottom:9px; }
.ac-etape svg { width:26px; height:26px; color:var(--cp-gris); margin-bottom:9px; display:block; }
.ac-etape b { display:block; font-size:15.5px; color:var(--cp-titre); margin-bottom:5px; font-weight:600; }
.ac-etape p { margin:0; font-size:13.5px; }
/* ── QUI SOMMES-NOUS ──────────────────────────────────────────────────── */
.ac-deuxc { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.ac-deuxc p { font-size:15px; margin:0 0 13px; }
/* Meme mecanique, meme raison : la boite grandit, l image garde son rapport. */
.ac-photo2 { position:relative; height:310px; border-radius:14px; overflow:hidden;
background:#2B3035;
--ac-img2L: var(--sd-photo-qui-largeur-f, 1.25);
--ac-img2Z: var(--sd-photo-qui-hauteur-f, 1.25);
--ac-img2X: var(--sd-photo-qui-x-f, 0);
--ac-img2Y: var(--sd-photo-qui-y-f, 0.5); }
.ac-photo2 > i { position:absolute; display:block; background:#2B3035 center/cover no-repeat;
background-image:var(--sd-photo-qui-fichier, none);
width:calc(100% * var(--ac-img2L));
height:calc(100% * var(--ac-img2Z));
left:calc((1 - var(--ac-img2L)) * var(--ac-img2X) * 100%);
top:calc((1 - var(--ac-img2Z)) * var(--ac-img2Y) * 100%); }
/* ── CE QUI NOUS DISTINGUE ────────────────────────────────────────────── */
.ac-av { padding:16px 0; border-top:1px solid var(--cp-filet); display:grid;
grid-template-columns:31px 1fr; column-gap:14px; }
.ac-av svg { width:24px; height:24px; color:var(--cp-gris); margin-top:1px; }
.ac-av b { display:block; font-size:15px; color:var(--cp-titre); margin-bottom:3px; font-weight:600; }
.ac-av p { margin:0; font-size:13.5px; }
.ac-sec.ac-sombre .ac-av { border-top-color:#33383D; }
.ac-sec.ac-sombre .ac-av svg { color:var(--cp-jaune); }
.ac-sec.ac-sombre .ac-av b { color:#fff; }
.ac-sec.ac-sombre .ac-av p { color:#A9B0B6; }
.ac-deux-colonnes { display:grid; grid-template-columns:1fr 1fr; gap:0 42px; }
/* ── LES AIDES ────────────────────────────────────────────────────────── */
.ac-aide { display:grid; grid-template-columns:40px 1fr auto; gap:15px; align-items:center;
background:var(--cp-blanc); border-radius:var(--sd-tuile-rayon, 10px); padding:16px 19px;
margin-bottom:10px; box-shadow:inset 0 0 0 1px var(--cp-filet); }
.ac-aide.ac-sans-montant { grid-template-columns:40px 1fr; }
.ac-aide svg { width:28px; height:28px; color:var(--cp-gris); }
.ac-aide b { display:block; font-size:14.5px; color:var(--cp-titre); font-weight:600; }
.ac-aide span { font-size:12.5px; color:var(--cp-leg); }
.ac-aide .ac-montant { font-size:17px; font-weight:700; color:var(--cp-titre); white-space:nowrap; }
/* ── LES QUESTIONS FREQUENTES ─────────────────────────────────────────── */
.ac-qa { padding:16px 0; border-top:1px solid var(--cp-filet); }
.ac-qa b { display:block; font-size:15px; color:var(--cp-titre); margin-bottom:4px; font-weight:600; }
.ac-qa p { margin:0; font-size:13.5px; }
.ac-largeur-lecture { max-width:74ch; }
.ac-apres-qa { margin-top:24px; }
/* ── LE BANDEAU DU BAS ────────────────────────────────────────────────── */
.ac-bande { background:var(--cp-blanc); border-top:1px solid var(--cp-filet);
padding:12px var(--ac-gouttiere); display:flex; font-size:12.5px; color:var(--cp-leg);
overflow-x:auto; white-space:nowrap; }
.ac-bande span { padding:0 17px; border-left:1px solid var(--cp-filet); }
.ac-bande span:first-child { border-left:0; padding-left:0; color:var(--cp-titre);
font-weight:600; display:flex; align-items:center; gap:7px; }
.ac-bande span:first-child i { width:7px; height:7px; border-radius:50%; background:var(--cp-jaune); }
/* ── LES QUATRE COLONNES DU PIED ──────────────────────────────────────── */
.ac-pied { background:var(--cp-encre); color:#8E959B; padding:36px var(--ac-gouttiere) 24px; font-size:13px; }
.ac-pied-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; }
.ac-pied h4 { font-size:10.5px; letter-spacing:1.3px; color:#fff; margin:0 0 9px; font-weight:700; }
.ac-pied p { margin:0; line-height:1.7; }
.ac-pied a { display:block; color:#8E959B; padding:3px 0; text-decoration:none; }
.ac-pied a:hover { color:#fff; }
/* ── CE QUI NE PARAIT QUE SUR UN APPAREIL ────────────────────────────────
Les chiffres de volume se reglent separement pour l ordinateur et pour le
telephone. Le serveur ne connaissant pas la largeur de l ecran, les deux
etats sont ecrits dans la page et c est une requete de media qui tranche.
`!important` est assume ici : ces deux classes n ont pas d autre role que
de masquer, et elles doivent gagner sur le `display` de l element. */
@media (min-width:761px) { .ac-si-tel { display:none !important; } }
@media (max-width:760px) { .ac-si-ordi { display:none !important; } }
/* ══ LE TELEPHONE ════════════════════════════════════════════════════════ */
@media (max-width:760px) {
.ac-top { padding:12px var(--ac-gouttiere); gap:9px; }
.ac-nav { display:none; }
.ac-bhaut { padding:0 11px; font-size:11.5px; height:36px; }
.ac-sec { padding:28px var(--ac-gouttiere); }
.ac-page h2 { font-size:22px; }
.ac-hero-in { padding:34px var(--ac-gouttiere) 32px; }
.ac-hero-in > * { max-width:none; }
.ac-hero h1 { font-size:29px; letter-spacing:-.9px; }
.ac-hero-voile { background:linear-gradient(180deg,
rgba(9,11,13,calc(var(--sd-photo-bandeau-voile, 0) + .15)) 0%,
rgba(9,11,13,var(--sd-photo-bandeau-voile, 0)) 55%,
rgba(9,11,13,calc(var(--sd-photo-bandeau-voile, 0) + .2)) 100%); }
.ac-action, .ac-action.ac-seul { grid-template-columns:1fr; gap:26px; padding:24px var(--ac-gouttiere); }
.ac-srcs { padding:13px var(--ac-gouttiere); gap:9px; }
.ac-chiffres { grid-template-columns:1fr 1fr; }
.ac-chiffre { padding:18px 16px; }
.ac-chiffre:nth-child(odd) { border-left:0; padding-left:0; }
.ac-chiffre:nth-child(even) { padding-right:0; }
.ac-chiffre:nth-child(n+3) { border-top:1px solid #2A2E32; }
.ac-chiffre b { font-size:22px; }
.ac-etapes { grid-template-columns:1fr; gap:18px; }
.ac-etape { padding:0; border-left:0; }
.ac-deuxc { grid-template-columns:1fr; gap:22px; }
.ac-photo2 { height:200px; }
.ac-deux-colonnes { grid-template-columns:1fr; gap:0; }
.ac-aide { grid-template-columns:32px 1fr; gap:11px; }
.ac-aide .ac-montant { grid-column:2; font-size:15px; }
.ac-bande { padding:10px var(--ac-gouttiere); }
.ac-pied { padding:24px var(--ac-gouttiere) 18px; }
.ac-pied-cols { grid-template-columns:1fr 1fr; gap:18px; }
.cp-g4, .cp-g3 { grid-template-columns:1fr 1fr; }
.cp-g2 { grid-template-columns:1fr; }
.cp-tuile { padding:calc(var(--sd-tuile-hauteur, 30px) * .7) 12px; }
.cp-tuile b { font-size:13px; }
.cp-tuile span { font-size:11px; }
.cp-bp, .cp-bs { width:100%; }
}
/* Le nombre d etapes, pose en classe plutot qu en attribut style : la page
n en porte aucun. Six suffisent -- au-dela, la ligne serait illisible. */
.ac-nb-1{--ac-nb-etapes:1}.ac-nb-2{--ac-nb-etapes:2}.ac-nb-3{--ac-nb-etapes:3}
.ac-nb-4{--ac-nb-etapes:4}.ac-nb-5{--ac-nb-etapes:5}.ac-nb-6{--ac-nb-etapes:6}
/* ══════════════════════════════════════════════════════════════════════════
LE PARCOURS DE DEVIS — feuille sortie de resources/views/lead-form.php
le 04/09/2026, telle quelle, dans son ordre d origine.
⚠️ POURQUOI ELLE EST ICI. Elle vivait DANS la page, donc APRES ce fichier
dans le document : toute regle ecrite ici perdait contre elle, en silence.
Impossible d habiller le parcours depuis la feuille commune tant qu elle
y restait.
⚠️ CE QUI N EST PAS VENU : le bloc :root des neuf reglages. Il est
fabrique par PHP (env_setting) et ne peut pas vivre dans un fichier
statique. Il est publie par le gabarit, a cote des --sd-*.
⚠️ TOUS SES SELECTEURS SONT DEJA PREFIXES .wiz- / .s1- / .qs- ou portent
un identifiant du parcours. Verifie avant le deplacement : les huit
jetons de :root qu elle definit (--field-border, --field-panel,
--qs-input-border, --wiz-recap-bg, --wiz-rail-bg, --wiz-fond-mobile,
--wiz-tuile-trait, --completude-*) ne sont lus par AUCUN autre ecran.
══════════════════════════════════════════════════════════════════════════ */
/* SEQ146 — jeton DEDIE au contour des champs de saisie (nom, prenom, adresse, CP, tel, e-mail, ville).
#8F8B83 = 3,39:1 sur blanc (seuil WCAG 3:1). NE PAS confondre avec --border (partage : cartes,
separateurs, tuiles) : le foncer repeindrait tout le parcours. */
:root { --field-border: #8F8B83; }
/* seq 1 — contour DEDIE des champs texte du questionnaire (.wiz-qual-input, defile etape 2). Plus
fonce que --field-border pour ressortir FRANCHEMENT du premier coup d'oeil. Le champ du defile est
sur fond BLANC (mesure sur staging : #FFFFFF en mobile ET ordinateur ; le beige --field-panel ne
concerne que les etapes 3/4, qui n'utilisent pas cette classe). #6F6A62 = 5,4:1 sur blanc et
4,8:1 sur le beige --field-panel -> largement au-dessus du seuil 3:1 sur les deux fonds. */
:root { --qs-input-border: #6F6A62; }
/* SEQ149 — panneau clair (sable) sous le GROUPE de champs de l'etape 3. Jeton DEDIE ;
meme sable que la page/simulateur (#F4F2EC), pas une couleur inventee. Les champs restent BLANCS. */
:root { --field-panel: #F4F2EC; }
/* seq2 — fond DEDIE de l'ecran "Verifiez vos coordonnees" (etape 4). Un ton plus soutenu que
--lvl1 (#F2F4F5) pour que les cadres BLANCS ressortent nettement, sans toucher a --lvl1 (qui
sert de fond de page a l'accueil). Contraste du texte gris secondaire (--text-muted #5C6166)
sur ce fond : ~5,1:1 (lisible). Blancs sur ce fond : nette demarcation. */
:root { --wiz-recap-bg: #E4E9EB; }
/* seq1 — gris du recap ENCORE plus soutenu, ORDINATEUR SEULEMENT : le mobile conserve la valeur
globale ci-dessus (#E4E9EB, inchange). Contraste texte gris secondaire (--text-muted #5C6166) sur
#D9DFE2 = ~4,6:1 (>= 4,5) ; blanc sur ce fond = ~1,35 de rapport (nette demarcation). */
@media (min-width:1024px){ :root { --wiz-recap-bg: #D9DFE2; } }
/* seq3 — fond DEDIE de la colonne de gauche du parcours : vert sauge DESATURE et MAT, plus soutenu
et moins vif que --accent (que l'on ne modifie pas, il sert ailleurs). Valeur retenue = la plus
soutenue qui garde le texte en place (--rail-text #5D6670) a >= 4,5:1 : #DFE6DA -> ~4,58:1.
(Un vert plus foncé tomberait sous 4,5:1 avec ce texte ; couleur du texte NON modifiee.) */
/* P6 24/08/2026 — LE RAIL PASSE AU BLANC. */
:root { --wiz-rail-bg: #FFFFFF; }
/* N1 (04/08) — fond de page du parcours sur TELEPHONE (sous 1024px) : le degrade de bureau
n'existe pas, les tuiles blanches se posaient sur le blanc du body. Jeton dedie. */
:root { --wiz-fond-mobile: #F5F5F5; }
/* N1 — trait des tuiles de secteur (ex rgba(48,56,59,.16) en dur, presque invisible) : jeton, plus marque. */
:root { --wiz-tuile-trait: rgba(48,56,59,.28); }
.wiz-wrap { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.25rem 2.5rem; background: #FFFFFF; }
/* Grand cadre : APLAT UNI gris clair (token --lvl2, un cran plus clair que --lvl3), AUCUNE bordure
ni lisere ; delimitation par l'aplat + ombre courte seule. */
.wiz-card { background: var(--lvl1); border-radius: var(--card-radius); padding: 24px; border: 0; box-shadow: 0 1px 2px rgba(20,25,30,.08); }
@media (max-width: 480px) { .wiz-card { padding: 16px; border-radius: 12px; } }
.wiz-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.wiz-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.wiz-logo-img { width: 32px; height: 32px; object-fit: contain; display: block; }
.wiz-logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.wiz-back { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); text-decoration: none; }
.wiz-back:hover { color: var(--text-primary); }
/* Colonne de navigation laterale : masquee par defaut, donc totalement
absente du rendu mobile. Elle n'apparait qu'au-dessus de 1024px. */
.wiz-sidenav { display: none; }
.wiz-progress { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 2.5rem; }
.wiz-progress-bar { height: 100%; background: var(--cta-bg); border-radius: 999px; width: 20%; transition: width .35s ease; }
.wiz-step { display: none; }
.wiz-step.active { display: block; animation: wizFadeIn .3s ease; }
@keyframes wizFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wiz-step h2 { font-size: 1.5rem; margin-bottom: .5rem; color: var(--accent-dark); }
.wiz-step-hint { color: var(--text-muted); font-size: .92rem; margin-bottom: 1.75rem; }
/* Conteneur du bandeau d'etape. En dessous de 1024px il est totalement
transparent a la mise en page : le navigateur se comporte comme s'il
n'existait pas, donc le rendu mobile est rigoureusement inchange. */
.wiz-step-head { display: contents; }
.wiz-family-section { margin-bottom: 1.75rem; }
.wiz-family-section.wiz-family-hidden { display: none; }
/* T (14/08) — filtre maison/appartement + ecran d'entree SUPPRIMES : plus de porte copro,
plus de masquage de socle_logement (redevenue une question ordinaire du defile), plus de
styles d'ecran d'entree. */
.wiz-family-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .7rem; font-weight: 600; }
.wiz-sector-tiles { display: flex; flex-wrap: wrap; gap: .75rem; }
.wiz-sector-tile {
position: relative; box-sizing: border-box; z-index: 1;
flex: 0 0 calc(25% - .57rem); min-width: 90px; aspect-ratio: 1 / 1;
border-radius: var(--tile-radius); border: 1px solid var(--wiz-tuile-trait);
cursor: pointer; text-align: center;
background: var(--tile-bg);
box-shadow: var(--tile-shadow);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
padding: .6rem .4rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wiz-sector-tile:not(.selected):hover { transform: translateY(-2px); background: var(--tile-hover); border-color: rgba(48,56,59,.32); box-shadow: 0 1px 2px rgba(20,25,30,.08); }
.wiz-sector-tile-icon-plain { display: flex; align-items: center; justify-content: center; margin-top: -.3rem; width: 52px; height: 52px; }
.wiz-sector-tile-icon-plain svg { width: var(--picto-size); height: var(--picto-size); stroke: var(--sec-color); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wiz-sector-tile-icon-plain img { width: var(--picto-size); height: var(--picto-size); object-fit: contain; }
.wiz-sector-tile-label { font-size: .74rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
/* 21/07/2026 — selection EPUREE : tuile BLANCHE + fin lisere citron-vert + coche (haut-GAUCHE ici,
car le badge compteur occupe le haut-droite). Picto/libelle restent fonces. Coche via ::after. */
/* SEQ3 — selection PAR SECTEUR : couleur pilotee par --sec-color (admin). Bordure 2px + fond
legerement teinte de cette couleur (color-mix) + coche/badge en --sec-color. Libelle garde
un texte fonce (#20282b) pour rester lisible quelle que soit la couleur du secteur. */
.wiz-sector-tile.selected { background: color-mix(in srgb, var(--sec-color) 12%, #ffffff); border: 2px solid var(--sec-color); box-shadow: var(--tile-shadow); }
.wiz-sector-tile.selected .wiz-sector-tile-label { color: #20282b; }
.wiz-sector-tile.selected::after { content: '✓'; position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--sec-color); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.wiz-sector-tile.wiz-list-open { z-index: 20; }
.wiz-sector-tile-badge { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--cta-bg); display: none; align-items: center; justify-content: center; padding: 0 4px; }
.wiz-sector-tile.selected .wiz-sector-tile-badge { display: flex; }
.wiz-badge-check { width: 11px; height: 11px; stroke: var(--cta-text); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wiz-badge-count { display: none; font-size: 11px; font-weight: 800; color: var(--cta-text); line-height: 1; }
.wiz-sector-tile-badge.has-count .wiz-badge-check { display: none; }
.wiz-sector-tile-badge.has-count .wiz-badge-count { display: inline; }
.wiz-sector-tile-remove { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border); display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.wiz-sector-tile.selected .wiz-sector-tile-remove { display: flex; }
.wiz-sector-tile-remove:hover { background: #fdf0ee; border-color: #f3c7c0; }
.wiz-sector-tile-remove svg { width: 11px; height: 11px; stroke: #8B95A1; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.wiz-sector-tile-remove:hover svg { stroke: #c0392b; }
@media (max-width: 480px) { .wiz-sector-tile { flex-basis: calc(33.333% - .5rem); } }
.wiz-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 200; display: none; padding: 1.25rem; }
.wiz-modal-overlay.show { display: block; }
.wiz-activity-sublist { display: none; border: 1.5px solid var(--border); background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(20,25,30,.08); overflow: hidden; }
.wiz-activity-sublist.wiz-modal-open { display: flex; flex-direction: column; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 210; width: min(360px, calc(100vw - 2.5rem)); max-height: min(480px, 80vh); }
.wiz-activity-sublist-header { padding: .8rem .95rem; border-bottom: 1px solid var(--border); }
.wiz-activity-sublist-hint { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.wiz-activity-sublist-body { padding: .5rem .95rem; overflow-y: auto; flex: 1; }
.wiz-activity-option { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; cursor: pointer; font-size: .9rem; }
.wiz-activity-option input[type=checkbox] { accent-color: var(--sec-color, var(--accent-dark)); width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.wiz-activity-option span { font-size: .9rem; font-weight: 500; color: var(--text-primary); }
.wiz-activity-option-dontknow span { font-weight: 500; color: var(--text-muted); font-style: italic; }
.wiz-activity-option-dontknow input[type=checkbox] { accent-color: var(--text-muted); }
.wiz-activity-sublist-divider { border-top: 1px solid var(--border); margin: .3rem 0 .45rem; }
.wiz-activity-sublist-footer { padding: .75rem .95rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.wiz-activity-sublist-footer .wiz-btn-primary { width: auto; }
.wiz-step1-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.wiz-step1-bar-info { font-size: .88rem; font-weight: 600; color: var(--text-primary); }
.wiz-step1-bar-info strong { color: var(--accent-dark); }
.wiz-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1.5px solid var(--border); border-radius: 9px; margin-top: 4px; max-height: 220px; overflow-y: auto; z-index: 20; box-shadow: 0 1px 2px rgba(20,25,30,.08); }
.wiz-suggestion-item { padding: .65rem .9rem; font-size: .85rem; cursor: pointer; text-align: left; }
.wiz-suggestion-item:hover { background: var(--bg-panel); }
.wiz-suggestion-empty { padding: .65rem .9rem; font-size: .8rem; color: var(--text-muted); text-align: left; font-style: italic; }
.wiz-link-btn { background: none; border: none; padding: 0; margin-top: .5rem; cursor: pointer; font-family: var(--font-body); font-size: .82rem; font-weight: 700; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.wiz-link-btn:hover { color: var(--text-primary); }
.wiz-manual-address { background: transparent; border: 0; border-radius: 12px; padding: 1.1rem 1.1rem .3rem; margin-bottom: 1.25rem; }
.wiz-manual-address .wiz-hint-inline { color: var(--text-muted); font-size: .8rem; margin: -.5rem 0 .8rem; }
.wiz-dialog-overlay { position: fixed; inset: 0; background: rgba(31,41,51,.45); z-index: 100; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.wiz-dialog-overlay.show { display: flex; }
.wiz-dialog-box { background: #fff; border-radius: 16px; padding: 1.75rem; max-width: 380px; width: 100%; box-shadow: 0 1px 2px rgba(20,25,30,.08); text-align: center; animation: wizDialogIn .18s ease; }
@keyframes wizDialogIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.wiz-dialog-icon { width: 44px; height: 44px; border-radius: 50%; background: #fdf0ee; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.wiz-dialog-message { font-size: .92rem; color: var(--text-primary); line-height: 1.5; margin-bottom: 1.25rem; }
.wiz-dialog-ok { font-family: var(--font-body); font-weight: 700; font-size: .9rem; border: 0; cursor: pointer; color: var(--accent-dark); background: var(--lvl0); box-shadow: var(--tile-shadow); padding: .7rem 1.5rem; border-radius: 9px; transition: transform .15s; }
.wiz-dialog-ok:hover { background: var(--accent); color: var(--text-strong); }
/* F4 (14/08) — CONFIRMATION DE RETRAIT. Reprend la boite maison du parcours (.wiz-dialog-overlay /
.wiz-dialog-box) et calque la structure de la modale de suppression de l'admin (.qz-modal :
titre + texte + deux actions). Charte : pas de bordure, pas de cadre imbrique, pas de relief ;
jetons EXISTANTS uniquement (aucune valeur en dur). Action foncee = bloc sombre --btn-bg (#383D42),
texte clair --btn-text ; "Annuler" = aplat clair --lvl3, texte --text-primary. Fort contraste. */
.wiz-confirm-box { text-align: left; }
.wiz-confirm-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text-strong); margin: 0 0 .5rem; }
.wiz-confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }
.wiz-confirm-cancel, .wiz-confirm-ok { font-family: var(--font-body); font-weight: 700; font-size: .9rem; border: 0; cursor: pointer; padding: .62rem 1.2rem; border-radius: 9px; transition: transform .15s; }
.wiz-confirm-cancel { background: var(--lvl3); color: var(--text-primary); }
.wiz-confirm-ok { background: var(--btn-bg); color: var(--btn-text); }
.wiz-confirm-cancel:hover, .wiz-confirm-ok:hover { transform: translateY(-1px); }
.wiz-field { margin-bottom: 1.25rem; }
.wiz-field label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: .4rem; }
.wiz-field input[type=text], .wiz-field input[type=email], .wiz-field input[type=tel], .wiz-field textarea, .wiz-field select { width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--field-border); border-radius: 9px; font-family: var(--font-body); font-size: .95rem; color: var(--text-primary); background: #fff; box-sizing: border-box; }
.wiz-field input[type=text]:focus, .wiz-field input[type=email]:focus, .wiz-field input[type=tel]:focus, .wiz-field textarea:focus, .wiz-field select:focus { outline: none; border-color: var(--cta-bg); box-shadow: 0 0 0 3px rgba(220,188,24,.30); } /* Q 04/08 : bordure + halo au clic en jaune d'action (ex terracotta rgba(180,83,31)) */
/* SEQ5 — remplissage auto du navigateur : garder le fond BLANC (var(--lvl0)) et le texte lisible
dans tous les etats. Le box-shadow inset est la seule parade fiable contre le fond bleu pale de
Chrome ; !important indispensable (le navigateur pose sa teinte avec une priorite qu'un background
normal ne bat pas). Applique a TOUS les champs (un futur champ pourra etre prerempli). */
.wiz-field input:-webkit-autofill, .wiz-field input:-webkit-autofill:hover, .wiz-field input:-webkit-autofill:focus, .wiz-field input:-webkit-autofill:active, .wiz-field textarea:-webkit-autofill, .wiz-field select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--lvl0) inset !important; box-shadow: 0 0 0 1000px var(--lvl0) inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary); }
.wiz-field textarea { resize: vertical; min-height: 90px; }
.wiz-field-row { display: flex; gap: 1rem; }
.wiz-field-row .wiz-field { flex: 1; }
.wiz-fill { background: transparent; border-radius: 14px; padding: 1.4rem 1.3rem .35rem; margin-bottom: 1.5rem; }
.wiz-optional-tag { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); font-weight: 400; margin-left: .3rem; opacity: .8; }
.wiz-qual-intro { background: transparent; border: 0; border-left: 5px solid var(--cta-bg); border-radius: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0; padding: .9rem 1rem; font-size: .86rem; line-height: 1.55; color: var(--text-body); margin-bottom: 1.75rem; }
/* Masque le bloc d'explication en tete d'etape ("Ces questions sont facultatives...") sans toucher
au markup ni au texte. Le JS pose style.display='' en mode normal -> retombe sur ce display:none
(aucun !important necessaire). N'affecte PAS la note du bas #qualContextMsgSim (id different). */
#qualContextMsg { display: none; }
.wiz-qual-intro strong { color: var(--text-primary); font-weight: 700; }
.wiz-qual-field.wiz-qual-missing,
.wiz-picked.wiz-qual-missing { border-left: 5px solid #c0392b; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: .7rem; margin-left: -.7rem; }
.wiz-radio-group { display: flex; gap: .6rem; flex-wrap: wrap; }
/* SEQ1 — tuiles blanches a relief net (fini le gris-sur-gris invisible), ZERO bordure */
.wiz-radio-pill { padding: .7rem 1.25rem; border: 0; border-radius: 999px; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--accent-dark); background: var(--lvl0); box-shadow: var(--tile-shadow); transition: background .15s, box-shadow .15s; }
.wiz-radio-pill:hover { background: var(--accent); color: var(--text-strong); box-shadow: 0 2px 6px rgba(30,35,40,.14); }
.wiz-radio-pill.selected { background: var(--cta-bg); color: var(--cta-text); box-shadow: none; }
.wiz-actions { display: flex; justify-content: space-between; gap: .9rem; margin-top: 2rem; }
.wiz-btn-primary { font-family: var(--font-body); font-weight: 700; font-size: .95rem; border: 0; cursor: pointer; color: var(--accent-dark); background: var(--lvl0); box-shadow: var(--tile-shadow); padding: .9rem 1.6rem; border-radius: 10px; transition: transform .15s, box-shadow .15s; }
.wiz-btn-primary:hover { background: var(--accent); color: var(--text-strong); }
.wiz-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.wiz-btn-secondary { font-family: var(--font-body); font-weight: 600; font-size: .9rem; border: 0; cursor: pointer; color: var(--accent-dark); background: var(--lvl0); padding: .9rem 1.2rem; border-radius: 10px; box-shadow: var(--tile-shadow); transition: background .15s, box-shadow .15s; }
.wiz-btn-secondary:hover { background: var(--accent); color: var(--text-strong); }
.wiz-error { color: #c0392b; font-size: .85rem; margin-top: .3rem; }
.wiz-error-box { background: #fdf0ee; border: 1.5px solid #f3c7c0; border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem; color: #a4372a; font-size: .88rem; }
.wiz-recap-box { background: #FFFFFF; border: 1px solid rgba(48,56,59,.16); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.75rem; }
.wiz-recap-box-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: .5rem; }
.wiz-recap-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wiz-recap-chip { font-size: .82rem; font-weight: 600; color: var(--text-primary); background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: .3rem .75rem; }
.wiz-recap-chip small { color: var(--text-muted); font-weight: 500; }
.wiz-qual-block { margin-bottom: 1.5rem; }
/* 24/07/2026 — ALIGNEMENT UNIQUE : le retrait HORIZONTAL du secteur est supprime A LA SOURCE.
Tout (cartes blanches, cadre du socle, questions ordinaires) tombe desormais sur la meme ligne
verticale, sans aucune marge de compensation. Le token --qual-sector-pad reste DECLARE (reference
historique) mais n'est plus applique. Padding VERTICAL inchange (1.3rem haut, 0 bas). */
.wiz-qual-sector { --qual-sector-pad: 1.35rem; background: transparent; border: 0; border-radius: 16px; margin-top: 1.25rem; padding: 1.3rem 0 0; }
.wiz-qual-sector-title { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: 1.1rem; }
.wiz-qual-sector-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sec-color, var(--accent)); flex: none; }
.wiz-qual-progress { background: transparent; border: 0; border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1.25rem; }
.wiz-qual-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.wiz-qual-progress-label { font-size: .9rem; font-weight: 700; color: var(--text-primary); }
.wiz-qual-progress-count { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.wiz-qual-progress-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.wiz-qual-progress-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent-dark); transition: width .3s ease; }
.wiz-acc-head { width: 100%; display: flex; align-items: center; gap: .6rem; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-display); text-align: left; }
.wiz-acc-name { flex: 1; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--text-primary); }
.wiz-acc-status { font-family: var(--font-body); font-size: .72rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; border: 1.5px solid var(--border); color: var(--text-muted); background: #fff; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.wiz-acc-status.done { border-color: var(--accent-dark); background: var(--accent); color: var(--on-accent); }
.wiz-acc-status svg { width: 12px; height: 12px; }
.wiz-acc-chevron { width: 18px; height: 18px; color: var(--text-muted); flex: none; transition: transform .2s ease; }
.wiz-qual-sector.open .wiz-acc-chevron { transform: rotate(180deg); }
.wiz-acc-body { display: none; margin-top: 1.1rem; }
.wiz-qual-sector.open .wiz-acc-body { display: block; }
/* Un seul domaine sélectionné : déroulé simple, sans accordéon */
.wiz-qual-block-flat .wiz-acc-head { pointer-events: none; }
.wiz-qual-block-flat .wiz-acc-status,
.wiz-qual-block-flat .wiz-acc-chevron { display: none; }
.wiz-qual-block-flat .wiz-acc-body { display: block; }
/* Resume du choix dans l'en-tete (ex. « Simuler ») : visible seulement s'il est rempli. */
.wiz-acc-summary { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--accent-dark); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-acc-summary:empty { display: none; }
/* VOIE 1 (Gerard) — plus AUCUN chevron de repli : ni en domaine unique, ni en multidomaine (pager,
un domaine a la fois). L'exception .wiz-has-trigger qui re-affichait un chevron cliquable en mode
plat est neutralisee ; les secteurs a declencheur suivent la regle plate normale (chevron masque,
en-tete non cliquable, corps toujours ouvert). La classe .wiz-has-trigger reste posee (peut servir
ailleurs) mais n'a plus d'effet sur l'accordeon. */
.wiz-picked { margin-bottom: 1.35rem; background: #ffffff; border: 0; border-radius: 10px; padding: .75rem .9rem; }
.wiz-picked-title { font-size: .95rem; font-weight: 800; color: var(--text-primary); margin-bottom: .6rem; }
.wiz-picked-hint { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); font-weight: 400; margin-left: .3rem; opacity: .8; }
.wiz-picked-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.wiz-picked-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: var(--accent-dark); background: var(--lvl0); box-shadow: var(--tile-shadow); transition: border-color .15s, background .15s, color .15s; }
.wiz-picked-pill:hover { background: var(--accent); color: var(--text-strong); }
.wiz-picked-pill.selected { background: var(--cta-bg); color: var(--cta-text); }
.wiz-picked-check { display: none; width: 13px; height: 13px; flex: none; }
.wiz-picked-check svg { width: 13px; height: 13px; }
.wiz-picked-pill.selected .wiz-picked-check { display: inline-flex; }
/* Longue liste (plus de 8) : on n'affiche que les choix faits, le reste est repliable. */
.wiz-picked-collapsed .wiz-picked-pill:not(.selected) { display: none; }
/* ═══ 13/07/2026 — LES SECTIONS DU QUESTIONNAIRE (points A et B) ═══════ */
/* La question « Comment souhaitez-vous avancer » : elle ne précise pas le
projet, elle décide du PARCOURS. Elle a donc son propre cadre. */
.wiz-sec-advance {
background: #ffffff;
border: 0;
border-radius: 10px;
padding: .75rem .9rem;
margin-bottom: 1.35rem;
}
.wiz-sec-advance .wiz-qual-field:last-child { margin-bottom: .75rem; }
/* Le questionnaire proprement dit. */
.wiz-sec-title {
font-family: var(--font-mono);
font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted); font-weight: 700;
margin: 0 0 .9rem; padding-bottom: .5rem;
border-bottom: 1.5px solid var(--border);
}
/* Message d'accroche en tete de questionnaire : rassurer sans decourager. */
.wiz-sec-intro {
font-size: .84rem;
line-height: 1.5;
color: var(--text-muted);
margin: 0 0 1.1rem;
}
/* Le socle : il ne flotte plus au-dessus du questionnaire — il EN FAIT PARTIE. */
.wiz-socle-card {
border: 1.5px solid var(--border); border-radius: 14px;
margin-bottom: .85rem; overflow: hidden; background: #fff;
}
.wiz-socle-head {
display: flex; align-items: center; gap: .6rem;
padding: .95rem 1.15rem;
background: transparent;
}
.wiz-socle-dot {
width: 9px; height: 9px; border-radius: 50%; flex: none;
background: var(--text-primary); opacity: .35;
}
.wiz-socle-name { font-weight: 800; font-size: .98rem; color: var(--text-primary); }
/* Socle : les 2 questions (statut / logement) cote a cote quand la largeur le permet,
et repli automatique a 1 colonne en dessous (slot etroit / mobile) via auto-fit. */
.wiz-socle-body { padding: 1.15rem 1.15rem .1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.4rem; align-items: start; }
/* ═══ 13/07/2026 — LE SOCLE DÉPLACÉ SE FOND DANS LE QUESTIONNAIRE ═══════
Gérard : « ce n'est pas esthétique ».
Il avait raison : le socle gardait un CADRE GRIS au milieu de questions qui
n'en ont pas. Il ressemblait à une pièce rapportée — parce qu'il en était une.
Une fois déménagé, il n'est plus un bloc : ce sont juste DEUX QUESTIONS DE
PLUS, exactement comme « Votre maison est… » ou « Surface habitable ».
Ni cadre, ni fond, ni titre. Le visiteur ne doit même pas remarquer qu'il
s'agit de questions communes à tous les secteurs.
⚠️ `!important` assumé : `.wiz-qual-sector` porte son propre fond et sa
bordure, avec une spécificité plus forte. Sans lui, le cadre revient — et
c'est exactement ce qui s'est passé à la première livraison. */
.wiz-socle-slot:empty { display: none; }
.wiz-picked-more { background: none; border: none; padding: .3rem 0; margin-top: .55rem; cursor: pointer; font-family: var(--font-body); font-size: .82rem; font-weight: 700; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.wiz-picked-more:hover { color: var(--text-primary); }
.wiz-qual-field { margin-bottom: 1.15rem; }
/* Bloc declencheur ("Comment souhaitez-vous avancer" + 2 boutons) encadre en carte blanche
comme .wiz-aides-item. Cible le VRAI element (le champ declencheur), pas .wiz-sec-advance
qui n'existe pas quand le declencheur est une question de sous-secteur (cas reel en base). */
.wiz-qual-field[data-qual-trigger="1"] { background: #ffffff; border: 0; border-radius: 10px; padding: .75rem .9rem; }
.wiz-qual-label { font-size: .95rem; font-weight: 800; color: var(--text-primary); margin-bottom: .5rem; }
/* SEQ146 — le point d'interrogation final reste solidaire du dernier mot (evite l'orphelin " ?" seul
a la ligne), quelle que soit la largeur et l'origine du texte (intitules de la base inclus).
Regle d'AFFICHAGE pure : aucun libelle modifie, aucun SQL. S'applique a TOUS les titres de question. */
.wiz-qual-label, .wiz-step-head h2 { text-wrap: pretty; }
.wiz-qual-help { font-size: .8rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 .6rem; border-left: 2px solid var(--cta-bg); padding-left: .6rem; }
/* seq 1 — habillage general des champs texte du questionnaire (regle valable pour TOUS les
futurs champs .wiz-qual-input). Valeurs recopiees des champs de l'ecran "Comment vous joindre"
(etape 3) : carte blanche, contour fin gris de champ, coins 12px, hauteur genereuse, largeur pleine. */
.wiz-qual-input { width: 100%; background: #ffffff; border: 1.5px solid var(--qs-input-border); border-radius: 12px; padding: .95rem 1rem; min-height: 56px; box-sizing: border-box; font-family: var(--font-body); font-size: .95rem; color: var(--text-primary); }
.wiz-qual-input:focus { outline: none; border-color: var(--cta-bg); box-shadow: 0 0 0 3px rgba(220,188,24,.30); } /* Q 04/08 : focus jaune d'action (ex terracotta) */
/* seq 2 — zone multi-lignes a hauteur FIXE (~4 lignes) : poignee retiree (resize:none), et quand le
texte depasse une barre de defilement verticale apparait A L'INTERIEUR (overflow-y:auto) ; le champ
ne grandit jamais. Largeur/fond/coins/bordure viennent de .wiz-qual-input (seq 1), inchanges. */
.wiz-qual-textarea { resize: none; height: 120px; overflow-y: auto; line-height: 1.5; }
/* seq 4 — compteur discret sous la zone ; passe au vert (n'alerte plus) au minimum atteint. */
.wiz-qual-counter { font-size: .78rem; color: var(--text-muted); margin: .35rem 0 0; }
.wiz-qual-counter.ok { color: var(--accent-dark); }
.wiz-qual-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.wiz-qual-pill { padding: .5rem .95rem; border: 0; border-radius: var(--tile-radius); cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--accent-dark); background: var(--lvl0); box-shadow: var(--tile-shadow); transition: background .15s, color .15s, box-shadow .15s; }
.wiz-qual-pill:hover { background: var(--accent); color: var(--text-strong); }
.wiz-qual-pill.selected { background: var(--cta-bg); color: var(--cta-text); box-shadow: none; }
/* Boutons de la question declencheur (Simuler / Etre recontacte) : look bouton, parent+1, ZERO bordure */
.wiz-qual-field[data-qual-trigger="1"] .wiz-qual-pill { background: var(--lvl0); color: var(--accent-dark); border: 0; padding: .8rem 1.25rem; font-weight: 600; box-shadow: var(--tile-shadow); }
.wiz-qual-field[data-qual-trigger="1"] .wiz-qual-pill:hover { background: var(--accent); color: var(--text-strong); box-shadow: 0 1px 2px rgba(20,25,30,.08); }
/* SEQ2 — etat SELECTIONNE net (regle +specifique que celle ci-dessus qui masquait le liseré) */
.wiz-qual-field[data-qual-trigger="1"] .wiz-qual-pill.selected { background: var(--cta-bg); color: var(--cta-text); box-shadow: none; }
/* P5-b — MESURE : --text-muted sur blanc = 3,69 pour 1, sous le seuil. On garde
l'intention (cette pastille reste plus discrete que ses voisines, qui sont en
--accent-dark a 18,16) mais on la rend lisible : --text-body donne 8,80.
Et une fois CHOISIE, son fond gris clair veut une encre NOIRE, pas blanche :
blanc sur --text-muted = 3,69 ; noir = 5,03. */
.wiz-qual-pill-dontknow { color: var(--text-body); font-style: italic; }
.wiz-qual-pill-dontknow.selected { background: var(--text-muted); border-color: var(--text-muted); color: var(--cta-text); font-style: normal; }
/* ── Bloc « Aides disponibles » (LOT 5.1) ─────────────────────────────
Alimenté par `rge_benefits` : la même source que le filtre partenaires.
Si aucune aide n'est active sur le secteur, le bloc n'existe pas. */
/* Cartes d'aides alignees sur le niveau ETAPE, comme tout le reste : depuis le 24/07/2026 le retrait
du secteur est supprime A LA SOURCE, donc plus aucune marge de compensation ici. Padding vertical
inchange (1.1rem haut, 0 bas). */
.wiz-aides { background: transparent; border: 0; border-radius: 14px; padding: 1.1rem 0 0; }
.wiz-aides-head { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: .98rem; color: var(--text-strong); margin-bottom: .85rem; }
.wiz-aides-icon { display: flex; flex: none; color: var(--accent-dark); }
.wiz-aides-icon svg { width: 22px; height: 22px; }
.wiz-aides-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.wiz-aides-item { background: #ffffff; border: 0; border-radius: 10px; padding: .75rem .9rem; }
.wiz-aides-item-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.wiz-aides-item-head strong { font-size: .92rem; color: var(--text-primary); }
.wiz-aides-tag { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-dark); background: var(--lvl0); box-shadow: var(--tile-shadow); border: 0; border-radius: 999px; padding: .12rem .5rem; }
.wiz-aides-amount { font-size: .78rem; font-weight: 700; color: var(--accent-dark); }
.wiz-aides-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin: .35rem 0 0; }
.wiz-aides-src { font-size: .74rem; margin: .4rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.wiz-aides-src a { color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.wiz-aides-src a:hover { text-decoration: underline; }
.wiz-aides-date { font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); }
.wiz-aides-check { display: flex; gap: .65rem; align-items: flex-start; background: #ffffff; border: 0; border-radius: 10px; padding: .85rem .95rem; cursor: pointer; font-size: .86rem; line-height: 1.5; color: var(--text-primary); }
.wiz-aides-check input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--cta-bg); flex-shrink: 0; cursor: pointer; }
.wiz-aides-check strong { display: block; margin-bottom: .15rem; }
.wiz-aides-check span { color: var(--text-muted); }
.wiz-aides-check strong { color: var(--text-primary); }
/* Avertissement affiche seulement quand la case aides est decochee (toggle via l'attribut hidden en JS). */
.wiz-aides-warn { margin: .6rem 0 0; color: #b91c1c; font-size: .82rem; font-weight: 600; line-height: 1.45; }
.wiz-more-toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: .88rem; color: var(--accent-dark); background: none; border: none; padding: .3rem 0; margin: .25rem 0 .5rem; }
.wiz-more-toggle:hover { color: var(--text-primary); }
.wiz-more-toggle svg { width: 15px; height: 15px; transition: transform .2s; }
.wiz-more-toggle.open svg { transform: rotate(45deg); }
.wiz-more-block { display: none; border-top: 1.5px solid var(--border); margin-top: .5rem; padding-top: 1.25rem; }
.wiz-more-block.open { display: block; }
.wiz-reassure { background: #FFFFFF; border: 1px solid rgba(48,56,59,.16); border-radius: 12px; padding: .9rem 1rem; font-size: .84rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1.25rem; }
.wiz-final-recap { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
/* Les sous-lignes du récap : « Aides financières » une fois, puis un secteur
par ligne. Légèrement en retrait, un peu plus discrètes que le libellé. */
.wiz-recap-sub {
display: inline-block; margin-left: 1rem;
color: var(--text-muted); font-size: .92em;
}
/* 🆕 21/07/2026 — pastille "€ Aides" sur un besoin éligible (récap "Vos besoins").
Même vert discret que le bloc aides du parcours (cohérence). */
.wiz-recap-aide {
display: inline-block; margin-left: .3rem; vertical-align: baseline; white-space: nowrap;
font-size: .68rem; font-weight: 700; color: var(--accent-dark);
background: var(--lvl0); box-shadow: var(--tile-shadow); border: 0; border-radius: 999px; padding: .05rem .45rem;
}
.wiz-recap-section { background: #FFFFFF; border: 1px solid rgba(48,56,59,.16); border-radius: 12px; padding: 1rem 1.1rem; }
.wiz-recap-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.wiz-recap-section-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cta-bg); font-weight: 600; }
.wiz-recap-edit { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--accent-dark); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wiz-recap-edit:hover { color: var(--text-primary); }
.wiz-recap-line { font-size: .9rem; color: var(--text-primary); line-height: 1.55; }
.wiz-recap-line b { font-weight: 700; }
.wiz-recap-empty { color: var(--text-muted); font-style: italic; }
/* M1 (14/08) — COTE VISITEUR : plus de rond ni de pourcentage au recap. Tete du bloc en deux groupes :
[titre + coche fine] a gauche, [Modifier / Retirer] a droite, avec de l'air. La phrase
"{n} questions restantes" passe SOUS le titre, en teinte discrete. Aucune bordure de bouton (charte). */
.wiz-recap-head-left { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.wiz-recap-head-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.wiz-recap-coche { display: inline-flex; color: var(--text-muted); }
.wiz-recap-coche svg { width: 15px; height: 15px; }
.wiz-recap-restantes { font-family: var(--font-body); font-size: .78rem; color: var(--text-muted); margin: -.15rem 0 .5rem; }
.wiz-recap-retirer { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.wiz-recap-retirer:hover { color: var(--text-primary); }
/* J7 — ROND DE COMPLETUDE (anneau + % au centre). Fin, sans relief ni ombre. Trois seuils de couleur :
le seuil MOYEN reutilise le jeton EXISTANT --cta-bg (jaune d'action) ; aucun jeton ROUGE ni VERT
n'existant dans le fichier, deux jetons DEDIES sont crees (voir rapport J7d). */
:root { --completude-low: #C0623A; --completude-mid: var(--cta-bg); --completude-high: #4F9D69; }
.completude-ring { display: inline-flex; width: 34px; height: 34px; flex: none; vertical-align: middle; margin-left: .5rem; }
.completude-ring svg { width: 100%; height: 100%; }
.completude-ring-track { fill: none; stroke: rgba(48,56,59,.16); stroke-width: 3; }
.completude-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; }
.completude-ring-text { font-family: var(--font-body); font-size: 10px; font-weight: 700; fill: var(--text-strong); }
.completude-ring--low .completude-ring-fill { stroke: var(--completude-low); }
.completude-ring--mid .completude-ring-fill { stroke: var(--completude-mid); }
.completude-ring--high .completude-ring-fill { stroke: var(--completude-high); }
/* seq 134 — titres de metier du recapitulatif (panneau de droite) en terre cuite.
Classes DEDIEES au panneau #finalRecap (rendu JS) : n'atteignent ni la colonne
de gauche (.wiz-rail-recap-metier) ni un autre ecran. Couleur seule, rien d'autre. */
.wiz-recap-prec-metier { color: var(--cta-bg); }
.wiz-recap-aides-metier { color: var(--cta-bg); }
.wiz-thanks-message { background: #FFFFFF; border: 1px solid rgba(48,56,59,.16); border-radius: 12px; padding: 1.1rem 1.2rem; font-size: .92rem; color: var(--text-primary); line-height: 1.55; margin-bottom: .5rem; }
.wiz-consent { display: flex; gap: .65rem; align-items: flex-start; background: #FFFFFF; border: 1px solid rgba(48,56,59,.16); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.25rem; cursor: pointer; font-size: .86rem; line-height: 1.5; color: var(--text-primary); }
.wiz-consent input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent-dark); flex-shrink: 0; cursor: pointer; }
.wiz-thanks { text-align: center; padding: 1.5rem 0; }
.wiz-thanks-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; }
.wiz-thanks h2 { margin-bottom: .75rem; }
.wiz-thanks > p { color: var(--text-muted); margin-bottom: 2rem; }
.wiz-synoptique { display: flex; flex-direction: column; gap: 0; text-align: left; max-width: 420px; margin: 0 auto; }
.wiz-syn-step { display: flex; gap: .9rem; align-items: flex-start; }
.wiz-syn-icon { width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; border: 1px solid rgba(48,56,59,.16); display: flex; align-items: center; justify-content: center; flex: none; color: var(--accent-dark); }
.wiz-syn-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wiz-syn-body { padding-bottom: 1.5rem; }
.wiz-syn-body strong { display: block; font-size: .95rem; color: var(--text-primary); }
.wiz-syn-body span { font-size: .84rem; color: var(--text-muted); }
.wiz-syn-connector { width: 1.5px; background: var(--border); height: 100%; min-height: 18px; margin: 0 auto; position: relative; left: -20px; }
.wiz-syn-step:last-child .wiz-syn-body { padding-bottom: 0; }
.wiz-parrainage { margin-top: 2rem; padding: 1.5rem; border: 1.5px dashed var(--border); border-radius: 14px; text-align: left; }
.wiz-parrainage h3 { font-size: 1rem; margin-bottom: .5rem; }
.wiz-parrainage p { color: var(--text-muted); font-size: .88rem; margin-bottom: 0; }
.wiz-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(31,41,51,.25); border-top-color: var(--text-primary); border-radius: 50%; animation: wizSpin .7s linear infinite; vertical-align: middle; margin-right: .5rem; }
@keyframes wizSpin { to { transform: rotate(360deg); } }
/* 🆕 21/07/2026 — NIVEAU 1 : fil des grandes étapes (remplace l'ancienne barre globale). */
.wiz-steprail { display: flex; align-items: center; gap: .3rem; margin-bottom: 2.5rem; }
.wiz-steprail-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.wiz-steprail-item.current { color: var(--text-primary); font-weight: 800; }
.wiz-steprail-num { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; flex: none; }
.wiz-steprail-num svg { width: 11px; height: 11px; }
.wiz-steprail-item.current .wiz-steprail-num { border-color: #30383b; background: #30383b; color: #fff; }
.wiz-steprail-item.done .wiz-steprail-num { border-color: var(--border); background: var(--lvl1); color: var(--text-strong); }
.wiz-steprail-sep { flex: 1 1 8px; min-width: 8px; height: 1.5px; background: var(--border); }
/* Une etape deja atteinte est cliquable : on peut y revenir. */
.wiz-steprail-item.reachable { cursor: pointer; }
.wiz-steprail-item.reachable:hover .wiz-steprail-label { text-decoration: underline; }
/* seq 5 — un repere NON atteignable (sans .reachable) n'accepte plus le clic (pointer-events:none) et
n'affiche pas un curseur "cliquable" : le clic ne part plus dans le vide, en silence. Les reperes
.reachable gardent EXACTEMENT leur comportement ; un repere qui devient atteignable retrouve .reachable
(donc le clic) au prochain rendu du fil. */
.wiz-steprail-item:not(.reachable) { pointer-events: none; cursor: default; }
@media (max-width: 560px) {
.wiz-steprail-label { display: none; }
.wiz-steprail-item.current .wiz-steprail-label { display: inline; }
}
/* 🆕 21/07/2026 — NIVEAU 2 : détail du domaine courant (multidomaine).
"Domaine X sur N" + nom courant, puis une fine barre segmentée (indicateur, NON cliquable). */
.wiz-domain-pager { background: #FFFFFF; border: 1px solid rgba(48,56,59,.16); border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1.25rem; }
.wiz-domain-pager-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.wiz-domain-pager-title { font-size: .95rem; font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-domain-pager-count { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); font-weight: 700; white-space: nowrap; flex: none; }
/* 🆕 21/07/2026 — indicateur en ÉTAPES NUMÉROTÉES (une par domaine, ordre de sélection).
INDICATEUR non cliquable. 3 états basés sur currentDomainIndex :
· passé (index < courant) : rond VERT #22c55e + coche ; ligne de liaison verte.
· courant (index === courant) : rond FONCÉ + numéro blanc ; nom en gras/foncé.
· à venir (index > courant) : rond clair, fine bordure grise, numéro gris ; nom muted ; liaison grise. */
.wiz-domain-steps { display: flex; align-items: flex-start; }
.wiz-domain-step { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
/* ligne de liaison vers l'étape suivante, DERRIÈRE les ronds */
.wiz-domain-step:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.wiz-domain-step.done:not(:last-child)::after { background: var(--cta-bg); } /* Q 04/08 : liaison "passe" en jaune d'action (ex vert #22c55e) */
.wiz-domain-step-round { position: relative; z-index: 1; box-sizing: border-box; width: 25px; height: 25px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; background: #fff; border: 1.5px solid var(--border); color: var(--text-muted); }
.wiz-domain-step-round svg { width: 13px; height: 13px; }
.wiz-domain-step.current .wiz-domain-step-round { background: var(--text-primary); border-color: var(--text-primary); color: #fff; }
.wiz-domain-step.done .wiz-domain-step-round { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-text); } /* Q 04/08 : rond "passe" jaune d'action + coche anthracite lisible (ex vert #22c55e / coche blanche) */
.wiz-domain-step-name { font-size: .7rem; line-height: 1.15; text-align: center; color: var(--text-muted); max-width: 100%; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wiz-domain-step.current .wiz-domain-step-name { color: var(--text-primary); font-weight: 700; }
@media (max-width: 560px) { .wiz-domain-step-name { font-size: .62rem; } }
.wiz-honeypot { position: absolute; left: -9999px; top: -9999px; }
@media (min-width: 1024px) {
/* 1. Le parcours occupe une largeur confortable sur ordinateur */
.wiz-wrap {
max-width: none;
padding: 0;
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
align-items: start;
min-height: 100vh;
background: linear-gradient(to right,
var(--lvl0) 0, var(--lvl0) 320px,
var(--lvl05) 320px, var(--lvl05) 100%);
}
/* 2. Les tuiles passent de 4 a 6 par ligne. Sans cela, aspect-ratio 1/1
les ferait passer de 129px a 244px de haut et allongerait l'etape 1. */
.wiz-sector-tile { flex: 0 0 calc(16.666% - .625rem); }
/* 3. Les champs de saisie ne s'etirent pas sur toute la largeur */
.wiz-field input[type=text],
.wiz-field input[type=email],
.wiz-field input[type=tel],
.wiz-field textarea,
.wiz-field select { max-width: 560px; display: block; }
/* 4. Le lien de saisie manuelle reste SOUS le champ d'adresse : l'input etant
plafonne a 560px, un element inline qui le suit remonterait a sa droite. */
#addressManualToggle { display: block; width: fit-content; margin-top: .75rem; }
/* 5. Colonne laterale blanche a gauche, parcours sur fond clair a droite.
Le fond des deux zones est peint par le degrade de .wiz-wrap, ce qui
garantit que la colonne blanche descende sur toute la hauteur de la
page meme quand son contenu est court. */
.wiz-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
margin-bottom: 0;
padding: 2rem 1.5rem;
position: sticky;
top: 0;
}
/* 6. Le parcours perd son cadre : plus de fond, plus d'ombre, plus d'arrondi.
La separation ne vient plus d'un cadre mais de l'ecart entre les deux fonds. */
.wiz-card {
background: transparent;
box-shadow: none;
border-radius: 0;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 2.5rem 2rem 4rem;
}
/* 7. Sur ordinateur, le fil horizontal et le bandeau d'etape disparaissent :
leur role est repris par la colonne de gauche. Ils restent en place dans
le HTML et continuent de servir en dessous de 1024px.
Le !important est necessaire car le JS impose un display en style direct. */
.wiz-steprail { display: none !important; }
/* 8. Le bandeau d'etape n'a plus lieu d'etre sur ordinateur. */
.wiz-step-head { display: none; }
/* 10. La colonne de navigation : titre de l'etape, phrase d'aide,
puis le fil d'Ariane en vertical. */
.wiz-sidenav { display: block; width: 100%; margin-top: .75rem; }
.wiz-sidenav-title { font-family: var(--font-display); font-weight: 700;
font-size: 1.15rem; line-height: 1.25;
color: var(--accent-dark); margin-bottom: .4rem; }
.wiz-sidenav-hint { font-size: .84rem; line-height: 1.45;
color: var(--text-muted); margin-bottom: 1.6rem; }
.wiz-sidenav-rail { display: flex; flex-direction: column;
align-items: flex-start; gap: 0; }
.wiz-sidenav-rail .wiz-steprail-item { padding: .15rem 0; gap: .6rem; }
.wiz-sidenav-rail .wiz-steprail-sep { flex: none; width: 1.5px; height: 16px;
min-width: 0; margin-left: 9px; }
/* 9. L'animation d'origine decale l'etape de 6px pendant 0,3s, ce qui
desactive momentanement les elements figes qu'elle contient.
On garde le fondu, on retire le deplacement. */
@keyframes wizFadeFlat { from { opacity: 0; } to { opacity: 1; } }
.wiz-step.active { animation-name: wizFadeFlat; }
/* 11. Toutes les cartes blanches du parcours adoptent le meme style :
blanc pur, meme rayon, et une ombre portee doublee d'un liseré fin sous
le bord, qui leur donne une vraie epaisseur. Les marges propres a chaque
bloc sont conservees. */
.wiz-recap-box,
.wiz-picked,
[data-qual-sector],
.wiz-socle-card,
.wiz-qual-field[data-qual-trigger="1"],
.wiz-aides-item,
.wiz-aides-check,
.wiz-recap-section,
.wiz-domain-pager,
.wiz-fill,
.wiz-reassure,
.wiz-thanks-message,
.wiz-consent {
background: var(--lvl0);
border: 0;
border-radius: 12px;
padding: 1.15rem 1.25rem;
box-shadow: 0 4px 14px rgba(20, 25, 30, .16), 0 1px 0 rgba(20, 25, 30, .07);
}
/* 12. Un cadre pose dans un autre cadre ne porte JAMAIS de trait : il se
distingue par un fond a peine plus soutenu que le blanc qui le porte. */
.wiz-sec-questions .wiz-picked,
.wiz-sec-questions .wiz-aides-item,
.wiz-sec-questions .wiz-aides-check,
.wiz-sec-advance .wiz-qual-field[data-qual-trigger="1"] {
background: var(--lvl1);
border: 0;
box-shadow: none;
border-radius: 10px;
padding: .85rem 1rem;
}
/* 16. Le bloc « Autre chose a preciser ? » devient une carte comme les
autres, alignee sur la largeur du cadre precedent.
Le !important est indispensable : un style ecrit directement dans le
HTML impose margin-top:0 sur ce bloc. */
.wiz-step > .wiz-field {
background: var(--lvl0);
border: 0;
border-radius: 12px;
padding: 1.15rem 1.25rem;
box-shadow: 0 4px 14px rgba(20, 25, 30, .16), 0 1px 0 rgba(20, 25, 30, .07);
margin-top: 1.5rem !important;
}
.wiz-step > .wiz-field textarea { max-width: none; }
/* 24. Les deux blocs internes du secteur ne sont plus des cartes : c'est
desormais le secteur entier qui en est une, en-tete compris. Leur
regle de base leur redonnerait un fond blanc, il faut la neutraliser. */
.wiz-sec-advance,
.wiz-sec-questions {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
/* 25. Le bloc « Votre logement » recevait DEUX paddings cumules : celui de
la carte (regle 11) et celui de son en-tete. On retire celui de la
carte, l'interieur suffit, et on resserre legerement le corps. */
.wiz-socle-card { padding: 0; }
.wiz-socle-head { padding: .8rem 1.15rem .2rem; }
.wiz-socle-body { padding: .6rem 1.15rem .1rem; }
/* 26. La pastille grise devient une icone de maison. Le dessin vient de
icon_svg('home') (app/helpers.php), il n'est pas invente. Il sert de
pochoir : la couleur est donnee par le fond, donc par un token.
L'arrondi est conserve : si un navigateur ne gerait pas le pochoir,
on retomberait sur une pastille ronde, pas sur un carre. */
.wiz-socle-dot {
width: 18px;
height: 18px;
opacity: .55;
background: var(--text-primary);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
/* 18. Le bandeau « Domaine X sur N » disparait sur ordinateur : son role est
repris par les sous-points de la colonne de gauche. Il reste en place
dans le HTML et continue de servir en dessous de 1024px.
Le !important est necessaire car le JS impose un display en style direct. */
#domainPager { display: none !important; }
/* 19. Les sous-points de domaine, sous l'etape « Vos demandes ».
Le retrait de 29px les aligne sous le libelle des grandes etapes
(pastille de 20px + gouttiere de .6rem). */
.wiz-sidenav-sub {
display: flex;
align-items: center;
gap: .5rem;
padding: .12rem 0 .12rem 29px;
font-size: .8rem;
color: var(--text-muted);
}
.wiz-sidenav-sub.current { color: var(--text-primary); font-weight: 700; }
.wiz-sidenav-subdot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--border); flex: none;
}
.wiz-sidenav-sub.done .wiz-sidenav-subdot { background: var(--accent-hover); }
.wiz-sidenav-sub.current .wiz-sidenav-subdot { background: var(--cta-bg); }
/* 20. La barre d'action reste visible en bas de la fenetre tant qu'il reste
du contenu en dessous, puis se pose a sa place naturelle en fin de page.
Le fond opaque est indispensable : sans lui, le contenu defilerait
derriere les boutons. On prend la couleur de la page pour rester
discret. Les deux familles de barres sont traitees a l'identique :
une barre figee d'un cote et pas de l'autre serait incoherent. */
.wiz-actions,
.wiz-step1-bar {
position: sticky;
bottom: 0;
z-index: 3;
background: var(--lvl0);
border-top: 1px solid var(--border);
padding: .9rem 0;
margin-top: 1.5rem;
}
/* seq — barre epinglee des etapes 3 ET 4 : MEME teinte BEIGE que le fond de l'ecran (--field-panel) ET
filet du haut invisible (border-top color-matchee au fond -> plus de trait, meme forme, meme 1px,
aucun decalage). OPACITE inchangee : fond PLEIN, le contenu ne defile jamais derriere les boutons.
Scopee aux etapes 3/4 ; la barre de l'etape 1 (.wiz-step1-bar) garde son filet, non concernee.
(Filet = border-top de la barre ; les separateurs internes des cadres du recap ne sont PAS touches.) */
.wiz-step[data-step="3"] .wiz-actions,
.wiz-step[data-step="4"] .wiz-actions { background: var(--field-panel); border-top-color: var(--field-panel); }
/* 27. Relief franc sur les pastilles. L'ombre precedente (0 1px 4px / .14)
etait invisible sur fond blanc. Deux ombres superposees : une portee,
plus basse et plus large, et un liseré tres fin juste sous le bord qui
dessine l'epaisseur de la pastille. C'est la seconde qui donne la
sensation de relief. La teinte reste celle du token --tile-shadow,
seules l'intensite et la geometrie changent. */
.wiz-qual-pill,
.wiz-qual-field[data-qual-trigger="1"] .wiz-qual-pill,
.wiz-radio-pill,
.wiz-picked-pill {
box-shadow: 0 3px 8px rgba(20, 25, 30, .22), 0 1px 0 rgba(20, 25, 30, .10);
transition: box-shadow .15s ease, transform .15s ease, background .15s, color .15s;
}
/* Au survol, la pastille monte d'un pixel et son ombre s'allonge : c'est ce
mouvement qui la fait percevoir comme un objet pose sur la page. */
.wiz-qual-pill:hover,
.wiz-qual-field[data-qual-trigger="1"] .wiz-qual-pill:hover,
.wiz-radio-pill:hover,
.wiz-picked-pill:hover {
transform: translateY(-1px);
box-shadow: 0 5px 12px rgba(20, 25, 30, .26), 0 1px 0 rgba(20, 25, 30, .10);
}
/* La pastille selectionnee s'enfonce : plus d'ombre, plus de deplacement. */
.wiz-qual-pill.selected,
.wiz-qual-field[data-qual-trigger="1"] .wiz-qual-pill.selected,
.wiz-radio-pill.selected,
.wiz-picked-pill.selected {
transform: none;
box-shadow: none;
}
/* 28. Les boutons du bas ne sont plus des pave blancs : on ne voit que leur
libelle, pose directement sur la page. Au survol, seul le TEXTE change
de couleur — aucun fond ne reapparait. Aucun soulignement.
La zone de clic verticale est conservee. */
.wiz-btn-primary,
.wiz-btn-secondary {
background: transparent;
border: 0;
box-shadow: none;
text-decoration: none;
padding: .9rem .4rem;
transition: color .15s ease;
}
.wiz-btn-primary:hover,
.wiz-btn-secondary:hover {
background: transparent;
color: var(--text-strong);
text-decoration: none;
}
/* 21. Le logo et le nom du site deviennent le point d'ancrage de la colonne. */
.wiz-logo-img { width: 56px; height: 56px; }
.wiz-logo-text { font-size: 1.35rem; }
/* 22. Le bloc du fil est centre dans la colonne, mais ses etapes restent
alignees entre elles : centrer chaque ligne mettrait les pastilles
en escalier, les libelles n'ayant pas la meme longueur. */
.wiz-sidenav-rail {
width: fit-content;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* 23. La poignee d'etirement disparait : la zone de texte garde sa taille. */
.wiz-field textarea { resize: none; }
}
.wiz-sec-ico{-webkit-mask-image:none;mask-image:none;background:none;width:auto;height:auto;display:inline-flex;align-items:center;color:var(--accent-dark)}
.wiz-sec-ico svg{width:20px;height:20px;stroke:currentColor;fill:none}
.wiz-secq-body{display:block;padding:.6rem 1.15rem .1rem}
.wiz-qual-sector.wiz-socle-card{margin:0;border:0;border-top:1px solid var(--border);
border-radius:0;background:transparent;box-shadow:none;padding:1.15rem 0 .35rem}
.wiz-sec-advance{margin-bottom:.7rem}
.wiz-socle-head{padding-top:.6rem;padding-bottom:.1rem}
.wiz-qual-field{margin-bottom:.7rem}
#wizStep1Continue,#domainPrev,#domainNext,[data-goto],[data-next-from],[data-submit-final]{
background:none;box-shadow:none;border:0;padding:0;color:var(--accent-dark)}
#wizStep1Continue:hover,#domainPrev:hover,#domainNext:hover,[data-goto]:hover,
[data-next-from]:hover,[data-submit-final]:hover{
background:none;box-shadow:none;color:var(--text-strong)}
.wiz-sec-questions .wiz-picked,.wiz-sec-advance{margin:0;border:0;
border-top:1px solid var(--border);border-radius:0;background:transparent;
box-shadow:none;padding:1.15rem 0 .35rem}
@media (max-width:1023px){
.wiz-qual-sector.wiz-socle-card .wiz-socle-head{padding-top:.5rem;padding-bottom:0}
.wiz-qual-sector.wiz-socle-card .wiz-secq-body{padding-top:.35rem;padding-bottom:.85rem}
.wiz-qual-sector.wiz-socle-card .wiz-socle-body{padding-top:.5rem;padding-bottom:.85rem}
.wiz-qual-sector.wiz-socle-card .wiz-qual-field:last-child{margin-bottom:0}
}
.wiz-qual-sector.wiz-socle-card .wiz-socle-head,
.wiz-qual-sector.wiz-socle-card .wiz-socle-body,
.wiz-qual-sector.wiz-socle-card .wiz-secq-body{padding-left:0;padding-right:0}
.wiz-qual-sector.wiz-socle-card .wiz-secq-body{display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.5rem 2rem;align-items:start}
.wiz-qual-sector.wiz-socle-card .wiz-qual-label{font-weight:400;font-size:.92rem;
color:var(--text-muted);margin-bottom:.45rem}
.wiz-qual-sector.wiz-socle-card .wiz-socle-head{margin-bottom:.4rem}
.wiz-qual-sector.wiz-socle-card .wiz-aides{grid-column:1/-1}
.wiz-qual-sector[data-qual-sector]{background:var(--lvl0);border:1px solid var(--border);
border-radius:12px;box-shadow:none;padding:1.15rem 1.35rem}
.wiz-sec-note{margin:0 0 .9rem;font-size:.9rem;color:var(--text-muted);grid-column:1/-1}
.wiz-socle-recap{padding:.9rem 0;border-top:1px solid var(--border);
font-size:.95rem;color:var(--text-muted)}
.wiz-socle-recap a{color:var(--accent-dark);margin-left:.4rem}
/* seq 79 — moteur "une question par ecran" : masque une question SANS display:none
(sinon isFieldShown la croit absente et casse validation/progression/declencheurs) */
.qs-off{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
/* ═══ seq 80 — HABILLAGE CHARTE DU MOTEUR "UNE QUESTION PAR ECRAN" ═══
Tout est scope sous .qs-mode (posee par le module quand il est actif, en
mono-domaine uniquement). Hors de ce mode, l'apparence d'origine est intacte.
Charte : terre cuite = fonds/selections (var --cta-bg, texte blanc --cta-text) ;
anthracite = titres + le SEUL bouton plein (var --btn-bg / --btn-text) ;
blanc = surfaces (var --lvl0). AUCUNE couleur en dur : que des jetons var(--...).
Aucune bordure, aucune ombre, aucun relief, aucun degrade, aucun flou. */
/* 9 + seq 84. Zone de question centree ~640px, SANS CADRE ENGLOBANT : l'ancetre
[data-qual-sector] est rendu TRANSPARENT (jamais display:none — sinon isFieldShown
casserait validation et declencheurs) ; fond, rayon et padding neutralises. La question
est posee A MEME LE FOND ; ce sont les reponses qui sont des cartes blanches.
(spec 3 > .wiz-qual-sector[...] spec 2, placee apres.) */
.qs-mode .wiz-qual-sector[data-qual-sector]{
max-width:640px;margin:1.5rem auto;
background:transparent;border:0;box-shadow:none;border-radius:0;
padding:0}
/* 8. Barre de progression fine, tout en haut de la zone d'etape 2. */
.qs-mode .qs-bar{height:4px;background:var(--border);border-radius:999px;overflow:hidden;
max-width:640px;margin:0 auto 1.5rem}
.qs-mode .qs-bar-fill{height:100%;width:0;background:var(--cta-bg);border-radius:999px;
transition:width .3s ease}
/* 1. Compteur "QUESTION X SUR Y" + 2. pastille "Necessaire", centres au-dessus du titre. */
.qs-mode .qs-head{max-width:640px;margin:0 auto .5rem;text-align:center}
.qs-mode .qs-count{font-family:var(--font-mono);font-size:.75rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--qs-muted)}
.qs-mode .qs-required{display:inline-block;margin-left:.5rem;
background:var(--cta-bg);color:var(--cta-text);
font-size:.7rem;font-weight:700;border-radius:999px;padding:.15rem .6rem;
text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}
/* 3 + seq 84. Titre de la question : ~34px, gras, anthracite, centre (spec 3 > .socle-card .wiz-qual-label). */
.qs-mode .wiz-qual-field .wiz-qual-label{
font-size:2.125rem;line-height:1.2;font-weight:800;color:var(--text-strong);
text-align:center;margin:0 auto .6rem;max-width:640px}
@media (max-width:560px){
.qs-mode .wiz-qual-field .wiz-qual-label{font-size:1.55rem}
}
/* seq — de l'air sous le GRAND TITRE des ecrans du module s1 (familles + ecran combine) : la 1re
rangee de tuiles etait trop proche. Ecart porte a 1.5rem (deja en usage ailleurs dans le parcours).
Scope #s1Screen (id de la boite s1) -> les questionnaires de l'etape 2, memes .wiz-qual-label mais
HORS #s1Screen, ne sont pas touches. Vaut telephone ET ordinateur. */
#s1Screen .wiz-qual-field .wiz-qual-label{margin-bottom:1.5rem}
/* 4. Texte d'aide : ~14,5px, gris, centre, sans lisere (spec 3 > .wiz-qual-help spec 1). */
.qs-mode .wiz-qual-field .wiz-qual-help{
font-size:.9rem;color:var(--qs-muted);text-align:center;
border-left:0;padding-left:0;margin:0 auto 1.25rem;max-width:640px}
/* 5. Reponses empilees pleine largeur, ~12px entre elles (spec 3 > .wiz-qual-options spec 1). */
.qs-mode .wiz-qual-field .wiz-qual-options{
flex-direction:column;align-items:stretch;gap:.75rem;max-width:640px;margin:0 auto}
/* 5 + seq 86. Chaque reponse : carte BLANCHE large et haute, bordure fine (autorisee par
Gerard pour cet ecran), rayon 12px, libelle a GAUCHE ~17px, chevron a droite. Flex :
libelle a gauche, chevron a droite (justify-content:space-between). AUCUNE ombre.
(spec 3 > .wiz-qual-pill spec 1 et [...trigger...] .wiz-qual-pill spec 3.) */
/* seq 89 — picto a GAUCHE + libelle groupes (gap), chevron pousse a DROITE (margin-left:auto).
Alignement constant : picto a la meme distance du bord (padding-left), libelle au meme depart. */
.qs-mode .wiz-qual-field .wiz-qual-pill{
display:flex;align-items:center;gap:.85rem;
width:100%;text-align:left;min-height:68px;
padding:1.375rem 1.5rem;border:1px solid var(--border);border-radius:12px;
background:var(--lvl0);color:var(--text-strong);box-shadow:none;
font-size:1.0625rem;font-weight:600;transition:background .15s,border-color .15s}
/* seq 89 — pictogramme a gauche : ~26px, ne se comprime jamais, couleur terre cuite au repos. */
.qs-picto{display:none}
.qs-mode .wiz-qual-field .wiz-qual-pill .qs-picto{
display:inline-flex;flex:none;align-items:center;color:var(--sec-color, var(--cta-bg))}
.qs-mode .wiz-qual-field .wiz-qual-pill .qs-picto svg{width:26px;height:26px}
.qs-mode .wiz-qual-field .wiz-qual-pill:hover .qs-picto,
.qs-mode .wiz-qual-field .wiz-qual-pill.selected .qs-picto{color:var(--cta-text)}
/* Chevron a droite, en var(--qs-muted) au repos (item flex pousse a droite). */
.qs-mode .wiz-qual-field .wiz-qual-pill::after{
content:'';flex:none;margin-left:auto;width:.5rem;height:.5rem;
border-right:2px solid var(--qs-muted);border-top:2px solid var(--qs-muted);
transform:rotate(45deg)}
/* Survol / selection : fond + bordure terre cuite, libelle ET chevron en var(--cta-text)
(spec 4 > .wiz-qual-pill:hover/.selected spec 2 et [...trigger...] spec 4). */
.qs-mode .wiz-qual-field .wiz-qual-pill:hover,
.qs-mode .wiz-qual-field .wiz-qual-pill.selected{
background:var(--cta-bg);border-color:var(--cta-bg);color:var(--cta-text);box-shadow:none}
.qs-mode .wiz-qual-field .wiz-qual-pill:hover::after,
.qs-mode .wiz-qual-field .wiz-qual-pill.selected::after{
border-right-color:var(--cta-text);border-top-color:var(--cta-text)}
/* G3 — pastille de SORTIE "Je prefere ne pas repondre" : MEME forme et MEME chevron (::after) qu'une
reponse, mais DISCRETE — c'est une sortie, pas un choix. Texte attenue, italique, fond transparent,
pas de picto a gauche, un peu plus basse. Le survol ne la colore pas comme une reponse retenue. */
/* ⚠️ 06/09 : « font-weight:500 » etait une QUATRIEME graisse, et
« .qs-picto{display:none} » privait cette tuile du seul dessin de sa
grille -- son titre remontait alors dans la rangee du pictogramme.
Elle reste discrete par sa COULEUR et son italique, pas par un
gabarit a part : c est une tuile comme les autres. */
.qs-mode .wiz-qual-field .wiz-qual-pill.qs-skip-pill{
min-height:var(--tu-h);background:transparent;border-color:var(--border);
color:var(--qs-muted);font-style:italic;font-weight:700}
.qs-mode .wiz-qual-field .wiz-qual-pill.qs-skip-pill:hover{
background:var(--lvl0);border-color:var(--qs-muted);color:var(--text-strong)}
.qs-mode .wiz-qual-field .wiz-qual-pill.qs-skip-pill:hover::after{
border-right-color:var(--qs-muted);border-top-color:var(--qs-muted)}
/* 6. Sous les reponses : Retour (gris) et Ignorer (terre cuite foncee), liens nus centres. */
.qs-mode .qs-nav{display:flex;justify-content:center;align-items:center;
gap:1.5rem;margin:1.5rem auto 0;max-width:640px;flex-wrap:wrap}
.qs-mode .qs-nav .qs-link{font-size:.9rem;color:var(--qs-muted);text-decoration:none}
.qs-mode .qs-nav .qs-link:hover{text-decoration:underline}
.qs-mode .qs-nav .qs-skip{color:var(--accent-dark);text-decoration:underline}
/* seq (defaut fleche) — VARIANTE propre au SEUL ecran de precision (etape 2) : le "Retour" se cale
a GAUCHE (margin-right:auto absorbe l'espace a sa droite -> Continuer/Ignorer poussés a droite),
comme le "Retour" des .wiz-actions des autres ecrans. Regle plus precise que .qs-mode .qs-nav
(partagee) : les qs-nav du defile de l'etape 1 et du recap gardent EXACTEMENT leur disposition
centree. Place seule : ni l'ordre des actions ni le comportement du retour ne changent. */
.wiz-step[data-step="2"] .qs-nav [data-qs-back]{margin-right:auto}
/* 7. Le SEUL bouton plein de l'ecran : anthracite, texte blanc
(spec 3 > .wiz-btn-primary spec 1 ; hover spec 4 > .wiz-btn-primary:hover spec 2). */
.qs-mode .qs-nav [data-qs-continue]{
background:var(--btn-bg);color:var(--btn-text);
border:0;border-radius:10px;padding:.85rem 1.6rem;
font-size:.95rem;font-weight:700;box-shadow:none;text-decoration:none}
.qs-mode .qs-nav [data-qs-continue]:hover{
background:var(--btn-bg);color:var(--btn-text);text-decoration:none}
/* Boutons globaux de l'etape 2 masques pendant le defile (code intact, juste caches ;
retablis des que .qs-mode disparait). La barre sticky qui les porte est neutralisee
(padding/margin/fond) car son display:flex est pose en ligne et ne peut etre efface par une classe. */
.qs-mode [data-goto="1"],
.qs-mode [data-next-from="2"]{display:none}
.qs-mode #step2StdActions{margin:0;padding:0;background:transparent}
/* ═══ seq 81 — MODE PLEIN ECRAN : ne montrer QUE la question courante ═══
1. On masque les VOISINS (a-e du releve + le titre d'etape et les messages
d'intro). display:none autorise : aucun n'est ancetre d'une question, donc
isFieldShown n'est jamais trompe. Tout reapparait quand .qs-mode disparait. */
.qs-mode .wiz-step-head, /* titre "Precisez votre projet" + aide (voisin) */
.qs-mode .wiz-socle-head, /* (a) en-tetes "Votre logement" / "Pour affiner..." (voisin) */
.qs-mode .wiz-sec-title, /* "Precisez votre projet" (voisin) */
.qs-mode .wiz-sec-note, /* (b) "Aucune question n'est obligatoire..." (voisin) */
.qs-mode .wiz-acc-head, /* (c) bandeau du secteur "Photovoltaique" (voisin) */
.qs-mode .wiz-picked, /* (d) "Ce que vous avez selectionne" + "Voir les autres options" (voisin) */
.qs-mode .wiz-socle-recap, /* recap du socle (voisin) */
.qs-mode .wiz-field{display:none} /* (e) "Autre chose a preciser ?" (voisin ; en etape 2 = uniquement la note) */
/* 2. Neutraliser la GRILLE 2 colonnes : la question occupe toute la largeur.
L'originale (735) n'est PAS dans un @media -> la mienne non plus.
Spec 4 > spec 3, placee apres. Aucun !important. */
.qs-mode .wiz-qual-sector.wiz-socle-card .wiz-secq-body{display:block}
/* 4. Cadre UNIQUE : on retire les traits de separation internes (border-top) des
cartes internes et de la section "declencheur", pour que le cadre blanc unique
(pose plus haut sur [data-qual-sector]) soit identique d'un ecran a l'autre. */
.qs-mode .wiz-qual-sector.wiz-socle-card{border-top:0;padding:0}
.qs-mode .wiz-sec-advance{border-top:0;padding:0;margin:0}
/* ═══ seq 82 ═══ */
/* 2. Message contextuel (#qualContextMsg / #qualContextMsgSim, classe .wiz-qual-intro)
replace par le JS SOUS les reponses : petit texte gris, centre, sans cadre ni bordure.
On ne touche ni a sa condition ni a son texte (geres par updateContextMsg). Spec 2 >
.wiz-qual-intro (spec 1). L'affichage reste pilote par le JS (display/hidden inline). */
.qs-mode .wiz-qual-intro{
background:transparent;border:0;border-left:0;border-radius:0;
padding:0;margin:1rem auto 0;max-width:640px;
font-size:.85rem;line-height:1.5;color:var(--qs-muted);text-align:center}
/* 3. Centrage VERTICAL sur grand ecran (>= 900px) : le contenu de l'ecran de question
est centre dans sa zone (plus de grand vide sous une question courte). La barre de
progression reste en haut ; #qualSectorsWrap est centre par marges automatiques.
Sous 900px : rien (le contenu reste aligne en haut). Aucun !important, aucun hex. */
@media (min-width:900px){
/* seq 101 — DEFAUT C : l'affichage du defile est conditionne a .active. Une etape qui garderait
.qs-mode (module non demonte) ne peut plus rester visible hors de son tour -> plus de
superposition (ex. tuiles etape 1 sous l'ecran de remerciement). L'invariant "seule l'etape
active est visible" est retabli a la source. */
.wiz-step.qs-mode.active{display:flex;flex-direction:column;min-height:70vh}
.qs-mode #qualSectorsWrap{margin-top:auto;margin-bottom:auto}
}
/* seq 86 (5b) — pendant le defile, les deux messages contextuels sont masques sur TOUS les
ecrans (aides comprise). Voisins (jamais ancetres) -> display:none sans danger. A l'extinction
de .qs-mode ils redeviennent visibles selon leur condition d'origine, a leur place d'origine
(aucun deplacement en JS ; texte et updateContextMsg inchanges). */
.qs-mode #qualContextMsg,
.qs-mode #qualContextMsgSim{display:none}
/* seq 84/85/86/87 — FOND de la zone d'etape 2. seq 87 : plus AUCUN fond (le background
blanc de la seq 86 est retire). La regle balai en tout dernier du bloc s'en charge. */
.wiz-step.qs-mode{}
/* seq 85 — PLUS AUCUN CADRE : tous les ANCETRES de la question (dont .wiz-socle-card, qui
porte un fond blanc en L240 et n'a pas [data-qual-sector], echappant a la seq 84)
deviennent transparents, sans ombre, sans bordure, sans rayon, sans padding. Ils restent
dans le flux (JAMAIS display:none, sinon isFieldShown casserait validation/declencheurs).
Placee en fin de bloc -> apres toute regle qui leur poserait un fond/ombre. */
.qs-mode #qualSectorsWrap,
.qs-mode .wiz-acc-body,
.qs-mode .wiz-sec-questions,
.qs-mode .wiz-sec-advance,
.qs-mode .wiz-secq-body,
.qs-mode .wiz-socle-body,
.qs-mode .wiz-qual-sector{
background:transparent;box-shadow:none;border:0;border-radius:0;padding:0}
/* ═══ seq 88 ═══ */
/* Point 2 — NEUTRALISER LES ANCETRES du step (hors de portee des regles .qs-mode) grace a
.qs-active posee sur le body. Le cadre (.wiz-card, L5 : fond --lvl1 + box-shadow + radius)
et le blanc (.wiz-wrap, L2) deviennent transparents. On GARDE le padding lateral de .wiz-card.
Spec (0,2,1) > .wiz-card / .wiz-wrap (0,1,0). */
body.qs-active .wiz-card{background:transparent;box-shadow:none;border:0;border-radius:0}
body.qs-active .wiz-wrap{background:transparent}
/* defaut 3 — l'ecran "Verifiez votre demande" (etape 4) repose sur le gris clair de la charte
(--lvl1, le fond DESSINE de .wiz-card) au lieu du blanc du body : les cadres blancs du recap
ressortent. Regle PLUS SPECIFIQUE que la transparence seq 88 ci-dessus (grace a :has) ->
l'emporte sans !important, uniquement quand l'etape 4 est active. Repli : un navigateur sans
:has ignore la ligne -> l'ecran reste comme aujourd'hui, jamais casse. */
body.qs-active .wiz-card:has(.wiz-step[data-step="4"].active){background:var(--wiz-recap-bg)}
/* N2 (04/08) — ecran des coordonnees (etape 3) : MEME mecanique que l'etape 4, meme jeton --wiz-recap-bg. */
body.qs-active .wiz-card:has(.wiz-step[data-step="3"].active){background:var(--wiz-recap-bg)}
/* defaut 3 (coins) — sur telephone/tablette, le rectangle gris de l'etape 4 retrouve ses QUATRE coins
arrondis : rayon commun du parcours (--card-radius). Desktop non concerne (le gris remplit la colonne
de droite bord a bord). Aucune interaction avec la barre epinglee : elle n'est sticky qu'en desktop
(min-width:1024px) ; sur telephone elle est dans le flux -> pas de decrochement a traiter. */
@media (max-width:1023px){
body.qs-active .wiz-card:has(.wiz-step[data-step="4"].active){border-radius:var(--card-radius)}
/* N2 — etape 3 : memes coins arrondis que l'etape 4 sur telephone/tablette. */
body.qs-active .wiz-card:has(.wiz-step[data-step="3"].active){border-radius:var(--card-radius)}
/* N1 — fond de page du parcours sur TELEPHONE : pose sur .wiz-wrap (meme element que le degrade de
bureau), APRES la transparence seq88 (l.1008) -> gagne sous 1024px. Desktop non concerne. */
body.qs-active .wiz-wrap{background:var(--wiz-fond-mobile)}
}
/* Point 3a — GRILLE DU SOCLE : selecteur reel = .wiz-socle-body{display:grid} (L256).
On la force en UNE SEULE COLONNE. Spec 2 > .wiz-socle-body (spec 1). */
.qs-mode .wiz-socle-body{display:block}
/* Point 4 — ANCIENNE REGLE BALAI (seq 87) REECRITE SANS AUCUN !important : la vraie cause (le
cadre ancetre) est traitee au Point 2. Le balai `*` (spec 2) suffit pour tout, SAUF le champ
declencheur en @media >=1024 (L538, spec 3) -> une regle ciblee (spec 4) le neutralise,
toujours sans !important. Les re-declarations (pastille, bouton, barre) sont plus specifiques
que le balai (spec >=3), donc elles tiennent. */
.wiz-step.qs-mode,
.wiz-step.qs-mode *{
background:transparent;box-shadow:none;border:0;border-radius:0}
/* seq 1 — le balai ci-dessus (.wiz-step.qs-mode * = specificite 0,2,0) remet a zero contour/fond/coins
de TOUS les descendants du defile, y compris nos champs texte. On NE LE TOUCHE PAS : on ecrit PLUS
PRECIS (.wiz-step.qs-mode .wiz-qual-input = 0,3,0 > 0,2,0) pour retablir l'habillage du seul champ,
sans !important. Reprend les valeurs retenues : contour 1.5px --qs-input-border, fond blanc, coins 12px. */
.wiz-step.qs-mode .wiz-qual-input{
background:#ffffff;border:1.5px solid var(--qs-input-border);border-radius:12px}
.wiz-step.qs-mode .wiz-qual-input:focus{border-color:var(--cta-bg)} /* Q 04/08 : focus jaune d'action */
.wiz-step.qs-mode .wiz-qual-field[data-qual-trigger="1"]{
background:transparent;box-shadow:none;border:0;border-radius:0}
.wiz-step.qs-mode .wiz-qual-pill{
background:var(--lvl0);border:1px solid var(--border);border-radius:12px}
.wiz-step.qs-mode .wiz-qual-pill:hover,
.wiz-step.qs-mode .wiz-qual-pill.selected{
background:var(--cta-bg);border-color:var(--cta-bg)}
.wiz-step.qs-mode .qs-required{
background:var(--cta-bg);border-radius:999px}
.wiz-step.qs-mode [data-qs-continue]{
background:var(--btn-bg);border-radius:10px}
.wiz-step.qs-mode .qs-bar{
background:var(--border);border-radius:999px}
.wiz-step.qs-mode .qs-bar-fill{
background:var(--cta-bg);border-radius:999px}
/* Point 2 (suite) — sur grand ecran, .wiz-wrap a un degrade (L426) : on le neutralise DANS
le meme @media, comme demande, pour qu'il ne reprenne pas le dessus. */
@media (min-width:1024px){
body.qs-active .wiz-wrap{background:transparent}
}
/* ═══ seq 90 — COLONNE DE GAUCHE DISTINCTE (.wiz-header : logo + Retour + fil d'etapes) ═══
Fond gris froid + trait fin, GLOBAL (visible a toutes les etapes). Aucun degrade, aucune ombre.
Sous 1024px la colonne est un bandeau AU-DESSUS du contenu -> trait en bas (border-bottom).
Specificite 1, placee apres .wiz-header (L8 base / L457 desktop). */
.wiz-header{border-bottom:1px solid var(--rail-line)}
/* texte discret de la colonne, lisible sur le nouveau fond (2d). On ne touche ni au logo ni
aux pastilles d'etape (2f). */
.wiz-back{color:var(--rail-text)}
.wiz-sidenav-hint{color:var(--rail-text)}
@media (min-width:1024px){
/* Colonne de gauche : trait vertical sur TOUTE la hauteur, pas de trait en bas. */
/* seq3 : fond de la colonne de gauche en vert sauge DESATURE et MAT (jeton dedie --wiz-rail-bg),
plus soutenu et moins vif que --accent. Texte (--rail-text) et lien retour lisibles (>=4,5:1). */
.wiz-header{background:var(--wiz-rail-bg);border-bottom:0;border-right:1px solid var(--rail-line);align-self:stretch;min-height:100vh}
/* 2c — la teinte vient UNIQUEMENT de la colonne : on neutralise le degrade de .wiz-wrap (L426). */
.wiz-wrap{background:transparent}
/* seq (defaut fond gris) — a l'etape 4, le gris --lvl1 remplit TOUTE la colonne de droite,
bord a bord (la carte etant plafonnee a 1000px centree, elle laissait des bandes blanches).
Degrade a arret net : transparent sur la colonne de gauche (0->320px = largeur fixe de la grille,
laissee au vert), gris a partir de 320px. Regle plus specifique (:has) que .wiz-wrap transparent
ci-dessus -> l'emporte sans !important. Le contenu (carte 1000px) reste centre par-dessus. */
/* seq — RETOUR AU BEIGE : etapes 3 ET 4 sur le beige --field-panel, bord a bord (arret net a 320px,
colonne de gauche verte non mordue). ORDINATEUR seul (ces degrades n'existent pas sous 1024px). */
body.qs-active .wiz-wrap:has(.wiz-step[data-step="4"].active){background:linear-gradient(to right,transparent 320px,var(--field-panel) 320px)}
body.qs-active .wiz-wrap:has(.wiz-step[data-step="3"].active){background:linear-gradient(to right,transparent 320px,var(--field-panel) 320px)}
/* la carte de l'etape 4 (fond global gris --wiz-recap-bg de L986, CONSERVE pour le MOBILE) passe au
beige sur ORDINATEUR pour que la colonne soit uniforme. Meme selecteur que L986, place APRES ->
gagne sur desktop ; le mobile garde le gris (regle globale inchangee). */
body.qs-active .wiz-card:has(.wiz-step[data-step="4"].active){background:var(--field-panel)}
/* N2 — etape 3 sur ORDINATEUR : meme beige --field-panel que l'etape 4 (mirror de la ligne au-dessus). */
body.qs-active .wiz-card:has(.wiz-step[data-step="3"].active){background:var(--field-panel)}
}
/* ═══ seq 91 + 94 — COLONNE DE GAUCHE : contenu en haut + EPINGLAGE (sticky) ═══
seq 94 : la mise en page verticale et l'ordre passent sur le conteneur interne
.wiz-rail-inner, qui recoit position:sticky (le contenu suit la lecture). .wiz-header
garde son fond/trait/hauteur pleine : le fond ne bouge pas, seul le contenu suit.
MOBILE : .wiz-rail-inner{display:contents} -> ses enfants redeviennent enfants directs
du .wiz-header et le bandeau horizontal (space-between : logo a gauche, Retour a droite)
est reproduit a l'identique, sans epinglage. */
.wiz-rail-inner{display:contents}
@media (min-width:1024px){
.wiz-header{justify-content:flex-start}
/* Mise en page verticale reportee de .wiz-header vers le conteneur interne. */
.wiz-rail-inner{display:flex;flex-direction:column;gap:1.5rem;width:100%;
position:sticky;top:0;max-height:100vh;overflow-y:auto}
/* « Retour a l'accueil » en dernier (colle en bas si de la place). */
.wiz-back{order:1;margin-top:auto}
}
/* ═══ seq 92 — accroche, preuves, recapitulatif vivant (colonne de gauche) ═══
Visibles UNIQUEMENT en desktop ; en mobile la colonne se reduit au logo (point 3). */
.wiz-rail-intro,.wiz-rail-recap{display:none}
@media (min-width:1024px){
/* a. Accroche : chiffres en gras (var --text-strong), texte lisible sur --rail-bg. */
.wiz-rail-intro{display:block;text-align:left}
.wiz-rail-accroche{font-size:.95rem;line-height:1.5;color:var(--text-body);margin:0 0 1rem}
.wiz-rail-accroche strong{color:var(--text-strong);font-weight:800}
/* b. Preuves : coche fine terre cuite + texte discret. */
.wiz-rail-proofs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.wiz-rail-proofs li{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--rail-text)}
.wiz-rail-check{flex:none;width:16px;height:16px;color:var(--cta-bg)}
/* Recapitulatif vivant. */
.wiz-rail-recap{display:block;text-align:left}
.wiz-rail-recap-title{font-family:var(--font-mono);font-size:.72rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--rail-text);margin:0 0 .5rem}
/* seq 93 — ligne empilee en 2 niveaux : libelle (1 seule ligne, tronque en CSS) puis reponse. */
.wiz-rail-recap-row{display:block;padding:.5rem 0;border-bottom:1px solid var(--rail-line)}
.wiz-rail-recap-row:last-child{border-bottom:0}
.wiz-rail-recap-q{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-size:.75rem;color:var(--rail-text);margin-bottom:.15rem}
.wiz-rail-recap-a{display:block;text-align:left;font-size:.82rem;font-weight:700;
color:var(--text-strong);line-height:1.35;overflow-wrap:anywhere}
.wiz-rail-recap-skip{display:block;font-style:italic;color:var(--rail-text);opacity:.7;font-size:.82rem}
.wiz-rail-recap-empty{font-style:italic;color:var(--rail-text);font-size:.82rem;margin:0}
/* seq 100 — recap groupe par metier (multidomaine) : intitule du domaine en petites capitales. */
.wiz-rail-recap-metier{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--rail-text);margin:.15rem 0 .3rem}
.wiz-rail-recap-group + .wiz-rail-recap-group{margin-top:.5rem}
/* seq 101 — DEFAUT C : parcours termine (etape 5) -> plus de recap ni d'accroche a gauche. */
body.wiz-parcours-done .wiz-rail-recap,
body.wiz-parcours-done .wiz-rail-intro{display:none}
}
/* seq 95 — l'ecran du defile de l'etape 1 (#s1Screen, cree en JS) reutilise le meme
centrage vertical que l'etape 2 (memes classes .qs-mode pour tout le reste). */
@media (min-width:900px){
.qs-mode #s1Screen{margin-top:auto;margin-bottom:auto}
}
/* ═══ seq 96 — GRILLE DE TUILES (module s1, etape 1, quand >=6 reponses ; classe .s1-grid posee
par s1Render). L'ETAPE 2 N'EST PAS CONCERNEE : ses reponses restent en liste (pas de .s1-grid).
Tuile : presque carree, tres arrondie, fond blanc + bordure fine (herites de .wiz-qual-pill),
AUCUNE ombre ; PICTO au-dessus (~34px, 40px telephone), LIBELLE dessous (2 lignes max), pas de
chevron. Survol/selection : fond var(--cta-bg), libelle+picto var(--cta-text) (herites aussi).
Colonnes : 4 au-dela de 1100px, 3 entre 800-1100px, 2 en dessous. Meme hauteur (grid-auto-rows:1fr). */
/* P6 — PALIER 1 : LE TELEPHONE (au repos, donc au-dessous de 800px).
Il lit ses propres jetons --s1-tel-*, jamais ceux de l'ordinateur. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid{
display:grid;gap:var(--s1-tel-ecart);grid-auto-rows:1fr;
grid-template-columns:var(--s1-cols-tel);
max-width:var(--s1-largeur);margin:0 auto}
/* 30/08 — CHAQUE ECRAN SON JETON, sur telephone comme sur ordinateur. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"]{grid-template-columns:var(--s1-cols-tel-famille)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"]{grid-template-columns:var(--s1-cols-tel-metier)}
/* LA TUILE : pictogramme A GAUCHE, nom a droite, detail sous le nom.
C'etait un picto au-dessus d'un nom centre, coupe par des points de
suspension, et les pictos flottaient a des hauteurs differentes. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill{
flex-direction:row;justify-content:flex-start;align-items:center;gap:.6rem;
text-align:left;min-height:var(--s1-tel-hauteur);padding:.7rem .8rem;
border-radius:var(--s1-tel-arrondi)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill::after{content:none}
/* ALIGNES : le picto ne flotte plus, il est cale au centre de sa boite et
ne se laisse ni etirer ni comprimer. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .qs-picto{
flex:0 0 auto;align-self:center;display:flex;align-items:center;justify-content:center}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .qs-picto svg{
width:var(--s1-tel-picto);height:var(--s1-tel-picto)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-corps{
flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.12rem}
/* LE NOM N EST PLUS COUPE : il dispose de --s1-lignes-nom lignes, et les
mots longs se cassent plutot que de deborder. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-label{
display:-webkit-box;-webkit-line-clamp:var(--s1-lignes-nom);-webkit-box-orient:vertical;
overflow:hidden;overflow-wrap:anywhere;line-height:1.2;font-weight:700;
font-size:var(--s1-tel-nom)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-detail{
display:-webkit-box;-webkit-line-clamp:var(--s1-lignes-nom);-webkit-box-orient:vertical;
overflow:hidden;overflow-wrap:anywhere;line-height:1.25;font-weight:400;
color:var(--text-muted);font-size:var(--s1-tel-detail)}
/* Selectionnee, la tuile passe au citron : le detail suit l'encre du reste. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected .s1-pill-detail{
color:inherit}
/* ═══════════════════════════════════════════════════════════════════════
* ⚠️ CE BLOC N EST PLUS LA SOURCE DU DESSIN — 04/09/2026
* ═══════════════════════════════════════════════════════════════════════
*
* IL ANNONCAIT _maquettes/COMPANIUM_maquette_parcours_telephone_v2.html,
* validee le 30/08. CETTE MAQUETTE NE FAIT PLUS FOI. Le dessin du
* parcours vient desormais de _maquettes/COMPANIUM_maquette_site_public
* .html, du 03/09, qui prime sur toute maquette anterieure -- et sur ce
* commentaire.
*
* CE QUI SUIT EST GARDE, ET CE N EST PAS UN OUBLI : le bloc du 03/09 est
* ECRIT PLUS BAS DANS CE FICHIER, donc il gagne sur celui-ci. Ce qui
* reste ici sert de socle a ce qu il ne redit pas. Une suppression
* aurait demande de juger 1 700 lignes une a une, et une seule erreur
* y aurait casse un ecran.
*
* Ce que le bloc du 30/08 posait, et qui reste vrai de LUI :
* deux colonnes, tuile carree, pictogramme sur une ligne de hauteur
* FIXE au-dessus du nom, arrondi administrable.
*
* ⚠️ LES DEUX ECRANS, PAS UN SEUL. L ecran des familles et celui des
* sous-categories se ressemblent enfin.
*
* ⚠️ LA LIGNE DE HAUTEUR FIXE EST CE QUI ALIGNE TOUT. Sans elle, un
* pictogramme de 30 px et un autre de 26 px poseraient leur nom a deux
* hauteurs differentes dans la meme rangee. La ligne fait 34 px quelle que
* soit l icone : c est --s1-tuile-picto, et il vient de la base.
*
* ⚠️ ET LA ZONE DE TEXTE RESERVE SES LIGNES : trois sur l ecran des
* familles, quatre sur celui des sous-categories. Le texte de toutes les
* tuiles demarre donc au meme pixel, qu il tienne sur une ligne ou sur
* quatre. C est une reserve, pas une limite : un nom plus long allonge la
* zone, il ne se fait pas couper.
*
* ⚠️ AU SURVOL ET A L APPUI, LE PICTOGRAMME REPASSE EN GRAPHITE. Mesure de
* la maquette : un pictogramme en couleur sur le citron tombe a 4,1 pour 1,
* sous le seuil de 4,5. En graphite il est a 16,2. Et un telephone n a pas
* de survol : c est :active qui en tient lieu, et le survol est enferme
* dans @media (hover: hover) pour qu il ne colle pas au doigt.
*
* ⚠️ CARREE, LA TUILE ALLONGE L ECRAN DES SOUS-CATEGORIES — mesure du 30/08,
* +17,7 % sur les neuf familles. Gerard a choisi le carre en connaissance
* de cause. Ce n est donc pas un oubli, et cela ne se rediscute pas ici.
*
* ⚠️ TOUT VIT DANS @media (max-width:799.98px). L ordinateur ne voit pas
* une ligne de ce bloc : mesure avant/apres a 1280 et 1440 px, zero
* difference.
*/
@media (max-width:799.98px){
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid{
gap:var(--s1-tuile-ecart); grid-auto-rows:1fr; }
/* ═══════════════════════════════════════════════════════════════════
* LA TUILE — RECOPIEE DE LA MAQUETTE, PAS ADAPTEE — 31/08/2026
* ═══════════════════════════════════════════════════════════════════
* ⚠️ SOURCE PERIMEE — 04/09/2026. Elle disait
* _maquettes/COMPANIUM_maquette_parcours_telephone_v2.html, lignes 64
* a 92. Cette maquette ne fait plus foi : le dessin vient de
* COMPANIUM_maquette_site_public.html, du 03/09, applique plus bas.
* Les nombres qui suivent sont ceux du 31/08 ; ils ne servent plus
* que la ou le bloc du 03/09 ne dit rien.
*
* ⚠️ QUATRE FOIS J AI CORRIGE L ANCIEN CODE AU LIEU DE POSER CELUI-CI, ET
* QUATRE FOIS GERARD A VU DES TUILES DECALEES. Sur la salle de marche, la
* carte a ete REMPLACEE en entier et elle a ete bonne du premier coup. La
* difference n est pas la difficulte, c est la methode.
*
* CE QUE DIT LA MAQUETTE, ET QU IL FAUT LIRE EN ENTIER :
* .t { display:grid; grid-template-rows: var(--tuile-picto) auto;
* row-gap:9px; align-content:center; justify-items:center; }
* .t .p { height: var(--tuile-picto); } <- ligne de hauteur FIXE
* .t .n { font-weight:600; line-height:1.25; } <- AUCUN centrage
* #ec1 .t .n { min-height: calc(3 * 1.25em); } <- la reserve, SUR LE TEXTE
* #ec2.carre .t .n { min-height: calc(4 * 1.25em); }
*
* ⚠️ ET SA PROPRE NOTE DIT POURQUOI CA MARCHE : « les pictogrammes de
* chaque rangee sont sur une ligne fixe de 34 px, et LES TEXTES DEMARRENT
* TOUS A LA MEME HAUTEUR : c est ce qui les aligne. »
* Le texte est donc ANCRE EN HAUT de sa reserve. Je l avais centre dedans
* hier soir — encore une interpretation, et elle deplacait la premiere
* ligne de chaque libelle.
*
* ⚠️ LA SEULE CHOSE QUE JE NE PRENDS PAS A LA MAQUETTE : SES DESSINS.
* Ce sont des exemples. Les pictogrammes viennent de la base — 23 poses
* par la migration des pictogrammes, 74 de plus par celle des
* sous-categories. La maquette dit COMMENT la tuile est batie ; la base
* dit QUEL dessin chaque tuile porte.
*/
/* ⚠️ LE NIVEAU INTERMEDIAIRE DISPARAIT DE LA GRILLE.
* La maquette n a que DEUX enfants dans la tuile : « .p » et « .n ». Mon
* balisage en a un de plus, « .s1-pill-corps », qui enveloppe le nom et le
* detail — indispensable SUR ORDINATEUR, ou les deux s affichent.
* « display:contents » le fait disparaitre de la grille sans toucher au
* balisage : ses enfants deviennent enfants directs de la tuile, exactement
* comme dans la maquette. L ordinateur, lui, ne voit pas cette regle. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-corps{
display:contents; }
/* ⚠️ 31/08 — LE CENTRAGE HORIZONTAL, ET C EST LE DEFAUT QU ON CHERCHAIT
* DEPUIS TROIS JOURS.
*
* Trois jours de mesures VERTICALES — ecart de pictogramme, vide sous le
* texte, reserve de lignes — et personne n avait mesure l HORIZONTAL.
* Releve du 31/08, ecran des sous-categories : 22 tuiles sur 31 avaient
* leur contenu colle a gauche, avec jusqu a 93 px d ecart entre la marge
* de gauche et celle de droite, sur un carre de 154 px.
*
* « Climatisation » : boite de 83 px, 11 px a gauche, 60 px a droite.
* Les tuiles PARAISSAIENT centrees uniquement quand leur libelle etait
* assez long pour remplir toute la largeur.
*
* POURQUOI. La tuile porte bien « justify-items:center » — mesure, la
* valeur calculee le confirme. Mais le nom et le detail sont enveloppes
* dans .s1-pill-corps, que « display:contents » fait disparaitre de la
* grille. Ses enfants deviennent items de grille SANS recevoir le
* justify-items du conteneur : ils restent colles au bord.
*
* La maquette n a pas ce probleme parce qu elle n a pas de niveau
* intermediaire — ses deux enfants sont directs. On ecrit donc
* explicitement ce qu elle obtient implicitement.
*/
/* ⚠️ 04/09 (nuit) — « justify-self:center » RETIRE, MEME SOURCE.
* Elle centrait le pictogramme et le texte dans la tuile : a l ecran,
* « Toiture & Charpente » demarrait quinze pixels plus a droite que
* « Facades & Gros oeuvre » de la meme rangee. La maquette du 03/09 cale
* a GAUCHE, et sa note le dit : « texte a gauche, jamais justifie ».
* La declaration est videe, le selecteur reste pour dire ce qu il fut. */
/* ⚠️ RETIRE LE 06/09 : « justify-self:start ». Elle pesait (0,6,0) --
un cran de plus que la couche v2 -- et tenait le pictogramme et le
texte COLLES A GAUCHE de leur tuile. Mesure du 06/09 : le centre du
pictogramme etait a -123,5 px du centre de la tuile.
Elle venait de la maquette du 03/09, qui calait a gauche ; la v2
centre, et c est elle qui fait foi depuis le 05/09 (§18.1). */
/* LA TUILE — maquette ligne 64. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"] .wiz-qual-pill,
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"] .wiz-qual-pill{
background:#fff; border-radius:var(--s1-tuile-rayon); padding:14px 10px;
/* ⚠️ 31/08 — « grid-template-columns:100% », ET C EST LA VRAIE CAUSE DU
* DECALAGE. Mesure : la colonne implicite de la tuile ne faisait que
* 83 px au lieu de 132 sur « Climatisation ». Une grille sans colonne
* declaree en cree une qui se dimensionne SUR SON CONTENU ; les items y
* etaient bien centres, mais LA COLONNE, elle, restait collee a gauche.
* D ou 22 tuiles sur 31 decalees, jusqu a 93 px d ecart.
*
* ⚠️ LA MAQUETTE PORTE LE MEME DEFAUT — elle ne declare pas de colonne
* non plus. Il ne s y voit pas parce que ses neuf libelles de
* demonstration sont tous assez longs pour remplir la largeur. Je l ai
* mesuree : ecart nul chez elle, sur SES donnees. C est une correction
* qu elle ne pouvait pas reveler, et je la signale comme telle. */
/* ⚠️ 04/09/2026 (nuit) — CINQ DECLARATIONS RETIREES ICI, A LEUR SOURCE.
* CE BLOC EST LA MAQUETTE DU PARCOURS TELEPHONE DU 30/08. Elle ne fait
* PLUS FOI depuis la consigne du 04/09 -- mais son selecteur porte un
* ATTRIBUT de plus ([data-s1-ecran="famille"]) que celui du dessin
* retenu : (0,5,0) contre (0,4,0). Il gagnait donc en silence, et
* aucune regle ecrite plus bas ne pouvait le rattraper.
*
* CE QUE CELA DONNAIT A L ECRAN, sur l ecran de choix des travaux :
* une ombre douce a la place du contour noir -- Gerard le voyait, et
* ma mesure du 04/09 disait le contraire parce qu elle portait sur une
* AUTRE tuile que celle-la. L ecran avait raison.
*
* RETIRE : box-shadow (l ombre douce) -> le contour du 04/09
* aspect-ratio:1/1 -> la hauteur reglable
* justify-items / text-align:center -> le texte cale a gauche
* display:grid + grid-template-rows -> la colonne de flex
* GARDE : le fond, l arrondi, l air interieur, le curseur.
*
* ⚠️ ON N EMPILE PAS UNE REGLE DE PLUS. Une sixieme couche par-dessus
* aurait marche jusqu au jour ou quelqu un aurait cherche pourquoi le
* meme dessin est ecrit six fois. */
cursor:pointer;
/* ⚠️ RETIRE LE 07/09 : la transition du FOND. C est ELLE qui faisait
* disparaitre le pictogramme au clic sur telephone. Ce selecteur pese
* (0,6,0) -- deux crans de plus que la couche v2 -- et il gagnait donc
* contre la regle ecrite en fin de feuille.
* Releve du 07/09, un point toutes les 20 ms : le dessin passait au
* jaune d un coup, le fond mettait 120 ms a devenir bleu nuit, et le
* contraste tombait a 1,12 pendant trois pas consecutifs.
* SIXIEME declaration retiree de ce bloc perime du 30/08. */
min-height:0; }
/* LA LIGNE DU PICTOGRAMME — hauteur FIXE, maquette ligne 71.
* C est elle qui aligne toute la rangee. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .qs-picto{
display:flex; align-items:center; justify-content:center;
height:var(--s1-tuile-picto); align-self:auto; flex:none; }
/* ⚠️ 31/08 — LA TAILLE DU DESSIN DEVIENT UN REGLAGE.
* Elle etait ecrite en dur a 30 px : Gerard ne pouvait pas la changer sans
* moi. Elle vient desormais de `parcours_picto_dessin`, et la HAUTEUR DE
* LA LIGNE qui la porte de `parcours_tuile_picto` — les deux se reglent
* depuis l administration. La ligne doit rester un peu plus haute que le
* dessin, sinon le dessin touche le texte. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .qs-picto svg{
width:var(--s1-picto-dessin); height:var(--s1-picto-dessin); }
/* LE NOM — maquette ligne 73. Aucun centrage, aucune coupure. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-label{
display:block; -webkit-line-clamp:none; overflow:visible;
font-weight:600; line-height:1.25; overflow-wrap:break-word; }
/* LA RESERVE DE LIGNES, POSEE SUR LE TEXTE — maquette lignes 85 et 91.
* Le nombre de lignes reste administrable ; la maquette dit 3 et 4. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"] .s1-pill-label{
font-size:14px; min-height:calc(var(--s1-lignes-famille) * 1.25em); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"] .s1-pill-label{
font-size:13px; min-height:calc(var(--s1-lignes-sous) * 1.25em); }
/* ⚠️ LA LIGNE DE DETAIL DISPARAIT SUR TELEPHONE, ET C EST ELLE QUI
* EMPECHAIT LE CARRE : avec elle, la tuile la plus chargee demandait
* 162,9 px pour 155 de large — il manquait 7,9 px. L ORDINATEUR LA
* GARDE : la regle est enfermee ici, sous 800 px. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-detail{ display:none; }
/* LE CHOIX, LE SURVOL ET L APPUI — citron, pictogramme en graphite. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected,
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill:active{
background:var(--s1-tuile-selection); box-shadow:0 2px 5px rgba(20,23,10,.20); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected .qs-picto svg,
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill:active .qs-picto svg{
stroke:var(--s1-tuile-encre) !important; color:var(--s1-tuile-encre) !important; }
/* ⚠️ LE SURVOL SEULEMENT LA OU IL EXISTE. Sur un telephone, un :hover
* reste colle apres le doigt : la tuile resterait jaune apres le retour. */
@media (hover: hover){
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill:hover{
background:var(--s1-tuile-selection); box-shadow:0 2px 5px rgba(20,23,10,.20); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill:hover .qs-picto svg{
stroke:var(--s1-tuile-encre) !important; color:var(--s1-tuile-encre) !important; }
}
}
/* P6 — PALIER 2 : AU-DELA DE 800px. On passe au jeu de l'ordinateur, et
CHAQUE ECRAN lit son propre jeton de colonnes (marqueur data-s1-ecran). */
@media (min-width:800px){
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid{gap:var(--s1-ecart)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"]{grid-template-columns:var(--s1-cols-famille)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"]{grid-template-columns:var(--s1-cols-metier)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill{
min-height:var(--s1-hauteur);border-radius:var(--s1-arrondi);padding:.85rem 1rem}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .qs-picto svg{
width:var(--s1-picto);height:var(--s1-picto)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-label{font-size:var(--s1-nom)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-detail{font-size:var(--s1-detail)}
}
/* P6 — PALIER 3 : AU-DELA DE 1100px. Il posait 4 colonnes en dur, ce qui
laissait la neuvieme categorie seule en bas de la grille. Il reprend
desormais les MEMES jetons que le palier 2 : c'est le jeton qui decide,
plus le palier. Les trois paliers sont ainsi traites. */
@media (min-width:1100px){
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"]{grid-template-columns:var(--s1-cols-famille)}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"]{grid-template-columns:var(--s1-cols-metier)}
}
/* P6 — LE SUR-TITRE ET LE GRAND TITRE prennent la MEME largeur que la
grille, et se calent donc sur son bord gauche. Scope #s1Screen : les
questionnaires de l'etape 2 ne sont pas touches. */
#s1Screen .qs-head,
#s1Screen .wiz-qual-field > .wiz-qual-label{
max-width:var(--s1-largeur);margin-left:auto;margin-right:auto}
/* seq — ECRAN COMBINE (etape 1) : sous le titre de la famille, chaque METIER est un TITRE DE GROUPE
au-dessus de ses tuiles de sous-secteurs. Le titre porte un filet a gauche a la couleur du metier
(--sec-color, administrable) ; texte en --text-strong (lisible). Tout est visible, on defile. */
/* seq — meme boite 720px centree que la grille .s1-grid -> la pastille s'aligne sur le BORD GAUCHE
des tuiles. Ecart entre groupes (2rem) NETTEMENT > ecart pastille/tuiles (.55rem) : repere franc
au defilement (surtout mobile, 34 tuiles/6 groupes). */
.s1-groupe{max-width:var(--s1-largeur);margin:0 auto 2rem} /* P6 : etait 720px en dur */
/* seq — titre de groupe = PASTILLE : rectangle arrondi (pas gelule), picto + nom cote a cote.
Fond = couleur du metier TRES PALE (color-mix 14% sur --lvl0) ; picto + texte = couleur PLEINE via
currentColor. AUCUN contour, AUCUNE ombre. Repli LISIBILITE : le JS pose --pastille-fg:var(--text-strong)
(fonce) quand le contraste tombe sous 4,5:1 ; sinon --pastille-fg est absent -> couleur pleine du
metier (--sec-color), ou --accent-dark si le metier n'a pas de couleur. Repli color-mix (vieux
navigateurs) : --lvl2. */
.s1-groupe-titre{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:700;font-size:.9rem;line-height:1.2;margin:0 0 .55rem;padding:.32rem .6rem;border:0;box-shadow:none;border-radius:8px;color:var(--pastille-fg, var(--sec-color, var(--accent-dark)));background:var(--lvl2);background:color-mix(in srgb, var(--sec-color, var(--accent-dark)) 14%, var(--lvl0))}
.s1-groupe-picto{display:inline-flex;flex:none;align-items:center}
.s1-groupe-picto svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* ═══ seq 97 — FIL D'ETAPES REMONTE EN HAUT : bandeau horizontal (#wizStepRail) a 2 LIGNES ═══ */
/* L1 = 4 grandes etapes ; L2 = domaines (etape 2). Les 2 lignes empilees et centrees. */
.wiz-steprail{flex-direction:column;gap:.5rem}
.wiz-steprail-line{display:flex;align-items:center;justify-content:center;width:100%;max-width:600px;margin:0 auto}
.wiz-steprail-line1{gap:.3rem;flex-wrap:nowrap}
/* d. Les domaines GLISSENT (defilement lateral) : jamais de retour a la ligne, barre masquee,
hauteur du bandeau CONSTANTE (1 ou 5 domaines). */
.wiz-steprail-domains{display:flex;flex-wrap:nowrap;align-items:center;gap:.6rem;max-width:100%;
overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.wiz-steprail-domains::-webkit-scrollbar{display:none}
.wiz-steprail-line2 .wiz-sidenav-sub{padding:0;flex:none;color:var(--rail-text);white-space:nowrap;font-size:.78rem}
.wiz-steprail-line2 .wiz-sidenav-sub.current{color:var(--cta-bg);font-weight:700}
.wiz-steprail-line2 .wiz-sidenav-sub.current .wiz-sidenav-subdot{background:var(--cta-bg)}
/* passes : une coche a la place du point. */
.wiz-steprail-line2 .wiz-sidenav-sub.done .wiz-sidenav-subdot{width:auto;height:auto;background:none}
.wiz-steprail-line2 .wiz-sidenav-sub.done .wiz-sidenav-subdot::after{content:'✓';color:var(--rail-text);font-size:.72rem;line-height:1}
.wiz-steprail-domains-mobile{font-size:.8rem;color:var(--rail-text);text-align:center;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* a+b. Grand ecran : le fil HORIZONTAL devient visible en haut ; le fil VERTICAL disparait. */
@media (min-width:1024px){
.wiz-steprail{display:flex !important} /* neutralise le display:none!important de L484 (meme @media) */
.wiz-sidenav{display:none}
.wiz-steprail-domains-mobile{display:none} /* desktop : les chips, pas le texte */
/* 3. La barre de defilement de la colonne colle au BORD DROIT (contre le trait) : la zone
qui defile va jusqu'au bord, le texte garde sa marge. */
.wiz-header{padding-right:0}
.wiz-rail-inner{padding-right:1.5rem}
}
/* e. Telephone : ligne 2 = texte "Domaine X sur Y — nom" (pas les chips). */
@media (max-width:1023px){
.wiz-steprail-domains{display:none}
}
/* ═══ seq 98 — HABILLAGE DES 3 DERNIERS ECRANS (coordonnees / recap / merci) — APPARENCE SEULE.
Meme charte que le defile : titre centre, champs en cartes blanches a bordure fine, un seul
bouton plein anthracite, colonne + fil conserves. Aucune validation/nom/attribut touche. */
/* Titre du step remonte (le sidebar qui l'affichait a disparu en seq 97), centre. */
/* T (14/08) — l'ecran d'entree (step 0) est supprime : ces regles ne visent plus que
les etapes 3 (coordonnees) et 4 (recap). */
.wiz-step[data-step="3"] .wiz-step-head,
.wiz-step[data-step="4"] .wiz-step-head{display:block}
.wiz-step[data-step="3"] .wiz-step-head h2,
.wiz-step[data-step="4"] .wiz-step-head h2{text-align:center;font-size:1.9rem;line-height:1.2;
font-weight:800;color:var(--text-strong);margin:0 auto .5rem;max-width:640px}
.wiz-step[data-step="3"] .wiz-step-hint,
.wiz-step[data-step="4"] .wiz-step-hint{text-align:center;color:var(--qs-muted);max-width:640px;margin:0 auto 1.5rem}
/* a. Coordonnees : zone 640px centree, pas de cadre lourd. */
/* seq — RETOUR AU BEIGE : le panneau des coordonnees reste au beige --field-panel PARTOUT (l'override
desktop qui le passait au gris a ete retire). Sur ordinateur, le degrade de .wiz-wrap etend ce
meme beige bord a bord ; le panneau (640px centre) s'y fond -> colonne uniforme. */
/* Q3 04/08 : plus AUCUN cadre autour de l'etape 3 (coordonnees). Le panneau devient un simple
conteneur transparent (ni fond, ni bordure, ni rayon, ni ombre) ; les champs (cartes blanches a
bordure) reposent directement sur le fond gris de la page, mobile ET ordinateur. */
.wiz-step[data-step="3"] .wiz-fill{max-width:640px;margin:0 auto 1.5rem;background:transparent;box-shadow:none;padding:0;border-radius:0}
.wiz-step[data-step="3"] .wiz-field{max-width:640px;margin:0 auto 1rem}
/* Libelle en petites capitales grises au-dessus du champ. */
.wiz-step[data-step="3"] .wiz-field > label{font-size:.72rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--text-strong);margin-bottom:.4rem}
/* Champ : carte blanche, bordure fine, coins arrondis, hauteur genereuse (comme les cartes de reponse). */
.wiz-step[data-step="3"] .wiz-field input[type=text],
.wiz-step[data-step="3"] .wiz-field input[type=email],
.wiz-step[data-step="3"] .wiz-field input[type=tel],
.wiz-step[data-step="3"] .wiz-field select{background:var(--lvl0);border:1px solid var(--field-border);
border-radius:12px;padding:.95rem 1rem;min-height:56px}
/* UN SEUL bouton plein anthracite (coordonnees + envoi) ; le Retour reste un lien discret (inchange). */
.wiz-step[data-step="3"] [data-next-from="3"],
.wiz-step[data-step="4"] [data-submit-final]{background:var(--btn-bg);color:var(--btn-text);
border:0;border-radius:10px;padding:.85rem 1.6rem;font-weight:700}
.wiz-step[data-step="3"] [data-next-from="3"]:hover,
.wiz-step[data-step="4"] [data-submit-final]:hover{background:var(--btn-bg);color:var(--btn-text)}
.wiz-step[data-step="4"] [data-submit-final]:disabled{opacity:.55}
/* b. Recap : consentement sans cadre lourd ni ombre ; recap centre 640. */
.wiz-step[data-step="4"] .wiz-consent{background:transparent;border:0;box-shadow:none;padding:.4rem 0;max-width:640px;margin:0 auto 1.25rem}
/* seq4 — ORDINATEUR : le bloc consentement (case + texte juridique) recoit un cadre de MEME FORME que
les autres (arrondi 12px, padding 1rem 1.1rem, meme ecart 1.25rem herite ci-dessus), mais teinte
VERT PALE --accent (jeton) pour signaler une info importante — PAS une alerte. DECOR SEUL : ni le
texte, ni la case, ni son id, ni la verification ne sont touches. Contraste texte juridique
(--text-primary #111315) sur --accent = ~17:1 (parfaitement lisible). Place APRES la globale
ci-dessus (meme specificite) -> gagne sur desktop ; le MOBILE garde le bloc nu. */
/* seq — le cadre du consentement prend la MEME FORME que ses voisins (releve sur .wiz-thanks-message :
rayon 12px, padding 1.15rem 1.25rem, meme ombre ; largeur 640px et ecart au bloc du dessus deja
identiques). SEULE la couleur differe : vert pale --accent conserve. Decor seul. */
@media (min-width:1024px){ .wiz-step[data-step="4"] .wiz-consent{background:var(--accent);border-radius:12px;padding:1.15rem 1.25rem;box-shadow:0 4px 14px rgba(20,25,30,.16), 0 1px 0 rgba(20,25,30,.07)} }
.wiz-step[data-step="4"] .wiz-final-recap,
.wiz-step[data-step="4"] .wiz-thanks-message{max-width:640px;margin-left:auto;margin-right:auto}
/* c. Merci : rond terre cuite + coche BLANCHE (l'icone svg herite du stroke via CSS). */
.wiz-step[data-step="5"] .wiz-thanks-icon{background:var(--cta-bg)}
.wiz-step[data-step="5"] .wiz-thanks-icon svg{stroke:var(--cta-text)}
/* 30/08/2026 — LES TROIS REGLES DU BOUTON « Continuer » SONT PARTIES avec
lui : il ne vivait que sur l ecran « sous », supprime ce jour-la, et la
maquette validee le proscrit sur les deux ecrans de tuiles. Du style
pour un element qui n existe plus est une piste qui ne mene nulle part. */
/* seq 109 — mise en page de la section AIDES du recapitulatif (etape 4). TOUT est scope sous
.wiz-recap-aides : ces regles n'atteignent JAMAIS l'ecran aides du parcours (memes classes
.wiz-aides-item/.wiz-aides-check, mais hors de .wiz-recap-aides). Surpasse par specificite
la regle "carte" (fond/rayon/ombre) posee plus haut, sans !important. */
.wiz-recap-aides .wiz-aides-item{background:transparent;border:0;border-radius:0;box-shadow:none;padding:.6rem 0}
.wiz-recap-aides .wiz-aides-item + .wiz-aides-item{border-top:1px solid var(--border)}
.wiz-recap-aides .wiz-aides-check{background:transparent;border:0;border-radius:0;box-shadow:none;
border-top:1px solid var(--border);padding:.85rem 0 0;align-items:flex-start;gap:10px}
.wiz-recap-aides-sep{border-top:1px solid var(--border);margin:20px 0}
/* seq 131 — ECRAN DE GESTION DES PROJETS. Un seul cadre englobant, lignes separees par un trait fin,
aucune ombre. Couleurs : uniquement des jetons deja definis. */
.s1-gestion-phrase{color:var(--qs-muted);margin:0 0 1rem}
.s1-gestion-liste{border:1px solid var(--border);border-radius:12px;margin-bottom:1rem}
.s1-gestion-ligne{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;cursor:pointer}
.s1-gestion-ligne + .s1-gestion-ligne{border-top:1px solid var(--border)}
.s1-gestion-picto{flex:none;display:flex;color:var(--text-strong)}
.s1-gestion-picto svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.s1-gestion-corps{flex:1 1 auto;min-width:0}
.s1-gestion-nom{display:block;font-weight:700;color:var(--text-strong)}
.s1-gestion-sous{display:block;font-size:.82rem;color:var(--text-muted);overflow-wrap:anywhere}
.s1-gestion-pastille{flex:none;min-width:22px;height:22px;padding:0 .3rem;border-radius:11px;background:var(--cta-bg);
color:var(--cta-text);display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800}
.s1-gestion-croix{flex:none;background:transparent;border:0;color:var(--text-muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .2rem}
.s1-gestion-ajouter{display:inline-block;margin:0 0 1rem}
/* seq 137 — ECRAN "VOS DEMANDES" (repere du fil du haut) : liste des metiers + avancement chiffre.
S'inspire visuellement de l'ecran de gestion (seq 131) SANS le modifier ; classes dediees, pas de
croix de retrait (le retrait vit dans "Vos besoins"). Couleurs : uniquement des jetons. */
.wiz-dmd-screen{padding:.5rem 0}
.wiz-dmd-title{display:block;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong);text-align:center;margin-bottom:.4rem}
.wiz-dmd-liste{border:1px solid var(--border);border-radius:12px;margin-bottom:1rem}
.wiz-dmd-ligne{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem}
.wiz-dmd-ligne + .wiz-dmd-ligne{border-top:1px solid var(--border)}
.wiz-dmd-picto{flex:none;display:flex;color:var(--text-strong)}
.wiz-dmd-picto svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wiz-dmd-corps{flex:1 1 auto;min-width:0}
.wiz-dmd-nom{display:block;font-weight:700;color:var(--text-strong)}
.wiz-dmd-sous{display:block;font-size:.82rem;color:var(--text-muted);overflow-wrap:anywhere}
.wiz-dmd-avance{display:block;font-size:.8rem;color:var(--text-muted);margin-top:.15rem}
.wiz-dmd-modif{flex:none;font-family:var(--font-body);font-size:.85rem;font-weight:700;color:var(--accent-dark);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wiz-dmd-modif:hover{color:var(--text-primary)}
.wiz-dmd-nav{margin-top:1rem;text-align:center}
.wiz-dmd-retour{font-size:.9rem;color:var(--accent-dark);text-decoration:none}
.wiz-dmd-retour:hover{text-decoration:underline}
/* ══════════════════════════════════════════════════════════════════════════
LE PARCOURS, D APRES LA MAQUETTE DU 03/09 04/09/2026
_maquettes/COMPANIUM_maquette_site_public.html
⚠️ CE BLOC EST LE DERNIER DE LA FEUILLE, ET CE N EST PAS UN HASARD. La
feuille d origine du parcours vient d etre versee juste au-dessus, telle
quelle : ce qui suit gagne sur elle, sans qu on ait eu a la desosser.
Aucune de ses regles n a ete supprimee — on les RECOUVRE, la ou la
maquette dit autre chose. Un desossage aurait demande de juger 1 700
lignes une a une, et une seule erreur y aurait casse un ecran.
⚠️ AUCUN SELECTEUR NEUF DANS LE BALISAGE. On habille les classes qui
existent — .wiz-*, .s1-*, .qs-* — parce que le JavaScript s y accroche.
Les quinze reperes du releve du 06/09 sont donc intacts par construction :
on n a touche a aucun d eux.
⚠️ LES NEUF REGLAGES SONT REBRANCHES, un par un, et chacun est nomme dans
la regle qui le lit.
══════════════════════════════════════════════════════════════════════════ */
/* ── LA PAGE : deux colonnes, comme « .par » ─────────────────────────────── */
.wiz-wrap {
max-width:none; margin:0; padding:0; background:var(--cp-blanc);
/* ⚠️ 300 px au lieu de 248 (06/09) : la colonne coupait les libelles de
question. La troncature est retiree -- le texte passe a la ligne -- et
la colonne s elargit un peu pour que deux mots y tiennent. */
display:grid; grid-template-columns:300px 1fr; min-height:620px;
}
/* ── LA COLONNE LATERALE : « .cote » ─────────────────────────────────────── */
.wiz-header { background:var(--cp-blanc); border-right:1px solid var(--cp-filet);
border-bottom:0; }
.wiz-rail-inner { padding:24px 20px; }
.wiz-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.wiz-logo-img { width:30px; height:30px; }
.wiz-logo-text { font-size:15px; letter-spacing:.4px; color:var(--cp-encre); font-weight:600; }
/* « .cote h6 » — le titre du recapitulatif. */
.wiz-rail-recap-title { font-size:10.5px; letter-spacing:1.4px; color:var(--cp-leg);
margin:20px 0 9px; font-weight:700; text-transform:uppercase; }
/* « .rep » — une reponse deja donnee. */
.wiz-rail-recap-row { padding:9px 0; border-bottom:1px solid var(--cp-filet); }
.wiz-rail-recap-q { font-size:11px; color:var(--cp-leg); display:block; }
.wiz-rail-recap-a { font-size:13px; color:var(--cp-titre); font-weight:600; line-height:1.3; }
.wiz-rail-recap-empty { font-size:12.5px; color:var(--cp-leg); font-style:italic; }
.wiz-rail-recap-metier { font-size:10.5px; letter-spacing:1.2px; color:var(--cp-leg);
margin:14px 0 4px; font-weight:700; text-transform:uppercase; }
/* « .ret » — le retour a l accueil. */
.wiz-back { margin-top:20px; font-size:13px; color:var(--cp-txt); text-decoration:none;
display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.wiz-back:hover { color:var(--cp-titre); }
/* ── LE CORPS : « .corps » ───────────────────────────────────────────────── */
.wiz-card { display:flex; flex-direction:column; padding:24px 32px;
min-height:620px; min-width:0; max-width:none; margin:0;
background:var(--cp-blanc); border:0; border-radius:0; box-shadow:none; }
/* ── LE FIL DES ETAPES : « .fil » ────────────────────────────────────────── */
.wiz-steprail { display:flex; align-items:center; justify-content:center;
margin-bottom:4px; flex-wrap:wrap; background:none; border:0; padding:0; }
.wiz-steprail-line { display:flex; align-items:center; flex-wrap:wrap;
justify-content:center; }
.wiz-steprail-item { display:flex; align-items:center; gap:8px; padding:4px 11px;
font-size:12.5px; color:var(--cp-leg); }
.wiz-steprail-num { width:23px; height:23px; border-radius:50%; background:var(--cp-creme);
display:flex; align-items:center; justify-content:center; font-size:11.5px;
font-weight:700; font-style:normal; color:var(--cp-leg); flex:none; }
.wiz-steprail-item.current { color:var(--cp-titre); font-weight:700; }
.wiz-steprail-item.current .wiz-steprail-num { background:var(--cp-encre); color:#fff; }
.wiz-steprail-item.done .wiz-steprail-num { background:var(--cp-encre); color:#fff; }
.wiz-steprail-sep { width:34px; height:1px; background:var(--cp-filet); display:block; }
/* ── LA QUESTION : « .q » ────────────────────────────────────────────────── */
/* ⚠️ « .wiz-step.qs-mode », PAS SEULEMENT « .qs-mode .wiz-step ». La classe
qs-mode est posee SUR l etape 2 elle-meme (qsScope), pas sur un ancetre :
la regle descendante ne l atteignait donc JAMAIS, et l ecran s etalait sur
908 px au lieu des 880 de la maquette. Mesure du 04/09. */
#s1Screen, .qs-mode .wiz-step[data-step], .wiz-step.qs-mode[data-step] {
margin:auto auto; width:100%; max-width:880px; padding:22px 0; min-width:0; }
.qs-head .qs-count, .qs-head { text-align:center; font-size:10.5px; letter-spacing:1.6px;
font-weight:700; color:var(--cp-leg); margin-bottom:9px; text-transform:uppercase; }
.qs-mode .wiz-qual-field > .wiz-qual-label,
#s1Screen .wiz-qual-field > .wiz-qual-label {
margin:0 0 8px; font-size:25px; letter-spacing:-.6px; color:var(--cp-titre);
line-height:1.15; text-align:center; font-weight:600; font-family:inherit; }
.qs-mode .wiz-qual-help, .qs-aide { margin:0 auto 24px; font-size:14.5px;
color:var(--cp-leg); text-align:center; max-width:62ch; }
/* L AVERTISSEMENT « MAISON » -- une NOTE, pas une erreur (07/09).
⚠️ PAS DE ROUGE, et c est la meme raison qu a la case de consentement
(CDC 17.12) : le visiteur n a rien fait de mal. Sa demande part quand
meme, la phrase le dit -- l accuser d une faute serait un mensonge.
Graisse 400 : 700 reste au seul geste principal de l ecran (CDC 13.5). */
.wiz-qual-warn { margin:0 auto 24px; max-width:62ch; font-size:14.5px;
font-weight:400; line-height:1.5; text-align:center; color:var(--cp-titre);
background:rgba(20,23,26,.045); border-radius:10px; padding:10px 14px; }
/* ══ LES TUILES DE METIER — la MEME famille qu a l accueil ════════════════
« .tu » : pictogramme en haut, nom, ligne de detail. Ce sont les ecrans
famille, metier et sous-categorie du premier pas.
LES REGLAGES REBRANCHES ICI, un par un :
--s1-cols-famille / --s1-cols-metier les colonnes
--s1-tuile-ecart l ecartement
--s1-tuile-rayon l arrondi
--s1-tuile-picto la LIGNE du pictogramme
--s1-picto-dessin le DESSIN, distinct de sa ligne
--s1-lignes-famille / --s1-lignes-sous les lignes reservees au nom
--s1-tuile-selection la couleur de l etat choisi
--s1-touche-delai le temps du retour au toucher */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid {
display:grid; gap:var(--s1-tuile-ecart, 10px); grid-auto-rows:1fr;
grid-template-columns:var(--s1-cols-metier, repeat(3, 1fr));
max-width:none; margin:0;
}
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"] {
grid-template-columns:var(--s1-cols-famille, repeat(2, 1fr)); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"] {
grid-template-columns:var(--s1-cols-metier, repeat(3, 1fr)); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill {
/* ⚠️ UNE COLONNE DE FLEX QUI COMMENCE EN HAUT, ET C EST DELIBERE.
En bloc, l espace libre d une tuile au contenu court se repartissait
au-dessus et au-dessous : mesure du 04/09, sept tuiles posaient leur
pictogramme a 26 et deux a 18, sur la meme rangee. Une colonne de
flex calee sur flex-start ne laisse aucune place a cette repartition. */
position:relative; display:flex; flex-direction:column;
justify-content:flex-start; align-items:stretch;
width:100%; height:100%;
background:var(--cp-blanc); border:0;
border-radius:var(--s1-tuile-rayon, 10px);
padding:18px 17px; min-height:0;
box-shadow:inset 0 0 0 1px var(--cp-filet);
text-align:left; color:inherit; font-weight:400;
/* ⚠️ align-content:start — MESURE, PAS SUPPOSITION. La regle d origine
centre le contenu du bouton. Sur un bloc, « align-content » agit
depuis Chrome 123 : les tuiles au contenu court voyaient donc leur
pictogramme descendre de 8 pixels par rapport aux autres. Mesure du
04/09 : sept tuiles a 26, deux a 18, sur la meme rangee. */
align-content:start; justify-content:normal;
transition:transform var(--s1-touche-delai, .13s), box-shadow var(--s1-touche-delai, .13s);
}
/* Le filet jaune qui apparait au survol, a gauche — signature de la maquette. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill::before {
content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px;
border-radius:0 3px 3px 0; background:transparent;
transition:background var(--s1-touche-delai, .13s); }
/* ⚠️ 05/09/2026 (soir) — CETTE REGLE GARDAIT LE FOND BLANC AU SURVOL, ET
C EST ELLE QUI FAISAIT DISPARAITRE LE TITRE. Elle date du 04/09, quand la
tuile de metier restait claire au survol. La maquette v2 la veut a
l ENCRE -- et ma regle v2, ecrite plus bas, donne au titre le BLANC.
Les deux se sont rencontrees : fond blanc, titre blanc.
MESURE DU 05/09 sur la page servie : fond rgb(255,255,255), titre
rgb(255,255,255), CONTRASTE = 1. Le texte n etait pas efface, il etait
invisible.
⚠️ Elle gagnait par « .s1-grid » : (0,5,0) contre (0,4,0). Une regle de
plus n aurait rien change -- il fallait retirer celle-ci.
⚠️ ET LA MEME REGLE POUR LE TELEPHONE RESTE, plus bas dans sa requete de
media : la, le fond DOIT rester blanc, puisqu il n y a pas de survol. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill:hover {
transform:none; }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill:hover::before {
background:var(--s1-tuile-selection, var(--cp-jaune)); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill::after { content:none; }
/* ⚠️ LA LIGNE DU PICTOGRAMME A UNE HAUTEUR FIXE, ET LE DESSIN SE CENTRE
DEDANS. Sans cela, un dessin plus haut qu un autre decale le nom qui le
suit : mesure du 04/09, deux profils de tuile, 8 pixels d ecart entre
eux sur la meme rangee. C est exactement le defaut que la reserve de
lignes corrige plus bas pour le NOM ; il fallait le meme pour le DESSIN.
Les deux reglages sont distincts et c est voulu : --s1-tuile-picto est
la LIGNE, --s1-picto-dessin est le DESSIN. */
/* ⚠️ align-self:flex-start — LE PICTOGRAMME EST CALE A GAUCHE.
La maquette pose « .tu svg { display:block } » : un bloc, donc au bord
gauche. Une regle plus haut dans cette feuille lui donnait
« align-self:center » -- heritage de l ancienne tuile en ligne, ou le
picto etait a cote du texte et non au-dessus. Mesure du 04/09 : le
dessin se posait a 128 pixels du bord d une tuile de 285, c est-a-dire
au milieu, pendant que le nom demarrait a 17. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .qs-picto {
display:flex; align-items:center; justify-content:flex-start;
align-self:flex-start;
margin:0 0 10px; height:var(--s1-tuile-picto, 30px); flex:none;
color:var(--sec-color, var(--cp-gris)); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .qs-picto svg {
width:var(--s1-picto-dessin, 30px); height:var(--s1-picto-dessin, 30px); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-corps {
display:block; min-width:0; }
/* ⚠️ LA HAUTEUR DU NOM EST RESERVEE. C est ce qui fait que la ligne de
detail demarre a la MEME distance du haut dans toutes les tuiles d une
rangee, meme quand un nom tient sur une ligne et son voisin sur deux. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-label {
display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
-webkit-line-clamp:var(--s1-lignes-nom, 2); line-clamp:var(--s1-lignes-nom, 2);
min-height:calc(var(--s1-lignes-nom, 2) * 1.25em);
font-size:14.5px; font-weight:600; color:var(--cp-titre);
margin-bottom:3px; line-height:1.25; }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"] {
--s1-lignes-nom: var(--s1-lignes-famille, 3); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"],
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="sous"] {
--s1-lignes-nom: var(--s1-lignes-sous, 4); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .s1-pill-detail {
display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
-webkit-line-clamp:var(--s1-lignes-nom, 2); line-clamp:var(--s1-lignes-nom, 2);
font-size:12px; color:var(--cp-leg); line-height:1.4; font-weight:400; }
/* L etat choisi : le fond passe a l encre, comme « .tu.on » de la maquette. */
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected {
background:var(--tu-fond-on); box-shadow:none; }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected::before {
background:var(--s1-tuile-selection, var(--cp-jaune)); }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected .s1-pill-label { color:#fff; }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected .s1-pill-detail { color:#A9B0B6; }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid .wiz-qual-pill.selected .qs-picto {
color:var(--s1-tuile-selection, var(--cp-jaune)); }
/* ══ LES TUILES DE REPONSE — « .tu.mini » ═════════════════════════════════
Une ligne : pictogramme, libelle, pastille de choix a droite.
RONDE pour un choix unique, CARREE pour un choix multiple -- c est le
« .tu.carre » de la maquette, et c est la seule chose qui distingue les
deux a l oeil.
⚠️ LA PASTILLE EST UN ::after, PAS UN ELEMENT. Ajouter une balise aurait
demande de toucher au JavaScript qui fabrique ces boutons -- interdit ici,
et inutile : la pastille ne porte aucune information que la classe
« selected » ne porte deja. */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) { display:flex;
flex-direction:column; gap:10px; }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill {
display:flex; align-items:center; gap:12px; width:100%;
padding:14px 15px; min-height:0; text-align:left;
background:var(--cp-blanc); border:0;
border-radius:var(--s1-tuile-rayon, 10px);
box-shadow:inset 0 0 0 1px var(--cp-filet);
font-size:14.5px; font-weight:600; color:var(--cp-titre);
transition:box-shadow var(--s1-touche-delai, .13s), background var(--s1-touche-delai, .13s);
}
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill:hover {
background:var(--cp-blanc); box-shadow:inset 0 0 0 1.5px var(--cp-encre); }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .qs-picto {
flex:none; width:23px; height:23px; margin:0;
color:var(--sec-color, var(--cp-gris)); }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .qs-picto svg {
width:23px; height:23px; }
/* LA PASTILLE. Vide au repos, pleine quand la reponse est retenue. */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill::after {
content:""; margin-left:auto; flex:none; width:19px; height:19px;
border-radius:50%; border:0; transform:none; position:relative;
box-shadow:inset 0 0 0 1.5px var(--cp-filet-fort); }
.qs-mode .wiz-qual-field[data-qual-type="checkbox"] .wiz-qual-options:not(.s1-grid) .wiz-qual-pill::after {
border-radius:5px; }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill.selected {
background:var(--cp-blanc); color:var(--cp-titre);
box-shadow:inset 0 0 0 1.5px var(--s1-tuile-selection, var(--cp-jaune)); }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill.selected::after {
box-shadow:inset 0 0 0 1.5px var(--s1-tuile-selection, var(--cp-jaune));
background:radial-gradient(circle at center,
var(--s1-tuile-selection, var(--cp-jaune)) 0 45%, transparent 46%); }
/* ── LA NAVIGATION SOUS LA QUESTION : « .nav2 », « .bn », « .bg » ────────── */
.qs-mode .qs-nav { display:flex; gap:11px; margin-top:26px; align-items:center;
justify-content:center; padding-top:18px; border-top:1px solid var(--cp-filet);
max-width:880px; margin-left:auto; margin-right:auto; }
/* ── LES CHAMPS DE SAISIE : « .champ » ───────────────────────────────────── */
.qs-mode .wiz-field label, .qs-mode .wiz-qual-input-label {
display:block; font-size:12.5px; font-weight:700; color:var(--cp-titre);
margin-bottom:5px; text-align:left; }
.qs-mode .wiz-field input[type=text], .qs-mode .wiz-field input[type=email],
.qs-mode .wiz-field input[type=tel], .qs-mode .wiz-qual-input {
width:100%; font:inherit; font-size:15.5px; height:50px; padding:0 14px;
border:0; border-radius:10px; background:var(--cp-blanc); color:var(--cp-titre);
box-shadow:inset 0 0 0 1.5px var(--cp-filet-fort); }
/* ── LE TELEPHONE ────────────────────────────────────────────────────────── */
@media (max-width:760px) {
.wiz-wrap { grid-template-columns:1fr; min-height:0; }
.wiz-header { display:none; }
.wiz-card { padding:16px 15px; min-height:0; }
.wiz-steprail-label { display:none; }
.wiz-steprail-sep { width:16px; }
.qs-mode .wiz-qual-field > .wiz-qual-label,
#s1Screen .wiz-qual-field > .wiz-qual-label { font-size:19px; }
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid,
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="famille"],
.qs-mode .wiz-qual-field .wiz-qual-options.s1-grid[data-s1-ecran="metier"] {
grid-template-columns:var(--s1-cols-tel-famille, repeat(2, 1fr)); }
}
/* ── POINT 1.7 — CE QUI ETAIT ECRIT DANS LES ATTRIBUTS DE LA PAGE ────────
Huit attributs style= de DECORATION deviennent des regles. Les quatorze
autres restent dans la page, et c est justifie :
douze sont un MASQUAGE que le JavaScript allume et eteint ;
quatre portent --sec-color, la couleur du metier, VENUE DE LA BASE --
elle change d une ligne a l autre, aucune feuille ne peut la porter.
Deux etaient mixtes : le masquage reste, la mise en forme est partie. */
.wiz-field-colle { margin-top:0; }
.wiz-field-ancre { position:relative; }
.wiz-field-court { flex:0 0 110px; }
.wiz-field-moyen { flex:0 0 130px; }
.wiz-lien-fort { color:var(--accent-dark); font-weight:700; }
.wiz-note { color:var(--text-muted); }
.wiz-hint-ville { color:var(--text-muted); font-size:.8rem;
margin-top:-.9rem; margin-bottom:1rem; }
.wiz-bouton-detache { margin-top:1.5rem; }
/* ══ SEQUENCES 2 ET 3 (04/09/2026) — L ECRAN DE QUESTION AU DESSIN DE LA MAQUETTE ══
La maquette pose sur UN ecran : un CHAPEAU, un TITRE, une PHRASE
d explication, puis une ou plusieurs questions -- chacune des suivantes
precedee d un INTERTITRE (« .sq ») -- et enfin les deux boutons.
⚠️ NOTRE BASE NE PORTE PAS DE TITRE D ECRAN. Elle porte des libelles de
question. Le seul appariement qui n INVENTE AUCUN TEXTE est donc :
la 1re question de l ecran -> son libelle est le TITRE (.qs-premier)
les suivantes -> leur libelle est l INTERTITRE (.qs-suivant)
Sur un ecran a une seule question, la seconde regle ne s applique jamais :
l ecran retrouve exactement le dessin d avant le groupement.
L AIR, RECOPIE DE LA MAQUETTE :
.q h3 { margin:0 0 8px } titre -> phrase 8 px
.q .aide { margin:0 auto 24px } phrase -> 1re rangee 24 px
.q .sq { margin:28px 0 10px } intertitre 28 dessus, 10 dessous */
.qs-mode .wiz-qual-field.qs-suivant > .wiz-qual-label {
margin:28px 0 10px; font-size:16.5px; line-height:1.3;
letter-spacing:0; text-align:center; font-weight:600; }
/* ⚠️ 600, ET LA MAQUETTE ECRIT 700. Ce n est pas un oubli : 700 est reserve
au SEUL geste principal de l ecran (regle des trois graisses, CDC 13.5).
Un intertitre a la meme graisse que le bouton « Continuer » ferait deux
gestes principaux sur le meme ecran. Ecart assume, et signale. */
/* ⚠️ L AIR SOUS LE TITRE EXISTE MEME SANS PHRASE D EXPLICATION. La plupart
de nos questions n ont pas de help_text : sans cette regle, la premiere
rangee remonterait a 8 px du titre au lieu des 24 de la maquette. */
.qs-mode .wiz-qual-field.qs-premier > .wiz-qual-label + .wiz-qual-options,
.qs-mode .wiz-qual-field.qs-premier > .wiz-qual-label + .wiz-qual-input,
.qs-mode .wiz-qual-field.qs-premier > .wiz-qual-label + .wiz-qual-textarea { margin-top:24px; }
/* ── LA DISPOSITION DES REPONSES — UNE REGLE, PAS UN CHOIX AU CAS PAR CAS ──
La maquette fixe ses grilles a la main : g3, g2, g2, g4, g4. Nous ne le
pouvons pas -- nos libelles viennent de la base et changent sans preavis.
La regle DERIVABLE qui redonne les cinq ecrans de la maquette :
colonnes = min( nombre de reponses , plafond(plus long libelle) )
plafond : <= 19 caracteres -> 4 <= 24 -> 3 <= 34 -> 2 au-dela -> 1
Verifiee sur les cinq ecrans de la maquette, sans exception :
type de logement 3 reponses, 23 car. -> min(3,3) = 3 (la maquette : g3)
vous etes 2 reponses, 12 car. -> min(2,4) = 2 (la maquette : g2)
financement 4 reponses, 30 car. -> min(4,2) = 2 (la maquette : g2)
budget 4 reponses, 16 car. -> min(4,4) = 4 (la maquette : g4)
delai 4 reponses, 19 car. -> min(4,4) = 4 (la maquette : g4)
Elle est calculee EN PHP a la fabrication de la question et ecrite dans
data-qs-cols : aucune mesure a l affichage, donc aucune bascule visible au
chargement. */
/* ⚠️ « max-width:640px » ETAIT POSE PLUS HAUT dans cette feuille, du temps ou
les reponses etaient EMPILEES sur une seule colonne : une colonne large de
908 aurait donne des tuiles interminables. En grille, il rend le contraire :
quatre colonnes dans 640 font 154 px, et « 15 000 a 30 000 € » y passe a la
ligne en laissant l euro tout seul. Mesure du 04/09. La maquette borne son
ecran de question a 880 (« .q { max-width:880px } »), pas ses reponses. */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) {
display:grid; grid-template-columns:1fr; align-items:stretch;
max-width:none; margin:0;
gap:var(--s1-tuile-ecart, 8px); }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid)[data-qs-cols="2"] {
grid-template-columns:repeat(2, 1fr); }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid)[data-qs-cols="3"] {
grid-template-columns:repeat(3, 1fr); }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid)[data-qs-cols="4"] {
grid-template-columns:repeat(4, 1fr); }
/* La grille etire ses cellules : toutes les tuiles d une rangee ont la meme
hauteur, sans qu aucune hauteur soit ecrite nulle part. C est le meme
mecanisme que « grid-auto-rows:1fr » sur les tuiles de metier. */
/* ⚠️ UNE SEULE DIMENSION DE TUILE DE REPONSE, SUR TOUS LES ECRANS.
La grille etire deja ses cellules : sur UNE rangee, toutes les tuiles ont
la meme hauteur. Mais d un ECRAN a l autre, non -- mesure du 04/09 :
« Maison / Appartement » donnait 51 px, « Premiere installation /
Remplacement / Depannage ou entretien » donnait 66, parce que le troisieme
libelle passe a deux lignes. Deux dimensions, donc, et le visiteur voit la
tuile changer de taille en avancant.
La hauteur du LIBELLE est donc RESERVEE, comme elle l est deja pour le nom
des tuiles de metier : deux lignes, le maximum qu un libelle atteint a
cette largeur. Une tuile d une ligne ne perd qu une ligne, et plus rien ne
bouge d un ecran a l autre. */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill {
height:100%; align-items:center;
min-height:calc(var(--s1-lignes-reponse, 2) * 1.3em + 28px); }
/* La pastille « Je prefere ne pas repondre » tient TOUTE la rangee : elle
saute l ecran, elle n est pas une reponse parmi les autres. */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .qs-skip-pill {
grid-column:1 / -1; }
/* ── LE LISERE JAUNE AU SURVOL, SUR LES TUILES DE REPONSE AUSSI ───────────
Releve du 04/09 dans la maquette : « .tu:hover::before{background:var(--jaune)} »
ne distingue pas « .mini ». Le liisere de 3 px est donc pose sur TOUTES les
tuiles, reponses comprises -- et il ne l etait chez nous que sur les tuiles
de metier.
⚠️ C est un FOND de 3 px, jamais un texte ni un trait de contour : sur
fond clair, le jaune ne se lit pas autrement (CDC 14.4). */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill {
position:relative; overflow:hidden; }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill::before {
content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
border-radius:0 3px 3px 0; background:transparent; pointer-events:none;
transition:background var(--s1-touche-delai, .13s); }
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill:hover::before,
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) .wiz-qual-pill.selected::before {
background:var(--s1-tuile-selection, var(--cp-jaune)); }
/* ── LA COLONNE DE GAUCHE : « .rep » ET SON LIEN « Modifier » ────────────
Maquette : « .rep a { font-size:11px; color:var(--leg);
border-bottom:1px solid var(--filetF) } »
Un lien SOULIGNE PAR UN FILET, pas par un souligne de texte : c est ce qui
le distingue de la reponse juste au-dessus sans ajouter de couleur. */
.wiz-rail-recap-modif { display:inline-block; margin-top:4px; font-size:11px;
color:var(--cp-leg); text-decoration:none; font-weight:400;
border-bottom:1px solid var(--cp-filet-fort); }
.wiz-rail-recap-modif:hover { color:var(--cp-titre); border-bottom-color:var(--cp-titre); }
/* ── LES DEUX BOUTONS SOUS L ECRAN : « .bg » et « .bn » ──────────────────
La maquette : « .nav2 » aligne Precedent a gauche, Continuer a droite, un
ressort entre les deux. Notre barre centrait tout. */
/* ⚠️ LA QUATRIEME GRAISSE, TROUVEE PAR MESURE LE 04/09.
Le bandeau du bloc des aides (« Ces travaux peuvent ouvrir droit... »)
etait en 800 -- seul reste d une echelle a huit graisses. Il ne parait
jamais PENDANT le defile (la question veut_aides en est exclue), mais il
parait ailleurs, et une graisse de plus dans la feuille est une graisse de
plus a l ecran un jour. 600 : c est un titre, comme les autres.
⚠️ On cible l element releve, pas tout l ecran : un « * { font-weight } »
masquerait la prochaine derive au lieu de la montrer (CDC 13.5). */
.wiz-aides-head { font-weight:600; }
.qs-mode .qs-nav { justify-content:space-between; }
.qs-mode .qs-nav [data-qs-back] { margin-right:auto; }
.qs-mode .qs-nav [data-qs-continue] { margin-left:auto; }
@media (max-width:760px) {
/* La maquette : « body.tel .g4, body.tel .g3 { 1fr 1fr } » et
« body.tel .g2 { 1fr } ». Quatre et trois passent a deux, deux passe a un. */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid)[data-qs-cols="3"],
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid)[data-qs-cols="4"] {
grid-template-columns:repeat(2, 1fr); }
/* ⚠️ RETIRE LE 06/09 : « deux passe a un ». Sur telephone, une question a
deux reponses courtes -- « Maison / Appartement », « Proprietaire /
Locataire » -- doit tenir sur UNE ligne. Cette regle les empilait, et
le bouton Continuer sortait de l ecran : mesure du 06/09, son bas a
868 px pour une fenetre de 844. */
.qs-mode .wiz-qual-field.qs-suivant > .wiz-qual-label { font-size:15px; margin-top:22px; }
/* ⚠️ TROIS LIGNES RESERVEES SUR TELEPHONE, PAS DEUX. Mesure du 04/09 a
390 px : deux colonnes y font 176 px de large, soit onze caracteres de
texte utile, et « Depannage ou entretien » y passe a TROIS lignes. La
reserve de deux lignes redonnait alors deux hauteurs de tuile -- 66 et
85 -- c est-a-dire exactement le defaut qu elle corrige sur ordinateur.
La reserve n est pas un nombre absolu : c est le maximum qu un libelle
atteint A CETTE LARGEUR-LA. */
.qs-mode .wiz-qual-field .wiz-qual-options:not(.s1-grid) { --s1-lignes-reponse: 3; }
}
/* ══ SEQUENCES 2 ET 3 DU 04/09 (soir) — LES TUILES ET LE CENTRAGE VERTICAL ══
RELEVE COMPARATIF maquette / page servie, a 1440x1080, avant correction :
propriete maquette nous ecart
hauteur du cadre 786 1314 +528 <-- il DEBORDE
vide sous le cadre 270 -259 -529 la fenetre
ecart entre tuiles 12 8 -4
hauteur d une tuile (fam) 131 158 +27
hauteur d une tuile (met) 114 125 +11 <-- DEUX hauteurs
rapport largeur/hauteur 2.18 1.82 -0.36 <-- presque carre
air titre -> 1re rangee (fam) 54 8 -46
largeur du bloc 880 880 0
air interieur d une tuile 18/17px 18/17px 0
⚠️ LE CADRE DEBORDAIT DE 259 PIXELS, ET C EST LA CAUSE DU RESTE.
« .wiz-wrap { min-height:100vh } » (regle du 1024px, plus haut dans cette
feuille) imposait la hauteur de la FENETRE a un bloc deja pose DANS un
cadre qui tient lui-meme la hauteur -- plus la marge du cadre (2x24), son
air interieur (2x22) et le pied France Renov'. Le cadre faisait donc 1314
pour une fenetre de 1080 : le contenu se calait en haut, et les 259 pixels
du bas sortaient de l ecran. Ce n est pas le centrage qui manquait, c est
la hauteur qui etait fausse.
⚠️ ON LA SUPPRIME A SA SOURCE, on n empile pas une regle par-dessus.
Depuis le 07/09, c est le CADRE qui tient la hauteur
(« .cp-cadre { min-height: calc(100vh - 2 * marge) } »). Le parcours n a
plus a la tenir : il remplit ce que le site lui laisse. */
/* 1. LE SITE REMPLIT LE CADRE, ET SON CONTENU REMPLIT LE SITE.
Sans cela, le fond ardoise du cadre reparaitrait sous une page courte. */
.cp-cadre { display:flex; flex-direction:column; }
.cp-site { flex:1; display:flex; flex-direction:column; min-height:0; }
/* ⚠️ RIEN NE S ETIRE PAR DEFAUT. Le gabarit pose dans le site le contenu de
la page, PUIS l encart France Renov', PUIS le pied. Sur l accueil, ce
contenu est une suite de sections : les laisser s etirer ou se comprimer
deformerait la page entiere. Seul le conteneur d un ECRAN prend la place
qui reste -- le parcours et le simulateur, qui sont des ecrans, pas des
pages qui defilent. */
.cp-site > * { flex:0 0 auto; }
.cp-site > .wiz-wrap, .cp-site > .cps-par { flex:1 1 auto; min-height:0; }
/* 2. LE PARCOURS NE S IMPOSE PLUS 100vh — NI PAR SA GRILLE, NI PAR SON RAIL.
⚠️ DEUX ENDROITS, ET LE SECOND EST CELUI QU ON OUBLIE. Retirer le 100vh de
« .wiz-wrap » ne changeait RIEN a la mesure : la colonne de gauche
(« .wiz-header », ligne 1768) en portait un elle aussi, et une cellule de
grille tire sa grille avec elle. Releve du 04/09 : cadre a 1314 avant, 1314
apres la premiere correction. On mesure, on ne suppose pas.
« align-self:stretch » suffit : le rail s etire a la hauteur de la grille,
il ne la fixe plus. */
@media (min-width:1024px) {
.wiz-wrap { min-height:0; align-items:stretch; }
.wiz-header { min-height:0; }
}
/* 3. LA CARTE REMPLIT LA COLONNE, ET L ECRAN SE CENTRE DEDANS.
C est exactement « .corps { display:flex; flex-direction:column } » +
« .q { margin:auto auto } » de la maquette.
⚠️ « margin:auto », PAS « justify-content:center ». La difference compte
le jour ou le contenu depasse : une marge automatique se reduit a zero et
le bloc repart du haut, tandis qu un centrage par justify-content coupe
le HAUT du contenu — on perdrait le titre de la question. C est la
reponse au point 3.3 de la consigne, et elle tient toute seule. */
.wiz-card { height:auto; min-height:100%; }
/* ⚠️ LE FORMULAIRE EST LE MAILLON QU ON OUBLIE. Entre la carte et l ecran, il
y a un