/* =============================================================================
   Théâtre d'ombre augmenté — styles (direction « Papier & lanterne », Claude Design)
   Règles : texte de 16 px minimum, contrastes WCAG AA, cibles de 44 px,
   jamais la couleur seule (toujours un mot ou une icône), polices système uniquement.
   ============================================================================= */

/* ---- Jetons (tokens.css de Claude Design) ---------------------------------- */
:root {
  /* Surfaces et texte */
  --fond: #F7F1E5;          /* texte 15,4:1 */
  --carte: #FFFDF8;         /* texte-doux 7,5:1 */
  --texte: #1E1A16;
  --texte-doux: #5C5247;    /* 6,8:1 sur --fond */
  --bord: #D9CCB6;
  --gris-clair: #EFE7D8;
  --nuit: #241E1A;          /* blanc 16,5:1 — bande du haut */
  /* Actions */
  --bleu: #1F4E99;          /* blanc 8,1:1 */
  --bleu-fonce: #163A73;
  --bleu-pale: #EAF0FA;
  --rouge: #B3261E;         /* blanc 6,5:1 — Tout éteindre */
  --rouge-fonce: #8C1D17;
  --rouge-clair: #FBE4E1;
  --vert: #2E6B30;          /* blanc 6,4:1 */
  --vert-clair: #E3F0DF;
  --orange: #8A4F00;        /* aussi anneau de focus */
  --orange-clair: #FBEBCB;
  /* Scène du spectacle */
  --velours: #8E1B24;
  --velours-clair: #B42A35;
  --velours-ombre: #4A0D13;
  --or: #E9C46A;
  /* Forme */
  --rayon: 10px;
  --rayon-petit: 6px;
  --ombre: 0 1px 0 var(--bord), 0 3px 8px rgba(60, 40, 20, .10);
  --ombre-menu: 0 1px 0 var(--bord), 0 6px 16px rgba(60, 40, 20, .14);
  --ombre-fenetre: 0 12px 40px rgba(0, 0, 0, .35);
  --focus: 0 0 0 2px var(--fond), 0 0 0 5px var(--orange);
  --police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-titre: Georgia, "Times New Roman", serif;
  --police-code: Consolas, "Courier New", monospace;
  --hauteur-cible: 44px;
  --bande: 60px;
  font-size: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.4;
}
h1, h2, h3 { line-height: 1.15; margin: 0; }
h2, h3 { font-family: var(--police-titre); }
a { color: var(--bleu); }
code, kbd { font-family: var(--police-code); }
:focus-visible { outline: none; box-shadow: var(--focus); }
.spacer { flex: 1; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; display: block; }
[data-icon] { display: inline-flex; flex: none; }
.hint { color: var(--texte-doux); margin: .3rem 0; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Boutons ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--hauteur-cible);
  padding: 0 16px;
  border-radius: var(--rayon-petit);
  border: 2px solid transparent;
  font: 600 1rem/1.1 var(--police);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled {
  background: #E4DACA; color: var(--texte-doux);
  border: 2px dashed #B8A98F; cursor: not-allowed;
}
.btn-primary { background: var(--bleu); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--bleu-fonce); }
.btn-primary:active:not(:disabled) { background: var(--bleu-fonce); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25); }
.btn-secondary { background: var(--carte); color: var(--bleu); border-color: var(--bleu); }
.btn-secondary:hover:not(:disabled) { background: var(--bleu-pale); color: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.btn-secondary:active:not(:disabled) { background: #D6E2F5; }
.btn-secondary:disabled { background: var(--gris-clair); }
.btn-neutral { background: var(--carte); color: var(--texte); border-color: var(--bord); }
.btn-neutral:hover:not(:disabled) { border-color: var(--texte-doux); }
.btn-go { background: var(--vert); color: #fff; }
.btn-go:hover:not(:disabled) { background: #23521F; }
.btn-stop { background: var(--carte); color: var(--vert); border-color: var(--vert); }
.btn-danger { background: var(--rouge); color: #fff; font-weight: 700; }
.btn-danger:hover { background: var(--rouge-fonce); }
.btn-danger:active { background: var(--rouge-fonce); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); }
.btn-dark { background: transparent; color: #F7F1E5; border-color: #5C5247; }
.btn-dark:hover { border-color: var(--or); }
.btn-big { min-height: 52px; font-size: 1.125rem; font-weight: 700; }
.btn-small { min-height: 40px; padding: 0 12px; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: var(--rayon-petit); border: 2px solid var(--bord);
  background: var(--carte); color: var(--texte); cursor: pointer;
}
.icon-btn:hover { border-color: var(--texte-doux); }
.icon-btn.danger { color: var(--rouge); }
.link-button, .link-icon {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: .5rem; cursor: pointer;
  font: 600 1rem var(--police); color: var(--bleu); text-decoration: underline;
}
input[type="text"], input[type="password"], input[type="number"], select {
  font: 1rem var(--police);
  min-height: var(--hauteur-cible);
  padding: 0 12px;
  border-radius: var(--rayon-petit);
  border: 2px solid var(--bord);
  background: var(--carte);
  color: var(--texte);
}
input::placeholder { color: var(--texte-doux); }
input:focus, select:focus { outline: none; border-color: var(--texte); box-shadow: 0 0 0 3px var(--or); }
.form-error { color: var(--rouge); font-weight: 600; margin: .3rem 0; }
.form-error:empty { display: none; }

/* ---- Bande 1 (sombre) ------------------------------------------------------------ */
.band1 {
  position: sticky; top: 0; z-index: 100; /* au-dessus de la boîte à outils de Blockly (z 70) */
  display: flex; align-items: center; gap: 10px;
  height: var(--bande); padding: 0 16px;
  background: var(--nuit); color: #F7F1E5;
}
.logo { display: block; width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 0 0 2px #5C5247; }
.status { display: flex; gap: 8px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 999px;
  border: none; font: 1rem var(--police); white-space: nowrap;
  background: var(--gris-clair); color: var(--texte);
}
.pill b { font-weight: 700; }
.pill-word::before { content: "· "; }
.pill[data-state="on"] { background: var(--vert-clair); color: var(--vert); }
.pill[data-state="off"], .pill[data-state="busy"] { background: var(--orange-clair); color: var(--orange); }
.pill[data-state="neutral"] { background: var(--gris-clair); color: var(--texte); }
.pill[data-state="warn"] { background: var(--rouge-clair); color: var(--rouge); }
button.pill { cursor: pointer; }
button.pill:hover { box-shadow: 0 0 0 2px #F7F1E5; }
/* Carte à connecter : le mot « Connecter » est un vrai appel à l'action. */
#pill-board[data-state="off"] .pill-word { font-weight: 700; }
.menu { position: relative; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px; border-radius: var(--rayon-petit);
  border: 2px solid #5C5247; background: transparent; color: #F7F1E5;
  font: 1rem var(--police); cursor: pointer; white-space: nowrap;
}
.menu-btn:hover { border-color: var(--or); }
.menu-btn.icon-only { width: 44px; padding: 0; justify-content: center; }
.menu-btn .chev { color: #D9CCB6; } /* l'icône « chevron » pointe vers le bas */
.team-names { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.save-state { display: inline-flex; align-items: center; gap: 6px; }
.save-state[data-dirty="true"] { color: var(--or); }
.save-state[data-dirty="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or); }
.save-state[data-dirty="false"] { color: #A6D49F; }
.menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 260px; padding: 6px;
  background: var(--carte); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre-menu);
  display: grid;
}
.menu-list.menu-right { left: auto; right: 0; }
.menu-list > * {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px; border-radius: var(--rayon-petit);
  border: none; background: none; color: var(--texte); text-decoration: none;
  font: 1rem var(--police); text-align: left; cursor: pointer;
}
.menu-list > *:hover, .menu-list > *:focus-visible { background: var(--gris-clair); }
.menu-list kbd { margin-left: auto; font-size: .875rem; color: var(--texte-doux); }

/* ---- Bande 2 (papier) : étapes + commandes -------------------------------------- */
.band2 {
  position: sticky; top: var(--bande); z-index: 90;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--bande); padding: 0 16px;
  background: var(--carte); border-bottom: 1px solid var(--bord);
}
.steps { display: flex; align-items: center; gap: 4px; }
.step {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px 0 8px; border-radius: var(--rayon-petit);
  border: none; background: none; color: var(--texte);
  font: 600 1rem var(--police); cursor: pointer; white-space: nowrap;
}
.step:hover { background: var(--gris-clair); }
.step-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #5C5247; font-weight: 700;
}
.step[aria-current="step"] { background: var(--bleu); color: #fff; font-weight: 700; }
.step[aria-current="step"] .step-num { background: #fff; color: var(--bleu); border-color: #fff; }
.step.is-done { color: var(--vert); }
.step.is-done .step-num { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--vert); font-size: 0; }
.step.is-done .step-num::after { content: "✓"; font-size: 1rem; }
.step-sep { color: var(--bord); transform: rotate(-90deg); }
.screen-actions { display: none; align-items: center; gap: 10px; }
body[data-step="entrainer"] .screen-actions[data-for="entrainer"],
body[data-step="programmer"] .screen-actions[data-for="programmer"],
body[data-step="spectacle"] .screen-actions[data-for="spectacle"] { display: flex; }
#new-category label { font-weight: 600; }
#new-category input { width: 200px; }

/* Sélecteur de niveau segmenté */
.level-switch { display: flex; align-items: center; gap: 10px; }
.level-label { font-weight: 600; }
.segments { display: inline-flex; border: 2px solid var(--bord); border-radius: var(--rayon-petit); overflow: hidden; background: var(--carte); }
.segments > button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border: none; border-left: 2px solid var(--bord);
  background: none; color: var(--texte); font: 1rem var(--police); cursor: pointer; white-space: nowrap;
}
.segments > button:first-child { border-left: none; }
.segments > button:hover:not(:disabled) { background: var(--gris-clair); }
.segments > button[aria-checked="true"], .segments > button[aria-selected="true"] {
  background: var(--bleu-pale); color: var(--bleu-fonce); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--bleu), inset -2px 0 0 var(--bleu);
}
.segments > button[aria-checked="true"]::before { content: "✓"; }
.segments > button:disabled { color: var(--texte-doux); cursor: not-allowed; background: var(--gris-clair); }
.level-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-doux); }
.run-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--vert); }
.run-state[data-running="true"]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--vert); }

