/* ==========================================================================
   Écrans client et apprenant — feuille commune (spec 11 §8)
   --------------------------------------------------------------------------
   Charte du site datanaos.com (thème enfant twentytwentyfive-datanaos) : bleu
   de marque, orange d'action, Inter pour le texte, Roboto pour les titres.
   L'apprenant ne change pas d'univers en passant du catalogue à l'inscription.

   Principe de mise en page : l'entête, la frise et la grille de contenu
   partagent une seule colonne de largeur fixe (--colonne). La frise est une
   grille de six colonnes égales : ni la longueur des libellés, ni le contenu de
   la page, ni la présence de l'encart latéral ne peuvent la déplacer d'un écran
   à l'autre.
   ========================================================================== */

:root {
  --marque: #1d95d2;
  --marque-fonce: #0f5f8c;
  --marque-voile: #eaf5fb;
  --action: #f3712d;
  --action-fonce: #d95c1b;

  --encre: #14202e;
  --texte: #3b4656;
  --discret: #687385;
  --tres-discret: #8e98a7;
  --trait: #dbe3ea;
  --trait-fort: #c6cfda;
  --fond: #f3f6f8;
  --fond-doux: #f9fafb;
  --blanc: #fff;

  --bon: #1a7f4b;       --bon-fond: #e7f4ec;       --bon-trait: #bfe2cc;
  --vigilance: #94600f; --vigilance-fond: #fdf4e3; --vigilance-trait: #f0d9ae;
  --critique: #b3261e;  --critique-fond: #fdeceb;  --critique-trait: #f2c4c0;
  --info: #13628e;      --info-fond: #eaf5fb;      --info-trait: #c4e2f2;

  --colonne: 1200px;
  --encart: 320px;
  --rayon: 6px;

  --ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --titre: Roboto, "Helvetica Neue", Arial, sans-serif;
  --chiffres: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte);
       font: 400 15px/1.6 var(--ui); -webkit-font-smoothing: antialiased;
       display: flex; flex-direction: column; min-height: 100vh; }
h1, h2, h3 { margin: 0; color: var(--encre); }
h1 { font-family: var(--titre); font-size: 32px; font-weight: 700; line-height: 1.15;
     letter-spacing: -.015em; }
h2 { font-family: var(--titre); font-size: 18px; font-weight: 500; line-height: 1.3; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
a { color: var(--marque-fonce); }
a:hover { color: var(--encre); }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
           white-space: nowrap; }
.chiffre { font-variant-numeric: tabular-nums; white-space: nowrap; }

.saut { position: absolute; left: -9999px; }
.saut:focus { left: 8px; top: 8px; z-index: 30; background: var(--blanc); padding: 10px 16px;
              border: 1px solid var(--trait); border-radius: var(--rayon); }

/* La colonne : seul gabarit de largeur, partagé par tous les bandeaux. */
.colonne { width: 100%; max-width: var(--colonne); margin: 0 auto; padding: 0 24px; }

/* --- Entête --------------------------------------------------------------- */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.entete .colonne { min-height: 68px; display: flex; align-items: center; gap: 12px 28px;
                   flex-wrap: wrap; }
.marque { text-decoration: none; display: flex; align-items: center; gap: 14px; }
.marque img { display: block; height: 32px; width: auto; }
.marque small { font: 400 14px var(--ui); color: var(--discret); padding-left: 14px;
                border-left: 1px solid var(--trait); line-height: 24px; }
.entete nav { margin-left: auto; display: flex; gap: 4px 22px; flex-wrap: wrap; font-size: 15px; }
.entete nav a { color: var(--encre); text-decoration: none; padding: 6px 0; }
.entete nav a:hover { color: var(--marque-fonce); }

/* --- Frise de progression ------------------------------------------------
   Signature visuelle du parcours : six colonnes égales et une piste qui se
   remplit de bleu jusqu'à l'étape courante. Hauteur et colonnes fixes : la
   frise occupe rigoureusement la même place sur chaque écran, quel que soit le
   libellé (tronqué au besoin, le libellé complet restant dans le title). */
