/* ════════════════════════════════════════════════════════════════════════════
   Test de positionnement ISIM — page candidat.

   Repris TEL QUEL de `3-maquettes/maquette-test-candidat.html`, validée par
   l'ISIM et référence visuelle du projet (ST § 9). Les seules différences avec
   la feuille de la maquette sont celles que le § 9 impose :

     — la police n'est plus en base64 : `/montserrat.woff2` est un fichier ;
     — le CSS du panneau « Vue formateur » (.fab, .panel, .kpi, .logrow…) est
       supprimé, l'écran n'existe plus côté candidat ;
     — le CSS de `.demo-flag` est supprimé avec le bandeau de démonstration ;
     — ajout du bloc `.mention` (RM-01, RM-67), qui n'existait pas dans la
       maquette et qui n'emprunte QUE des valeurs déjà présentes ici.

   Charte figée (ST § 9) : fond #f6f4ef, cartes blanches, bandeaux noirs, or
   #b49b57, #9a7f36 dès que l'or porte du texte sur fond clair. Sélection d'une
   réponse : contour NOIR, jamais or (.opt[aria-pressed="true"]).
   ════════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Montserrat";
  src:url("/montserrat.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:block;
}

:root{
  color-scheme: light;           /* verrouillé : le test ne suit pas le thème du navigateur */

  --papier:    #f6f4ef;          /* fond de page */
  --blanc:     #ffffff;          /* cartes */
  --noir:      #0a0a0a;          /* bandeaux, CTA, emphase */
  --noir-el:   #151515;
  --noir-line: #272727;
  --or:        #b49b57;
  /* Mesuré le 18/08/2026 sur le fond papier : 3,50:1 à 10,5 px, sous le seuil WCAG 2.2 de
     4,5:1 pour du petit texte — et c'est l'étiquette de module, présente sur les 40 écrans.
     Assombri à 4,68:1. La teinte de charte est conservée, seule la luminance change. */
  --or-fonce:  #856a20;          /* or lisible sur fond clair — 4,68:1 sur --papier */
  /* L'anneau de focus a sa PROPRE couleur : l'or de charte y valait 2,46:1, sous le seuil de
     3:1 exigé pour un indicateur non textuel. Un candidat au clavier ne savait pas dans quel
     champ il tapait, sur le premier écran et sur celui où il passe le plus de temps. */
  --focus:     #3a2f0d;
  --or-clair:  #d4bd82;          /* or lisible sur fond noir */
  --encre:     #2f2c26;          /* texte courant */
  --gris:      #6b6659;          /* texte secondaire — 5,21:1 (était 4,00:1) */
  --gris-2:    #6f6a5c;          /* second gris de charte — 4,91:1 (était 3,38:1) */
  --line:      #e2dccd;
  --alerte:    #b4402f;

  --ff: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  --r: 16px;
}

/* ═══ `hidden` DOIT cacher. ═══════════════════════════════════════════════════════════════
   Le navigateur pose `[hidden]{display:none}` dans SA feuille — mais toute règle d'AUTEUR qui
   fixe `display` la bat, quelle que soit la spécificité : une déclaration d'auteur l'emporte
   sur celle de l'agent utilisateur. `.btn{display:inline-flex}`, plus bas, rendait donc
   `element.hidden = true` INOPÉRANT sur tous les boutons du dispositif. Constaté par Pierre le
   18/08/2026 : « Charger la suite » restait affiché sur une liste vide.
   Le `!important` est ici à sa place — il défend une sémantique du langage, pas un style. */
