/* Feuille commune aux parcours de conversion : la prise de rendez-vous et le
   test de potentiel. Les deux pages partagent la même grammaire — jetons de
   la charte, champs, listes de suggestions, boutons — et ne diffèrent que par
   ce qu'elles demandent. */
  @font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
  /* Les jetons viennent de /charte.css, chargé avant cette feuille. Cette feuille les
     redéclarait, et sa copie avait divergé de celle de l'accueil. */
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html{ font-size:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{
    font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    /* Un seul fond, du haut de l'écran au pied. Le parcours était posé sur le
       violet le plus clair de l'échelle : c'était une zone, donc une frontière,
       et le formulaire y flottait comme une carte sur un gabarit. Le papier
       est désormais le même que celui de l'accueil, et ce sont les filets qui
       découpent — pas les aplats. */
    margin:0; background:var(--paper); color:var(--ink); font-size:1rem; line-height:1.55;
  }
  /* Le voile, comme sur l'accueil : c'est lui qui teinte la page, à la place
     du violet clair qui lui servait de fond. Il est porté par le corps —
     le parcours n'a pas de section à qui l'accrocher. */
  body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(closest-side ellipse at 22% 18%,
               rgba(var(--halo),.18), rgba(var(--halo),0) 72%);
    background-size:150% 62%; background-repeat:no-repeat;
    filter:blur(42px);
  }
  header.site-head, main, footer{ position:relative; z-index:1 }

  :focus{ outline:none }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm) }
  .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0 }

  header.site-head{
    display:flex; align-items:center; gap:16px; background:transparent;
    padding:calc(20px + env(safe-area-inset-top)) max(22px, calc((100% - 720px)/2)) 20px;
  }
  /* §6 : taille minimale d'affichage 20 px — on est à 24. La zone atteint
     44 px de haut, la cible minimale recommandée par Apple pour ce qui se
     touche au doigt. */
  .logo{
    display:inline-flex; align-items:center; gap:.34em; font-weight:700;
    letter-spacing:-.02em; line-height:1; white-space:nowrap; font-size:1.5rem;
    min-height:44px; color:inherit; text-decoration:none;
  }
  .logo .spark{
    font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",sans-serif;
    font-size:.92em; color:var(--accent); font-weight:400; line-height:1; flex:0 0 auto;
    transform:translateY(.06em);
  }
  header .etape{ margin-left:auto; font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums }

  main{ max-width:720px; margin:0 auto; padding:56px 22px 96px }
  .kicker{ font-size:.875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-62); margin:0 0 6px }
  h1{ font-size:clamp(1.7rem,5vw,2.375rem); line-height:1.05; letter-spacing:-1.2px; font-weight:700; margin:6px 0 14px }
  .lede{ font-size:1.0625rem; color:var(--ink-soft); margin:0; max-width:34em }

  .bloc{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--e1); padding:26px; margin-top:32px;
  }
  .bloc h2{ font-size:1.0625rem; margin:0 0 4px; letter-spacing:-.2px }
  .bloc .aide{ font-size:.82rem; color:var(--ink-soft); margin:0 0 18px }

  label{ display:block; font-size:.82rem; font-weight:700; margin:0 0 6px }
  .champ{
    width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
    border:1px solid var(--line); border-radius:var(--r-md);
    padding:0 15px; height:52px;
    transition:border-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
  }
  .champ::placeholder{ color:var(--ink-62) }
  .champ:hover{ border-color:var(--ink-soft) }
  .champ:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--wash); outline:none }
  .champ[aria-invalid="true"]{ border-color:var(--error) }
  .duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
  .bloc-champ + .bloc-champ{ margin-top:18px }
  .erreur{ font-size:.78rem; color:var(--error); margin:6px 0 0; min-height:1px }

  /* Liste de suggestions — combobox */
  .combo{ position:relative }
  .liste{
    position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px);
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--e2); max-height:332px; overflow-y:auto; padding:6px;
    margin:0; list-style:none;
  }
  .liste[hidden]{ display:none }
  .liste li{
    padding:11px 12px; border-radius:var(--r-sm); cursor:pointer; min-height:44px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .liste li[aria-selected="true"], .liste li:hover{ background:var(--paper-2) }
  .liste .nom{ font-weight:700; font-size:.95rem; line-height:1.3 }
  .liste .meta{ font-size:.78rem; color:var(--ink-soft); margin-top:2px }
  .liste .vide{ cursor:default; color:var(--ink-soft); font-size:.88rem }
  .liste .vide:hover{ background:transparent }

  /* Le lien posé sous un champ garde sa cible tactile sans écarter le bloc. */
  .sous-champ{ margin:14px 0 0 }

  /* Fiche de l'entreprise retenue — une carte d'identité, non une liste brute.
     Le nom occupe un bandeau en tête ; en dessous, chaque intitulé fait face à
     sa valeur, séparé du suivant par un filet d'un pixel. Aucun pictogramme :
     la seule hiérarchie est typographique. */
  .fiche{
    border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--paper); padding:0; overflow:hidden;
  }
  .bloc h2 + .fiche{ margin-top:18px }
  .fiche .titre{
    font-weight:700; font-size:1.0625rem; letter-spacing:-.2px; line-height:1.3;
    margin:0; padding:15px 20px 14px; background:var(--paper-2);
    border-bottom:1px solid var(--line);
  }
  .fiche dl{
    margin:0; display:grid; grid-template-columns:minmax(0,148px) minmax(0,1fr);
    font-size:.9rem;
  }
  .fiche dt, .fiche dd{ margin:0; padding:11px 0; border-top:1px solid var(--line) }
  .fiche dt{ color:var(--ink-soft); font-size:.82rem; padding-left:20px; padding-right:14px }
  .fiche dd{ padding-right:20px; font-variant-numeric:tabular-nums }
  .fiche dt:first-of-type, .fiche dt:first-of-type + dd{ border-top:none }
  /* Sous 420 px, la colonne des intitulés se resserre : les deux colonnes
     restent lisibles jusqu'aux libellés les plus longs. */
  @media(max-width:420px){
    .fiche dl{ grid-template-columns:minmax(0,108px) minmax(0,1fr) }
    .fiche dt{ padding-left:16px; padding-right:10px }
    .fiche dd{ padding-right:16px }
    .fiche .titre{ padding:14px 16px 13px }
  }
  .changer{
    background:none; border:none; padding:0; margin-top:16px; font:inherit; font-size:.82rem;
    color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
    min-height:44px;
  }

  /* La mention de conservation vit sous le bouton. Rien à cocher : le geste de
     réservation vaut accord, et le lien mène à la page de confidentialité. */
  .mention{ margin:14px 0 0; font-size:.78rem; color:var(--ink-soft); max-width:38em }
  .mention a{ color:var(--accent) }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font:inherit; font-weight:700; font-size:1rem; border-radius:var(--r-pill);
    padding:0 26px; min-height:52px; border:1px solid transparent; cursor:pointer;
    text-decoration:none; transition:transform var(--t-micro) var(--ease), box-shadow var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
  }
  /* Le primaire à l'encre, comme sur l'accueil : la couleur ne porte pas
     l'action. */
  .btn-primary{ background:var(--ink); color:var(--paper) }
  .btn-primary:hover{ background:var(--ink-2) }
  .btn-primary:active{ transform:scale(.985) }
  .btn[disabled]{ background:var(--line); color:var(--ink-62); cursor:not-allowed }
  .btn svg{ width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
  .pied-bloc{ margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap }
  .pied-bloc .note{ font-size:.78rem; color:var(--ink-soft) }

  .avis{ background:var(--error-bg); border:1px solid var(--error); border-radius:var(--r-md); padding:13px 16px; font-size:.85rem; margin-top:18px }
  .avis[hidden]{ display:none }

  footer{ max-width:720px; margin:0 auto; padding:0 22px 64px; font-size:.78rem; color:var(--ink-soft) }
  footer a{ color:var(--ink-soft) }

  [hidden]{ display:none !important }
  @media(max-width:520px){ .duo{ grid-template-columns:1fr } main{ padding-top:40px } }
  @media (prefers-reduced-motion:reduce){ *{ transition:none !important } }

/* ------------------------------------------------------------------ */
/* Le test de potentiel — écrans de questions et restitution          */
/* ------------------------------------------------------------------ */

/* Jauge d'avancement : un trait plein, pas un pourcentage. Le §29 proscrit
   les jauges décoratives ; celle-ci porte une information — où j'en suis. */
.jauge{ height:2px; background:var(--line); border-radius:var(--r-pill); overflow:hidden; margin-top:18px }
.jauge i{ display:block; height:100%; width:0; background:var(--accent);
          transition:width .45s var(--ease) }

.question{ margin:0 0 4px; font-size:1.25rem; font-weight:700; letter-spacing:-.4px; line-height:1.25 }
.precision{ font-size:.82rem; color:var(--ink-soft); margin:0 0 20px }

/* Réponses : des cibles pleines de 56 px. Sur un téléphone, on vise le bloc
   entier, jamais une case de treize pixels. Le conteneur porte la classe
   « choix » lorsqu'il groupe les réponses ; chaque réponse la porte aussi, et
   « choix-multi » signale celles où plusieurs cases peuvent être cochées. */
#q-choix, #m-choix{ display:grid; gap:10px; margin:0 }
label.choix{
  display:flex; align-items:center; gap:14px; min-height:56px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  padding:12px 16px; font-size:.95rem; font-weight:400; cursor:pointer; margin:0;
  transition:border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
label.choix:hover{ border-color:var(--ink-soft) }
.choix-t{ flex:1 1 auto }

/* Le contrôle est redessiné pour que la forme dise la règle au premier coup
   d'œil : un disque quand une seule réponse est attendue, un carré à cocher
   quand plusieurs le sont. Les deux tiennent 22 px et l'étiquette entière reste
   la cible tactile, bien au-delà des 44 px exigés. */
label.choix input{
  appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto;
  width:22px; height:22px; background:var(--paper);
  border:1.75px solid var(--line); cursor:pointer; position:relative;
  transition:border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
label.choix input[type="radio"]{ border-radius:var(--r-pill) }
label.choix input[type="checkbox"]{ border-radius:6px }
label.choix:hover input{ border-color:var(--accent) }

/* Le disque coché se remplit d'un point plein et centré. */
label.choix input[type="radio"]:checked{ border-color:var(--accent) }
label.choix input[type="radio"]:checked::after{
  content:""; position:absolute; inset:3.5px; border-radius:var(--r-pill);
  background:var(--accent);
}
/* Le carré coché se remplit et porte la coche, tracée par deux filets. */
label.choix input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent) }
label.choix input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:2.5px; width:7px; height:11px;
  border:solid #fff; border-width:0 1.75px 1.75px 0; transform:rotate(40deg);
}