.frise { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.frise ol { list-style: none; margin: 0; padding: 0; height: 60px;
            display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.frise li { position: relative; min-width: 0; display: flex; }
.frise li::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
                    background: var(--trait); }
.frise li.fait::before, .frise li.courant::before { background: var(--marque); }
.frise li.courant::before { right: 50%; }
.frise li.courant::after { content: ""; position: absolute; left: 50%; right: 0; bottom: -1px;
                           height: 3px; background: linear-gradient(90deg, var(--marque), var(--trait)); }
.frise li > a, .frise li > span { display: flex; align-items: center; gap: 10px; width: 100%;
            padding: 0 12px 0 0; color: var(--discret); text-decoration: none; font-size: 14.5px;
            white-space: nowrap; min-width: 0; }
.frise .num { flex: none; width: 26px; height: 26px; border-radius: 50%;
              border: 1.5px solid var(--trait-fort); display: grid; place-items: center;
              font: 600 12.5px var(--ui); color: var(--discret); background: var(--blanc);
              font-variant-numeric: tabular-nums; }
.frise .lib { overflow: hidden; text-overflow: ellipsis; }
.frise li.fait .num { background: var(--marque); border-color: var(--marque); color: var(--blanc); }
.frise li.fait > a, .frise li.fait > span { color: var(--marque-fonce); }
.frise li.courant > a, .frise li.courant > span { color: var(--encre); font-weight: 600; }
.frise li.courant .num { border: 2px solid var(--marque); color: var(--marque-fonce);
                         box-shadow: 0 0 0 4px var(--marque-voile); }
.frise li > a:hover .lib { text-decoration: underline; text-underline-offset: 3px; }
.frise .contexte { display: none; }

/* --- Page ------------------------------------------------------------------ */
.page { flex: 1; padding: 36px 0 64px; }
/* Grille constante : la colonne principale garde la même largeur avec ou sans
   encart, pour que rien ne se décale d'un écran à l'autre. */
.grille { display: grid; grid-template-columns: minmax(0, 1fr) var(--encart); gap: 32px;
          align-items: start; }
.principal { min-width: 0; max-width: 780px; display: grid; gap: 20px; align-content: start; }
.principal > * { min-width: 0; }
.encart { position: sticky; top: 20px; display: grid; gap: 16px; }

.retour { font-size: 14.5px; }
.chapeau { display: grid; gap: 10px; margin-bottom: 4px; }
.chapeau p { color: var(--discret); font-size: 16.5px; max-width: 60ch; }
.chapeau h1 small { color: var(--tres-discret); font-weight: 500; }
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
            color: var(--marque-fonce); }

/* --- Cartes ---------------------------------------------------------------- */
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.carte-tete { padding: 20px 26px 0; display: flex; align-items: baseline; justify-content: space-between;
              gap: 12px; }
.carte-tete h2, .carte-tete h2.fort { font-size: 18px; font-weight: 500; color: var(--encre); }
.carte-tete a { font-size: 14px; color: var(--discret); }
.carte-corps { padding: 16px 26px 24px; display: grid; gap: 16px; }
.carte-corps > .note { color: var(--discret); font-size: 14px; }
.carte-pied { padding: 16px 26px; border-top: 1px solid var(--trait); display: flex; gap: 10px;
              flex-wrap: wrap; align-items: center; }

/* --- Formulaires ----------------------------------------------------------- */
.champs { display: grid; gap: 16px; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.champ { display: grid; gap: 6px; align-content: start; }
.champ > label, .etiquette { font-size: 14px; font-weight: 600; color: var(--encre); }
.champ > label small, .etiquette small { font-weight: 400; color: var(--discret); }
.champ .aide { font-size: 13px; color: var(--discret); }
.champ .requis { color: var(--action); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date],
input[type=password], input[type=datetime-local], input[type=file],
select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--encre); background: var(--blanc);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: 10px 12px; min-height: 44px;
}
input::placeholder, textarea::placeholder { color: var(--tres-discret); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marque);
                                            box-shadow: 0 0 0 3px rgba(29, 149, 210, .18); }
