/* Le Créateur — charte TabloNoir v4 « craie sur ardoise » (mêmes jetons que le Studio). */
:root{
  --board:#1B221F;--board-2:#222A26;--board-3:#2A332F;--rail:#161C19;
  --chalk:#F0F2EB;--chalk-dim:#A8B2AA;--chalk-faint:#717D75;--read:#D8DDD3;
  --line:rgba(236,239,244,.12);--line-2:rgba(236,239,244,.24);
  --accent:#6FA8FF;--accent-hi:#8CBAFF;--on-accent:#0E1613;
  --teal:#52CD9D;--coral:#F28E77;--warn:#e0b45e;
  --sans:'Lexend',sans-serif;--mono:'IBM Plex Mono',monospace;--hand:'Caveat',cursive;--radius:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--board);color:var(--chalk);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hi)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--rail)}
.brand{font-weight:600;font-size:18px;letter-spacing:-.3px;color:var(--chalk)}.brand b{color:var(--accent)}
.brand small{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--chalk-faint);margin-left:10px}
.bar nav{display:flex;align-items:center;gap:18px;font-size:14px;flex-wrap:wrap}
.wrap{max-width:1040px;margin:0 auto;padding:32px 24px 72px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
h1{font-size:30px;font-weight:600;letter-spacing:-.6px;line-height:1.2;margin-bottom:12px}
h2{font-size:19px;font-weight:600;margin:32px 0 12px}
.hand{font-family:var(--hand);font-size:26px;color:var(--chalk-dim)}
p{color:var(--read);max-width:70ch}p+p{margin-top:10px}
.muted{color:var(--chalk-dim);font-size:14px}
.card{background:var(--board-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}
.step{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:6px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--chalk-faint);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}
.btn{display:inline-block;font-family:var(--sans);font-size:14.5px;font-weight:500;background:var(--accent);color:var(--on-accent);border:none;border-radius:7px;padding:10px 18px;cursor:pointer}
.btn:hover{background:var(--accent-hi);color:var(--on-accent)}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:none;color:var(--chalk);border:1px solid var(--line-2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=file]{font-family:var(--sans);font-size:15px;color:var(--chalk);background:var(--board);border:1px solid var(--line-2);border-radius:7px;padding:10px 12px;width:100%}
input[type=number]{width:84px;padding:6px 8px;text-align:right}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
label{display:block;font-size:13.5px;color:var(--chalk-dim);margin:14px 0 6px}
form.etroit{max-width:420px}
.flash{background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);color:var(--chalk);border-radius:7px;padding:10px 14px;margin-bottom:18px;font-size:14.5px}
.chip{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.6px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--chalk-dim);white-space:nowrap}
.chip.ok{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 40%,transparent)}
.chip.run{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.chip.err{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 40%,transparent)}
.total{display:flex;justify-content:flex-end;gap:28px;flex-wrap:wrap;margin-top:16px;font-size:15px}
.total b{font-size:20px}
.hors{opacity:.55}
@media (max-width:640px){.wrap{padding:24px 16px 56px}h1{font-size:25px}.bar{padding:14px 16px}}

/* Choix de la durée d'une séance, au-dessus du tableau des matières */
.champ-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.champ-ligne label { font-weight: 600; }
.champ-ligne select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--board-2); color: var(--chalk); font: inherit; }

/* Livrables, production lancée par l'éditeur, bibliothèque, accès */
.btn.petit { padding: 5px 11px; font-size: 13px; margin: 2px 4px 2px 0; }
.btn.petit.theme { text-transform: capitalize; }
.btn.petit .muted { font-size: 12px; text-transform: none; margin-left: 4px; }
fieldset.choix { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; }
fieldset.choix legend { font-size: 13.5px; color: var(--chalk-dim); padding: 0 6px; }
fieldset.choix label { display: flex; gap: 10px; align-items: baseline; margin: 8px 0 0; font-size: 14.5px; color: var(--read); }
.recherche { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.recherche input[type=text] { flex: 1 1 380px; }
.recherche select, .champ-ligne select { padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--board-2); color: var(--chalk); font: inherit; font-size: 14.5px; }
.passage p { max-width: none; font-size: 15px; }
.passage .step { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; }
code { font-family: var(--mono); font-size: 13.5px; background: var(--board-3); border-radius: 5px; padding: 2px 6px; color: var(--chalk); }
ul.liste { margin: 6px 0 0 20px; color: var(--read); font-size: 14.5px; }
form.card.etroit { max-width: 520px; }
/* Quiz et exercices (lot CR2) : champs du formulaire */
.evaluations textarea,.evaluations select{font-family:var(--sans);font-size:15px;color:var(--chalk);background:var(--board);border:1px solid var(--line-2);border-radius:7px;padding:8px 10px}
.evaluations select{max-width:100%}
.evaluations .champ-ligne label{margin:0}
.evaluations fieldset.choix select{margin-left:6px;max-width:70%}