/* Salle d'épreuves Bildteil : barre d'outils en haut, planche sur gris neutre au centre, fil de l'image à droite (feuille du bas sur téléphone) */
:root{
  --papier:#f6f6f4; --encre:#1b1c1e; --doux:#5f6166; --trait:#d9d9d6; --carte:#ffffff;
  --gris-neutre:#808080;           /* fond d'épreuve : gris 50 %, sans teinte, pour ne pas fausser l'œil */
  --accent:#345c92; --accent-doux:#e3eaf4;
  --s-avoir:#8a8c90; --s-commentee:#c98a12; --s-correction:#2f6fd0; --s-arevoir:#8a4fc6; --s-validee:#2c8a52;
  --f-titre:"Instrument Serif", Georgia, serif;
  --f-texte:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --papier:#161718; --encre:#ececea; --doux:#a2a4a8; --trait:#2e3033; --carte:#1f2022;
  --gris-neutre:#5c5c5c; --accent:#7ea3dc; --accent-doux:#22324a;
  --s-avoir:#8d8f93; --s-commentee:#e2a634; --s-correction:#5f97ee; --s-arevoir:#b384e6; --s-validee:#4fb879;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --papier:#161718; --encre:#ececea; --doux:#a2a4a8; --trait:#2e3033; --carte:#1f2022;
  --gris-neutre:#5c5c5c; --accent:#7ea3dc; --accent-doux:#22324a;
  --s-avoir:#8d8f93; --s-commentee:#e2a634; --s-correction:#5f97ee; --s-arevoir:#b384e6; --s-validee:#4fb879;
  color-scheme:dark}
html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--f-texte);font-size:14px;line-height:1.45;display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:12px}