textarea { min-height: 96px; resize: vertical; }
input.court { max-width: 160px; }
.champ.erreur input, .champ.erreur select, .champ.erreur textarea { border-color: var(--critique); }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--critique); font-size: 13.5px; }
.errorlist.nonfield { background: var(--critique-fond); border: 1px solid var(--critique-trait);
                      border-radius: var(--rayon); padding: 12px 16px; font-size: 14.5px; }

.case { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.case input { margin: 4px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--marque); }
.case small { display: block; color: var(--discret); font-size: 13.5px; }

/* Les sections d'une même étape forment une seule feuille, séparées par un
   filet : on lit un formulaire, pas une pile de cartes. */
.champs:has(> .carte) { gap: 0; }
.champs > .carte + .carte { border-top: 0; border-radius: 0 0 var(--rayon) var(--rayon); }
.champs > .carte:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.champs > .carte + .carte:not(:last-child) { border-radius: 0; }
.champs > .carte + .carte .carte-tete { border-top: 1px solid var(--trait); margin: 0 26px;
                                       padding-left: 0; padding-right: 0; }
.champs > .carte + .carte .carte-tete + .carte-corps { padding-top: 16px; }

/* Choix exclusifs rendus en cartes cliquables (financement, session, règlement). */
.choix { display: grid; gap: 10px; }
.choix > legend { padding: 0 0 6px; font-weight: 600; font-size: 14.5px; color: var(--encre); }
.champ.court input { max-width: 160px; }
.option { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; cursor: pointer;
          border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc);
          transition: border-color .12s, background .12s; }
.option:hover { border-color: var(--marque); }
.option:has(input:checked) { border-color: var(--marque); background: var(--marque-voile); }
.option:has(input:disabled) { cursor: not-allowed; opacity: .72; }
.option input { margin: 4px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--marque); }
.option .corps { flex: 1; min-width: 0; display: grid; gap: 3px; }
.option strong { color: var(--encre); font-weight: 600; }
.option .detail { color: var(--discret); font-size: 14px; }
.option .prix { text-align: right; flex: none; }
.option .prix strong { display: block; }
.option .prix span { color: var(--discret); font-size: 13.5px; }
.option .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px;
                font-size: 13.5px; color: var(--discret); }

/* Compteur de places (− n +). */
.compteur { justify-self: start; display: inline-flex; align-items: stretch; border: 1px solid var(--trait-fort);
            border-radius: var(--rayon); overflow: hidden; background: var(--blanc); }
.compteur button { width: 44px; border: 0; background: var(--fond-doux); font-size: 20px;
                   color: var(--encre); cursor: pointer; }
.compteur button:hover { background: var(--marque-voile); }
.compteur input { width: 72px; border: 0; border-left: 1px solid var(--trait);
                  border-right: 1px solid var(--trait); border-radius: 0; text-align: center;
                  font-weight: 600; -moz-appearance: textfield; }
.compteur input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* --- Boutons --------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
       padding: 10px 22px; border-radius: var(--rayon); font: 600 15.5px var(--ui); cursor: pointer;
       text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn-action { background: var(--action); color: var(--blanc); box-shadow: 0 1px 0 rgba(160, 64, 14, .35); }
.btn-action:hover { background: var(--action-fonce); color: var(--blanc); }
.btn-second { background: var(--blanc); color: var(--encre); border-color: var(--trait-fort); }
.btn-second:hover { border-color: var(--encre); color: var(--encre); }
.btn-petit { min-height: 34px; padding: 6px 14px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.btn-lien { background: none; border: 0; padding: 0; color: var(--marque-fonce); font: inherit;
            text-decoration: underline; cursor: pointer; }

.actions { display: flex; justify-content: space-between; align-items: center; gap: 12px;
           flex-wrap: wrap; padding-top: 22px; margin-top: 8px; border-top: 1px solid var(--trait); }
.actions .droite { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Badges & alertes ------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; font-size: 13px;
         font-weight: 600; color: var(--encre); background: var(--blanc);
         border: 1px solid var(--trait); border-radius: var(--rayon); white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tres-discret); }