label.choix:has(:checked){ border-color:var(--accent); background:var(--wash) }
label.choix:has(:checked) .choix-t{ font-weight:700 }
/* Le contour de focus se pose sur l'étiquette entière : au clavier, on voit la
   réponse visée, pas seulement son contrôle. */
label.choix:has(:focus-visible){ outline:2px solid var(--accent); outline-offset:2px }

.navigation{ display:flex; align-items:center; gap:16px; margin-top:26px; flex-wrap:wrap }
.retour{
  background:none; border:none; padding:0; font:inherit; font-size:.82rem;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; min-height:44px;
}
.retour:hover{ color:var(--ink) }

.garde{ margin-top:26px; padding:16px 18px; border:1px solid var(--line);
        border-radius:var(--r-md); background:var(--paper-2); font-size:.88rem }
.garde b{ display:block; margin-bottom:4px }

/* ------------------------------------------------------------------ */
/* La restitution — un chiffre, trois priorités, le reste replié      */
/* ------------------------------------------------------------------ */

/* §28 gabarit A : trois chiffres-affirmation, rien d'autre sur la bande. Le
   chiffre est le visuel — ni icône, ni cadre, ni fond coloré autour de lui.
   C'était le dernier fond d'encre du parcours ; il tombe comme les autres, et
   deux filets prennent sa place. Le chiffre reste un moment fort parce qu'il
   mesure 56 px face à des libellés de 13, pas parce qu'il est posé sur du
   noir. Les sources vivent en note de bas de bande. */