.bandeau{background:var(--accent);color:#fff;font-size:12.5px;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bandeau b{font-weight:600}
.bandeau button{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:4px;padding:1px 8px;font-size:12px;margin-left:auto}

header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--trait)}
.titre{display:flex;align-items:baseline;gap:10px;min-width:0}
.titre h1{font-family:var(--f-titre);font-weight:400;font-size:26px;margin:0;letter-spacing:.2px}
.titre span{color:var(--doux);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avance{display:flex;align-items:center;gap:10px;margin-left:auto}
.barre{display:flex;width:180px;height:6px;border-radius:3px;overflow:hidden;background:var(--trait)}
.barre i{display:block;height:100%}
.legende{display:flex;gap:10px;flex-wrap:wrap;color:var(--doux);font-size:12px}
.legende span{display:inline-flex;align-items:center;gap:5px}
.pt{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.role{display:inline-flex;border:1px solid var(--trait);border-radius:6px;overflow:hidden}
.role button{border:0;background:transparent;padding:5px 10px;font-size:13px}
.role button[aria-pressed="true"]{background:var(--encre);color:var(--papier)}
.cloche{position:relative;border:1px solid var(--trait);background:transparent;border-radius:6px;padding:5px 10px}
.cloche b{position:absolute;top:-6px;right:-6px;background:var(--s-commentee);color:#fff;border-radius:9px;font-size:11px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px}

.outils{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.seg{display:inline-flex;border:1px solid var(--trait);border-radius:6px;overflow:hidden;background:var(--carte)}
.seg button{border:0;background:transparent;padding:5px 11px;font-size:13px}
.seg button+button{border-left:1px solid var(--trait)}
.seg button[aria-pressed="true"]{background:var(--accent-doux);color:var(--accent);font-weight:600}
.astuce{color:var(--doux);font-size:12px}
kbd{font-family:var(--f-num);font-size:11px;border:1px solid var(--trait);border-bottom-width:2px;border-radius:3px;padding:0 4px;background:var(--carte)}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav button{border:1px solid var(--trait);background:var(--carte);border-radius:6px;width:30px;height:30px}
.nav .num{min-width:92px;text-align:center}
#rideau{width:160px;accent-color:var(--accent)}

main{flex:1;display:flex;min-height:0}
.scene{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--gris-neutre)}
.plateau{flex:1;min-height:0;display:grid;place-items:center;padding:30px 20px 20px;position:relative}
.double{position:relative;box-shadow:0 2px 18px rgba(0,0,0,.28);height:100%;max-height:100%;max-width:100%;background:#fff}
.double img.couche{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.double[data-vue="o"] .a{visibility:hidden}
.pli{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,.12);pointer-events:none}
.ligne-rideau{position:absolute;top:-8px;bottom:-8px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none;transform:translateX(-1px)}
.ligne-rideau::before,.ligne-rideau::after{position:absolute;top:-2px;font:600 10px var(--f-texte);color:#fff;background:rgba(0,0,0,.55);padding:1px 5px;border-radius:3px;white-space:nowrap}
.ligne-rideau::before{content:"Original";right:6px}
.ligne-rideau::after{content:"Actinic";left:6px}
.etiquette-vue{position:absolute;top:-19px;left:0;color:#fff;font-size:11.5px;font-weight:500;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cadre{position:absolute;border:0;background:transparent;padding:0}
.cadre::after{content:"";position:absolute;inset:0;border:2px solid transparent;transition:border-color .12s}
.cadre:hover::after,.cadre.survol::after{border-color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.cadre.actif::after{border-color:var(--accent);box-shadow:inset 0 0 0 1px #fff}
.puce{position:absolute;top:5px;right:5px;max-width:calc(100% - 10px);overflow:hidden;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.94);color:#1b1c1e;border-radius:10px;padding:2px 7px 2px 5px;font-size:10.5px;line-height:1.2;font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap}
.puce .pt{width:7px;height:7px}
.puce.seul{padding:3px}
.page .cadre.plein .puce{top:10px}

.pellicule{display:flex;gap:10px;overflow-x:auto;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:color-mix(in srgb,var(--gris-neutre) 82%,#000)}
.vignette{flex:none;border:0;padding:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;color:#eee}
.vignette .mini{display:flex;height:52px;outline:2px solid transparent;outline-offset:2px}
.vignette .mini img{height:100%;width:auto}
.vignette[aria-current="true"] .mini{outline-color:#fff}
.vignette .num{font-size:10.5px;display:flex;align-items:center;gap:4px}

aside{width:420px;flex:none;border-left:1px solid var(--trait);background:var(--carte);display:flex;flex-direction:column;min-height:0}
aside[hidden]{display:none}
.tete{display:flex;gap:10px;align-items:flex-start;padding:14px 16px 10px;border-bottom:1px solid var(--trait)}
.tete h2{font-size:16px;font-weight:600;margin:0;word-break:break-all}
.tete .ou{color:var(--doux);font-size:12px}
.tete .fermer{margin-left:auto;border:0;background:transparent;font-size:20px;line-height:1;padding:2px 6px;color:var(--doux)}
.statut{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:12px;padding:2px 9px;margin-top:6px}
.defile{flex:1;overflow-y:auto;min-height:0}
.visionneuse{background:var(--gris-neutre);padding:14px;display:flex;flex-direction:column;gap:10px}
.scene-img{position:relative;align-self:center;max-width:100%;line-height:0}
.scene-img.reperage{cursor:crosshair}
.scene-img img{max-width:100%;max-height:min(300px,34vh);display:block}
.cote{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cote figure{margin:0;display:flex;flex-direction:column;gap:4px;color:#f2f2f2;font-size:11px}
.cote img{width:100%;display:block}
.repere{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--s-commentee);color:#fff;font:600 11px/22px var(--f-texte);text-align:center;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.4);pointer-events:none}
.repere.neuf{background:var(--accent)}
.commandes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.commandes .seg{background:rgba(255,255,255,.92);border-color:transparent}
.commandes .seg button{color:#1b1c1e;font-size:12px;padding:4px 9px}
.commandes .seg button[aria-pressed="true"]{background:#1b1c1e;color:#fff}
.btn-gris{border:0;background:rgba(255,255,255,.92);color:#1b1c1e;border-radius:6px;padding:4px 9px;font-size:12px}
.btn-gris[aria-pressed="true"]{background:#1b1c1e;color:#fff}
.note{font-size:12px;color:#f4f4f4;background:rgba(0,0,0,.28);padding:6px 9px;border-radius:5px}

.fil{padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.fil h3,.ecrire h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin:0;font-weight:600}
.msg{display:grid;grid-template-columns:28px 1fr;gap:8px}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff}
.msg .meta{font-size:12px;color:var(--doux);display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.msg .meta b{color:var(--encre);font-weight:600}
.msg p{margin:2px 0 0}
.ver{font-family:var(--f-num);font-size:10.5px;border:1px solid var(--trait);border-radius:3px;padding:0 4px}
.exemple{font-size:10.5px;color:var(--doux);font-style:italic}
.etiq{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.etiq span{font-size:11.5px;background:var(--accent-doux);color:var(--accent);border-radius:10px;padding:1px 8px}
.vide{color:var(--doux);font-size:13px}
.systeme{font-size:12px;color:var(--doux);border-left:2px solid var(--trait);padding-left:10px}

.ecrire{max-height:44%;overflow-y:auto;flex:none;border-top:1px solid var(--trait);padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px}
.puces-choix{display:flex;gap:5px;flex-wrap:wrap}
.puces-choix button{border:1px solid var(--trait);background:transparent;border-radius:14px;padding:2px 9px;font-size:12px}
.puces-choix button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
textarea{width:100%;box-sizing:border-box;min-height:52px;resize:vertical;border:1px solid var(--trait);border-radius:6px;padding:8px 10px;font:inherit;font-size:16px;background:var(--papier);color:var(--encre)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--trait);background:var(--carte);border-radius:6px;padding:7px 12px;font-size:13px;font-weight:500}
.btn.plein{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.vert{background:var(--s-validee);border-color:var(--s-validee);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.repere-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-doux)}

.boite{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--carte);border-left:1px solid var(--trait);box-shadow:-8px 0 30px rgba(0,0,0,.18);z-index:30;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.boite .tete h2{font-family:var(--f-titre);font-weight:400;font-size:22px}
.section{padding:12px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--trait)}
.section h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin:0;font-weight:600}
.ligne{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:baseline;border:0;background:transparent;text-align:left;padding:6px 4px;border-radius:5px}
.ligne:hover{background:var(--accent-doux)}
.ligne small{color:var(--doux);display:block}
.ligne.lu{opacity:.62}
.depot{border:1.5px dashed var(--trait);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px}
.depot p{margin:0;color:var(--doux);font-size:12.5px}
.etapes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.etapes li{display:flex;gap:8px;align-items:baseline}
.etapes li::before{content:"○";color:var(--doux);width:12px}
.etapes li.ok::before{content:"✓";color:var(--s-validee)}
.etapes li.encours::before{content:"…";color:var(--accent)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--encre);color:var(--papier);padding:9px 14px;border-radius:7px;font-size:13px;z-index:40;box-shadow:0 6px 24px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.toast small{display:block;opacity:.7;font-size:11.5px}

.porte{position:fixed;inset:0;z-index:50;background:var(--papier);display:grid;place-items:center;overflow-y:auto;padding-block:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.porte form{width:min(380px,100%);display:flex;flex-direction:column;gap:14px}
.porte h1{font-family:var(--f-titre);font-weight:400;font-size:44px;margin:0;line-height:1}
.porte .sous{color:var(--doux);margin:0}
.porte label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
.porte input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--trait);border-radius:7px;background:var(--carte);color:var(--encre);width:100%;box-sizing:border-box}
.porte input.code{font-family:var(--f-num);font-size:26px;letter-spacing:.4em;text-align:center;padding:10px 0 10px .4em}
.porte .btn{padding:10px 14px;font-size:14px}
.porte .err{color:#c0392b;font-size:13px;margin:0}
.porte .info{font-size:12.5px;color:var(--doux);margin:0;line-height:1.5}
.porte .demo{font-size:12.5px;background:var(--accent-doux);color:var(--accent);border-radius:6px;padding:7px 10px;margin:0}
.porte .lien{border:0;background:transparent;color:var(--accent);padding:0;font-size:13px;text-decoration:underline;align-self:flex-start}
.cadenas{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--doux);border-top:1px solid var(--trait);padding-top:12px}

@media (max-width:900px){
  aside{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:86%;border-left:0;border-top:1px solid var(--trait);border-radius:12px 12px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);z-index:20;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .scene-img img{max-height:220px}
  aside{overflow-y:auto;overscroll-behavior:contain}
  aside .tete{position:sticky;top:0;z-index:2;background:var(--carte)}
  aside .defile{flex:none;overflow:visible}
  aside .ecrire{max-height:none;overflow:visible}
  .barre{width:110px}
  .legende{display:none}
  .nav{margin-left:0}
  .plateau{padding:10px}
  .double{max-height:none}
}
@media (hover:none){.astuce{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- ajouts de la version en ligne --- */
.attente{color:#fff;font-size:14px}
.variantes-planche{display:inline-flex;gap:6px;align-items:center;color:var(--doux);font-size:12.5px}
.envoi{font-size:11.5px;color:var(--doux)}
.envoi.retard{color:var(--s-commentee);font-weight:600}
.msg.en-cours{opacity:.7}
.menu-tel{position:relative}
.menu-tel>.liste{position:absolute;right:0;top:calc(100% + 6px);background:var(--carte);border:1px solid var(--trait);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:25;min-width:300px;padding:6px;display:flex;flex-direction:column}
.menu-tel a{color:var(--encre);text-decoration:none;padding:8px 10px;border-radius:6px;display:flex;justify-content:space-between;gap:12px;font-size:13px}
.menu-tel a:hover{background:var(--accent-doux)}
.menu-tel a small{color:var(--doux)}
.qui-suis-je{color:var(--doux);font-size:12.5px}
.lien-discret{border:0;background:transparent;color:var(--accent);padding:0;font-size:12.5px;text-decoration:underline}
.choix-var{display:flex;gap:6px;flex-wrap:wrap}
.choix-var .btn[aria-pressed="true"]{border-color:var(--s-validee);color:var(--s-validee);background:color-mix(in srgb,var(--s-validee) 12%,transparent);font-weight:600}
.journal td,.journal th{font-size:12px;text-align:left;padding:3px 6px;border-bottom:1px solid var(--trait);vertical-align:top}
.journal{border-collapse:collapse;width:100%}
.tableau{overflow-x:auto}