[hidden]{ display:none !important; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--ff);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- primitives ---------- */
.eyebrow{
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or-fonce); font-weight:800; margin:0;
}
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  border:0; border-radius:999px; padding:15px 32px;
  background:var(--noir); color:var(--blanc);
  font-weight:800; font-size:14px; letter-spacing:.01em; white-space:nowrap;
  cursor:pointer; transition:background .18s ease, transform .12s ease;
}
.btn:hover{ background:#242019; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ background:#cdc7b8; color:#8e897c; cursor:not-allowed; }
.btn-ghost{
  background:transparent; color:var(--encre);
  border:1px solid var(--line); font-weight:700;
}
.btn-ghost:hover{ background:var(--papier); border-color:#cfc7b4; }
.btn-ghost[disabled]{ background:transparent; color:#b3ac9c; border-color:var(--line); }
.btn-sm{ padding:10px 19px; font-size:12.5px; }

/* ---------- shell ---------- */
.wrap{ max-width:900px; margin:0 auto; padding:0 20px; }

/* ============ BANDEAU DE MARQUE ============ */
.brand{
  background:var(--noir); padding:16px 0;
}
.brand-in{
  max-width:900px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:18px;
}
.brand-logo{ width:126px; display:block; }
.brand-session{
  margin-left:auto; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--or); font-weight:800;
}

/* ============ ÉCRAN 1 — INTRO ============ */
#intro{ padding:0 0 76px; }
.intro-in{ padding-top:46px; }
.intro-h{
  font-size:clamp(29px,5vw,44px); font-weight:900; letter-spacing:-.03em;
  line-height:1.08; margin:13px 0 0; color:var(--noir); text-wrap:balance;
}
.intro-h em{ font-style:normal; color:var(--or-fonce); }
.intro-lede{
  color:#5d594f; max-width:60ch; margin:18px 0 0; font-size:16.5px;
}

.facts{ display:flex; gap:9px; flex-wrap:wrap; margin-top:26px; }
.fact{
  border:1px solid var(--line); background:var(--blanc); border-radius:999px;
  padding:8px 17px; font-size:12px; font-weight:700; color:#5d594f;
}
.fact b{ color:var(--or-fonce); }

/* ---------- mention d'information (RM-01, RM-67 — absente de la maquette) ----------
   Elle précède TOUTE saisie, donc la carte d'identité. Aucune couleur, aucun
   rayon ni aucune graisse qui ne soient déjà employés par `.regles` : un ajout
   imposé par le § 10 ne doit pas se lire comme un écart de charte. */
.mention{
  margin-top:32px; border:1px solid var(--line); border-radius:18px;
  background:var(--blanc); padding:26px 28px;
}
.mention h2,
.mention-titre{
  font-size:15.5px; font-weight:900; margin:9px 0 14px;
  letter-spacing:-.01em; color:var(--noir);
  display:block;
}

/* ── Le renvoi, au point de collecte ──────────────────────────────────────
   Discret sans être invisible : l'information doit rester ATTEINTE avant la
   saisie (RGPD art. 12, RM-01), donc le lien ne se fond pas dans le corps de
   texte — il est souligné et il porte la couleur d'accentuation. */
.mention-renvoi{
  margin:26px 0 0; font-size:13px; color:#5d594f; line-height:1.6;
}
.mention-renvoi a{
  color:var(--or-fonce); font-weight:700; text-decoration:underline;
  text-underline-offset:2px;
}

/* ── Le texte intégral, replié en fin de page ─────────────────────────────
   `summary` reçoit un `cursor` et un état de survol : sans eux, rien ne dit
   qu'un bloc est dépliable, et l'information « à un clic » n'est atteinte que
   par ceux qui devinent. Le marqueur natif est conservé — le remplacer par un
   chevron dessiné coûterait la sémantique que les lecteurs d'écran annoncent. */
.mention summary{
  cursor:pointer; list-style-position:outside; padding:2px 0;
}
.mention summary:hover .mention-titre{ color:var(--or-fonce); }
.mention summary .mention-titre{ margin:4px 0 0; }
.mention[open] summary{ margin-bottom:14px; }
/* Le corps ne se referme pas à l'impression : une fiche imprimée doit porter
   l'information, pas un bloc replié. */
@media print{
  .mention-corps{ display:block !important; }
}
/* ── Lisibilité du texte long ─────────────────────────────────────────────
   `max-width` en `ch` et non en pixels : la mesure de confort d'une ligne se
   compte en caractères, pas en largeur d'écran. Au-delà de ~75, l'œil perd la
   ligne suivante en revenant à la marge — et c'est un texte que le candidat
   doit pouvoir lire jusqu'au bout, pas survoler. */
.mention-corps{
  font-size:13.5px; color:#4f4b43; line-height:1.72;
  max-width:74ch;
}
/* Le serveur peut envoyer un texte en plusieurs paragraphes séparés par des
   sauts de ligne : `pre-line` les respecte sans que la page ait à interpréter
   du balisage venu de la configuration. */
/* `pre-line` respecte les retours simples du texte venu du serveur : c'est ce
   qui permet aux listes à puces d'exister sans que la page interprète le
   moindre balisage de configuration. L'indentation pend sur les puces. */
.mention-corps p{
  margin:0 0 15px; white-space:pre-line;
  padding-left:0; text-indent:0;
}
.mention-corps p:last-child{ margin-bottom:0; }
/* Le premier segment de chaque paragraphe est une amorce de section (« Vos
   droits. », « Ce que nous enregistrons : »). On ne peut pas la baliser sans
   interpréter le texte du serveur, mais on peut donner au paragraphe la
   respiration qui la fait lire comme un titre — c'est ce que fait la marge
   ci-dessus, et c'est suffisant. */
/* Le texte vient du serveur, jamais d'ici. S'il manque, la page le DIT : une
   mention d'information absente est un manquement, pas un blanc typographique. */
.mention-corps[data-etat="absente"]{ color:var(--alerte); font-weight:700; }

.identite{
  margin-top:32px; background:var(--blanc); border:1px solid var(--line);
  border-radius:18px; padding:28px 30px;
}
.id-head{ margin:0 0 4px; font-size:16.5px; font-weight:900; letter-spacing:-.01em; color:var(--noir); }
.id-sub{ margin:0 0 22px; font-size:13px; color:var(--gris); line-height:1.55; max-width:60ch; }
.id-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px 22px; }
.id-item{ display:flex; flex-direction:column; gap:7px; }
.id-item.wide{ grid-column:1 / -1; }
.id-k{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gris-2); font-weight:800; }
.id-k span{ color:var(--or-fonce); }
.id-item input, .id-item select{
  width:100%; box-sizing:border-box;
  background:var(--papier); border:1px solid var(--line); border-radius:10px;
  color:var(--encre); font:inherit; font-size:15px; padding:12px 14px;
  -webkit-appearance:none; appearance:none;
}
.id-item select{
  background-image:linear-gradient(45deg,transparent 50%,var(--or-fonce) 50%),
                   linear-gradient(135deg,var(--or-fonce) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(1.3em),calc(100% - 14px) calc(1.3em);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
/* L'anneau n'est JAMAIS annulé. Ces deux règles portaient `outline:none` avec une
   spécificité de 0-2-0 contre le 0-1-0 de `:focus-visible` : il ne restait qu'un changement
   de bordure à 1,98:1, sur le formulaire d'identité et sur la zone de rédaction — les deux
   endroits où un candidat au clavier passe le plus de temps. */
.id-item input:focus, .id-item select:focus{ border-color:var(--or-fonce); background:var(--blanc); }
.id-item input:focus-visible, .id-item select:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
}
.id-item input.bad, .id-item select.bad{ border-color:var(--alerte); background:#fdf6f4; }
.id-item input::placeholder{ color:#a9a294; }
.id-err{ margin:18px 0 0; font-size:13.5px; color:var(--alerte); font-weight:800; display:none; }
.id-err.on{ display:block; }
.id-rgpd{ margin:20px 0 0; font-size:11.5px; color:var(--gris); line-height:1.6; }

.regles{
  margin-top:22px; border:1px solid var(--line); border-radius:18px;
  background:var(--blanc); padding:26px 28px;
}
.regles h2{ font-size:15.5px; font-weight:900; margin:9px 0 16px; letter-spacing:-.01em; color:var(--noir); }
.regles ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.regles li{ display:flex; gap:12px; font-size:14px; color:#5d594f; line-height:1.5; }
.regles li b{ color:var(--noir); font-weight:800; }
.tick{ color:var(--or); font-weight:900; flex:none; width:1.1em; }

.mobile-note{
  margin-top:16px; display:none; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-left:3px solid var(--or);
  border-radius:14px; background:var(--blanc); padding:17px 19px;
  font-size:13.5px; color:#5d594f; line-height:1.55;
}
.mobile-note.on{ display:flex; }
.mobile-note b{ color:var(--noir); }

.go{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.go-note{ font-size:12.5px; color:var(--gris); max-width:38ch; }

/* ============ ÉCRAN 2 — TEST ============ */
#test{ display:none; min-height:100vh; flex-direction:column; }
#test.on{ display:flex; }

.topbar{
  position:sticky; top:0; z-index:5;
  background:var(--noir);
}
.topbar-in{
  max-width:900px; margin:0 auto; padding:13px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.chrono{
  font-size:21px; font-weight:900; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; color:var(--blanc);
}
.chrono.warn{ color:var(--or-clair); }
.progress-meta{ font-size:11px; color:#8b867a; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.spacer{ flex:1 1 auto; }
.surv{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:var(--or); border:1px solid #3a3222; background:#14110a;
  padding:6px 14px; border-radius:999px;
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--or);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.bar{ height:2px; background:#231f18; }
.bar span{ display:block; height:100%; background:var(--or); width:0; transition:width .3s ease; }

.stage{ flex:1 1 auto; padding:40px 0 120px; }
.card{
  background:var(--blanc); color:#4a463d;
  border:1px solid var(--line);
  border-radius:20px; padding:36px 38px 32px;
}
.q-mod{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.q-mod .eyebrow{ color:var(--or-fonce); font-size:10px; }
.q-pts{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris-2); border-left:1px solid var(--line); padding-left:11px;
}
.q-text{
  font-size:clamp(20px,2.6vw,25px); font-weight:900; color:var(--noir);
  letter-spacing:-.02em; line-height:1.28; margin:15px 0 26px; text-wrap:balance;
}
.opts{ display:flex; flex-direction:column; gap:10px; }
.opt{
  display:flex; gap:15px; align-items:flex-start;
  border:1px solid #e6e0d2; border-radius:12px; background:var(--papier);
  padding:15px 18px; cursor:pointer; text-align:left; width:100%;
  font-size:15.5px; color:#4a463d; line-height:1.45;
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover{ border-color:#cfc7b4; background:var(--blanc); }
.opt .mark{
  flex:none; width:27px; height:27px; border-radius:50%;
  border:1.5px solid #ddd6c6; display:grid; place-items:center;
  font-size:11.5px; font-weight:900; color:var(--gris-2); background:var(--blanc);
  transition:all .15s ease;
}
.opt[aria-pressed="true"]{
  border-color:var(--noir); background:var(--blanc);
  box-shadow:0 0 0 1px var(--noir) inset;
}
.opt[aria-pressed="true"] .mark{ background:var(--noir); border-color:var(--noir); color:var(--blanc); }
.opt[aria-pressed="true"] .lbl{ font-weight:700; color:var(--noir); }

.dontknow{
  margin-top:20px; padding-top:16px; border-top:1px dashed #e6e0d2;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.dk-btn{
  border:1px solid #ddd6c6; background:var(--papier); color:#4a463d;
  border-radius:999px; padding:10px 19px; font-size:12.5px; font-weight:800; cursor:pointer;
}
.dk-btn[aria-pressed="true"]{ background:var(--noir); color:var(--blanc); border-color:var(--noir); }
.dk-note{ font-size:11.5px; color:var(--gris-2); max-width:44ch; line-height:1.45; }

textarea{
  width:100%; min-height:220px; resize:vertical;
  border:1px solid #e6e0d2; border-radius:12px; padding:16px 18px;
  font-family:inherit; font-size:15.5px; line-height:1.6; color:var(--encre);
  background:var(--papier);
}
textarea:focus{ background:var(--blanc); border-color:var(--or-fonce); }
textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.ta-meta{
  margin-top:10px; display:flex; gap:18px; flex-wrap:wrap;
  font-size:12px; color:var(--gris-2); font-variant-numeric:tabular-nums;
}
.ta-meta b{ color:var(--encre); font-weight:800; }

.autoeval{ width:100%; border-collapse:collapse; margin-top:8px; }
.autoeval th{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-2);
  font-weight:800; padding:0 6px 12px; text-align:center;
}
.autoeval th:first-child{ text-align:left; }
.autoeval td{ padding:11px 6px; border-top:1px solid var(--line); font-size:14px; }
.autoeval td:first-child{ font-weight:700; color:var(--noir); }
.ae-cell{ text-align:center; }
.ae-dot{
  width:22px; height:22px; border-radius:50%; border:1.5px solid #ddd6c6;
  background:var(--blanc); cursor:pointer; padding:0;
}
.ae-dot[aria-pressed="true"]{ background:var(--noir); border-color:var(--noir); }

.navbar{
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  background:rgba(246,244,239,.97); border-top:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.navbar-in{
  max-width:900px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:12px;
}
.nav-count{ font-size:12px; color:var(--gris); font-variant-numeric:tabular-nums; }

/* ============ OVERLAYS ============ */
.overlay{
  position:fixed; inset:0; z-index:50; display:none;
  place-items:center; padding:24px;
  background:rgba(20,17,12,.86); backdrop-filter:blur(8px);
}
.overlay.on{ display:grid; }
.ov-card{
  max-width:540px; width:100%; text-align:center;
  background:var(--blanc); border:1px solid var(--line); border-radius:22px;
  padding:44px 40px; box-shadow:0 30px 70px -34px rgba(0,0,0,.6);
}
.ov-icon{ font-size:38px; line-height:1; }
.ov-h{ font-size:26px; font-weight:900; letter-spacing:-.025em; margin:16px 0 12px; color:var(--noir); }
.ov-p{ color:#5d594f; font-size:15px; margin:0 auto; max-width:44ch; line-height:1.6; }
.ov-p b{ color:var(--noir); }
.ov-p + .ov-p{ margin-top:14px; }
.ov-actions{ margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ov-meta{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--gris-2); letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
#ovWarn .ov-card{ border-top:4px solid var(--or); }
#ovLock .ov-card{ border-top:4px solid var(--noir); }

/* ============ ÉCRAN 3 — RÉSULTATS ============ */
#done{ display:none; padding:46px 0 80px; }
#done.on{ display:block; }
.res-h{ font-size:clamp(27px,4.4vw,38px); font-weight:900; letter-spacing:-.03em; margin:12px 0 0; color:var(--noir); }
.score-hero{
  margin-top:26px; background:var(--blanc); border:1px solid var(--line);
  border-radius:18px; padding:28px 30px;
  display:flex; align-items:baseline; gap:22px; flex-wrap:wrap;
}
.score-big{
  font-size:54px; font-weight:900; color:var(--noir); letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; line-height:1;
}
.score-cap{ font-size:13.5px; color:var(--gris); max-width:40ch; }

.mods{ margin-top:22px; display:flex; flex-direction:column; gap:2px; }
.mod{
  background:var(--blanc); border:1px solid var(--line);
  padding:16px 20px; display:grid;
  grid-template-columns:1fr auto auto; gap:16px; align-items:center;
}
.mod:first-child{ border-radius:var(--r) var(--r) 0 0; }
.mod:last-child{ border-radius:0 0 var(--r) var(--r); }
.mod-n{ font-size:14px; font-weight:800; color:var(--noir); }
.mod-n span{ display:block; font-size:11px; color:var(--gris); font-weight:500; letter-spacing:.03em; }
.mod-s{ font-size:15px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--noir); }
.chip{
  font-size:9.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.chip-1{ background:#f3ece2; color:#8a5a34; }                 /* 0-39 */
.chip-2{ background:var(--papier); color:var(--gris); border:1px solid var(--line); }  /* 40-69 */
.chip-3{ background:var(--noir); color:var(--blanc); }        /* 70+ */

@media (max-width:640px){
  .card{ padding:24px 21px 22px; border-radius:16px; }
  .identite, .regles, .mention{ padding:22px 20px; border-radius:16px; }
  .intro-in{ padding-top:34px; }
  #intro{ padding-bottom:56px; }
  .brand-logo{ width:104px; }
  .autoeval th{ font-size:8.5px; letter-spacing:.05em; }
  .autoeval td{ font-size:12.5px; }
  .ov-card{ padding:32px 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LA FICHE A4 — la pièce opposable de l'espace conseiller.
   RM-59 (deux pages, identité, score, modules, savoirs, décision, compte rendu,
   double signature), RM-60, RM-70, RM-71 ; contrôle de recette n° 14.

   Repris TEL QUEL de `3-maquettes/maquette-espace-cip.html` : c'est une
   référence validée par l'ISIM, pas un brouillon. Trois écarts, tous motivés :

     — la feuille fait une A4 EXACTE, à l'écran comme à l'impression, et sa
       hauteur utile est la même dans les deux cas. C'est ce qui permet à
       `public/fiche.js` de MESURER la pagination au lieu d'écrire « Page n / 2 »
       en dur, formule fausse dès qu'un compte rendu dépasse quelques lignes ;
     — le masquage à l'impression est conditionné à `body.impression-fiche`.
       Cette feuille est aussi celle de la page candidat : un
       `body > *{display:none}` inconditionnel imprimerait une page blanche à
       tout candidat qui déclenche Ctrl+P pendant son épreuve ;
     — le logo est la version NOIRE (`/logo-isim-noir.svg`), la seule visible sur
       fond blanc — c'est le point que le contrôle de recette n° 14 vérifie.
   ════════════════════════════════════════════════════════════════════════════ */

/* Le calque qui porte l'aperçu (`.calque`, `.calque-bar`, `.calque-corps`) est du mobilier
   d'écran de l'espace conseiller : il vit dans le style de `cip.html`, avec celui de
   l'entretien guidé. Ici ne descend que le DOCUMENT — ce qui part sur le papier.

   294mm − 2 × 14mm = 266mm de hauteur utile, à l'écran comme au tirage. */
.a4-zone{ width:210mm; max-width:100%; margin:0 auto; }
.a4, .a4 *{ box-sizing:border-box; }
.a4{
  width:210mm; height:294mm; padding:14mm;
  display:flex; flex-direction:column;
  background:#fff; color:#1b1912;
  font-size:11.5px; line-height:1.5;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65);
  /* Le pavé noir du total et le trait de l'en-tête sont porteurs de sens : sans
     cette autorisation, le navigateur les efface « pour économiser l'encre ». */
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.a4 + .a4{ margin-top:20px; }
.a4-corps{ flex:1 1 auto; min-height:0; overflow:hidden; }
.a4-bloc{ break-inside:avoid; }

.a4-tete{
  display:flex; align-items:flex-start; gap:18px;
  border-bottom:2px solid var(--noir); padding-bottom:14px;
}
.a4-tete img{ width:104px; height:auto; }
.a4-tete div{ margin-left:auto; text-align:right; font-size:9.5px; color:#6b675e; line-height:1.5; }
.a4 h1{ font-size:19px; font-weight:900; letter-spacing:-.02em; margin:20px 0 3px; color:var(--noir); }
.a4 .sst{ font-size:11px; color:#6b675e; margin:0 0 20px; }
.a4 .sst .vers{ display:block; margin-top:3px; font-size:9.5px; color:var(--gris-2); }
.a4 h2{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--or-fonce);
  font-weight:800; margin:22px 0 9px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.a4-bloc:first-child h2{ margin-top:16px; }
.a4 table{ width:100%; border-collapse:collapse; table-layout:fixed; }
/* Un long tableau, une longue liste ou un long compte rendu sont découpés en briques
   plaçables : chacune porte son titre « (suite) ». Ce titre n'a de sens que si la brique
   OUVRE une page — sinon elle se pose juste sous la précédente, et le document répéterait
   un intertitre au milieu d'une page. `.a4-bloc` étant enfant direct du corps de page,
   `:first-child` dit exactement « premier de sa page », sans une ligne de JavaScript. */
.a4-bloc:not(:first-child) .suite{ display:none; }
.a4-bloc:not(:first-child) .cr-suite{ border-top:0; border-radius:0 0 8px 8px; min-height:0; }
.a4-bloc:has(+ .a4-bloc .cr-suite) .cr{ border-bottom:0; border-radius:8px 8px 0 0; }
.a4 th{
  font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-2);
  text-align:left; padding:0 8px 6px; font-weight:800;
}
.a4 td{ padding:6px 8px; border-top:1px solid #ece7db; font-size:11px; vertical-align:top; }
.a4 td.n, .a4 th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.a4 .tnum{ font-variant-numeric:tabular-nums; }
.a4 .u{ color:var(--gris-2); font-size:9.5px; }
.a4 .rien{ margin:0; font-size:11px; color:#5d594f; }

.a4 .ident{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 22px; }
.a4 .ident div span{
  display:block; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris-2); font-weight:800;
}
.a4 .ident div b{ font-size:12px; font-weight:700; overflow-wrap:anywhere; }

/* Trois chiffres, pas une phrase : questionnaire + rédactionnel = total. */
.a4 .scores{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.a4 .sc{ background:var(--papier); padding:13px 16px; }
.a4 .sc.tot{ background:var(--noir); }
.a4 .sc span{
  display:block; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-2); font-weight:800;
}
.a4 .sc.tot span{ color:var(--or); }
.a4 .sc b{
  display:block; margin-top:5px; font-size:23px; font-weight:900; letter-spacing:-.03em;
  color:var(--noir); line-height:1.1;
}
.a4 .sc.tot b{ color:#fff; }
.a4 .sc i{ display:block; margin-top:3px; font-style:normal; font-size:10px; color:#6b675e; }
.a4 .sc.tot i{ color:#a9a396; }
.a4 .verdict-p{
  margin:9px 0 0; font-size:11.5px; color:#3c382f; line-height:1.55;
  border-left:3px solid var(--or); padding-left:12px;
}
.a4 .verdict-p b{ color:var(--noir); }

.a4 ul.sv-l{ margin:0; padding:0; list-style:none; columns:2; column-gap:26px; }
.a4 ul.sv-l li{ font-size:10.5px; margin-bottom:5px; break-inside:avoid; color:#3c382f; }
.a4 ul.sv-l li b{ color:var(--or-fonce); font-size:9px; letter-spacing:.08em; }

.a4 .decision{ border:1px solid var(--noir); border-radius:10px; padding:14px 18px; }
.a4 .decision b{ font-size:13px; }
.a4 .decision p{ margin:5px 0 0; font-size:11px; color:#5d594f; }
.a4 .cr{
  min-height:74px; border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; font-size:11px; color:#3c382f;
}

/* Zone de DOUBLE SIGNATURE : élément du document opposable, jamais décorative. */
.a4 .sign{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:22px; }
.a4 .sign div{ border-top:1px solid var(--line); padding-top:8px; font-size:9.5px; color:var(--gris-2); }
.a4 .sign div b{ display:block; font-size:11px; color:var(--noir); margin-bottom:26px; }

.a4 .legal{ margin-top:20px; font-size:8.5px; color:var(--gris-2); line-height:1.55; }
.a4 .legal.empreinte{ margin-top:6px; overflow-wrap:anywhere; }
.a4 .pied{
  flex:0 0 auto; margin-top:14px; padding-top:10px; border-top:1px solid var(--line);
  font-size:8.5px; color:#a09a8c; display:flex;
}
.a4 .pied span:last-child{ margin-left:auto; }

@media print{
  @page{ size:A4; margin:14mm; }
  body.impression-fiche{ background:#fff; }
  body.impression-fiche > *:not(#calqueDoc){ display:none !important; }
  body.impression-fiche #calqueDoc{ position:static; display:block; background:#fff; }
  body.impression-fiche .calque-bar{ display:none !important; }
  body.impression-fiche .calque-corps{ padding:0; overflow:visible; }
  body.impression-fiche .a4-zone{ width:auto; }
  /* 266mm : la même hauteur utile qu'à l'écran, dans les 269mm imprimables.
     Les trois millimètres de mou évitent la page blanche que produit une feuille
     haute au millimètre près suivie d'un saut de page. */
  body.impression-fiche .a4{
    width:182mm; height:266mm; padding:0; margin:0;
    box-shadow:none; break-after:page; page-break-after:always;
  }
  body.impression-fiche .a4:last-child{ break-after:auto; page-break-after:auto; }
}