.bande-gains{
  background:transparent; color:var(--ink); border-radius:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:40px 0 32px; box-shadow:none;
}
.bande-gains[hidden]{ display:none }
.bande-gains .kicker{ color:var(--accent); margin:0 0 22px }
.gains{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px }
.gain{ display:flex; flex-direction:column; gap:6px }
.gain .num{
  font-size:clamp(2.25rem,6vw,3.5rem); font-weight:700; letter-spacing:-2px;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
}
.gain .cap{ font-size:.82rem; color:var(--ink-soft); max-width:16em }
.bande-gains .sources{ margin:30px 0 0; font-size:.74rem; color:var(--ink-62) }
@media(max-width:640px){
  .gains{ grid-template-columns:1fr; gap:26px }
  .bande-gains{ padding:30px 0 26px }
}

/* Répartition par domaine — des barres horizontales, une échelle unique.
   La barre porte une information de proportion ; le §29 ne proscrit que les
   jauges décoratives. */
.repartition{ margin-top:32px }
.repartition[hidden]{ display:none }
.repartition h2{ font-size:1.0625rem; margin:0 0 4px; letter-spacing:-.2px }
.barres{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px }
.barres li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:baseline }
.barres .nom{ font-size:.9rem; font-weight:700 }
.barres .part{ font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums }
.barres .piste{
  grid-column:1 / -1; height:6px; border-radius:var(--r-pill);
  background:var(--paper-2); overflow:hidden;
}
.barres .piste i{
  display:block; height:100%; background:var(--v-300); border-radius:var(--r-pill);
  transition:width .6s var(--ease);
}
.barres li:first-child .piste i{ background:var(--accent) }

