/* CSS extrait de index.html (balise <style>) — NE PAS MODIFIER ICI :
   ce fichier est régénéré par outils/empaqueter-plugin.sh.
   Chaque sélecteur est porté sous #app par outils/cloisonner-css.py :
   sans cela, une règle du thème WordPress sur un nom de classe courant
   (.grid, .row, .card…) s'applique à l'intérieur de l'application. */
/* ------------------- bouclier, partie amont -------------------
   Ce fichier est placé AVANT la feuille de l'application, et c'est tout son
   intérêt : à spécificité égale, c'est la dernière règle qui gagne, donc
   l'application reprend systématiquement la main sur ce qui est remis à zéro
   ici — tandis qu'une règle de thème, qui ne porte pas d'identifiant, perd
   quoi qu'il arrive.

   Pourquoi il faut davantage que le cloisonnement sous #app : celui-ci ne
   défend que les propriétés que l'application DÉCLARE. Les noms de classes de
   l'application sont courants, et les grilles utilitaires des greffons
   (Gutentor, Bootstrap, Elementor…) posent sur ces mêmes noms des marges, des
   remplissages et des bases flex que l'application, elle, ne déclare nulle
   part — faute de combattant, c'est le thème qui gagnait.
   Le cas qui a coûté une journée : « .grid{flex-basis:0;flex-grow:1} » dans
   wpness-grid.min.css (greffon Gutentor). Nos grilles étant enfants d'un
   conteneur flex en colonne, flex-basis y fixe la HAUTEUR : la grille
   s'écrasait à 1 px et son champ se dessinait par-dessus les lignes
   suivantes du bilan des connaissances.

   On ne remet à zéro que des propriétés de MISE EN PLACE, et seulement sur les
   classes que l'application possède. Ni couleur, ni bordure, ni police : un
   thème qui les retoucherait ne casserait rien, et les remettre à zéro ici
   ferait du bruit pour rien. Les styles en ligne de l'application (marges,
   largeurs, colonnes de grille) l'emportent sur ces règles, qui ne portent
   pas de !important — c'est voulu. */
#app .shell, #app .wrap, #app .card, #app .grid, #app .row, #app .stack, #app .field, #app .tabs, #app .pill, #app .btn, #app .notice, #app .coche, #app .coches, #app .bar, #app .progress, #app .sep, #app .opt, #app .rev, #app .pieces, #app .depot, #app .option-pe, #app .tablewrap, #app .verdict{
  margin:0; padding:0; max-width:none; min-height:0; width:auto;
  flex:0 1 auto;
}


:root{
  /* Palette Visactys — vert de marque #20BD67, vert foncé du logo #0C703E.
     Un seul thème : clair. L'application est utilisée en salle d'examen sur
     des tablettes dont le réglage système nous échappe ; elle ne doit pas
     virer au sombre selon l'humeur de l'appareil. */
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F7F4;
  --ink:#16201A; --muted:#5A665E; --faint:#87938B;
  --line:#DCE4DE; --line-strong:#BDC8C1;
  --accent:#20BD67; --accent-ink:#0C703E; --accent-soft:#E6F7EE;
  --ok:#276B44; --ok-soft:#E3F1E7;
  --bad:#9E2B21; --bad-soft:#FAE7E4;
  --warn:#8F5A06; --warn-soft:#FBF0DC;
  --shadow:0 1px 2px rgba(22,32,26,.06),0 8px 24px -16px rgba(22,32,26,.35);
  --r:10px;
}
*{box-sizing:border-box}
html, body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
#app h1, #app h2, #app h3, #app h4{font-family:Archivo,"Source Sans 3",sans-serif;font-weight:600;
  letter-spacing:-.015em;margin:0;text-wrap:balance}
#app .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
#app button{font:inherit;color:inherit}
#app a{color:var(--accent-ink)}
#app :focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

#app .shell{min-height:100%;display:flex!important;flex-direction:column!important}
#app .wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:20px}
#app .topbar{position:sticky!important;top:env(safe-area-inset-top,0px)!important;z-index:30;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
#app .topbar .wrap{display:flex!important;align-items:center;gap:14px;min-height:58px;padding-block:8px;flex-wrap:wrap}
#app .brand{display:flex!important;align-items:center;gap:10px;font-family:Archivo;font-weight:700;
  letter-spacing:-.02em;font-size:15px}
#app .brand .mark{width:26px;height:26px!important;border-radius:7px;background:var(--accent);
  display:grid!important;place-items:center;color:#0A2E1C;font-size:11px;font-weight:700;flex:none}