.badge.bon::before { background: var(--bon); }
.badge.vigilance::before { background: #c58516; }
.badge.critique::before { background: var(--critique); }
.badge.info::before { background: var(--marque); }
.badge.neutre { color: var(--discret); font-weight: 500; }
.badge.sans-point::before { display: none; }

.alerte { padding: 14px 18px; border-radius: var(--rayon); border: 1px solid; font-size: 15px; }
.alerte.info { background: var(--info-fond); border-color: var(--info-trait); color: var(--info); }
.alerte.bon { background: var(--bon-fond); border-color: var(--bon-trait); color: #155f39; }
.alerte.vigilance { background: var(--vigilance-fond); border-color: var(--vigilance-trait);
                    color: var(--vigilance); }
.alerte.critique { background: var(--critique-fond); border-color: var(--critique-trait);
                   color: var(--critique); }
.alerte strong { font-weight: 600; }
.alerte a { color: inherit; }

/* --- Lignes clé / valeur --------------------------------------------------- */
.lignes { margin: 0; display: grid; }
.lignes > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
                border-bottom: 1px solid var(--trait); }
.lignes > div:last-child { border-bottom: 0; }
.lignes dt { color: var(--discret); }
.lignes dd { margin: 0; color: var(--encre); font-weight: 600; text-align: right; }
.lignes > div.total { border-top: 2px solid var(--encre); border-bottom: 0; margin-top: 4px;
                      padding-top: 14px; align-items: baseline; }
.lignes > div.total dt { color: var(--encre); font-weight: 600; }
.lignes > div.total dd { font-family: var(--titre); font-size: 22px; font-weight: 700; }

/* Listes d'éléments (sessions de repli, échéances, documents). */
.elements { list-style: none; margin: 0; padding: 0; }
.elements > li { display: flex; align-items: center; gap: 16px; padding: 16px 22px;
                 border-bottom: 1px solid var(--trait); }
.elements > li:last-child { border-bottom: 0; }
.elements .quoi { flex: 1; min-width: 0; display: grid; gap: 2px; }
.elements .quoi strong { color: var(--encre); font-weight: 600; }
.elements .quoi span { color: var(--discret); font-size: 14px; }
.elements .etat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                  justify-content: flex-end; }

/* --- Encart « Votre demande » ------------------------------------------------
   Total en Roboto, le reste en retrait. */
.resume .carte-tete h2 { font-size: 15px; color: var(--discret); font-family: var(--ui);
                         font-weight: 600; }
.resume .carte-corps { gap: 4px; padding-top: 16px; }
.resume h3 { font-size: 16px; line-height: 1.35; }
.resume .quand { color: var(--discret); font-size: 14px; margin-top: 4px; }
.resume .lignes > div { padding: 9px 0; font-size: 14.5px; }
.resume .lignes > div.total dd { font-family: var(--titre); font-size: 24px; font-weight: 700; }
.resume .reste { color: var(--discret); font-size: 13.5px; margin-top: 10px; }
.resume .bloc + .bloc { border-top: 1px solid var(--trait); margin: 14px -26px 0; padding: 12px 26px 0; }

/* --- Document (devis, convention) ------------------------------------------ */
.document { background: var(--blanc); border: 1px solid var(--trait); padding: 44px 48px;
            display: grid; gap: 26px; }
.document-tete { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 22px;
                 border-bottom: 2px solid var(--encre); }
.document-tete .emetteur { font-size: 13.5px; color: var(--discret); line-height: 1.55; }
.document-tete .emetteur strong { display: block; color: var(--encre); font-size: 16px;
                                  margin-bottom: 6px; }