.titre-priorites{ font-size:1.0625rem; margin:36px 0 0; letter-spacing:-.2px }

/* Trois priorités, pas douze. Le §28 plafonne à trois éléments par écran ;
   au-delà, plus rien ne ressort et le visiteur ne sait pas par où commencer. */
.priorites{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px }
.priorites li{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:20px 22px; box-shadow:var(--e1); position:relative; overflow:hidden;
}
/* Le seul accent violet de l'écran, sur ce par quoi nous commencerions. */
.priorites li:first-child{ border-color:transparent; box-shadow:var(--e2) }
.priorites li:first-child::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent);
}
/* Le rang se dit par un nombre, comme à l’écran 3 du site : 01, 02, 03.
   Aucun adverbe, aucune répétition. */
.priorites .rang{
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--ink-soft);
}
.priorites li:first-child .rang{ color:var(--accent) }
/* Le dessin occupe le coin, la lecture reste à gauche. Sous 560 px il passe
   au-dessus du titre : à cette largeur, deux colonnes rendraient le texte
   illisible. */
.priorites .haut{ display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:20px; align-items:start }
/* Les attributs de tracé sont portés par les symboles ; ici on ne règle que
   la taille et la couleur, qui se transmettent au contenu du <use>. */
.priorites .illu{ width:34px; height:34px; display:block; color:var(--ink) }
.priorites .illu.accent{ color:var(--accent) }
.priorites h3{ margin:6px 0; font-size:1.125rem; letter-spacing:-.3px }
@media(max-width:560px){
  .priorites .haut{ grid-template-columns:1fr; gap:12px }
  .priorites .illu{ order:-1 }
}
.priorites p{ margin:0; font-size:.9rem; color:var(--ink-soft) }
/* Tout chiffre affiché porte sa source : le montant sur une ligne, le repère
   qui le fonde juste dessous, en petit. */