#app .liste-suppr{margin:12px 0 0;padding-left:20px;font-size:14px;color:var(--muted)}
#app .liste-suppr li{margin-top:4px}
#app .btn.primary.danger{background:var(--bad);border-color:var(--bad);color:#fff}
#app .btn.primary.danger:hover{filter:brightness(1.07)}
#app .bdc-grille{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:8px;margin-top:12px}
#app .bdc-info{display:flex!important;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
#app .bdc-info span{font-size:13px;color:var(--muted)}
#app .verdict-bdc{margin-top:12px;padding:12px 14px;border-radius:var(--r);font-weight:700;
  font-family:Archivo;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
#app .verdict-bdc.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
#app .verdict-bdc.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
#app .option-pe{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
#app .pieces .piece{display:flex!important;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);
  flex-wrap:wrap}
#app .pieces .piece.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-soft)}
#app .pieces .piece .lib{font-size:13px;font-weight:600}
#app .pieces .depot{position:relative!important;overflow:hidden!important;cursor:pointer}
#app .pieces .depot input[type=file]{position:absolute!important;inset:0!important;opacity:0;cursor:pointer;width:100%}
#app .candidat-epreuve{font-weight:600;font-size:13px;color:var(--muted);
  white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis;max-width:22ch;flex:none}
@media (max-width:560px){#app .candidat-epreuve{max-width:10ch}}
#app .qr svg{display:block!important;margin-inline:auto;max-width:100%;height:auto!important}
#app .brandsub{font-family:"Source Sans 3";font-weight:400;font-size:12px;color:var(--muted)}
#app .nav{display:flex!important;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
#app .nav button{background:none;border:0;padding:7px 12px;border-radius:7px;cursor:pointer;
  color:var(--muted);font-size:14px;font-weight:600}
#app .nav button:hover{background:var(--surface-2);color:var(--ink)}
#app .nav button[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink)}
#app main{flex:1;padding-block:26px 56px}
#app .toastwrap{position:fixed!important;left:50%!important;bottom:24px!important;transform:translateX(-50%)!important;z-index:95;
  max-width:min(460px,92vw)}
#app .toastwrap .notice{box-shadow:var(--shadow);background:var(--surface)}

#app .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
#app .card.pad-lg{padding:26px}
#app .stack{display:flex!important;flex-direction:column!important;gap:16px}
#app .row{display:flex!important;gap:10px;flex-wrap:wrap;align-items:center}
#app .grid{display:grid!important;gap:16px}
#app .eyebrow{font-family:Archivo;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
#app .lede{color:var(--muted);max-width:66ch}
#app .req{color:var(--bad)}
#app .btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
  padding:11px 18px;font-weight:600;font-size:15px;cursor:pointer;min-height:44px}
#app .btn:hover{background:var(--surface-2)}
#app .btn[disabled]{opacity:.45;cursor:not-allowed}
#app .btn.primary{background:var(--accent);border-color:var(--accent);color:#0A2E1C}
#app .btn.primary:hover{filter:brightness(1.07)}
#app .btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
#app .btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
#app .btn.big{padding:15px 24px;font-size:16px;min-height:52px}
#app .btn.mini{min-height:36px;padding:5px 11px;font-size:13.5px}
#app .btn.danger{border-color:var(--bad);color:var(--bad)}
#app .btn.ghost.danger{border-color:transparent;color:var(--bad)}
#app label.field{display:flex!important;flex-direction:column!important;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
#app input[type=text], #app input[type=date], #app input[type=number], #app input[type=password], #app select, #app textarea{
  font:inherit;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--surface);color:var(--ink);min-height:44px;width:100%}
#app input:disabled, #app textarea:disabled, #app select:disabled{background:var(--surface-2);color:var(--muted);cursor:default}
#app textarea{min-height:110px;font-family:"IBM Plex Mono",monospace;font-size:13px}
#app .cb{width:20px;height:20px!important;margin-top:2px;accent-color:var(--accent)}
#app .pill{display:inline-flex!important;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;font-family:Archivo;white-space:nowrap}
#app .pill.ok{background:var(--ok-soft);color:var(--ok)}
#app .pill.bad{background:var(--bad-soft);color:var(--bad)}
#app .pill.warn{background:var(--warn-soft);color:var(--warn)}
#app .pill.neutral{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
#app .code{display:inline-block!important;background:var(--accent-soft);color:var(--accent-ink);
  padding:3px 9px;border-radius:6px;font-weight:600;letter-spacing:.08em}