.document-tete .titre { text-align: right; }
.document-tete .titre b { display: block; font-family: var(--titre); font-size: 28px;
                          letter-spacing: .04em; color: var(--encre); }
.document-tete .titre span { font-weight: 600; letter-spacing: .06em; color: var(--texte); }
.document h2 { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
               color: var(--discret); margin-bottom: 4px; }
.document .deux .lignes > div { font-size: 14.5px; }
.document table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.document th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
               color: var(--discret); font-weight: 600; padding: 8px 0; border-bottom: 1.5px solid var(--encre); }
.document td { padding: 12px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.document td small { display: block; color: var(--discret); }
.document .num { text-align: right; white-space: nowrap; padding-left: 18px; }
.document .totaux { margin-left: auto; width: min(100%, 320px); }
.document .mentions { border-top: 1px solid var(--trait); padding-top: 16px; font-size: 13px;
                      color: var(--discret); display: grid; gap: 4px; }

.barre-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.barre-outils .droite { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* Suite de la validation : liste d'étapes numérotées verticale. */
.suite { list-style: none; margin: 0; padding: 0; counter-reset: suite; }
.suite > li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px;
              align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--trait); }
.suite > li:last-child { border-bottom: 0; }
.suite > li::before { counter-increment: suite; content: counter(suite); width: 26px; height: 26px;
                      border-radius: 50%; border: 1.5px solid var(--trait-fort); display: grid;
                      place-items: center; font-size: 12.5px; font-weight: 600; color: var(--discret); }