.priorites .montant{
  display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.priorites .source{ display:block; margin-top:4px; font-size:.74rem; color:var(--ink-soft) }
.priorites .vous{
  display:block; margin-top:10px; font-size:.82rem; color:var(--ink-soft); font-style:italic;
}

/* Le reste, sur demande. Rien n'est perdu, rien n'écrase. */
details.reste{ margin-top:20px; border-top:1px solid var(--line); padding-top:14px }
details.reste[hidden]{ display:none }
details.reste summary{
  cursor:pointer; font-size:.88rem; font-weight:700; list-style:none;
  display:flex; align-items:center; gap:8px; min-height:44px;
}
details.reste summary::-webkit-details-marker{ display:none }
details.reste summary::after{ content:"+"; margin-left:auto; color:var(--ink-soft); font-weight:400; font-size:1.2rem }
details.reste[open] summary::after{ content:"\2013" }
details.reste ul{ list-style:none; margin:4px 0 0; padding:0 }
details.reste li{ font-size:.88rem; padding:7px 0; color:var(--ink-soft) }
details.reste li b{ color:var(--ink); font-weight:700 }

/* Le détail, ligne par ligne : ce que la ligne reprend, ce qu'elle rend, et le
   repère public qui la fonde. */
.lignes li{ border-top:1px solid var(--line); padding:14px 0 }
.lignes li:first-child{ border-top:none }
.lignes .quoi{ display:block; color:var(--ink); font-size:.88rem }
.lignes .rendu{
  display:block; margin-top:5px; font-size:.82rem; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.lignes .source{ display:block; margin-top:4px; font-size:.74rem }

/* Le rappel de l'entreprise, en tête du questionnaire : la même carte, sans le
   bandeau de tête ni les filets, puisqu'elle ne porte que deux lignes. */
#rappel{ margin-bottom:24px; padding:15px 18px; background:var(--paper-2) }
#rappel .titre{ margin:0; padding:0; background:none; border-bottom:none }
.r-meta{ margin:4px 0 0; font-size:.82rem; color:var(--ink-soft) }

/* Une question par écran, sans défilement : passé l'identification, le titre
   de page s'efface et les marges se resserrent. Sur un portable de 738 px de
   haut, le bloc de question mesure 588 px — il ne tenait pas tant que le
   chapeau occupait le tiers supérieur. */
body.en-cours main{ padding-top:28px }
body.en-cours .bloc{ margin-top:0 }
body.en-cours #rappel{ padding:12px 16px; margin-bottom:18px }
body.en-cours #rappel .titre{ font-size:.95rem }
/* Le bandeau replié occupe le bas de l'écran : la place lui est réservée pour
   qu'il ne recouvre jamais le bouton de validation. */
body.avec-releve main{ padding-bottom:calc(104px + env(safe-area-inset-bottom)) }
@media(max-height:720px){
  body.en-cours main{ padding-top:16px }
  body.en-cours .bloc{ padding:20px }
  body.en-cours .question{ font-size:1.125rem }
  body.en-cours label.choix{ min-height:50px; padding:10px 14px }
  body.en-cours #q-choix{ gap:8px }
  body.en-cours .jauge{ margin-top:14px }
}

/* ------------------------------------------------------------------ */
/* Le relevé — trois compteurs qui s'actualisent à chaque réponse      */
/* ------------------------------------------------------------------ */

.scene[hidden]{ display:none }

.panneau{
  position:fixed; z-index:60; left:0; right:0; bottom:0;
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -10px 28px rgba(14,14,18,.10);
  padding-bottom:env(safe-area-inset-bottom);
}
/* Sous 960 px, le relevé n'est plus replié derrière une poignée : il tient le
   bas de l'écran en bandeau de trois compteurs, visible d'un bout à l'autre du
   questionnaire. La poignée disparaît, l'intitulé et la garde avec elle — le
   chiffre et son libellé suffisent à cette hauteur. La place du bandeau est
   réservée par le fond de page, il ne recouvre donc jamais la validation. */
/* La borne est écrite en centièmes de pixel : sur un écran à densité
   fractionnaire, une largeur de 959,5 px n'entrerait ni dans « au plus
   959 px » ni dans « au moins 960 px », et le relevé disparaîtrait. */
@media(max-width:959.98px){
  .panneau-poignee{ display:none }
  .panneau .panneau-corps, .panneau.ouvert .panneau-corps{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    padding:11px max(22px, calc((100% - 720px)/2)) 12px;
    max-height:none; overflow:visible;
  }
  .panneau-intro, .panneau-garde{ display:none }
  .compteur{ min-width:0; padding-left:14px; border-left:1px solid var(--line) }
  .compteur:first-of-type{ padding-left:0; border-left:none }
  .compteur + .compteur{ margin-top:0; padding-top:0; border-top:none }
  .compteur .valeur{ font-size:1.375rem; letter-spacing:-.6px }
  .compteur .libelle{ margin-top:3px; font-size:.68rem; line-height:1.3 }
  .compteur .ligne, .compteur .repere{ display:none }
}
@media(max-width:380px){
  .compteur .valeur{ font-size:1.1875rem }
  .compteur .libelle{ font-size:.63rem }
}

.panneau-poignee{
  display:flex; align-items:center; gap:12px; width:100%; min-height:60px;
  padding:10px max(22px, calc((100% - 720px)/2));
  background:none; border:none; font:inherit; text-align:left; cursor:pointer;
  color:var(--ink);
}
.poignee-titre{ font-size:.82rem; font-weight:700; flex:0 0 auto }
.poignee-apercu{
  font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.poignee-fleche{
  margin-left:auto; flex:0 0 auto; width:10px; height:10px; border-right:1.75px solid var(--ink-soft);
  border-bottom:1.75px solid var(--ink-soft); transform:rotate(-135deg);
  transition:transform var(--t-state) var(--ease);
}
.panneau-poignee[aria-expanded="true"] .poignee-fleche{ transform:rotate(45deg) }
.panneau-corps{
  display:none; padding:4px max(22px, calc((100% - 720px)/2)) 22px;
  max-height:64vh; overflow-y:auto;
}
.panneau.ouvert .panneau-corps{ display:block }
.panneau-intro{ margin:0 0 18px; font-size:.78rem; color:var(--ink-soft) }
.panneau-garde{ margin:18px 0 0; font-size:.72rem; color:var(--ink-soft) }

.compteur + .compteur{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line) }
.compteur .valeur{
  margin:0; font-size:1.75rem; font-weight:700; letter-spacing:-1px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.compteur .libelle{ margin:5px 0 0; font-size:.78rem; color:var(--ink-soft) }
.compteur .ligne{ margin:9px 0 0; font-size:.74rem; color:var(--ink) }
.compteur .ligne:empty{ display:none }
.compteur .repere{ margin:4px 0 0; font-size:.7rem; color:var(--ink-soft) }
.compteur .repere:empty{ display:none }

/* Au-delà de 960 px, le relevé devient une colonne posée à droite du
   questionnaire, et la poignée n'a plus de raison d'être. */
@media(min-width:960px){
  body.en-cours main{ max-width:1080px }
  body.avec-releve main{ padding-bottom:96px }
  .scene{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start }
  .panneau{
    position:sticky; top:24px; left:auto; right:auto; bottom:auto;
    border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e1);
    padding-bottom:0;
  }
  .panneau-poignee{ display:none }
  .panneau-corps{ display:block; padding:22px; max-height:none; overflow:visible }
}

/* L'avis neutre : le même cadre que l'avertissement, sans son rouge. */
#sans-siren{ background:var(--paper-2); border-color:var(--line) }

/* La question posée après la restitution. Elle n'appartient pas au parcours de
   questions — la scène est refermée — et reprend donc la grille des choix sans
   dépendre de « #q-choix ». */
.bloc-frein .choix-liste{ display:grid; gap:10px; margin:0 }

/* La suite du parcours, entre le relevé préliminaire et la remise du plan.
   Elle emprunte les jetons de l'avis : c'est une information, pas une alerte. */
.suite{
  margin:32px 0 0; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-2);
}
.suite .quoi{ margin:0 0 16px; font-size:1rem; line-height:1.5 }
.suite .pied-bloc{ margin:0; display:flex; flex-wrap:wrap; gap:12px; align-items:center }

/* Le profil, en tête de restitution. Sobre : c'est une phrase de
   reconnaissance, pas un chiffre à mettre en avant. */
.profil{ margin:0 0 24px }
.profil .profil-dit{ margin:4px 0 0; font-size:1.05rem; line-height:1.5; color:var(--ink) }
.profil .note{ margin:6px 0 0; font-size:.8rem; color:var(--ink-soft); line-height:1.5 }

/* Le titre de question reçoit le focus au changement d'étape : sans lui, le
   lecteur d'écran continue d'annoncer la précédente et la tabulation repart du
   haut du document. Le contour ne s'affiche qu'au clavier — au pointeur, il
   serait un artefact inexpliqué. */
.question:focus{ outline:none }
.question:focus-visible{
  outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--r-sm);
}

/* Le mouvement réduit vaut aussi pour ce qui n'est pas une transition CSS :
   les compteurs animés et le défilement adouci. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .suite, .profil, .bande-gains{ animation:none !important }
}