#app .notice{display:flex!important;gap:11px;padding:13px 15px;border-radius:9px;font-size:14px;
  border:1px solid;align-items:flex-start}
#app .notice.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
#app .notice.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent-ink)}
#app .notice.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--bad)}
#app .tablewrap{overflow-x:auto!important;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
#app table{border-collapse:collapse;width:100%;font-size:14px;min-width:620px}
#app th, #app td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
#app th{font-family:Archivo;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:600;background:var(--surface-2)}
#app tbody tr:last-child td{border-bottom:0}
#app tbody tr:hover{background:var(--surface-2)}
#app td.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
#app .kpis{display:grid!important;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#app .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
#app .kpi .v{font-family:Archivo;font-weight:700;font-size:28px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
#app .kpi .k{font-size:12.5px;color:var(--muted);margin-top:3px}
#app .tabs{display:flex!important;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto!important}
#app .tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;
  cursor:pointer;font-weight:600;font-size:14.5px;color:var(--muted);white-space:nowrap}
#app .tabs button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}
#app .filters{display:flex!important;gap:10px;flex-wrap:wrap;align-items:flex-end}
#app .filters label.field{min-width:150px;flex:1}
#app .muted{color:var(--muted)} #app .small{font-size:13px}
#app .sep{height:1px!important;background:var(--line);border:0;margin:4px 0}
#app .bar{height:9px!important;border-radius:999px;background:var(--line);overflow:hidden!important;position:relative!important;min-width:110px}
#app .bar i{display:block!important;height:100%!important;border-radius:999px;background:var(--accent)}
#app .bar i.ok{background:var(--ok)} #app .bar i.bad{background:var(--bad)}
#app .bar .mid{position:absolute!important;left:50%!important;top:-3px!important;bottom:-3px!important;width:2px;background:var(--ink);opacity:.4}

/* ------------------------- fiche imprimable ------------------------- */
#app .fiche{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden!important}
#app .fiche-hd{display:flex!important;justify-content:space-between;gap:18px;align-items:flex-start;
  padding:22px 24px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
#app .fiche-meta{padding:10px 24px;background:var(--surface-2);border-bottom:1px solid var(--line)}
#app .engagement{padding:16px 24px;background:var(--accent-soft);color:var(--accent-ink);
  font-size:14px;border-bottom:1px solid var(--line)}
#app .fiche-corps{padding:24px}
#app .stagiaire{border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:var(--surface-2)}
#app .coches{display:flex!important;gap:12px;align-items:center;flex-wrap:wrap}
#app .coches .lbl{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-family:Archivo}
#app .coche{display:inline-flex!important;align-items:center;gap:6px;font-size:14.5px;cursor:pointer;
  padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);min-height:40px}
#app .coche input{accent-color:var(--accent);width:17px;height:17px!important;margin:0}
#app .signature{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
#app .combo{display:flex!important;gap:8px;align-items:stretch}
#app .combo input{flex:1;min-width:0;font-family:"IBM Plex Mono",monospace;font-weight:600;
  letter-spacing:.04em}
#app .combo select{flex:0 0 auto;width:auto;min-width:110px;max-width:150px;font-size:13.5px}
#app ul.liens{margin:8px 0 0;padding-left:18px;display:flex!important;flex-direction:column!important;gap:6px}
#app ul.liens li{line-height:1.6}
#app .sous-tabs{display:flex!important;gap:6px;flex-wrap:wrap}
#app .sous-tabs button{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--muted)}
#app .sous-tabs button[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-ink)}
#app .sous-tabs button .mono{opacity:.65;margin-left:2px}
#app textarea.libre{font-family:inherit;font-size:15px;min-height:110px}
/* Rubrique exigée par la signature et encore vide : un liseré, pas un bandeau.
   La fiche se remplit dans l'ordre, et crier sur chaque champ pas encore
   atteint rendrait l'avertissement invisible le jour où il compte. */
#app textarea.libre.manquant{border-color:var(--bad)}
#app .controles{display:flex!important;flex-direction:column!important;gap:8px;margin-top:12px}
#app .ctrl{display:flex!important;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
#app .ctrl.nc{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-soft)}
#app .ctrl-l{display:flex!important;flex-direction:column!important;gap:2px;font-size:15px;min-width:min(100%,240px);flex:1}
#app .ctrl-l>span:first-child{font-weight:600}
#app .etoile{color:var(--warn);font-weight:700;cursor:help}
/* Renvoi de la fiche d'adéquation : il doit sauter aux yeux du testeur, qui
   doit aller chercher les caractéristiques dans un autre document. */