/* ---- Bandeau de message ----------------------------------------------------------- */
.banner {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 16px 0; padding: 8px 8px 8px 16px;
  border-radius: var(--rayon); border: 2px solid var(--rouge);
  background: var(--rouge-clair); color: var(--texte); font-weight: 600;
}
.banner .banner-icon { color: var(--rouge); }
.banner[data-kind="info"] { border-color: var(--bleu); background: var(--bleu-pale); }
.banner[data-kind="info"] .banner-icon { color: var(--bleu); }
.banner[data-kind="ok"] { border-color: var(--vert); background: var(--vert-clair); }
.banner[data-kind="ok"] .banner-icon { color: var(--vert); }
#banner-text { flex: 1; }
.banner-close { margin-left: auto; }

/* ---- Écrans ------------------------------------------------------------------------- */
main { padding: 16px; }
.screen { min-width: 0; }

/* Panneau webcam (partagé, déplacé d'un écran à l'autre) */
.camera-panel { display: grid; gap: 8px; min-width: 0; }
.video-wrap {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--rayon); border: 1px solid var(--bord);
  background: radial-gradient(ellipse at 50% 42%, #FFF8E6 0%, #F3E2B8 55%, #DFC892 100%);
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-wrap.is-hidden video { visibility: hidden; }
.video-msg {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  text-align: center; font-weight: 600; color: #F7F1E5; background: rgba(36, 30, 26, .82);
}
.video-hidden-msg {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  text-align: center; font-weight: 600; color: #F7F1E5; background: var(--nuit);
}
.live-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--nuit); color: #F7F1E5; font-weight: 600;
}
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--or); }
.btn-overlay { position: absolute; top: 12px; right: 12px; }
.camera-row:not(:has(:not([hidden]))) { display: none; }
.seen { margin: 4px 0 0; font: 700 1.5rem var(--police-titre); color: var(--texte-doux); }
.seen[data-seen="true"] { color: var(--vert); }
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 56px; gap: 12px; align-items: center; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row[data-seen="true"] .bar-name, .bar-row[data-seen="true"] .bar-value { font-weight: 700; color: var(--vert); }
.bar { position: relative; height: 16px; border-radius: 4px; background: var(--gris-clair); border: 1px solid var(--bord); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--vert); transition: width .1s linear; }
.bar-threshold { position: absolute; top: -1px; bottom: -1px; width: 3px; background: var(--texte); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.bar-value.is-missing { text-align: left; grid-column: 2 / 4; }
.neighbours-box summary {
  display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  min-height: 44px; font-weight: 600; color: var(--bleu);
}
.neighbours-box summary::-webkit-details-marker { display: none; }
.neighbours-box summary small { font-weight: 400; color: var(--texte-doux); }
summary .chev { transform: rotate(-90deg); transition: transform .12s; } /* fermé : vers la droite */
details[open] > summary .chev { transform: none; } /* ouvert : vers le bas */
.cat-row .ico-chevron { transform: rotate(-90deg); }
.neighbours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.neighbour { margin: 0; text-align: center; font-size: .875rem; border: 2px solid var(--bord); border-radius: 6px; padding: 2px; background: var(--carte); }
.neighbour[data-seen="true"] { border-color: var(--vert); }
.neighbour img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 4px; }
.neighbour figcaption { display: grid; line-height: 1.2; }
.n-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-sim { color: var(--texte-doux); font-size: .875rem; }

