/* Pages des deux tests (stress-test.html, barometre.html), nouveau style proposé le 1/10/2026 : le titre sur la scène,
   le test dans une fenêtre à côté, puis ce que le test regarde. Les scripts (stress-test.js, barometre.js) n'injectent
   plus de styles : tout leur rendu est ici, classes .st-* pour le Stress-test et .bq-* pour le Baromètre, dessinées
   ensemble. S'ajoute à onglets.css, boutons-surlignage.css, accueil-fidele.css, organisation-fidele.css et outils.css
   (les pastilles de promesse). */

:root{
  /* Gravité du score, lue en texte sur la fenêtre (4,5:1 au moins dans les deux thèmes) */
  --niveau-1:#2D6A1F;--niveau-2:#7A5A10;--niveau-3:#A8440C;--niveau-4:var(--rouge-texte);
  /* Les arcs de la jauge prennent --jauge-1 à 4 de organisation-fidele.css, comme le Baromètre de la page Organisation */
}
:root[data-theme="dark"]{--niveau-1:#A8D48A;--niveau-2:#E8C99A;--niveau-3:#F2A677}

/* ---------- La page ---------- */
.page-test .hero-grille{align-items:start;gap:var(--e-7)}
.page-test .hero-texte{padding-bottom:var(--e-5)}
@media(min-width:900px){
  .page-test .hero-grille{min-height:0;max-height:none;padding:var(--e-8) 0}
  .page-test .hero-texte{position:sticky;top:calc(var(--hauteur-nav) + var(--e-6));padding:0;align-self:start}
}
.test-fenetre{position:relative;z-index:2;margin-bottom:var(--e-6);scroll-margin-top:calc(var(--hauteur-nav) + var(--e-4))}
.test-fenetre .fenetre-corps{padding:var(--e-5)}
@media(min-width:600px){.test-fenetre .fenetre-corps{padding:var(--e-6)}}

/* Ce que le test regarde */
.maillons{display:grid;gap:var(--e-5)}
.maillon{display:grid;gap:var(--e-3);align-content:start;padding:var(--e-5);border-radius:var(--rayon-fenetre);background:var(--fenetre);box-shadow:inset 0 0 0 1px var(--filet),var(--ombre-fenetre)}
.maillon h3{font-size:var(--t-md);letter-spacing:-.015em;color:var(--titre)}
.maillon ul{display:grid;gap:var(--e-2)}
.maillon li{display:flex;gap:var(--e-2);font-size:var(--t-sm);line-height:1.45;color:var(--encre-douce)}
.maillon li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.45em;border-radius:2px;background:var(--c,var(--rouge))}
.maillon-num{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;color:var(--rouge-texte)}
@media(min-width:760px){.maillons{grid-template-columns:repeat(3,minmax(0,1fr))}}
.postes{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.postes li{padding:8px 14px;border-radius:var(--pilule);background:var(--fenetre);box-shadow:inset 0 0 0 1px var(--filet-fort);font-weight:700;font-size:var(--t-sm)}
.test-notes{display:grid;gap:var(--e-3);max-width:62ch;margin-top:var(--e-6);color:var(--encre-douce)}

/* ---------- Le test, commun aux deux ---------- */
.st,.bq{display:grid;gap:var(--e-3);color:var(--encre);font-family:var(--police)}
.st>*,.bq>*{margin:0}
.st-kicker,.bq-kicker{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce)}
.bq-kicker--suite{margin-top:var(--e-4)}
.st-lead,.bq-lead{font-size:var(--t-base);line-height:1.55;color:var(--encre-douce)}
.st-btn,.bq-btn{justify-self:start}
.st-meta,.bq-meta{display:flex;justify-content:space-between;gap:var(--e-3);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.st-barbg,.bq-barbg{height:6px;border-radius:3px;background:var(--fond-2);box-shadow:inset 0 0 0 1px var(--filet);overflow:hidden}
.st-barfg,.bq-barfg{height:100%;border-radius:3px;background:var(--rouge);transition:width var(--duree-secondaire) var(--courbe)}
.st-q,.bq-q{margin:var(--e-2) 0 var(--e-1);font-size:var(--t-lg);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--titre)}
.st-q:focus,.bq-q:focus{outline:none}
.st-q:focus-visible,.bq-q:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.st-opt,.bq-opt{display:block;width:100%;min-height:52px;padding:var(--e-3) var(--e-4);border:1.5px solid var(--filet-fort);border-radius:var(--rayon-onglet);background:var(--fenetre);color:var(--encre);font:600 var(--t-base)/1.4 var(--police);text-align:left;cursor:pointer;transition:border-color var(--duree-secondaire) var(--courbe),background-color var(--duree-secondaire) var(--courbe),transform var(--duree-action) var(--courbe)}
.st-opt:hover,.bq-opt:hover{border-color:var(--encre);background:var(--fond-2)}
.st-opt:active,.bq-opt:active{transform:rotate(-.6deg) scale(.99);background:var(--lilas);border-color:var(--nuit);color:var(--nuit)}
.st-opt:focus-visible,.bq-opt:focus-visible,.st-back:focus-visible,.bq-back:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.st-back,.bq-back{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--encre-douce);font:700 var(--t-sm) var(--police);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.st-back:hover,.bq-back:hover{color:var(--encre)}