#app .mention-rouge{color:var(--bad);font-weight:600}
#app table.moyens{min-width:760px}
#app table.moyens td{font-size:13.5px;vertical-align:top}
#app table.moyens tr.indispo td{background:var(--bad-soft)}
/* Ligne de commentaire d'un moyen indisponible : présente en permanence,
   dévoilée sur place par le bouton radio. L'attribut hidden doit l'emporter
   explicitement, une règle d'affichage de tableau pouvant le neutraliser. */
#app table.moyens tr.moyen-comment>td{background:var(--bad-soft);padding-top:0}
#app table.moyens tr[hidden]{display:none!important}
#app table.moyens .coches{gap:6px}
#app table.moyens .coche{padding:5px 9px;min-height:34px;font-size:13.5px}

/* ---------------------------- examen ---------------------------- */
#app .exam{position:fixed!important;inset:0!important;display:flex!important;flex-direction:column!important;background:var(--ground);z-index:60}
#app .exam-top{border-bottom:1px solid var(--line);background:var(--surface);
  padding:10px 20px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
#app .exam-top .inner{max-width:860px;margin:0 auto;display:flex!important;align-items:center;gap:14px;flex-wrap:wrap}
#app .progress{flex:1;min-width:140px;height:6px!important;background:var(--line);border-radius:999px;overflow:hidden!important}
#app .progress span{display:block!important;height:100%!important;background:var(--accent);border-radius:999px;transition:width .22s}
#app .exam-body{flex:1;overflow-y:auto!important;padding:26px 20px 24px}
#app .exam-body .inner{max-width:860px;margin:0 auto}
/* Mention d'information : présente sur chaque question, repliée par défaut,
   pour ne pas s'interposer entre le candidat et son épreuve. */
#app .mention-rgpd{margin-top:32px;border-top:1px solid var(--line);padding-top:12px}
#app .mention-rgpd summary{font-size:12px;color:var(--faint);cursor:pointer;
  list-style:none;display:inline-flex!important;align-items:center;gap:6px}
#app .mention-rgpd summary::-webkit-details-marker{display:none!important}
#app .mention-rgpd summary::before{content:"ⓘ";font-size:13px}
#app .mention-rgpd summary:hover{color:var(--muted)}
#app .mention-rgpd>div{font-size:12px;line-height:1.55;color:var(--muted);margin-top:8px;
  max-width:62ch}
#app .exam-bot{border-top:1px solid var(--line);background:var(--surface);padding:12px 20px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
#app .exam-bot .inner{max-width:860px;margin:0 auto;display:flex!important;gap:10px;align-items:center}
#app .qnum{font-family:Archivo;font-weight:700;font-size:15px;white-space:nowrap}
#app .qnum small{color:var(--faint);font-weight:500}
#app .enonce{font-family:Archivo;font-weight:600;font-size:clamp(19px,2.6vw,24px);
  line-height:1.32;margin:12px 0 20px}
#app .contexte{font-size:14px;color:var(--muted);margin-top:8px;padding-left:11px;
  border-left:3px solid var(--accent-soft);line-height:1.45}
#app .figures{display:flex!important;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
#app .qimg{display:block!important;max-width:100%;height:auto!important;border-radius:9px;
  border:1px solid var(--line);background:#fff}
#app .figures.multi .qimg{max-width:min(100%,330px)}
#app .opts{display:flex!important;flex-direction:column!important;gap:11px}
#app .opt{display:flex!important;gap:13px;align-items:flex-start;padding:15px 17px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-size:16.5px;
  min-height:56px;transition:border-color .12s,background .12s}
#app .opt:hover{border-color:var(--line-strong)}
#app .opt.sel{border-color:var(--accent);background:var(--accent-soft)}
#app .opt.compact{min-height:44px;padding:10px 14px;font-size:15px}
#app .opt input{margin:0;flex:none;width:21px;height:21px!important;accent-color:var(--accent);margin-top:2px}
#app .opt img{display:block!important;max-width:100%;width:290px;border-radius:7px;background:#fff;
  border:1px solid var(--line);margin-top:8px}