/* ---- 1. Entraîner ------------------------------------------------------------------------ */
.train-layout { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); gap: 20px; align-items: start; }
.categories { display: grid; gap: 12px; min-width: 0; }
.cat-open {
  display: grid; gap: 12px; padding: 16px;
  background: var(--carte); border: 2px solid var(--bleu); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.cat-head { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; }
.cat-thumb {
  width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #FFF8E6, #E8D6A8);
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.category-name { font: 700 1.5rem var(--police-titre); }
.cat-current { color: var(--bleu); font-weight: 600; }
.category-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--orange); margin-top: 4px; }
.category-count[data-ok="true"] { color: var(--vert); }
.progress { height: 8px; margin-top: 6px; border-radius: 4px; background: var(--gris-clair); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--vert); }
.cat-tools { display: flex; gap: 8px; }
.btn-capture { width: 100%; min-height: 56px; font-size: 1.125rem; font-weight: 700; user-select: none; touch-action: none; }
.btn-capture small { font-size: 1rem; font-weight: 400; }
.btn-capture.is-capturing { background: var(--rouge); }
.thumbs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.thumbs:empty { display: none; }
.thumb { position: relative; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; }
.thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.thumb:hover, .thumb:focus-visible { border-color: var(--rouge); }
.thumb:hover::after, .thumb:focus-visible::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  background: rgba(179, 38, 30, .55) url("../img/icones/supprimer.svg") center / 50% no-repeat;
  filter: none;
}
.thumbs-more { grid-column: 1 / -1; color: var(--texte-doux); font-size: .95rem; }
.why { border-radius: var(--rayon-petit); background: var(--orange-clair); }
.why summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  list-style: none; cursor: pointer; font-weight: 600;
}
.why summary::-webkit-details-marker { display: none; }
.why summary [data-icon="aide"] { color: var(--orange); }
.why summary .chev { margin-left: auto; }
.why p { margin: 0; padding: 0 12px 12px 42px; }
.cat-list { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.cat-row {
  display: grid; grid-template-columns: 40px 120px 1fr auto 18px; gap: 14px; align-items: center;
  width: 100%; min-height: 58px; padding: 8px 12px;
  border: none; border-top: 1px solid var(--gris-clair); background: none;
  font: 1rem var(--police); color: var(--texte); text-align: left; cursor: pointer;
}
.cat-row:first-child { border-top: none; }
.cat-row:hover { background: var(--fond); }
.cat-row .cat-thumb { width: 40px; height: 40px; border-radius: 6px; }
.cat-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .row-state { display: inline-flex; align-items: center; gap: 6px; color: var(--vert); }
.cat-row .row-state[data-ok="false"] { color: var(--orange); }
.cat-row .row-note { color: var(--texte-doux); }
.hint-empty { padding: 16px; border: 2px dashed var(--bord); border-radius: var(--rayon); color: var(--texte-doux); }

/* ---- 2. Programmer -------------------------------------------------------------------------- */
.program-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.program-side { position: relative; display: grid; gap: 10px; min-width: 0; }
.program-side .seen { font-size: 1.375rem; }
.program-side .video-wrap { aspect-ratio: auto; height: 240px; }
.program-side .bar-row { grid-template-columns: 90px 1fr 48px; }
.program-side .bar { height: 14px; }
.program-side .neighbours-box { display: none; }
.program-side .live-badge { display: none; }
.program-side .btn-overlay { width: 44px; padding: 0; }
.program-side .btn-overlay .label { display: none; }
.btn-collapse { position: absolute; top: 12px; left: 12px; z-index: 2; }
.side-sep { height: 1px; background: var(--bord); margin: 4px 0; }
.leds-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.leds-head h3 { font: 700 1rem var(--police); }
.btn-cablage { min-height: 40px; padding: 0 10px; }
.board-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pin {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px;
  border-radius: var(--rayon-petit); border: 2px solid var(--bord); background: var(--carte);
  color: var(--texte-doux);
}
.pin-led { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--texte-doux); flex: none; }
.pin[data-on="true"] { background: var(--orange-clair); border-color: var(--or); color: var(--texte); font-weight: 700; }
.pin[data-on="true"] .pin-led { background: #F5B700; border-color: #F5B700; box-shadow: 0 0 8px 2px rgba(245, 183, 0, .7); }
.sound-line {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 0;
  border: 2px dashed #B8A98F; border-radius: var(--rayon-petit); background: var(--carte);
}
.sound-line.is-over { background: var(--bleu-pale); border-color: var(--bleu); }
.sound-open {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 40px; padding: 0 10px;
  border: none; background: none; font: 1rem var(--police); color: var(--texte); cursor: pointer; text-align: left;
}
.sound-summary { color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-add { padding: 8px 10px; font-weight: 700; color: var(--bleu); cursor: pointer; white-space: nowrap; border-radius: var(--rayon-petit); }
.sound-add:hover { background: var(--bleu-pale); }

/* Webcam réduite (niveau 3 par défaut) : bande d'état */
.cam-strip {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 12px; margin-bottom: 12px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.strip-video { width: 72px; height: 52px; object-fit: cover; border-radius: 6px; background: #E8D6A8; flex: none; }
.strip-seen { margin: 0; font: 700 1.25rem var(--police-titre); color: var(--texte-doux); white-space: nowrap; }
.strip-seen[data-seen="true"] { color: var(--vert); }
.strip-seen small { font: 600 1rem var(--police); }
.strip-sep { width: 1px; align-self: stretch; background: var(--bord); }
.strip-title { color: var(--texte-doux); white-space: nowrap; }
.strip-leds { display: flex; gap: 6px; }
.strip-leds .pin { min-height: 40px; }
.program-layout.is-collapsed { grid-template-columns: minmax(0, 1fr); }
.program-layout.is-collapsed .program-side {
  position: absolute !important; left: -10000px; width: 340px; /* hors écran : la webcam continue de tourner */
}

/* Espace de blocs */
.program-main { min-width: 0; display: grid; gap: 12px; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
body[data-niveau="3"] .code-row { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
.blockly-area {
  height: calc(100vh - 2 * var(--bande) - 48px); min-height: 440px;
  border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; background: var(--carte);
}
body:not([data-niveau="1"]) .blockly-area { height: calc(100vh - 2 * var(--bande) - 48px - 162px); min-height: 380px; }
body[data-niveau="3"] .blockly-area { height: calc(100vh - 2 * var(--bande) - 48px - 162px - 76px); }
.blocklyMainBackground { fill: var(--carte) !important; }
.blocklyToolboxDiv, .blocklyToolbox { background: var(--gris-clair) !important; }
.blocklyToolboxCategory, .blocklyTreeRow { min-height: 44px !important; display: flex !important; align-items: center; }
.blocklyToolboxCategoryLabel, .blocklyTreeLabel { font: 1rem var(--police) !important; color: var(--texte) !important; }
.blocklyToolboxCategoryIcon, .blocklyTreeIcon { display: none !important; }
.blocklySelected > .blocklyPath { stroke: var(--texte) !important; stroke-width: 3px !important; filter: drop-shadow(0 0 3px var(--or)); }
.bloc-incomplet > .blocklyPath { stroke: var(--rouge) !important; stroke-width: 4px !important; }
.blocklyZoom > image, .blocklyTrash { opacity: .85; }

/* Niveau 3 : code C++ */
body:not([data-niveau="3"]) .only-level3 { display: none !important; }
body[data-niveau="1"] .only-level2 { display: none !important; }
.cpp-panel {
  display: flex; flex-direction: column; min-width: 0;
  height: calc(100vh - 2 * var(--bande) - 48px - 162px - 76px); min-height: 380px;
  background: var(--nuit); color: #F7F1E5; border-radius: var(--rayon); overflow: hidden;
}
.cpp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-bottom: 1px solid #3A322B; }
.cpp-head h3, .cpp-ro { white-space: nowrap; }
.cpp-head h3 { font: 700 1.125rem var(--police); }
.cpp-ro { display: inline-flex; align-items: center; gap: 6px; color: var(--bord); }
.cpp-code {
  flex: 1; margin: 0; padding: 8px 0 8px 52px; overflow: auto;
  font: 1rem/24px var(--police-code); white-space: pre;
}
.cpp-code li { padding-right: 12px; cursor: pointer; color: #F7F1E5; }
.cpp-code li::marker { color: #A89A88; font-size: .9rem; }
.cpp-code li:hover { background: #2E2722; }
.cpp-code li.is-linked { background: #4A3D24; box-shadow: inset 4px 0 0 var(--or), -52px 0 0 #4A3D24; }
.c-com { color: #B8A98F; font-style: italic; }
.c-str { color: #F3D58A; }
.c-num { color: #F3D58A; }
.c-kw { color: var(--or); font-weight: 700; }
.c-type { color: var(--or); }
.c-fn { color: #F7F1E5; }
.cpp-explain { background: #3A322B; }
.cpp-explain summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; }
.cpp-explain summary::-webkit-details-marker { display: none; }
.cpp-explain summary [data-icon="aide"] { color: var(--or); }
.cpp-explain summary .chev { margin-left: auto; }
.cpp-explain p { margin: 0 12px 10px; }
.cpp-explain[open] { max-height: 45%; overflow: auto; }

/* Messages / Variables (onglets) */
.program-output { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.output-tabs { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--bord); }
.output-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
  border: none; border-bottom: 3px solid transparent; background: none;
  font: 600 1rem var(--police); color: var(--texte-doux); cursor: pointer;
}
.output-tab[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--bleu); }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gris-clair); color: var(--texte); font-size: .875rem; }
.messages, .variables { height: 104px; margin: 0; padding: 6px 12px; overflow-y: auto; }
.messages { list-style: none; font: 1rem/1.6 var(--police-code); }
.messages li { overflow-wrap: anywhere; }
.msg-time { color: var(--texte-doux); margin-right: 8px; }
.variables { display: grid; align-content: start; gap: 4px; }
.var-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 10px; border-radius: 6px; background: #FBE3EE; }
.var-name { font-weight: 700; color: #8C1244; }
.var-value { font: 700 1rem var(--police-code); }

/* ---- 3. Spectacle --------------------------------------------------------------------------- */
.theatre {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr;
  min-height: calc(100vh - 2 * var(--bande) - 48px);
  border-radius: var(--rayon);
  background: radial-gradient(ellipse at 50% 30%, #2E2219, #170F0B 70%);
  color: #F7F1E5;
}
.valance {
  position: relative; z-index: 5; height: 72px; display: grid; place-items: center;
  background: linear-gradient(180deg, #B42A35, #8E1B24 70%, #4A0D13);
  border-bottom: 3px solid var(--or);
}
.valance::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 14px;
  background: radial-gradient(circle at 14px 0, #8E1B24 12px, transparent 13px) 0 0 / 28px 14px repeat-x;
}
#theatre-title {
  font: 700 2rem var(--police-titre); letter-spacing: .04em; color: var(--or); text-align: center; padding: 0 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.spots { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); width: min(600px, 70%); margin: 0 auto; padding: 22px 0 6px; }
.spot { position: relative; display: grid; justify-items: center; gap: 4px; }
.spot-lamp { position: relative; width: 40px; height: 28px; background: #3A322B; border: 2px solid #5C5247; border-radius: 6px 6px 14px 14px; }
.spot-lamp::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 26px; height: 10px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #1E1A16; }
.spot[data-on="true"] .spot-lamp::after { background: #FFE08A; box-shadow: 0 0 14px 4px #FFD25A; }
.spot-label { color: #D9CCB6; }
.spot[data-on="true"] .spot-label { color: #fff; font-weight: 700; }
.spot[data-on="true"]::after {
  content: ""; position: absolute; top: 28px; left: 50%; width: 220px; height: 380px; transform: translateX(-50%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--spot-couleur, #FFD66E) 45%, transparent), transparent 85%);
}
.scene { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 16px; padding: 6px 200px 20px; }
.camera-slot-stage { width: min(600px, 100%); }
.camera-slot-stage .camera-row, .camera-slot-stage .seen, .camera-slot-stage .bars,
.camera-slot-stage .neighbours-box, .camera-slot-stage .live-badge, .camera-slot-stage .btn-overlay { display: none !important; }
.camera-slot-stage .video-wrap {
  border: 10px solid #5A3E26; border-radius: 4px;
  background: radial-gradient(ellipse at 40% 40%, #FFF8E6, #F3E2B8 60%, #E2CC98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.plaque {
  display: grid; justify-items: center; min-width: 360px; padding: 8px 24px 10px;
  background: linear-gradient(180deg, #2E2219, #1A120D); border: 3px solid var(--or); border-radius: var(--rayon);
}
.stage-caption { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--or); }
.stage-name { font: 700 3rem/1.1 var(--police-titre); color: #A89A88; }
.stage-name[data-seen="true"] { color: #F3D58A; animation: entree .4s ease-out; }
@keyframes entree { from { transform: scale(.85); opacity: .3; } to { transform: scale(1); opacity: 1; } }
/* Rideaux : fermés = deux pans jointifs ; ouverts = rangés sur les côtés (0,8 s). */
.curtain {
  position: absolute; top: 72px; bottom: 0; width: 50%; z-index: 4;
  background: repeating-linear-gradient(90deg, #4A0D13 0, #8E1B24 22px, #B42A35 40px, #8E1B24 58px, #4A0D13 80px);
  transition: transform .8s ease-out;
}
.curtain-left { left: 0; border-right: 1px solid #2A070B; }
.curtain-right { right: 0; border-left: 1px solid #2A070B; }
.curtain::after { /* embrasse dorée, visible rideau ouvert */
  content: ""; position: absolute; top: 48%; width: 150px; height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #F3D58A, #B88A2E); opacity: 0; transition: opacity .3s .6s;
}
.curtain-left::after { right: 0; }
.curtain-right::after { left: 0; }
.theatre.is-open .curtain-left { transform: translateX(calc(-100% + 170px)); border-radius: 0 0 60% 0 / 0 0 12% 0; }
.theatre.is-open .curtain-right { transform: translateX(calc(100% - 170px)); border-radius: 0 0 0 60% / 0 0 0 12%; }
.theatre.is-open .curtain::after { opacity: 1; }
.curtain-hint {
  position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px;
  background: var(--nuit); border: 2px solid var(--or); border-radius: var(--rayon);
  color: #F7F1E5; font-size: 1.25rem; font-weight: 600; text-align: center;
}
.curtain-hint [data-icon] { color: var(--or); }
.theatre.is-open .curtain-hint { display: none; }
.only-fullscreen { display: none !important; }
#screen-spectacle.is-fullscreen { background: #140F0C; display: grid; grid-template-rows: 56px 1fr; height: 100vh; }
#screen-spectacle.is-fullscreen .only-fullscreen { display: flex !important; }
.stage-bar { align-items: center; gap: 10px; padding: 0 16px; color: #F7F1E5; }
.stage-bar h2 { font: 700 1.25rem var(--police-titre); }
#screen-spectacle.is-fullscreen .theatre { margin: 0 12px 12px; min-height: 0; border-radius: 8px; }
#screen-spectacle.is-fullscreen .camera-slot-stage { width: min(600px, 100%, calc((100vh - 360px) * 4 / 3)); }

/* ---- Pied de page ---------------------------------------------------------------------------- */
.footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 4px 16px 20px; }
.footer a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: .5rem; }
body.is-start .band2, body.is-start main, body.is-start .footer, body.is-start .team-menu, body.is-start #banner { display: none !important; }

/* ---- Accueil (démarrage) --------------------------------------------------------------------- */
.start-page {
  position: fixed; inset: var(--bande) 0 0 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 24px 72px; border: none; background: var(--fond); color: var(--texte); overflow: auto;
}
.start-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 56px; align-items: center; min-height: 100%; }
.start-illustration { background: var(--nuit); border-radius: var(--rayon); padding: 14px; box-shadow: 0 10px 30px rgba(40, 30, 20, .25); }
.start-screen {
  position: relative; height: 420px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-around; padding: 0 40px;
  background: radial-gradient(ellipse at 50% 42%, #FFF8E6 0%, #F3E2B8 55%, #DFC892 100%);
  border-top: 14px solid #8E1B24;
  border-image: none;
}
.start-screen::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: radial-gradient(circle at 10px -3px, #B42A35 8px, transparent 9px) 0 0 / 20px 14px repeat-x;
}
.sil { fill: #1E1A16; display: block; }
.sil-sorciere { width: 100px; height: 175px; }
.sil-loup { width: 170px; height: 195px; }
.sil-roi { width: 90px; height: 165px; }
.start-form { display: grid; gap: 12px; max-width: 580px; }
.start-form h1 { font: 700 2.5rem/1.1 var(--police-titre); }
.start-sub { margin: 0; font-size: 1.125rem; color: var(--texte-doux); }
.start-label { margin: 8px 0 0; font-weight: 600; }
.start-names { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.start-names input { min-height: 48px; }
.start-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.start-card {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.start-card p { margin: 2px 0 0; color: var(--texte-doux); }
.start-card small { color: var(--texte-doux); font-size: 1rem; }
.start-card-icon { color: var(--orange); }
#start-close { justify-self: start; }

/* ---- Fenêtres et panneaux ------------------------------------------------------------------------ */
.dialog, .side-panel {
  padding: 0; border: none; border-radius: var(--rayon);
  background: var(--carte); color: var(--texte); box-shadow: var(--ombre-fenetre);
}
.dialog::backdrop, .side-panel::backdrop { background: rgba(36, 30, 26, .55); }
.dialog { width: min(800px, 95vw); }
.dialog-small { width: min(560px, 95vw); }
.side-panel {
  position: fixed; inset: 68px 16px 16px auto; margin: 0;
  width: min(720px, 95vw); height: auto; max-height: none;
  display: none; flex-direction: column; overflow: hidden;
}
.side-panel[open] { display: flex; }
.side-panel-narrow { width: min(480px, 95vw); }
.dialog-head { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--bord); }
.dialog-head h2 { font: 700 1.5rem var(--police-titre); }
.dialog-icon { color: var(--orange); }
.dialog-close { margin-left: auto; }
.dialog-body { padding: 16px 20px; display: grid; gap: 10px; line-height: 1.35; }
.side-panel .dialog-body { flex: 1; overflow: auto; align-content: start; }
.dialog-foot { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 12px 20px; background: var(--fond); border-top: 1px solid var(--bord); }
.dialog-body h3 { font-size: 1.375rem; margin-top: 6px; }
.dialog-body p, .dialog-body ul, .dialog-body ol { margin: 0; }
.field { display: grid; gap: 6px; font-weight: 600; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--rayon-petit); background: var(--gris-clair); }
.note [data-icon] { color: var(--bleu); margin-top: 2px; }
.note-danger { background: var(--rouge-clair); }
.note-danger [data-icon] { color: var(--rouge); }
.note ul { margin: 4px 0 0; padding-left: 20px; }

/* Aide */
.help-tabs > button { height: 40px; }
.help-body .mini {
  display: inline-block; padding: 0 10px; border-radius: 8px; color: #fff; font-weight: 700; line-height: 1.75; white-space: nowrap;
}
.help-body .mini-rouge { background: var(--carte); color: var(--texte); box-shadow: inset 0 0 0 3px var(--rouge); }
.help-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; align-items: start; margin: 0; padding: 0; list-style: none; }
.help-list > li { display: contents; }
.help-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.lexique { display: grid; grid-template-columns: 110px 1fr; gap: 6px 16px; margin: 0; }
.lexique dt { font-weight: 700; }
.lexique dd { margin: 0; }

/* Câblage */
.pins-table { border-collapse: collapse; width: 100%; }
.pins-table th, .pins-table td { border: 1px solid var(--bord); padding: 8px 12px; text-align: left; }
.pins-table th { background: var(--gris-clair); }
.pin-num { font-weight: 800; font-size: 1.25rem; }
.cablage-figure { margin: 0; }
.cablage-figure img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--bord); display: block; }
.cablage-figure figcaption { color: var(--texte-doux); margin-top: 6px; }
.pin-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pin-list li { padding: 8px 12px; border: 2px solid var(--bord); border-radius: var(--rayon-petit); background: var(--fond); }

/* Sons */
.sound-drop-zone {
  display: block; padding: 16px; text-align: center; cursor: pointer;
  border: 2px dashed #B8A98F; border-radius: var(--rayon); background: var(--fond);
}
.sound-drop-zone.is-over { background: var(--bleu-pale); border-color: var(--bleu); }
.sound-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sound-list li { display: flex; align-items: center; gap: 6px; }
.sound-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-tag { font-size: .95rem; color: var(--texte-doux); }
.sound-missing { color: var(--orange); font-weight: 600; }

/* Mode professeur */
.dialog-teacher { width: min(800px, 95vw); }
.teacher-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 16px 24px; align-items: center; }
.teacher-grid > label:not(.check-line), .teacher-grid > .label { font-weight: 700; display: grid; gap: 2px; }
.teacher-grid small { font-weight: 400; color: var(--texte-doux); }
.teacher-grid input[type="number"] { width: 120px; }
.teacher-pins { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 16px; }
.pin-choice { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.check-line { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 400 !important; cursor: pointer; }
.check-line input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; }
.check-box { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--texte-doux); border-radius: 6px; background: var(--carte); color: transparent; flex: none; }
.check-line input:checked + .check-box { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.check-line input:focus-visible + .check-box { box-shadow: var(--focus); }
.range-line { display: inline-flex; align-items: center; gap: 12px; }
input[type="range"] { accent-color: var(--bleu); width: 260px; height: 24px; }

/* ---- Pages annexes (cours, câblage imprimable, diagnostic) ------------------------------------------ */
.topbar { display: flex; align-items: center; gap: 12px; min-height: var(--bande); padding: 0 16px; background: var(--nuit); color: #F7F1E5; }
.brand { font: 700 1.25rem var(--police-titre); margin: 0; display: flex; align-items: center; gap: 10px; }
.topbar .actions { margin-left: auto; display: flex; gap: 10px; }
.topbar .btn-secondary { background: transparent; color: #F7F1E5; border-color: #5C5247; }
.check { display: grid; grid-template-columns: 2.2rem 1fr; gap: .2rem .6rem; padding: .7rem 0; border-bottom: 1px solid var(--bord); }
.check-detail { grid-column: 2; color: var(--texte-doux); }
.screen.diag-box { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 20px; box-shadow: var(--ombre); }

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .topbar, .no-print, .band1, .band2, .footer { display: none !important; }
  h1, h2, h3 { font-family: Georgia, serif; color: #000; }
  a { color: #000; }
  * { box-shadow: none !important; }
}

/* ---- Petits écrans (1366 et moins) ------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .train-layout { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .scene { padding: 6px 180px 16px; }
}
@media (max-width: 1100px) {
  .train-layout, .program-layout, .start-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-niveau="3"] .code-row { grid-template-columns: minmax(0, 1fr); }
  .band2 { flex-wrap: wrap; padding: 8px 16px; }
  .start-page { padding: 16px; }
  .scene { padding: 6px 16px 16px; }
}

/* Diagnostic : icône + mot d'état */
.check-icon { color: var(--bleu); }
.check[data-ok="true"] .check-icon { color: var(--vert); }
.check[data-ok="false"] .check-icon { color: var(--rouge); }
.topbar .logo { flex: none; }
.diag { max-width: 56rem; margin: 0 auto; padding: 16px; }
.diag .screen { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 20px; box-shadow: var(--ombre); }
.diag h2 { font-size: 1.375rem; margin-bottom: 8px; }
/* Accueil : les champs et boutons restent dans leur colonne (pas de largeur minimale). */
.start-names input { min-width: 0; width: 100%; }
.start-choices > .btn { min-width: 0; white-space: normal; text-align: center; }

/* --- Couleur des LED (choisie par l'équipe) ------------------------------------ */
.pin { --led: #F5B700; }
.pin .pin-led { border-color: var(--led); }
.pin[data-on="true"] {
  background: color-mix(in srgb, var(--led) 16%, var(--carte));
  border-color: var(--led); color: var(--texte); font-weight: 700;
}
.pin[data-on="true"] .pin-led {
  background: var(--led); border-color: var(--led);
  box-shadow: 0 0 10px 3px color-mix(in srgb, var(--led) 70%, transparent);
}
.pin-editable {
  display: grid; grid-template-columns: 14px auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px;
  align-items: center; padding: 6px 8px;
}
.pin-num-label { font-weight: 700; color: var(--texte); }
.pin-color {
  min-height: 32px; min-width: 0; width: 100%; padding: 0 4px;
  font: 600 1rem var(--police); border: 1px solid var(--bord); border-radius: 6px; background: var(--carte); cursor: pointer;
}
.pin-editable .pin-state { grid-column: 2 / 4; color: var(--texte-doux); font-weight: 400; }
.pin-editable[data-on="true"] .pin-state { color: var(--texte); font-weight: 700; }
.program-side .video-wrap { height: 210px; }
.pin-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; border: 2px solid rgba(0, 0, 0, .25); }
/* Projecteurs du théâtre : lentille et halo de la couleur de la LED. */
.spot[data-on="true"] .spot-lamp::after {
  background: color-mix(in srgb, var(--spot-couleur, #FFE08A) 70%, #fff);
  box-shadow: 0 0 14px 5px var(--spot-couleur, #FFD25A);
}
/* Le bouton « Masquer / Afficher l'image » et le badge restent au-dessus du message « Image masquée ». */
.video-hidden-msg { z-index: 1; }
.btn-overlay, .live-badge, .btn-collapse { z-index: 2; }

/* --- Guide « Que faire ? » ------------------------------------------------------------ */
.guide-btn { gap: 8px; }
.guide-count {
  display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 8px;
  border-radius: 999px; background: var(--or); color: var(--nuit); font-weight: 700;
}
.guide-btn[data-complete="true"] .guide-count { background: #A6D49F; }
body.is-start .guide-btn { display: none; }
.guide-panel { z-index: 95; bottom: auto; max-height: calc(100vh - 84px); }
.guide-progress { height: 6px; background: var(--gris-clair); }
.guide-progress > span { display: block; height: 100%; width: 0; background: var(--vert); transition: width .3s; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.guide-step { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 6px 8px; border-radius: var(--rayon-petit); }
.guide-mark {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--bord); color: var(--texte-doux); font-weight: 700;
}
.guide-title { font-weight: 600; color: var(--texte-doux); }
.guide-step[data-state="fait"] .guide-mark { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--vert); }
.guide-step[data-state="fait"] .guide-title { color: var(--vert); }
.guide-step[data-state="en-cours"] { background: var(--bleu-pale); box-shadow: inset 4px 0 0 var(--bleu); padding: 10px 10px 12px; }
.guide-step[data-state="en-cours"] .guide-mark { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.guide-step[data-state="en-cours"] .guide-title { color: var(--texte); font-weight: 700; font-size: 1.125rem; }
.guide-detail { margin: 6px 0 10px; color: var(--texte); }
.guide-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-bravo { margin-top: 8px; padding: 12px; border-radius: var(--rayon-petit); background: var(--vert-clair); color: var(--vert); font-weight: 700; text-align: center; }

/* Guide en carte compacte, en bas à droite (ne cache pas l'écran de travail). */
.guide-panel { inset: auto 16px 16px auto; width: min(400px, 95vw); max-height: calc(100vh - 92px); }
.guide-panel .dialog-head { min-height: 52px; }
.guide-panel .dialog-head h2 { font-size: 1.25rem; }
.guide-next { margin: 0; color: var(--bleu); font-weight: 700; }
.guide-current-title { font: 700 1.25rem var(--police-titre); margin: 2px 0 0; }
.guide-current .guide-detail { margin: 6px 0 12px; }
.guide-all summary { display: flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none; font-weight: 600; color: var(--bleu); }
.guide-all summary::-webkit-details-marker { display: none; }
.guide-step { grid-template-columns: 32px 1fr; align-items: center; padding: 4px 6px; }
.guide-step[data-state="en-cours"] { padding: 6px; }
.guide-step[data-state="en-cours"] .guide-title { font-size: 1rem; }
.team-names { max-width: 200px; }

/* --- Installation du programme sur la carte ----------------------------------------- */
.firmware-progress { height: 12px; margin: 12px 0 4px; border-radius: 6px; }
.firmware-progress > span { width: 0; transition: width .2s; }
.firmware-status { min-height: 1.5em; margin: 8px 0 0; font-weight: 600; }
.firmware-status[data-kind="error"] { color: var(--rouge); }
.firmware-status[data-kind="ok"] { color: var(--vert); }

/* --- Carnet de projet ------------------------------------------------------------------ */
body[data-step="carnet"] .screen-actions[data-for="carnet"] { display: flex; }
.step-gap { width: 1px; height: 28px; margin: 0 8px; background: var(--bord); }
.step-carnet .step-num svg { display: block; }
.carnet-hint { color: var(--texte-doux); }

.cn-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; }
.cn-nav { position: sticky; top: calc(var(--bande) * 2 + 16px); align-self: start; display: grid; gap: 4px; }
.cn-nav-item {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 10px; border-radius: var(--rayon-petit);
  color: var(--texte); text-decoration: none; font-weight: 600;
}
.cn-nav-item:hover { background: var(--gris-clair); }
.cn-nav-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--texte-doux); font-weight: 700;
}
.cn-nav-prog, .cn-prog { font-size: .875rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.cn-nav-prog[data-done="true"], .cn-prog[data-done="true"] { color: var(--vert); font-weight: 700; }
.cn-doc { display: grid; gap: 20px; min-width: 0; }

.cn-etape {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 20px 24px; display: grid; gap: 14px; scroll-margin-top: calc(var(--bande) * 2 + 16px);
}
.cn-etape h4 { margin: 6px 0 0; font: 700 1.0625rem var(--police); }
.cn-kicker { margin: 0; color: var(--texte-doux); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .8125rem; }
.cn-entete h2 { margin: 0; font-size: 1.75rem; }
.cn-ident { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: end; }
.cn-ident > * { display: grid; gap: 4px; }
.cn-ident span { color: var(--texte-doux); font-size: .875rem; font-weight: 600; }
.cn-ident input { width: 140px; }
.cn-client { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.cn-client > div { display: grid; gap: 6px; align-content: start; }

.cn-etape-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: -20px -24px 0; padding: 12px 24px; border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--nuit); color: #fff;
}
.cn-etape-head h3 { margin: 0; font-size: 1.25rem; color: #fff; flex: 1; }
.cn-verbe { color: var(--or); text-transform: uppercase; letter-spacing: .03em; }
.cn-etape-n { font-weight: 700; color: var(--or); }
.cn-etape-head .cn-outil { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
.cn-etape-head .cn-prog { color: #E8DCC6; }
.cn-etape-head .cn-prog[data-done="true"] { color: #A6D49F; }
.cn-etape h4.cn-etape-titre { font: 700 1.25rem var(--police-titre); }
.cn-outil {
  display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--bord);
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux);
}

.cn-sous {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px;
  margin-top: 10px; padding-top: 14px; border-top: 2px solid var(--gris-clair);
}
.cn-etape .cn-sous h4 { margin: 0; font-size: 1.125rem; }
.cn-sous-n {
  display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px;
  border-radius: var(--rayon-petit); background: var(--bleu); color: #fff; font-weight: 700;
}
.cn-sous.is-facultatif .cn-sous-n { background: var(--texte-doux); }
.cn-aide { grid-column: 1 / -1; margin: 0; color: var(--texte-doux); font-size: .9375rem; }

.cn-cadre { padding: 10px 14px; border-radius: var(--rayon-petit); background: var(--bleu-pale); border-left: 4px solid var(--bleu); }
.cn-cadre[data-ton="attention"] { background: var(--orange-clair); border-left-color: var(--orange); }
.cn-cadre[data-ton="cours"] { background: var(--vert-clair); border-left-color: var(--vert); }
.cn-commande { font-size: 1.0625rem; }
.cn-consignes { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }

.cn-table-wrap { overflow-x: auto; }
.cn-table { width: 100%; border-collapse: collapse; }
.cn-table th, .cn-table td { border: 1px solid var(--bord); padding: 6px 8px; text-align: left; vertical-align: middle; }
.cn-table th { background: var(--gris-clair); font-weight: 700; font-size: .9375rem; }
.cn-table th small { font-weight: 400; color: var(--texte-doux); }
.cn-table td.cn-fixe small { display: block; color: var(--texte-doux); }
.cn-table .cn-centre { text-align: center; }
.cn-table input[type="checkbox"] { width: 24px; height: 24px; }
.cn-field {
  width: 100%; min-height: 40px; padding: 6px 10px; font: 1rem var(--police);
  border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: #fff; color: var(--texte);
}
textarea.cn-field { resize: vertical; line-height: 1.4; }
.cn-field:disabled { background: var(--carte); color: var(--texte); opacity: 1; }
.cn-route td a { color: var(--bleu); text-decoration: none; }
.cn-route td a:hover { text-decoration: underline; }
.cn-route-valide { font-size: 1.25rem; color: var(--texte-doux); }
.cn-route-valide[data-ok="true"] { color: var(--vert); }
.cn-table .cn-num { text-align: center; font-weight: 700; color: var(--orange); }
.cn-num[data-assez="true"] { color: var(--vert); }
.cn-reconnu { color: var(--texte-doux); white-space: nowrap; }
.cn-reconnu[data-ok="true"] { color: var(--vert); font-weight: 700; }
.cn-reconnu svg { vertical-align: -3px; margin-right: 4px; }
.cn-led { display: inline-block; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--led); vertical-align: -2px; box-shadow: 0 0 6px var(--led); }
.cn-vide { margin: 0; color: var(--texte-doux); font-style: italic; }

.cn-check { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--fond); cursor: pointer; }
.cn-check input { width: 24px; height: 24px; margin: 0; flex: none; }
.cn-check:has(input:checked) { background: var(--vert-clair); }
.cn-valide { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 2px dashed var(--bord); border-radius: var(--rayon-petit); }
.cn-valide small { display: block; color: var(--texte-doux); }
.cn-valide[data-valide="oui"] { border-style: solid; border-color: var(--vert); background: var(--vert-clair); color: var(--vert); }
.cn-losange { font-size: 1.25rem; color: var(--orange); }
.cn-valide[data-valide="oui"] .cn-losange { color: var(--vert); }

.cn-texte { display: grid; gap: 4px; font-weight: 600; }
.cn-code { margin: 0; padding: 14px 16px; border-radius: var(--rayon-petit); background: var(--nuit); color: #F3E9D7; font: 1rem/2 var(--police-code); overflow-x: auto; }
.cn-code .cn-trou { display: inline-block; width: 9ch; min-height: 32px; padding: 2px 6px; font: inherit; }

.cn-chaine { display: grid; gap: 8px; }
.cn-chaine h4 { display: flex; align-items: center; gap: 10px; }
.cn-lettre { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--nuit); color: var(--or); }
.cn-chaine-row { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; }
.cn-chaine-nom {
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; padding: 8px 4px;
  border-radius: var(--rayon-petit); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: var(--bleu); color: #fff;
}
.cn-chaine[data-lettre="B"] .cn-chaine-nom { background: var(--orange); }
.cn-fleche { align-self: center; font-size: 1.5rem; color: var(--texte-doux); }
.cn-maillon { display: grid; align-content: start; gap: 4px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--fond); }
.cn-maillon > b { text-transform: uppercase; letter-spacing: .03em; }
.cn-maillon p { margin: 0; font-size: .9375rem; }
.cn-maillon .cn-ex { color: var(--texte-doux); }
.cn-maillon label { display: grid; gap: 4px; margin-top: 4px; font-weight: 600; font-size: .9375rem; }
.cn-choix-titre { margin: 6px 0 0; }
.cn-radios { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cn-radios label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; }
.cn-radios input { width: 20px; height: 20px; margin: 0; }
.cn-choix .cn-field { margin-top: 4px; }

.cn-photos { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--fond); }
.cn-photos-head small { display: block; color: var(--texte-doux); }
.cn-photos-list { display: flex; flex-wrap: wrap; gap: 12px; }
.cn-photo { position: relative; margin: 0; width: 220px; }
.cn-photo img { display: block; width: 100%; height: 160px; object-fit: contain; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.cn-photo-del { position: absolute; top: 6px; right: 6px; background: var(--carte); }
.cn-photo-add {
  display: grid; place-items: center; align-content: center; gap: 6px; width: 220px; height: 160px;
  border: 2px dashed var(--bleu); border-radius: var(--rayon-petit); background: var(--carte);
  color: var(--bleu); font: 600 1rem var(--police); cursor: pointer;
}
.cn-photo-add:hover { background: var(--bleu-pale); }
.cn-photo-dialog { width: min(760px, 95vw); }
.cn-cam { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; max-height: 60vh; background: var(--nuit); border-radius: var(--rayon-petit); overflow: hidden; }
.cn-cam video, .cn-cam img { width: 100%; height: 100%; object-fit: contain; }
.cn-cam-off { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; color: #fff; }

@media (max-width: 900px) {
  .cn-layout { grid-template-columns: 1fr; }
  .cn-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
  .cn-chaine-row { grid-template-columns: 1fr; }
  .cn-chaine-nom { writing-mode: initial; transform: none; }
  .cn-fleche { transform: rotate(90deg); justify-self: center; }
  .cn-client { grid-template-columns: 1fr; }
}


/* --- Classe (accueil), ranger le projet, choisir son équipe ---------------------------- */
.start-class-row { display: flex; align-items: center; gap: 12px; }
.start-class { width: 140px; min-height: 48px; }
.folder-steps { margin: 0 0 8px; padding-left: 1.4em; display: grid; gap: 6px; }
#folder-dialog .dialog-body b[id] { color: var(--bleu); }
.teams-list { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.teams-item {
  display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 2px 10px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--carte); color: var(--texte); font: 1rem var(--police); cursor: pointer;
}
.teams-item:hover { border-color: var(--bleu); background: var(--bleu-pale); }
.teams-item svg { grid-row: span 2; color: var(--bleu); }
.teams-item small { color: var(--texte-doux); }
.camera-parking { position: fixed; left: -10000px; top: 0; width: 640px; opacity: 0; pointer-events: none; }

/* --- Carnet : badges vers les écrans, liens, cotes, LED ------------------------------------ */
.cn-go {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: var(--police);
  background: var(--bleu-pale); color: var(--bleu); border-color: var(--bleu);
}
.cn-go:hover, .cn-go:focus-visible { background: var(--bleu); color: #fff; }
.cn-go svg { transform: rotate(-90deg); }
.cn-lien { justify-self: start; }
.cn-field[data-trop="true"] { border-color: var(--orange); background: var(--orange-clair); }
.cn-leds td { min-width: 140px; }
.cn-led-choix { display: flex; align-items: center; gap: 8px; }
.cn-led-choix .cn-led { flex: none; margin: 0; }

/* Onglet ou pastille à utiliser : clignote au survol d'un badge du carnet. */
@keyframes cn-clignote {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px var(--or); }
}
.is-hint { animation: cn-clignote .7s ease-in-out infinite; outline: 2px solid var(--or); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .is-hint { animation: none; }
}

/* Bande du haut sur 1366 px : « Carte programmable · Connecter » + prénoms longs + Tout éteindre doivent tenir. */
@media (max-width: 1400px) {
  .guide-btn .guide-label { display: none; }
  .team-names { max-width: 150px; }
  .save-word { display: none; }
}