/* ==========================================================================
   Sostène Transition — auto-diagnostic de dépendance au dirigeant
   Feuille de style de la page /autodiagnostic-autonomie/ uniquement.
   --------------------------------------------------------------------------
   POURQUOI UNE FEUILLE À PART
     La page est autonome pendant le parcours (chapitre 1.1 de la
     spécification) et porte un budget de 100 ko de CSS et de JS cumulés
     (chapitre 12.4). style.css pèse 77 ko à lui seul : le charger ferait
     sauter le budget pour des composants dont la page n'utilise presque
     rien. Les jetons de la charte sont donc REPRIS À L'IDENTIQUE ci-dessous.
     Toute évolution de la palette doit se répercuter dans les deux fichiers.
   --------------------------------------------------------------------------
   DEUX RÈGLES REPRISES DU SITE
     · Angles droits partout, filets 1 px, aucune ombre, aucun dégradé.
     · Les deux teals ne s'intervertissent pas : --teal-c uniquement sur
       fond sombre, --teal / --teal-txt uniquement sur fond clair.
   ========================================================================== */


/* ==========================================================================
   1. POLICES — copiées de style.css, à l'identique
   ========================================================================== */

@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 500;font-display:swap;
  src:url(../fonts/newsreader-200-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 500;font-display:swap;
  src:url(../fonts/newsreader-200-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;
  src:url(../fonts/newsreader-300-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;
  src:url(../fonts/newsreader-300-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ==========================================================================
   2. VARIABLES — palette du chapitre 4 des spécifications du site,
      reprise telle quelle. Ne pas inventer de couleur hors liste.
   ========================================================================== */

:root{
  --nuit:#0a1c2c;        /* écran de résultat, en-tête, pied de page */
  --navy:#112a41;        /* cartes sur fond sombre */
  --papier:#f7f6f2;      /* fond du parcours */
  --sable:#eae5db;       /* en-têtes de matrice */
  --menthe:#dcece7;      /* réponse survolée ou cochée */

  --encre:#132433;       /* titres et texte courant */
  --txt:#33475c;         /* paragraphes longs */
  --gris:#5d6570;        /* texte secondaire sur fond clair */
  --muet:#8ba3b7;        /* texte secondaire sur fond sombre */
  --clair:#b9c9d9;
  --clair-mut:#7590a5;

  --teal-c:#45c2ca;      /* accent sur fond sombre */
  --teal:#17828c;        /* filets, bordures, aplats — usage non textuel */
  --teal-txt:#136c74;    /* variante lisible : texte teal sur fond clair */
  --vert:#0f6e58;
  --rouge:#a4321f;       /* messages d'erreur, repris du formulaire de contact */

  --filet:#d3d2c8;
  --filet-s:rgba(255,255,255,.10);

  --disp:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}


/* ==========================================================================
   3. SOCLE
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:300;letter-spacing:-.02em;line-height:1.15}
a{color:inherit}
b,strong{font-weight:500}

/* Le lien d'évitement et le libellé réservé aux lecteurs d'écran :
   masquer à l'œil sans retirer de l'arbre d'accessibilité. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:20;background:var(--nuit);color:#fff;
  padding:12px 18px;font-size:14px;text-decoration:none;
}
.skip:focus{left:0}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.resultat :focus-visible{outline-color:var(--teal-c)}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* Sur-titres et mentions techniques : mono capitalisé, comme sur le site. */
.etape-mn,.compteur,.jauge-haut,.jauge-bas,.btn,.btn-sec{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
}


/* ==========================================================================
   4. EN-TÊTE ET PIED DE PAGE réduits
   ========================================================================== */

.bar-diag{background:var(--nuit);border-bottom:1px solid var(--filet-s)}
.bar-diag .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.bar-diag .lg{font-family:var(--disp);font-size:21px;color:#fff;text-decoration:none;letter-spacing:-.01em}
.bar-diag .lg i{font-style:normal;color:var(--teal-c)}
.bar-diag .retour{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clair-mut);text-decoration:none;
}
.bar-diag .retour:hover{color:#fff}

.pied-diag{background:var(--nuit);border-top:1px solid var(--filet-s);padding:22px 0;margin-top:0}
.pied-diag .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--muet);font-size:13px}
.pied-diag a{color:var(--muet);text-decoration:none}
.pied-diag a:hover{color:#fff}


/* ==========================================================================
   5. MISE EN PAGE — rail de progression à gauche, scène à droite
   ========================================================================== */

.cadre{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;
  grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}

/* min-width:0 sur les deux colonnes : sans lui, un élément de grille prend
   la largeur maximale de son contenu, et les libellés longs des matrices
   forcent la scène à déborder du corps de page au lieu de se replier. */
.rail{position:sticky;top:32px;padding:44px 0 0;min-width:0}
.rail ol{list-style:none;margin:0;padding:0}
/* Chaque étape est un <button>, pas un <div> : elle devient cliquable dès
   qu'elle a été atteinte, et doit donc rester accessible au clavier. Le
   bouton part désactivé dans la page servie — sans JavaScript il n'y a pas
   de parcours, donc rien à rouvrir — et le script ouvre ce qui est atteint.
   La mise en forme vit sur le bouton et non sur le li : c'est lui qui porte
   le texte, donc la couleur d'état. */
.rail li{display:block}
.rail .pas{
  display:flex;align-items:baseline;gap:12px;padding:9px 0;width:100%;
  font:inherit;font-size:14px;line-height:1.4;color:var(--gris);
  background:none;border:0;text-align:left;cursor:default;
}
.rail .num{
  flex:0 0 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--gris);
}
/* trois états : fait, en cours, à venir */
.rail li.fait .pas{color:var(--teal-txt)}
.rail li.fait .num{color:var(--teal-txt)}
.rail li.ici .pas{color:var(--encre);font-weight:500}
.rail li.ici .num{color:var(--teal-txt)}
.rail li.ici .lib{box-shadow:inset 0 -1px 0 var(--teal)}
/* une étape que l'on peut rouvrir */
.rail li.ouvert .pas{cursor:pointer}
.rail li.ouvert .pas:hover .lib{box-shadow:inset 0 -1px 0 var(--teal)}
.rail .pas:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.rail .compteur{margin:20px 0 0;color:var(--gris)}
.rail .compteur b{font-weight:400;color:var(--encre)}

.scene{padding:44px 0 72px;max-width:760px;min-width:0}
.annonce{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;
}

.ecran h1{font-size:clamp(30px,4vw,44px);max-width:20ch}
.ecran h2{font-size:clamp(26px,3.2vw,36px);max-width:22ch}
.etape-mn{color:var(--gris);margin:0 0 14px}
.chapo{font-size:18px;line-height:1.72;color:var(--txt);max-width:60ch;margin:22px 0 0}


/* ==========================================================================
   6. QUESTIONS
   ========================================================================== */

.qs{margin:38px 0 0;border:0;padding:0}
.q{border:0;padding:0;margin:0 0 44px;min-width:0}
.q legend{
  padding:0;margin:0 0 16px;font-family:var(--disp);font-size:21px;
  font-weight:400;line-height:1.35;color:var(--encre);max-width:52ch;
}

/* Choix unique et multiples : une réponse par ligne, zone cliquable sur
   toute la ligne, séparateurs de 1 px. */
.opts{border:1px solid var(--filet);background:#fff}
.opt{
  display:flex;align-items:flex-start;gap:12px;padding:13px 16px;cursor:pointer;
  border-top:1px solid var(--filet);font-size:15.5px;line-height:1.5;color:var(--txt);
}
.opts .opt:first-child{border-top:0}
.opt:hover{background:var(--menthe)}
.opt input{margin:3px 0 0;flex:0 0 auto;accent-color:var(--teal)}
.opt:has(input:checked){
  background:var(--menthe);color:var(--encre);
  box-shadow:inset 3px 0 0 var(--teal);
}
/* Repli pour les navigateurs sans :has() — la classe est posée par le
   script. Le rendu est identique, seule la source du style change. */
.opt.coche{background:var(--menthe);color:var(--encre);box-shadow:inset 3px 0 0 var(--teal)}

/* Matrices — un tableau à quatre colonnes de réponses */
.mx-wrap{overflow-x:auto}
.mx{width:100%;border-collapse:collapse;border:1px solid var(--filet);background:#fff}
.mx th,.mx td{border:1px solid var(--filet);padding:10px 12px;text-align:left;vertical-align:middle}
.mx thead th{
  background:var(--sable);font-family:var(--mono);font-weight:400;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);
  line-height:1.4;
}
.mx tbody th{font-weight:400;font-size:14.5px;color:var(--encre);width:30%}
.mx td{text-align:center}
.cell{display:block;cursor:pointer;padding:4px}
.cell input{accent-color:var(--teal)}
.cell .cl{display:none}          /* le libellé complet ne sert qu'en mobile */
.mx tbody tr:hover{background:var(--menthe)}

/* Sous-questions des items doubles (CAD12, CAD10) */
.sousq{margin-bottom:20px}
.sousq:last-child{margin-bottom:0}
.sq{
  margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);
}
.sousq .opt{border:1px solid var(--filet);border-top-width:1px;background:#fff;margin-bottom:-1px}
/* Champ numérique de CAD10. Classe .saisie et non .num : .num désigne déjà
   les numéros d'étape du rail, et les deux se seraient écrasés. */
.saisie{
  width:150px;padding:11px 13px;border:1px solid var(--filet);background:#fff;
  font-family:var(--sans);font-size:15.5px;color:var(--encre);border-radius:0;
}

/* Écran d'entrée */
.champ{margin:0 0 26px}
.champ label{display:block;margin-bottom:8px;font-size:15px;color:var(--encre)}
.champ input[type=text],.champ input[type=email]{
  width:100%;max-width:440px;padding:13px 14px;border:1px solid var(--filet);
  background:#fff;font-family:var(--sans);font-size:16px;color:var(--encre);border-radius:0;
}
.consents{border-top:1px solid var(--filet);padding-top:22px}
.consents .opt{border:1px solid var(--filet);background:#fff;margin-bottom:10px}
.consents label{margin-bottom:0}
.err{margin:8px 0 0;font-size:14px;color:var(--rouge)}
/* Message affiché seulement si JavaScript est bloqué (<noscript>) */
.sans-js{margin:28px 0 0;padding:16px 20px;background:var(--sable,#eae5db);border-left:3px solid var(--rouge);font-size:15.5px;line-height:1.6}
.sans-js p{margin:0 0 8px}.sans-js p:last-child{margin:0}
.rgpd{font-size:13.5px;line-height:1.7;color:var(--gris);max-width:64ch;margin:24px 0 0}
.rgpd a{color:var(--teal-txt)}


/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */

.nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--filet);
}
.btn,.btn-sec{
  padding:15px 26px;border:1px solid var(--encre);cursor:pointer;border-radius:0;
  font-family:var(--mono);text-transform:uppercase;
}
.btn{background:var(--encre);color:var(--papier)}
.btn:hover{background:var(--teal);border-color:var(--teal)}
.btn-sec{background:transparent;color:var(--encre)}
.btn-sec:hover{background:var(--sable)}
.btn-sec[hidden]{display:none}


/* ==========================================================================
   8. ÉCRAN DE RÉSULTAT — le seul écran sombre du parcours
   ========================================================================== */

body.fini{background:var(--nuit)}
body.fini .rail .pas{color:var(--clair-mut)}
body.fini .rail li .num{color:var(--clair-mut)}
body.fini .rail li.fait .pas,body.fini .rail li.fait .num{color:var(--teal-c)}
body.fini .rail li.ici .pas{color:#fff}
body.fini .rail li.ici .num{color:var(--teal-c)}
body.fini .rail li.ici .lib{box-shadow:inset 0 -1px 0 var(--teal-c)}
body.fini .rail li.ouvert .pas:hover .lib{box-shadow:inset 0 -1px 0 var(--teal-c)}
body.fini .rail .pas:focus-visible{outline-color:var(--teal-c)}
body.fini .rail .compteur{color:var(--clair-mut)}
body.fini .rail .compteur b{color:#fff}

.resultat{color:#e9eff4}
.resultat h2{color:#fff}
.resultat .etape-mn{color:var(--clair-mut)}

.figure{margin:36px 0 0}
.radar{width:100%;max-width:480px;height:auto;display:block;margin:0 auto}
.radar .anneau{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
.radar .rayon{stroke:rgba(255,255,255,.12);stroke-width:1}
.radar .surface{fill:rgba(69,194,202,.18);stroke:#45c2ca;stroke-width:1.6}
.radar .sommets circle{fill:#45c2ca}
.radar .nom{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;fill:#8ba3b7;
}
.radar .val{font-family:var(--sans);font-size:15px;font-weight:400;fill:#45c2ca}

.jauge{max-width:480px;margin:34px auto 0}
.jauge-haut,.jauge-bas{margin:0;color:var(--muet)}
.jauge-haut{margin-bottom:10px}
.jauge-bas{margin-top:10px}
.jauge-bas b{color:var(--teal-c);font-weight:400}
.barre{height:5px;background:rgba(255,255,255,.12)}
.rempli{display:block;height:100%;width:0;background:var(--teal-c);transition:width .5s ease}

.legende{
  max-width:480px;margin:30px auto 0;text-align:center;
  font-size:14.5px;line-height:1.65;color:var(--clair);
}

.nav-fin{border-top-color:var(--filet-s);justify-content:center;gap:14px}
.btn-clair{background:var(--teal-c);border-color:var(--teal-c);color:var(--nuit)}
.btn-clair:hover{background:#6bd6dd;border-color:#6bd6dd}
.resultat .btn-sec{color:#e9eff4;border-color:rgba(255,255,255,.28)}
.resultat .btn-sec:hover{background:rgba(255,255,255,.08)}
.envoi-note{margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--clair-mut)}


/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* Sous 860 px, le rail bascule en bande horizontale défilante au-dessus du
   contenu (chapitre 2.3). Les matrices deviennent des blocs : le libellé de
   la ligne, puis les quatre réponses empilées avec leur intitulé complet —
   un tableau à quatre colonnes est illisible à 375 px. */
@media (max-width:860px){
  .cadre{grid-template-columns:minmax(0,1fr);gap:0;padding:0 20px}
  .wrap{padding:0 20px}
  .scene{padding:28px 0 60px;max-width:none}

  .rail{position:static;padding:20px 0 0;border-bottom:1px solid var(--filet)}
  .rail ol{display:flex;gap:0;overflow-x:auto;padding-bottom:12px;
    scroll-snap-type:x mandatory;min-width:0;max-width:100%}
  .rail li{flex:0 0 auto;scroll-snap-align:start}
  .rail .pas{padding:6px 16px 6px 0;white-space:nowrap;font-size:13px;width:auto}
  .rail li .lib{max-width:20ch;overflow:hidden;text-overflow:ellipsis}
  /* chaque écran affiche déjà « Étape n sur 9 » : le compteur du rail
     ferait doublon à quelques centimètres de distance */
  .rail .compteur{display:none}

  .q legend{font-size:19px}
  .ecran h1{font-size:29px}
  .ecran h2{font-size:25px}
  h1,h2{font-weight:400}

  .mx-wrap{overflow-x:visible}
  .mx,.mx tbody,.mx tr,.mx td{display:block;width:100%}
  .mx thead{display:none}
  .mx{border:0;background:transparent}
  .mx tr{border:1px solid var(--filet);background:#fff;margin-bottom:14px}
  .mx tbody th{
    display:block;width:auto;border:0;border-bottom:1px solid var(--filet);
    background:var(--sable);font-weight:500;
  }
  .mx td{border:0;border-top:1px solid var(--filet);text-align:left;padding:0}
  .mx tr td:first-of-type{border-top:0}
  .cell{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
  .cell .cl{display:block;font-size:15px;line-height:1.45;color:var(--txt)}
  .mx tbody tr:hover{background:#fff}
  .cell:hover{background:var(--menthe)}

  .nav{flex-wrap:wrap}
  .btn,.btn-sec{flex:1;text-align:center}
}

@media (max-width:420px){
  .btn,.btn-sec{padding:14px 16px;letter-spacing:.12em}
}

/* Une transition qui n'apporte rien à la compréhension se retire. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rempli{transition:none}
}


/* ==========================================================================
   10. MASQUAGE
   Plusieurs sélecteurs de ce fichier posent un display (flex sur .opt,
   block sur les lignes de matrice en mobile). Un display l'emporte sur
   l'attribut hidden : sans cette règle, une question retirée par la logique
   conditionnelle resterait visible. Elle vient donc en dernier.
   ========================================================================== */

[hidden]{display:none !important}

/* Message d'échec de l'envoi du rapport, sur l'écran de résultat. */
.envoi-note.err-envoi{color:#ffb4a2}