#app .opt .ot{display:flex!important;flex-direction:column!important;gap:2px}
#app .appar{display:flex!important;flex-direction:column!important;gap:12px}
#app .appar .pair{display:flex!important;gap:12px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:13px 16px;flex-wrap:wrap}
#app .appar .pair .g{font-family:Archivo;font-weight:700;font-size:17px;min-width:34px;height:34px!important;
  border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid!important;
  place-items:center;flex:none}
#app .appar .pair select{flex:1;min-width:190px}
#app .overview{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:7px;margin-top:6px}
#app .overview button{aspect-ratio:1;border:1.5px solid var(--line);background:var(--surface);
  border-radius:7px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:13px;
  font-weight:600;min-height:44px}
#app .overview button.done{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
#app .overview button.flag{border-color:var(--warn);box-shadow:inset 0 -3px 0 var(--warn)}
#app .overview button.cur{outline:2px solid var(--ink);outline-offset:1px}
#app .modal-bg{position:fixed!important;inset:0!important;background:rgba(10,14,8,.55);z-index:90;display:grid!important;
  place-items:center;padding:20px}
#app .modal{background:var(--surface);border-radius:14px;padding:26px;max-width:540px;width:100%;
  max-height:86vh!important;overflow-y:auto!important;box-shadow:var(--shadow)}

/* ---------------------------- résultat ---------------------------- */
#app .verdict{display:flex!important;gap:20px;align-items:center;flex-wrap:wrap;padding:24px;
  border-radius:var(--r);border:1px solid}
#app .verdict.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
#app .verdict.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
#app .verdict .score{font-family:Archivo;font-weight:700;font-size:clamp(40px,7vw,58px);
  line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#app .verdict .score small{font-size:.38em;font-weight:600;color:var(--muted)}
#app .verdict.ok .score{color:var(--ok)} #app .verdict.bad .score{color:var(--bad)}
#app .verdict .lbl{font-family:Archivo;font-weight:700;font-size:21px}
#app .verdict.ok .lbl{color:var(--ok)} #app .verdict.bad .lbl{color:var(--bad)}
#app .rev{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden!important}
#app .rev .q{padding:14px 16px;border-bottom:1px solid var(--line);display:flex!important;gap:12px}
#app .rev .q:last-child{border-bottom:0}
#app .rev .q .st{flex:none;width:24px;height:24px!important;border-radius:6px;display:grid!important;place-items:center;
  font-size:13px;font-weight:700}
#app .rev .q.j .st{background:var(--ok-soft);color:var(--ok)}
#app .rev .q.f .st{background:var(--bad-soft);color:var(--bad)}
#app .rev .q .txt{font-size:14.5px}
#app .rev .q .det{font-size:13px;color:var(--muted);margin-top:4px}

@media print{
  #app .noprint, #app .topbar{display:none!important}
  body{background:#fff}
  #app .card, #app .verdict, #app .rev, #app .fiche, #app .stagiaire{break-inside:avoid;border-color:#bbb!important}
  /* Les tableaux longs — la grille des moyens requis en tête — doivent se
     COUPER entre deux pages, pas tenir sur une seule.
     Deux choses les en empêchaient :
     · overflow-x:auto fait du cadre un conteneur de défilement, et un
       conteneur de défilement ne se pagine pas : tout ce qui dépasse la
       première page est purement coupé ;
     · break-inside:avoid demandait en plus de ne jamais le couper, d'où la
       page blanche suivie d'un tableau tronqué.
     On rend donc le cadre transparent à l'impression et on coupe entre les
     lignes, en répétant l'en-tête sur chaque page : une colonne « Disponible »
     sans son titre, page 2, ne veut plus rien dire. */
  #app .tablewrap{overflow:visible!important;break-inside:auto;border-color:#bbb!important}
  #app table{break-inside:auto;min-width:0}
  #app thead{display:table-header-group!important}
  #app tr{break-inside:avoid}
  #app main{padding:0}
  #app .engagement{background:#f3f3f3!important;color:#000!important}
  #app input, #app textarea, #app select{border-color:#999!important}
}

/* ------------------- ajouts spécifiques au plugin WordPress -------------------
   Ce fichier est concaténé à la feuille de style extraite d'index.html par
   outils/empaqueter-plugin.sh. Il ne contient que ce qui n'a de sens que
   sous WordPress. */

#app.shell{min-height:100vh}

/* Le thème enferme le contenu dans une colonne étroite, souvent 800 à 900 px.
   L'application a besoin de la largeur de la fenêtre : sans cela les tableaux
   débordent et leurs dernières colonnes — celles qui portent les boutons
   « PV » et « CSV » — deviennent inatteignables.
   --caces-sb vaut la largeur de la barre de défilement, mesurée par core.js :
   sans elle, 100vw dépasse la fenêtre et crée un défilement horizontal
   parasite sur toute la page. */
#app.shell{
  width:calc(100vw - var(--caces-sb,0px));
  max-width:none;
  margin-inline:calc(50% - 50vw + var(--caces-sb,0px) / 2);
}