.suite > li.fait::before { background: var(--marque); border-color: var(--marque); color: #fff; }
.suite > li.courant::before { border-color: var(--marque); color: var(--marque-fonce); border-width: 2px; }
.suite .quoi { display: grid; gap: 2px; }
.suite .quoi strong { color: var(--encre); font-weight: 600; }
.suite .quoi span { color: var(--discret); font-size: 14px; }
.suite .etat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* --- Pied de page ---------------------------------------------------------- */
.pied { background: var(--blanc); border-top: 1px solid var(--trait); font-size: 13.5px;
        color: var(--discret); }
.pied .colonne { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 22px; padding-bottom: 22px;
                 align-items: baseline; }
.pied nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied a { color: var(--discret); }

/* --- Petits écrans ---------------------------------------------------------
   La frise garde ses six colonnes et sa hauteur : seuls les numéros restent,
   l'étape courante étant nommée sur une ligne de contexte de hauteur fixe. */
@media (max-width: 960px) {
  .grille { grid-template-columns: minmax(0, 1fr); }
  .encart { position: static; order: -1; }
  .principal { max-width: none; }
}
@media (max-width: 1000px) {
  .frise li > a, .frise li > span { gap: 7px; font-size: 13px; padding-right: 6px; }
  .frise .num { width: 22px; height: 22px; font-size: 11.5px; }
}
@media (max-width: 720px) {
  .colonne { padding: 0 16px; }
  .entete .colonne { padding-top: 12px; padding-bottom: 6px; }
  h1 { font-size: 24px; }
  .frise ol { height: 50px; }
  .frise .lib { display: none; }
  .frise li > a, .frise li > span { justify-content: center; padding: 0; }
  .frise .contexte { display: block; height: 34px; line-height: 34px; font-size: 13.5px;
                     color: var(--discret); border-top: 1px solid var(--trait); overflow: hidden;
                     white-space: nowrap; text-overflow: ellipsis; }
  .frise .contexte b { color: var(--encre); font-weight: 600; }
  .deux { grid-template-columns: minmax(0, 1fr); }
  .page { padding-top: 24px; }
  .carte-corps, .carte-tete, .carte-pied, .elements > li, .suite > li { padding-left: 16px;
                                                                        padding-right: 16px; }
  .champs > .carte + .carte .carte-tete { margin: 0 16px; }
  .resume .bloc + .bloc { margin: 14px -16px 0; padding: 12px 16px 0; }
  .elements > li { flex-wrap: wrap; }
  .suite > li { grid-template-columns: 30px minmax(0, 1fr); }
  .suite .etat { grid-column: 2; justify-content: flex-start; }
  .actions .btn, .actions .droite { width: 100%; }
  .actions .droite .btn { flex: 1; }
  .document { padding: 24px 18px; }
  .document-tete { flex-direction: column; }
  .document-tete .titre { text-align: left; }
  .option { flex-wrap: wrap; }
  .option .prix { text-align: left; width: 100%; padding-left: 30px; }
  .entete nav { margin-left: 0; }
}

@media print {
  .entete, .frise, .pied, .encart, .barre-outils, .actions { display: none !important; }
  body, .page { background: #fff; padding: 0; }
  .grille { display: block; }
  .document { border: 0; padding: 0; }
}

/* ==========================================================================
   Espace client et formateur : menu latéral à gauche, contenu à droite.
   Même entête et même frise que le parcours, à la même position.
   ========================================================================== */
.espace { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.menu { position: sticky; top: 20px; background: var(--blanc); border: 1px solid var(--trait);
        border-radius: var(--rayon); padding: 20px; display: grid; gap: 16px; }
.menu .qui { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.menu .qui strong { color: var(--encre); font-size: 14.5px; word-break: break-all; }
.menu .qui span { color: var(--discret); font-size: 13.5px; }
.menu nav { display: grid; gap: 2px; }
.menu nav a { display: block; padding: 9px 12px; border-radius: var(--rayon); color: var(--texte);
              text-decoration: none; font-size: 14.5px; }
.menu nav a:hover { background: var(--fond); color: var(--encre); }
.menu nav a[aria-current="page"] { background: var(--marque-voile); color: var(--marque-fonce);
                                   font-weight: 600; }
.menu .aide { font-size: 13.5px; color: var(--discret); padding-top: 14px; border-top: 1px solid var(--trait); }
.menu form { margin: 0; }
.menu .deconnexion { font-size: 13px; color: var(--discret); }
.contenu-espace { min-width: 0; display: grid; gap: 22px; align-content: start; }
.contenu-espace > section { display: grid; gap: 12px; }
.contenu-espace h2.bloc-titre { font-size: 20px; }

/* Chiffres clés : une rangée sobre, chiffres en Roboto. */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0;
            background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.chiffres > div { padding: 16px 20px; border-left: 1px solid var(--trait); }
.chiffres > div:first-child { border-left: 0; }
.chiffres dt { color: var(--discret); font-size: 13.5px; order: 2; }
.chiffres dd { margin: 0; font: 700 28px/1.1 var(--titre); color: var(--encre);
               font-variant-numeric: tabular-nums; }
.chiffres > div { display: flex; flex-direction: column-reverse; gap: 4px; }

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); }
.onglets a { padding: 10px 14px; color: var(--discret); text-decoration: none; font-weight: 600;
             font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--marque); }
.vide { color: var(--discret); padding: 20px 22px; }
.entete-detail { display: grid; gap: 8px; }
.entete-detail .infos { color: var(--discret); font-size: 14.5px; line-height: 1.7; }
.nouveau { background: var(--marque-voile); color: var(--marque-fonce); border-color: var(--info-trait); }

/* Écrans d'accès (connexion, lien, 2FA) : un panneau étroit centré. */
.acces { max-width: 460px; margin: 24px auto 0; }
.acces .carte-corps { gap: 18px; }
.acces .qr { display: block; margin: 0 auto; }

@media (max-width: 960px) {
  .espace { grid-template-columns: minmax(0, 1fr); }
  .menu { position: static; }
  .menu nav { grid-auto-flow: column; overflow-x: auto; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres > div:nth-child(3) { border-left: 0; }
  .chiffres > div:nth-child(n+3) { border-top: 1px solid var(--trait); }
}

/* ==========================================================================
   Connexion à l'administration : deux volets, la marque à gauche.
   La piste de la frise y est reprise : le back-office et le parcours client
   partagent la même signature.
   ========================================================================== */
.connexion-admin { background: var(--fond); }
.volets { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.volet-marque { background: var(--marque-fonce); color: #d7ecf7; padding: 56px 56px 48px;
                display: flex; flex-direction: column; gap: 14px; }
.volet-marque h1 { color: #fff; font-size: 40px; max-width: 12ch; margin-top: auto; }
.volet-marque .perimetre { font-size: 16.5px; max-width: 34ch; }
.piste { list-style: none; margin: 28px 0 0; padding: 0; display: grid;
         grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.piste li { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.piste li:nth-child(-n+4) { background: var(--marque); }
.piste li:nth-child(4) { background: linear-gradient(90deg, var(--marque), rgba(255, 255, 255, .22)); }
.volet-form { background: var(--blanc); padding: 56px clamp(24px, 7vw, 96px); display: flex;
              flex-direction: column; justify-content: center; gap: 14px; }
.volet-form > * { width: 100%; max-width: 400px; }
.volet-form .logo { display: block; height: 40px; width: auto; align-self: flex-start; margin-bottom: 18px; }
.volet-form h2 { font: 700 30px var(--titre); }
.volet-form .aide-tete { color: var(--discret); }
.volet-form .champs { gap: 16px; margin-top: 6px; }
.volet-form .btn { width: 100%; }
.volet-form .alerte p { margin: 0; }
.volet-form .aide-pied { font-size: 14px; color: var(--discret); }
input.code { font: 600 24px var(--titre); letter-spacing: .32em; font-variant-numeric: tabular-nums;
             text-align: center; }
@media (max-width: 860px) {
  .volets { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .volet-marque { padding: 28px 20px; }
  .volet-marque h1 { font-size: 28px; margin-top: 8px; max-width: none; }
  .piste { margin-top: 10px; }
  .volet-form { padding: 32px 20px 48px; justify-content: flex-start; }
}

/* --- Questionnaires : une carte par question, notes en boutons segmentés --- */
.questions { display: grid; gap: 16px; }
fieldset.question { margin: 0; padding: 0; min-width: 0; }
fieldset.question > legend { width: 100%; padding-bottom: 0; float: left; }
fieldset.question > legend + .carte-corps { clear: both; }
fieldset.question.erreur { border-color: var(--critique); }
.echelle { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.echelle label { position: relative; cursor: pointer; }
.echelle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.echelle span { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--trait-fort);
                border-radius: var(--rayon); font: 600 16px var(--ui); color: var(--encre);
                background: var(--blanc); font-variant-numeric: tabular-nums; }
.echelle label:hover span { border-color: var(--marque); }
.echelle input:checked + span { background: var(--marque); border-color: var(--marque); color: #fff; }
.echelle input:focus-visible + span { outline: 2px solid var(--marque); outline-offset: 2px; }
.echelle.nps { gap: 6px; }
.echelle.nps span { min-height: 44px; font-size: 15px; }
.bornes { display: flex; justify-content: space-between; color: var(--discret); font-size: 13px; }
@media (max-width: 560px) {
  .echelle.nps { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Pavé de signature (émargement) ----------------------------------------- */
.pad { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
       padding: 16px; background: rgba(20, 32, 46, .62); }
.pad.open { display: flex; }
.pad-carte { width: 100%; max-width: 560px; background: var(--blanc); border-radius: var(--rayon);
             padding: 20px; display: grid; gap: 12px; }
.pad-carte canvas { width: 100%; height: 240px; border: 1.5px dashed var(--trait-fort);
                    border-radius: var(--rayon); background: #fff; touch-action: none; }

/* Page introuvable (404) : une colonne de lecture, sans frise ni encart. */
.not-found { display: grid; gap: 20px; max-width: 720px; }
.not-found .carte-corps p { max-width: 62ch; }

/* Dépôt de la convention signée, sous la liste des conventions. */
.depot-signe { margin-top: 12px; }
.depot-signe input[type="file"] { font: inherit; font-size: 14px; }