/* Le score */
.st-score-ligne,.bq-score-ligne{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e-2)}
.bq-score-bloc{display:grid;gap:var(--e-2);text-align:center}
.bq-score-ligne{justify-content:center}
.st-score,.bq-score{font-size:clamp(3rem,8vw,4.2rem);font-weight:800;line-height:1;letter-spacing:-.04em;font-variation-settings:'opsz' 96}
[data-niveau="1"].st-score,[data-niveau="1"].bq-score{color:var(--niveau-1)}
[data-niveau="2"].st-score,[data-niveau="2"].bq-score{color:var(--niveau-2)}
[data-niveau="3"].st-score,[data-niveau="3"].bq-score{color:var(--niveau-3)}
[data-niveau="4"].st-score,[data-niveau="4"].bq-score{color:var(--niveau-4)}
.st-score-sur,.bq-score-sur{font-size:var(--t-sm);color:var(--encre-douce)}
.st-verdict,.bq-verdict{font-size:var(--t-md);font-weight:700;line-height:1.35;color:var(--titre)}

/* Le schéma du résultat (style B, choisi par Lilian le 01/10/2026) : la chaîne du Stress-test ou les sept postes du
   Baromètre, chacun sur un post-it, avec l'état et une jauge de santé tirés des réponses. Le papier reste clair dans les
   deux thèmes, son encre reste nuit. */