/* Un enfant de conteneur flex ou grid ne descend pas sous la largeur de son
   contenu sans min-width:0. Sans cette règle, overflow-x:auto reste sans effet
   et le tableau est coupé au lieu de défiler. */
#app main, #app .stack>*, #app .grid>*{min-width:0}

/* ------------------- écran de connexion WordPress -------------------
   wp_login_form() produit son propre balisage, avec les classes de WordPress
   (.login-username, .button-primary…) et non les nôtres. Plutôt que de
   reconstruire le formulaire à la main — ce qui priverait le site des
   protections de WordPress sur la connexion — on habille le sien. */
#app .caces-connexion{max-width:460px;padding-top:24px}
#app .caces-connexion .login-username, #app .caces-connexion .login-password{display:flex!important;flex-direction:column!important;gap:5px;margin-bottom:14px}
#app .caces-connexion label{font-size:13px;font-weight:600;color:var(--muted)}
#app .caces-connexion input[type=text], #app .caces-connexion input[type=password]{width:100%}
#app .caces-connexion .login-submit{margin:0}
#app .caces-connexion input[type=submit]{
  display:inline-flex!important;align-items:center;justify-content:center;width:100%;
  border:1px solid var(--accent-ink);border-radius:8px;padding:11px 18px;
  background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:15px;
  min-height:44px;cursor:pointer}
#app .caces-connexion input[type=submit]:hover{background:var(--accent-ink)}

/* ------------------- bouclier contre le thème -------------------
   Porter les sélecteurs sous #app (outils/cloisonner-css.py) place les règles
   de l'application au-dessus de celles du thème, mais ne protège que les
   propriétés que l'application déclare. Une règle de thème portant sur une
   propriété que l'application ne fixe nulle part s'applique quand même :
   « .grid > *{position:absolute;top:0;left:0} » suffisait à faire sortir le
   champ « Note sur 50 » de son conteneur et à le dessiner par-dessus les deux
   lignes suivantes du bilan des connaissances.
   On remet donc à zéro, à l'intérieur de l'application seulement, les
   propriétés qui arrachent un élément à son flux. Toutes les règles de
   l'application qui ont besoin de positionner quelque chose passent par une
   classe : leur spécificité (1,1,0) l'emporte sur « #app * » (1,0,0), quel que
   soit l'ordre de chargement. Contrôlé par test-theme.mjs. */
#app, #app *, #app *::before, #app *::after{
  position:static!important; inset:auto!important; float:none!important; clear:none!important; transform:none!important;
  /* Un conteneur écrasé à hauteur nulle laisse son contenu se dessiner
     par-dessus la ligne suivante, exactement comme un élément sorti du flux.
     « auto » est la valeur par défaut : remettre celle-là ne retire rien.
     Pas de marge ni de largeur ici — l'application en pose en style en ligne,
     qu'un !important écraserait. */
  height:auto!important; max-height:none!important;
}

/* Les propriétés flex, remises à leur valeur initiale — SANS !important, et
   c'est délibéré.
   Le cas réel : wpness-grid.min.css (grille utilitaire livrée avec le greffon
   Gutentor) définit « .grid{flex-basis:0;flex-grow:1} ». Nos grilles sont des
   enfants d'un conteneur flex EN COLONNE : dans ce sens-là, flex-basis fixe la
   hauteur. Le conteneur s'écrasait donc à 1 px et son champ se dessinait
   par-dessus les deux lignes suivantes du bilan des connaissances.
   Pas de !important ici parce que l'application pose « flex » en style en
   ligne à sept endroits, et qu'un !important dans la feuille l'écraserait.
   Ce n'est pas un affaiblissement : « #app * » porte un identifiant, sa
   spécificité (1,0,0) l'emporte déjà sur toute règle de classe du thème. */
#app *{ flex:0 1 auto; }

/* La même règle de Gutentor pose 15 px de remplissage latéral sur « .grid ».
   L'application en déclare donc un, pour reprendre la main : notre sélecteur
   est plus spécifique, l'ordre de chargement n'entre plus en jeu. */
#app .grid{ padding:0; }