/* L'examen : palette et typographies de la Plateforme v3, section 11 (390 px d'abord). */
@font-face{font-family:"Fraunces";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/fraunces-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/fraunces-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/fraunces-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --night:#1E1A39; --night-deep:#15112A; --night-cosmic:#0D0027; --night-base:#050410;
  --tw1:#1A1235; --tw2:#2E1845; --tw3:#5A2A5E; --tw4:#A04A82;
  --rose:#BE4E96; --rose-bright:#E879C0; --rose-light:#FFD0E7;
  --ember:#83368B; --ember-deep:#6C2F72;
  --paper:#F6F1F4; --paper-warm:#E8DDE4; --ink-soft:#433B60; --rule:#D9CEDA; --blanc:#FFFFFF;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --aube:linear-gradient(180deg,#050410 0%,#0D0027 18%,#1A1235 36%,#2E1845 54%,#5A2A5E 72%,#A04A82 88%,#BE4E96 100%);
  --nuit:linear-gradient(180deg,var(--night-cosmic),var(--tw1) 45%,var(--tw2));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--night);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
@media (min-width:600px){body{background:var(--night-base) var(--aube) fixed}}
.app{max-width:440px;min-height:100vh;margin:0 auto;background:var(--paper);display:flex;flex-direction:column}
@media (min-width:600px){.app{min-height:auto;margin:32px auto;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px rgba(5,4,16,.5)}}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.top :focus-visible{outline-color:var(--rose-bright)}