.chaine{display:grid;gap:var(--e-4);margin:var(--e-2) 0 var(--e-3);padding:0}
.chaine--postes{gap:var(--e-2)}
.maillon-l{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--e-1) var(--e-3);padding:var(--e-3) var(--e-4);border-radius:4px;background:var(--vert-pale);color:var(--nuit);box-shadow:inset 0 0 0 1.5px var(--vert),0 10px 18px -12px rgba(32,10,29,.45);transform:rotate(-.8deg)}
.maillon-l:nth-child(2n){transform:rotate(.6deg)}
.chaine:not(.chaine--postes) .maillon-l+.maillon-l::before{content:"";position:absolute;left:calc(var(--e-4) + 6px);top:calc(var(--e-4) * -1);width:4px;height:var(--e-4);background:var(--filet-fort)}
.chaine--postes .maillon-l{padding:var(--e-2) var(--e-3);transform:none}
.maillon-l--fuit{background:#FFE4DD;box-shadow:inset 0 0 0 2px var(--rouge),0 10px 18px -12px rgba(32,10,29,.45)}
.maillon-n{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;color:rgba(32,10,29,.7)}
.maillon-nom{font-weight:800;font-size:var(--t-base);line-height:1.2}
.chaine--postes .maillon-nom{font-size:var(--t-sm)}
.maillon-etat{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;color:#2D5016;white-space:nowrap}
.maillon-l--fuit .maillon-etat{color:#A3180A}
.maillon-jauge{grid-column:1/-1;height:8px;border-radius:4px;background:rgba(32,10,29,.12);overflow:hidden}
.chaine--postes .maillon-jauge{height:6px}
.maillon-jauge b{display:block;height:100%;border-radius:4px;background:var(--vert)}
.maillon-l--fuit .maillon-jauge b{background:var(--rouge)}
.bande-maillon{position:absolute;right:var(--e-4);bottom:-14px;padding:3px 10px;background:var(--rouge);color:var(--nuit);font-weight:800;font-size:var(--t-xs);transform:rotate(-4deg);z-index:1}
.chaine--postes .bande-maillon{bottom:auto;top:-10px;right:auto;left:45%}

/* Ta vraie photo près du bouton d'appel : la mesure qui a les meilleures preuves */
.test-appel{display:flex;align-items:center;gap:var(--e-3);margin-top:var(--e-3);padding:var(--e-3);border-radius:var(--rayon-onglet);background:var(--fond-2)}
.test-appel img{flex:0 0 auto;width:56px;height:56px;border-radius:50%}
.test-appel p{font-size:var(--t-sm);line-height:1.45}

/* La carte du Stress-test, pendant les questions */
.st-map-row{display:flex;align-items:stretch;justify-content:center;gap:var(--e-2);width:100%;max-width:230px;margin:0 auto}
.st-axis-v{writing-mode:vertical-rl;transform:rotate(180deg);flex:none;font-family:var(--police-fichier);font-size:var(--t-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce);text-align:center}
.st-map{position:relative;flex:1;aspect-ratio:1;border-radius:var(--rayon-onglet);background:var(--fond-2);box-shadow:inset 0 0 0 1px var(--filet)}
.st-map::before,.st-map::after{content:"";position:absolute;background:var(--filet-fort);opacity:.5}
.st-map::before{left:50%;top:6px;bottom:6px;width:1px}
.st-map::after{top:50%;left:6px;right:6px;height:1px}
.st-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--rouge);border:3px solid var(--fenetre);box-shadow:0 0 0 2px var(--rouge);transform:translate(-50%,-50%);transition:left .5s var(--courbe),top .5s var(--courbe)}
.st-axis-x{display:flex;justify-content:space-between;gap:var(--e-2);width:100%;max-width:230px;margin:0 auto;padding-left:22px;white-space:nowrap;font-family:var(--police-fichier);font-size:var(--t-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}

/* La jauge du Baromètre */
.bq-gwrap{width:100%;max-width:260px;margin:0 auto;color:var(--titre)}
.bq-gauge{display:block;width:100%}
.bq-arc[data-niveau="1"]{stroke:var(--jauge-1)}.bq-arc[data-niveau="2"]{stroke:var(--jauge-2)}
.bq-arc[data-niveau="3"]{stroke:var(--jauge-3)}.bq-arc[data-niveau="4"]{stroke:var(--jauge-4)}
.bq-needle{transform-origin:100px 100px;transition:transform .5s var(--courbe)}

/* Constats, leviers, heures, fuites */
.st-insight,.st-proj,.bq-hours{padding:var(--e-3) var(--e-4);border-radius:0 var(--rayon-onglet) var(--rayon-onglet) 0;background:var(--fond-2);box-shadow:inset 3px 0 0 var(--rouge);font-size:var(--t-sm);line-height:1.55}
.st-proj{box-shadow:inset 3px 0 0 var(--vert-moyen)}
.st-lev,.bq-fuite{display:grid;gap:var(--e-2);padding:var(--e-4);border-radius:var(--rayon-onglet);background:var(--fond-2)}
.st-lev-t,.bq-fuite-n{font-weight:800;font-size:var(--t-base);color:var(--titre)}
.st-lev p,.bq-fuite p{font-size:var(--t-sm);line-height:1.55;color:var(--encre-douce)}
.bq-fuite p b{color:var(--encre)}
.st-ch,.bq-ch{padding-top:var(--e-2);border-top:1px solid var(--filet);font-size:var(--t-sm);color:var(--encre-douce)}
.st-honest,.bq-honest{font-size:var(--t-sm);line-height:1.6;color:var(--encre-douce)}
.st-honest .lien,.bq-honest .lien{display:inline;min-height:0;color:var(--encre)}

/* Le rapport contre email, puis la partie qu'il ouvre */
#st-unlocked{display:grid;gap:var(--e-3)}
#st-unlocked:empty{display:none}
.st-lock,.bq-lock{display:grid;gap:var(--e-2);padding:var(--e-4);border-radius:var(--rayon-onglet);border:1.5px dashed var(--filet-fort);background:var(--fenetre)}
.st-lock-h,.bq-lock-h{font-weight:800;font-size:var(--t-base);color:var(--titre)}
.st-lock-i,.bq-lock-i{font-size:var(--t-sm);line-height:1.55;color:var(--encre-douce)}
.st-field,.bq-field{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-1)}
.st-field input,.bq-field input{flex:1 1 200px;min-width:0;min-height:52px;padding:0 var(--e-4);border:1.5px solid var(--filet-fort);border-radius:var(--pilule);background:var(--fenetre);color:var(--encre);font:500 var(--t-base) var(--police)}
.st-field input:focus-visible,.bq-field input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.st-field .btn,.bq-field .btn{margin:0}
.st-err,.bq-err{min-height:1.2em;font-size:var(--t-sm);font-weight:700;color:var(--rouge-texte)}
.st-fine,.bq-fine{font-size:var(--t-xs);line-height:1.5;color:var(--encre-douce)}
.st-ok,.bq-ok{font-weight:700;color:var(--niveau-1)}
.st-ctas,.bq-ctas{display:grid;gap:var(--e-2);justify-items:start;margin-top:var(--e-3)}
.st-ctas .btn,.bq-ctas .btn{margin:0}

@media(prefers-reduced-motion:reduce){.st-barfg,.bq-barfg,.st-dot,.bq-needle,.st-opt,.bq-opt{transition:none}}