/* Bande de tête : la nuit, ou l'arc nuit → aube sur l'accueil */
.top{background:var(--nuit);color:var(--paper);padding:20px 20px 18px}
.top.aube{background:var(--aube);padding:28px 20px 80px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.top .mono{color:#C9BFE0}
.top h1{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin:8px 0 0}
.top.aube h1{font-size:34px;margin-top:40px}
.top h1 em{font-style:italic;color:var(--rose-bright)}
.top .accroche{font-size:16px;line-height:1.5;margin:14px 0 0;color:var(--paper)}
.top a.retour{color:#C9BFE0;text-decoration:none;font-size:13px;display:inline-block;margin-bottom:8px;padding:4px 0}
.top a.retour:hover{color:var(--paper)}

main.corps{padding:20px 20px 24px;flex:1}
.pied{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);padding:0 20px 20px;line-height:1.5}

/* Questions et cases */
fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
legend,.q{font-weight:600;font-size:15px;margin:0 0 8px;padding:0}
.aide{font-size:13px;color:var(--ink-soft);margin:-4px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:9px 14px;font-size:14px;line-height:1.3;color:var(--ink-soft);background:var(--blanc);cursor:pointer;min-height:40px}
.chip input:checked+span{background:var(--night);color:var(--paper);border-color:var(--night)}
.chip input:focus-visible+span{outline:3px solid var(--ember);outline-offset:2px}
.chip span:hover{border-color:var(--ink-soft)}
textarea{width:100%;border:1px solid var(--rule);border-radius:12px;padding:10px 12px;font:inherit;font-size:15px;color:var(--night);background:var(--blanc);resize:vertical;min-height:72px}
.compteur{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:right;margin:4px 0 0}
.erreur{background:var(--rose-light);color:var(--night);border-radius:12px;padding:10px 12px;font-size:14px;margin:0 0 14px}

/* Boutons */
.btn{display:block;width:100%;background:var(--ember);color:var(--blanc);border:0;border-radius:14px;padding:15px;font:inherit;font-weight:600;font-size:16px;cursor:pointer;text-align:center;text-decoration:none}
.btn:hover{background:var(--ember-deep)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ember);border:1px solid var(--rule);font-weight:500}
.btn.ghost:hover{border-color:var(--ember);background:transparent;color:var(--ember-deep)}
.btn+.btn{margin-top:10px}
.ouinon{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.ouinon .btn+.btn{margin-top:0}

/* Questions des bases */
.question{font-family:var(--serif);font-size:23px;line-height:1.3;margin:6px 0 0;font-weight:400}
.progres{display:flex;gap:6px;margin:0 0 18px}
.progres i{flex:1;height:4px;border-radius:2px;background:var(--rule)}
.progres i.fait{background:var(--ember)}

/* Verdict */
.carte{background:var(--paper-warm);border-radius:16px;padding:16px;margin:0 0 16px}
.carte .mono{color:var(--ink-soft)}
.verdict-mot{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.05;margin:6px 0 12px}
.verdict-mot em{font-style:italic;color:var(--rose)}
.lignes p{margin:0 0 6px;font-size:15px;line-height:1.5}
.mention{font-size:12px;color:var(--ink-soft);margin:10px 0 0}
.fixe{font-size:15px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--rule)}
.bases{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px;padding:0;list-style:none}
.base{background:var(--blanc);border:1px solid var(--rule);border-radius:12px;padding:10px}
.base .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.base .v{font-weight:600;font-size:14px;margin-top:3px}
.base .v.a-ranger{color:var(--ember)}
.base .v.a-ranger::before{content:"○ "}
.base .v.tient::before{content:"● "}
.sec{margin:0 0 16px}
.sec h2,.sec .h{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.sec ul,.sec ol{margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.sec li{margin:0 0 6px}
.sec p{margin:0 0 6px;font-size:15px}
.ligne-rouge{border-top:4px solid var(--rose);padding-top:12px;margin-top:8px}
.ligne-rouge h2{color:var(--ember)}
.ligne-rouge ul{list-style:none;padding-left:0}
.ligne-rouge li::before{content:"⊘";color:var(--ember);margin-right:8px}

/* Actions */
.actions{list-style:none;margin:0 0 20px;padding:0;counter-reset:a}
.actions li{counter-increment:a;display:grid;grid-template-columns:40px 1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
.actions li::before{content:"0" counter(a);font-family:var(--mono);font-size:13px;color:var(--ember);padding-top:3px}
.intro{color:var(--ink-soft);font-size:15px;margin:0 0 16px}
.cta{font-size:15px;color:var(--night);text-align:center;margin:18px 0 0}
.cta a,.lien{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.cta a:hover,.lien:hover{color:var(--ember-deep)}
.note{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:center;margin:14px 0 0;line-height:1.6}

/* Fermeture, chargement */
.ferme{background:var(--night);color:var(--paper);border-radius:14px;padding:14px 16px;font-size:15px;margin:0 0 16px}
.chargement{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:50vh;text-align:center;color:var(--ink-soft)}
.chargement .barre{width:160px;height:4px;border-radius:2px;background:var(--rule);overflow:hidden;position:relative}
.chargement .barre::after{content:"";position:absolute;inset:0;width:40%;background:var(--ember);border-radius:2px;animation:aller 1.2s ease-in-out infinite alternate}
@keyframes aller{from{transform:translateX(0)}to{transform:translateX(150%)}}
.ecran{animation:apparait .25s ease-out}
@keyframes apparait{from{transform:translateY(6px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Champs à mesurer (page de la notice) */
mark.a-mesurer{background:var(--rose-light);color:var(--night);font-family:var(--mono);font-size:.85em;padding:1px 5px;border-radius:4px;outline:1px dashed var(--ember)}

/* Barre d'intervalle (v3 §11.4) : axe toujours de 0 à 100 */
.intervalle{margin:12px 0 4px}
.intervalle svg{display:block;width:100%;height:28px}
.intervalle .legende{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:4px}
h1[tabindex="-1"]:focus{outline:none}

/* Ordinateur (960 px et plus) : une vraie page, plus une colonne de téléphone. Le téléphone ne change pas. */
@media (min-width:960px){
  body{font-size:17px}
  .app{max-width:860px;margin:40px auto}
  .top{padding:28px 56px 26px}
  .top h1{font-size:36px}
  .top.aube{padding:44px 56px 104px}
  .top.aube h1{font-size:56px;margin-top:64px}
  .top .accroche{font-size:20px;max-width:640px}
  main.corps{padding:36px 56px 44px}
  .pied{padding:0 56px 32px;font-size:12px}
  .btn{max-width:440px}
  .chip span{font-size:15px}
  textarea{max-width:640px}
  .question{font-size:30px;max-width:640px}
  .ouinon{max-width:520px}
  .intro{font-size:17px;max-width:640px}
  .lignes p{font-size:17px}
  .verdict-mot{font-size:44px}
  .sec ul,.sec ol,.sec p{font-size:16px}
  .actions{max-width:680px}
  .actions li{font-size:18px}
  .cta,.note{text-align:left}
  .deux-colonnes{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 36px;align-items:start}
  .deux-colonnes .pleine{grid-column:1/-1;margin-top:8px}
  .colonne-a .carte{position:sticky;top:24px}
}