/* AmphiMed — shared styles for the three surfaces (student, prof, écran).
 *
 * Visual identity = the UNESS charter of January 2026 (Samuel, 2026-09-28):
 * Cardiologie is an application of the "formation" universe. Reference colour
 * #0D2957 for every text and the logo wordmark, universe blue #277AFE for the
 * pictogram, the main action and what is correct, grounds white / beige #F8F5F0
 * / bluish #F6FBFD only. Titles in Maison Neue Demibold (Manrope 600 stands in:
 * the face is not free), body text in Lato. The blue is never used for running
 * text (contrast 3.96:1): small labels on a blue ground are set in the reference
 * colour or in white on the reference colour. Green / red keep their meaning
 * only (correct = universe blue, wrong = a functional red). No coloured emoji.
 * The secondary UNESS colours (orange, turquoise, rose) belong to other
 * universes and are not used. The token names kept their historical roles:
 * --craie = main text, --nuit = page ground, --voile = raised panel, --lueur =
 * the main accent, --braise = the live / human accent, --iris = in support,
 * --rose = corrections. */

:root {
	/* charter */
	--uness-bleu: #277AFE;       /* universe "formation" */
	--uness-encre: #0D2957;      /* reference colour: texts, logo */
	--uness-beige: #F8F5F0;      /* accompanying ground */
	--uness-bleute: #F6FBFD;     /* accompanying ground */
	--uness-blanc: #FFFFFF;
	/* backgrounds */
	--nuit: var(--uness-beige);          /* page ground */
	--nuit-profonde: var(--uness-bleute);/* deeper wells (image ground, footer) */
	--voile: var(--uness-blanc);         /* raised panels */
	/* text */
	--craie: var(--uness-encre);         /* main text */
	--craie-douce: rgba(13, 41, 87, 0.74);
	--craie-faible: rgba(13, 41, 87, 0.52);
	--trait: rgba(13, 41, 87, 0.14);     /* rules and borders */
	--trait-fort: rgba(13, 41, 87, 0.28);
	--craie-fond: rgba(13, 41, 87, 0.04);/* barely-there fill (rows, wells) */
	--craie-fond-2: rgba(13, 41, 87, 0.08);
	/* accents */
	--lueur: var(--uness-bleu);          /* main action, correct answer */
	--lueur-fond: rgba(39, 122, 254, 0.10);
	--lueur-fond-2: rgba(39, 122, 254, 0.20);
	--lueur-texte: var(--uness-encre);   /* small labels on a blue-tinted ground: never blue text */
	--braise: var(--uness-encre);        /* live / human (session code, timer): reference colour */
	--braise-fond: rgba(13, 41, 87, 0.08);
	--iris: var(--uness-encre);          /* in support */
	--iris-fond: rgba(13, 41, 87, 0.06);
	--rose: #B3261E;                     /* corrections (functional red, not a UNESS universe colour) */
	--rose-fond: rgba(179, 38, 30, 0.08);

	/* role tokens: what changes between the light and the dark theme */
	--lueur-vive: #1D66DB;               /* hover of the main button */
	--lueur-bord: rgba(39, 122, 254, 0.45);
	--braise-bord: rgba(13, 41, 87, 0.35);
	--iris-bord: rgba(13, 41, 87, 0.30);
	--rose-bord: rgba(179, 38, 30, 0.40);
	--sur-accent: var(--uness-blanc);    /* text on an accent fill (buttons, keys, pills) */
	--puits: var(--uness-blanc);         /* wells: fields */
	--puits-voile: rgba(255, 255, 255, 0.7);
	--panneau-bas: var(--voile);
	--barre: rgba(255, 255, 255, 0.94);  /* header: white, so the logo keeps its original colours */
	--rideau: rgba(13, 41, 87, 0.45);
	--pastille: var(--uness-blanc);      /* chips behind QR codes */
	--jauge-a: rgba(13, 41, 87, 0.06);
	--jauge-b: rgba(13, 41, 87, 0.14);
	--logo-picto: var(--uness-bleu);     /* logo on white: original colours */
	--logo-texte: var(--uness-encre);
	--schema: light;

	--ink: var(--craie);
	--ink-2: var(--craie-douce);
	--ink-3: var(--craie-faible);
	--rule: var(--trait);
	--ok: var(--lueur);
	--ok-soft: var(--lueur-fond);
	--bad: var(--rose);
	--bad-soft: var(--rose-fond);
	--warn: var(--braise);
	--warn-soft: var(--braise-fond);
	--box: var(--lueur);         /* per-panel accent, overridden by .box-* */
	--radius: 16px;
	--shadow: 0 8px 24px rgba(13, 41, 87, 0.08);
	--sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--titre: "Maison Neue", "Maison Neue Demibold", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
/* Plain accompanying ground: no grid, no glow. */
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--nuit);
	color: var(--ink);
	font: 16px/1.5 var(--sans);
	-webkit-font-smoothing: antialiased;
	color-scheme: var(--schema);
}
main { flex: 1; }

h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.2; margin: 0 0 0.5rem; color: var(--craie); letter-spacing: 0; }
p { margin: 0.4rem 0; }
[hidden] { display: none !important; }
strong { font-weight: 700; color: var(--craie); }

a { color: var(--craie); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--craie-faible); }
a:hover { color: var(--craie); text-decoration-color: var(--lueur); }

.wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 16px; }
.wrap.wide { max-width: 1080px; }

/* ---- header: label left, logo centred, live pill right ---- */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 60px;
	padding: 8px 20px;
	background: var(--barre);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--trait);
	position: sticky;
	top: 0;
	z-index: 5;
}
.topbar .left { width: 220px; flex-shrink: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.topbar .center-image { flex: 1; text-align: center; }
.topbar .center-image img { width: min(280px, 44vw); height: auto; max-height: 40px; vertical-align: middle; opacity: 0.92; }
.topbar .meta { flex-shrink: 0; display: flex; gap: 12px; align-items: center; color: var(--ink-2); font-size: 14px; }
/* The short logo of the charter: pictogram in the universe blue, wordmark in the
   reference colour (white header). Clear space: a quarter of the logo in a bar. */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--logo-texte); text-decoration: none; white-space: nowrap; padding: 4px 0; }
.brand .brand-picto { width: 30px; height: 30px; flex: 0 0 auto; color: var(--logo-picto); }
.brand .brand-name { font-family: var(--titre); font-weight: 600; font-size: 19px; letter-spacing: 0; line-height: 1; color: var(--logo-texte); }
.brand .brand-name b { font-weight: 600; }
.brand:hover { color: var(--logo-texte); }
.brand-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) {
	.topbar { padding: 8px 14px; }
	.topbar .left { width: auto; }
}

/* The amber pill is the live thing the eye must find: the session code. */
.session-code {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 18px;
	background: var(--braise);
	color: var(--sur-accent);
	font: 700 15px var(--mono);
	letter-spacing: 0.18em;
	box-shadow: none;
}
.session-code.small { height: 28px; padding: 0 10px; font-size: 13px; }

/* ---- panels: raised on a soft gradient, a thin chalk rule, a big radius ---- */
.card {
	background: var(--voile);
	border: 1px solid var(--trait);
	border-radius: var(--radius);
	margin: 18px 0;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.card:first-child { margin-top: 0; }
.box-blue { --box: var(--lueur); }
.box-green { --box: var(--braise); }     /* the live question: human, in progress */
.box-orange { --box: var(--braise); }
.box-violet { --box: var(--iris); }
.box-yellow { --box: var(--iris); }
/* Panel head: a small coloured dot then a quiet label, as "● Vote ouvert". */
.box-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 18px 24px 0;
	color: var(--craie);         /* never blue at this size (charter): the dot carries the colour */
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.box-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--box); flex: 0 0 auto; }
.box-head .badge.light { background: transparent; border: 1px solid var(--trait-fort); color: var(--craie); }
.box-head .sub { font-size: 14px; font-weight: 600; color: var(--craie-douce); margin-left: auto; }
.box-body { padding: 12px 24px 24px; }
.muted { color: var(--ink-2); font-size: 14px; }
.small { font-size: 13px; }

/* Arrowed list (→ in the panel colour). */
.arrowed-list { list-style: none; margin: 4px 0; padding-left: 4px; }
.arrowed-list > li { position: relative; padding-left: 1.9em; margin: 10px 0; color: var(--craie-douce); }
.arrowed-list > li strong { color: var(--craie); }
.arrowed-list > li::before { content: '→'; position: absolute; left: 0; top: -0.3em; font-size: 1.4em; color: var(--box); }

/* ---- forms ---- */
label.field { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--craie-douce); }
input[type="text"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--trait-fort);
	border-radius: 12px;
	font: inherit;
	color: var(--craie);
	background: var(--puits);
}
input::placeholder, textarea::placeholder { color: var(--craie-faible); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--lueur-fond-2); border-color: var(--lueur); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--lueur); }
select option { background: var(--puits); color: var(--craie); }
textarea { resize: vertical; }

.code-input {
	font-family: var(--mono);
	font-size: 26px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	text-align: center;
}

/* ---- buttons: chalk outline by default, aquamarine pill for the main action ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--trait-fort);
	background: transparent;
	color: var(--craie);
	font: 600 15px/1.2 var(--sans);
	padding: 10px 20px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s, border-color 0.12s, transform 0.05s, box-shadow 0.12s;
}
.btn:hover { background: var(--craie-fond-2); border-color: var(--craie-douce); color: var(--craie); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--lueur); border-color: var(--lueur); color: var(--sur-accent); }
.btn.primary:hover { background: var(--lueur-vive); border-color: var(--lueur-vive); color: var(--sur-accent); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--craie-douce); }
.btn.ghost:hover { background: var(--craie-fond-2); color: var(--craie); border-color: transparent; }
.btn.danger { color: var(--rose); border-color: transparent; background: transparent; }
.btn.danger:hover { background: var(--rose-fond); border-color: transparent; color: var(--rose); }
.btn.big { width: 100%; padding: 14px; font-size: 17px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

.notice { border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: 14px; border: 1px solid transparent; }
.notice.err { background: var(--rose-fond); color: var(--rose); border-color: var(--rose-bord); }
.notice.ok { background: var(--lueur-fond); color: var(--craie); border-color: var(--lueur-bord); }
.notice.info { background: var(--braise-fond); color: var(--craie); border-color: var(--braise-bord); }

/* Live-session reminder on the home view: the presenter left a session running. */
.live-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.live-banner .text { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-banner .btn-row { margin: 0; }

.badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 3px 9px;
	border-radius: 20px;
	background: transparent;
	border: 1px solid var(--trait-fort);
	color: var(--craie-douce);
	text-transform: uppercase;
}
.badge.qrm { border-color: var(--iris); color: var(--iris); }
.badge.draft { border-style: dashed; color: var(--craie-faible); }
.badge.ok { background: var(--lueur-fond); border-color: var(--lueur-bord); color: var(--lueur-texte); }
.badge.en-cours { background: var(--craie-fond-2); border-color: var(--trait-fort); color: var(--craie); }
.todo-list .title .badge { margin-left: 6px; vertical-align: 2px; }

/* ---- question & choices (student) ---- */
.qtext { font-family: var(--titre); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 10px 0 20px; color: var(--craie); }
.qimage { width: 100%; border-radius: 12px; border: 1px solid var(--trait); margin: 4px 0 12px; background: var(--puits); }

.choices { display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.choice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 15px 16px;
	border: 1px solid var(--trait);
	border-radius: 14px;
	background: var(--craie-fond);
	color: var(--craie);
	cursor: pointer;
	font-size: 17px;
	transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
	user-select: none;
}
.choice:not(.disabled):hover { border-color: var(--trait-fort); background: var(--craie-fond-2); }
.choice .key {
	flex: 0 0 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--craie-faible);
	background: transparent;
	color: var(--craie-douce);
	font: 700 14px var(--sans);
	margin-top: 0;
}
.choice.selected { border-color: var(--lueur); background: var(--lueur-fond); box-shadow: 0 0 0 1px var(--lueur-bord); }
.choice.selected .key { border-color: var(--lueur); color: var(--lueur-texte); }
.choice.correct { border-color: var(--lueur); background: linear-gradient(90deg, var(--lueur-fond-2), var(--lueur-fond) 60%, transparent); box-shadow: 0 0 0 1px var(--lueur-bord); }
.choice.correct .key { background: var(--lueur); border-color: var(--lueur); color: var(--sur-accent); }
.choice.wrong-pick { border-color: var(--rose); background: var(--rose-fond); }
.choice.wrong-pick .key { background: var(--rose); border-color: var(--rose); color: var(--sur-accent); }
.choice.disabled { cursor: default; }

.answer-state { text-align: center; padding: 18px 0 6px; }
.answer-state .big-mark {
	width: 46px; height: 46px; margin: 0 auto 8px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--lueur-fond);
	border: 1px solid var(--lueur-bord);
	color: var(--lueur);
	font: 600 22px var(--sans);
}
.score-pill {
	display: inline-block;
	font: 700 15px var(--sans);
	padding: 7px 18px;
	border-radius: 20px;
	margin-top: 6px;
	border: 1px solid transparent;
}
.score-pill.s1 { background: var(--lueur-fond); color: var(--lueur); border-color: var(--lueur-bord); }
.score-pill.s05 { background: var(--braise-fond); color: var(--braise); border-color: var(--braise-bord); }
.score-pill.s0 { background: var(--rose-fond); color: var(--rose); border-color: var(--rose-bord); }

.explanation {
	background: var(--lueur-fond);
	border: 1px solid var(--lueur-bord);
	border-left: 3px solid var(--lueur);
	border-radius: 12px;
	padding: 12px 16px;
	margin-top: 16px;
	font-size: 15px;
	color: var(--craie);
}

/* ---- results bars: the answer rows of the reference board ---- */
.bars { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.bar-row { display: grid; grid-template-columns: 34px 1fr 90px; align-items: center; gap: 12px; }
.bar-row .key {
	width: 30px; height: 30px; display: grid; place-items: center;
	border-radius: 50%; border: 1px solid var(--craie-faible);
	font: 700 14px var(--sans); color: var(--craie-douce);
}
.bar-track { position: relative; background: var(--craie-fond); border-radius: 12px; height: 46px; overflow: hidden; border: 1px solid var(--trait); }
.bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: linear-gradient(90deg, var(--jauge-a), var(--jauge-b));
	transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar-fill.correct { background: linear-gradient(90deg, var(--lueur-fond), var(--lueur-fond-2)); }
.bar-fill.wrong { background: linear-gradient(90deg, var(--jauge-a), var(--jauge-b)); }
.bar-row:has(.bar-fill.correct) .bar-track { border-color: var(--lueur); box-shadow: 0 0 0 1px var(--lueur-bord); }
.bar-row:has(.bar-fill.correct) .key { border-color: var(--lueur); color: var(--lueur-texte); }
.bar-row:has(.bar-fill.correct) .bar-count { color: var(--lueur-texte); font-weight: 700; }
.bar-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 0 14px;
	font-size: 16px;
	color: var(--craie);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bar-count { font: 600 14px var(--sans); color: var(--craie-douce); text-align: right; }

/* ---- leaderboard ---- */
.podium { margin: 8px 0; padding: 0; list-style: none; }
.podium li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	border-radius: 12px;
	font-size: 15px;
	color: var(--craie);
}
.podium li:nth-child(odd) { background: var(--craie-fond); }
.podium .rank { flex: 0 0 26px; font: 700 14px var(--sans); color: var(--craie-faible); text-align: center; }
.podium li:nth-child(1) .rank, .podium li:nth-child(2) .rank, .podium li:nth-child(3) .rank { color: var(--braise); }
.podium .pts { margin-left: auto; font: 600 14px var(--sans); color: var(--craie-douce); }

/* ---- presenter console ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-2 > div > .card:first-child { margin-top: 0; }

.quiz-list { list-style: none; margin: 0; padding: 0; }
.quiz-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	padding: 14px 16px;
	border: 1px solid var(--trait);
	border-radius: 14px;
	margin-bottom: 10px;
	background: var(--craie-fond);
	transition: border-color 0.12s, background 0.12s;
}
.quiz-list li:hover { border-color: var(--trait-fort); background: var(--craie-fond-2); }
.quiz-list li > div:first-child { flex: 1 1 220px; min-width: 0; }
.quiz-list .title { font-family: var(--titre); font-weight: 600; font-size: 18px; color: var(--craie); }
.quiz-list .title .badge { margin-left: 8px; vertical-align: 3px; font-family: var(--sans); }
.quiz-list li.draft { border-style: dashed; background: transparent; }
.quiz-list .actions { flex: 0 0 auto; margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.quiz-list .actions .btn { padding: 7px 14px; font-size: 14px; }
.list-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--craie-faible); margin: 20px 0 10px; text-align: left; }

.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.card-head h2 { margin: 0; }
.teacher-hint { margin-left: auto; white-space: nowrap; }
.teacher-field { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--craie-douce); }
.teacher-field input[type="text"] { width: 210px; padding: 7px 12px; font-weight: 400; }
.grid-2.tight { gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }

.editor-q {
	border: 1px solid var(--trait);
	border-radius: 16px;
	padding: 16px;
	margin: 14px 0;
	background: var(--puits-voile);
}
.editor-q .head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.editor-q .head .num { font: 700 12px var(--sans); letter-spacing: 0.06em; color: var(--lueur-texte); background: var(--lueur-fond); border: 1px solid var(--lueur-bord); padding: 3px 9px; border-radius: 12px; }
.editor-q .head select { width: auto; }
.editor-q .head .btn { padding: 6px 10px; }
.editor-choice { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.editor-choice input[type="text"] { flex: 1; }
.editor-choice .flags { display: flex; gap: 8px; font-size: 12px; color: var(--craie-douce); white-space: nowrap; }
.editor-choice .flags label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.editor-choice .btn { padding: 6px 10px; }

/* Validation findings, listed under the question they concern. */
.editor-q.has-problems { border-color: var(--rose); background: var(--rose-fond); }
.q-problems { margin: 0 0 10px; padding-left: 20px; color: var(--rose); font-size: 13px; font-weight: 600; }
.q-problems li { margin: 2px 0; }

.live-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.live-stat { display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 12px 20px; border-radius: 16px; background: var(--craie-fond); border: 1px solid var(--trait); }
.live-stat .n { font: 600 30px/1.1 var(--titre); color: var(--craie); }
.live-stat .lbl { font-size: 11px; color: var(--craie-faible); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--craie-fond); border: 1px solid var(--trait); font: 600 15px var(--sans); color: var(--craie-douce); }

/* ---- launch dialog (scoring choice) ---- */
dialog.modal {
	border: 1px solid var(--trait-fort);
	border-radius: var(--radius);
	padding: 0;
	width: calc(100% - 32px);
	max-width: 480px;
	color: var(--craie);
	font: inherit;
	background: var(--voile);
	box-shadow: var(--shadow);
}
dialog.modal::backdrop { background: var(--rideau); backdrop-filter: blur(4px); }
dialog.modal .box-head { --box: var(--lueur); font-family: var(--titre); font-size: 20px; font-weight: 600; color: var(--craie); }
.option {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	border: 1px solid var(--trait);
	border-radius: 14px;
	margin: 8px 0;
	cursor: pointer;
	background: var(--craie-fond);
}
.option:has(input:checked) { border-color: var(--lueur); background: var(--lueur-fond); }
.option input { margin-top: 4px; }
.option .lbl { font-weight: 600; }

/* ---- projection screen: the same night, bigger type ---- */
/* No background-attachment: fixed here — Chromium stops repainting the page behind it. */
body.ecran { color: var(--craie); }
body.ecran .wrap { max-width: 1500px; }
.ecran-head { display: flex; align-items: center; gap: 24px; padding: 20px 32px 0; }
.ecran-head .logo { height: clamp(28px, 3vw, 44px); width: auto; opacity: 0.92; }
/* On the beige ground of the projection screen the charter wants the logo in the
   reference colour only (monochrome); the dark theme keeps it all white. */
:root:not([data-theme="dark"]) .ecran-head .brand { --logo-picto: var(--uness-encre); }
.ecran-head .brand .brand-picto { width: clamp(30px, 3vw, 44px); height: clamp(30px, 3vw, 44px); }
.ecran-head .brand .brand-name { font-size: clamp(19px, 2vw, 28px); }
.ecran-head h1 { font-size: clamp(22px, 2.6vw, 36px); font-weight: 600; color: var(--craie); margin: 0; }
.ecran-join {
	margin-left: auto;
	text-align: right;
	font-size: clamp(14px, 1.4vw, 20px);
	color: var(--craie-douce);
}
.ecran-join .code { font: 700 clamp(26px, 3.4vw, 52px)/1.1 var(--mono); letter-spacing: 0.22em; color: var(--braise); display: block; }
.ecran-question { padding: 12px 32px; }
.ecran-question .qtext { font-size: clamp(26px, 3.4vw, 48px); font-weight: 600; color: var(--craie); }
.ecran-question .qimage { max-height: 44vh; width: auto; max-width: 100%; }
.ecran-meta { color: var(--craie-douce); }
.ecran .choices { gap: 14px; }
.ecran .choice { font-size: clamp(17px, 2vw, 26px); cursor: default; }
.ecran .choice:hover { border-color: var(--trait); background: var(--craie-fond); } /* read-only: no hover feedback */
.ecran .choice .key { flex-basis: 40px; height: 40px; font-size: 17px; }
.ecran .bar-row { grid-template-columns: 44px 1fr 120px; }
.ecran .bar-row .key { width: 40px; height: 40px; font-size: clamp(15px, 1.6vw, 20px); }
.ecran .bar-track { height: clamp(46px, 5vh, 64px); }
.ecran .bar-label { font-size: clamp(16px, 1.8vw, 26px); }
.ecran .bar-count { font-size: clamp(15px, 1.6vw, 22px); }
.ecran-footer {
	position: fixed;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 32px;
	background: var(--barre);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--trait);
	font-size: clamp(14px, 1.5vw, 20px);
	color: var(--craie-douce);
}
.ecran-footer .answered { font: 600 clamp(18px, 2vw, 28px) var(--titre); color: var(--craie); }
.ecran .podium li { font-size: clamp(16px, 1.9vw, 26px); }
.ecran-lobby { text-align: center; padding: 8vh 32px; }
.ecran-lobby .code { font: 700 clamp(60px, 11vw, 160px)/1.1 var(--mono); letter-spacing: 0.18em; color: var(--braise);  }
.ecran-lobby .url { font-size: clamp(18px, 2.4vw, 34px); color: var(--craie-douce); }
.ecran-lobby .url strong { color: var(--craie); }
.ecran-lobby .count { margin-top: 4vh; font-size: clamp(16px, 2vw, 26px); color: var(--craie); }

/* ---- image with lettered zones (choices pinned on the picture) ---- */
.qimage-wrap { position: relative; display: block; margin: 4px 0 12px; }
.qimage-wrap .qimage { display: block; margin: 0; }
.qimage-wrap .pins { position: absolute; inset: 0; }
.pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--puits);
	color: var(--craie);
	border: 2px solid var(--craie);
	font: 700 14px var(--sans);
	box-shadow: 0 2px 8px rgba(13, 41, 87, 0.35);
	user-select: none;
}
.pins.pickable .pin { cursor: pointer; }
.pin.selected { background: var(--lueur); border-color: var(--lueur); color: var(--sur-accent); }
.pin.correct { background: var(--lueur); border-color: var(--lueur); color: var(--sur-accent); box-shadow: 0 0 0 2px var(--sur-accent); }
.ecran .pin { width: clamp(28px, 3vw, 44px); height: clamp(28px, 3vw, 44px); font-size: clamp(13px, 1.5vw, 20px); }
.ecran-question .qimage-wrap { display: inline-block; max-width: 100%; }
.editor-q .qimage-wrap { max-width: 640px; }
.editor-q .qimage-wrap.arming { outline: 3px solid var(--braise); cursor: crosshair; }
.editor-q .qimage-wrap.arming .pins { pointer-events: none; }

/* Enlarge button on a question image, and the full-screen viewer it opens. */
.qimage-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 2; border: 1px solid var(--trait-fort); border-radius: 999px; padding: 5px 12px; font: 600 12px var(--sans); color: var(--craie); background: var(--barre); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
.qimage-zoom:hover { border-color: var(--lueur); color: var(--lueur-texte); }
.ecran .qimage-zoom { display: none; }
/* A modal <dialog> filling the viewport (the browser's own dialog box is reset). */
.lightbox { position: fixed; inset: 0; z-index: 50; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: inherit; flex-direction: column; background: var(--rideau); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: transparent; }
.lightbox-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; background: var(--barre); border-bottom: 1px solid var(--trait); }
.lightbox-bar .btn { padding: 7px 14px; font-size: 13px; }
.lightbox-scroll { flex: 1; overflow: auto; padding: 12px; text-align: center; -webkit-overflow-scrolling: touch; }
/* Opens at a reading size (about 2.5 screens wide on a phone), not at the scan's raw 3000+ px. */
.lightbox-scroll img { width: clamp(1100px, 250vw, 2200px); max-width: none; height: auto; background: #fff; border-radius: 8px; }
.lightbox-scroll img.fit { width: auto; max-width: 100%; max-height: 100%; }

/* ---- bank tools: search box + tag filter ---- */
.bank-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
.bank-tools input[type="text"] { flex: 1 1 200px; padding: 8px 12px; }
.tag-chip {
	display: inline-flex; align-items: center;
	padding: 3px 11px;
	border-radius: 14px;
	border: 1px solid var(--trait-fort);
	background: transparent;
	font-size: 12px;
	color: var(--craie-douce);
	cursor: pointer;
	white-space: nowrap;
}
.tag-chip:hover { border-color: var(--craie-douce); color: var(--craie); }
.tag-chip.on { background: var(--craie); border-color: var(--craie); color: var(--sur-accent); }
.quiz-list .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.quiz-list .tags .tag-chip { cursor: default; padding: 0 8px; font-size: 11px; }

/* ---- editor: follow-up block, nested question ---- */
.followup { margin: 12px 0 0; padding: 12px; border: 1px dashed var(--iris); border-radius: 14px; background: var(--iris-fond); }
.followup .fhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; color: var(--craie); }
.followup .fhead input.threshold { width: 64px; padding: 4px 8px; text-align: right; border: 1px solid var(--trait-fort); border-radius: 8px; font: inherit; }

/* Transient confirmation (link copied, quiz imported…), bottom centre. */
.toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	max-width: calc(100% - 32px);
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--craie);
	color: var(--sur-accent);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(13, 41, 87, 0.25);
	z-index: 20;
}
.followup .fhead .btn { padding: 5px 10px; font-size: 13px; }
.editor-q.sub { margin: 8px 0 0; background: var(--puits-voile); }

/* ---- session report (post-session review of every question) ---- */
.report-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.report-q { border: 1px solid var(--trait); border-radius: 16px; padding: 16px; margin: 12px 0; background: var(--craie-fond); }
.report-q .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.report-q .head .num { font: 700 12px var(--sans); letter-spacing: 0.06em; color: var(--lueur-texte); background: var(--iris-fond); border: 1px solid var(--iris-bord); padding: 3px 9px; border-radius: 12px; }
.report-q .rate { margin-left: auto; font: 600 22px var(--titre); color: var(--craie); }
.rate-flag { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--braise-fond); color: var(--braise); border: 1px solid var(--braise-bord); }
.rate-flag.hard { background: var(--rose-fond); color: var(--rose); border-color: var(--rose-bord); }
.rate-flag.easy { background: var(--lueur-fond); color: var(--lueur-texte); border-color: var(--lueur-bord); }
.report-notes { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--craie-douce); }
.session-list { list-style: none; margin: 0; padding: 0; }
.session-list li { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 4px; border-bottom: 1px solid var(--trait); font-size: 14px; }
.session-list li:last-child { border-bottom: 0; }
.session-list li > div:first-child { flex: 1 1 200px; min-width: 0; }
.session-list .title { color: var(--craie); font-weight: 600; }
.session-list .actions { margin-left: auto; }
.session-list .actions .btn { padding: 6px 13px; font-size: 13px; }

/* Connection state: shown only while a stream is open (openStream toggles it). */
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--craie-faible); display: inline-block; }
.conn-dot.on { background: var(--lueur); }

/* ---- footer: a deeper band, the partner logos on chalk chips ---- */
footer.page-foot {
	margin-top: auto;
	background: var(--puits);
	border-top: 1px solid var(--trait);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px 20px;
	padding: 12px 20px;
	font-size: 12px;
	color: var(--craie-faible);
}
.page-foot a { color: var(--craie-douce); text-decoration: none; }
.page-foot a:hover { color: var(--craie); text-decoration: underline; }
.footer-logos { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.footer-logos a { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 10px; background: var(--pastille); opacity: 0.85; transition: opacity 0.12s; }
.footer-logos a:hover { opacity: 1; }
.footer-logos img { height: 26px; width: auto; }
.footer-logos img.uness { height: 22px; }
@media (max-width: 768px) {
	footer.page-foot { justify-content: center; text-align: center; }
	.footer-logos { gap: 8px; }
	.footer-logos img { height: 22px; }
	.footer-logos img.uness { height: 18px; }
}

/* ---- classe virtuelle (2026-09-16): class parameters in the editor ---- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--craie-faible); }
.class-meta { margin: 10px 0 4px; padding: 4px 16px 14px; border: 1px solid var(--trait); border-radius: 16px; background: var(--puits-voile); }
.class-meta .list-head { margin-top: 16px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-chip.big { padding: 6px 12px; font-size: 13px; }
/* Date fields: same box as every other field; the calendar glyph follows the theme. */
input[type="date"] { min-height: 46px; height: 46px; font-variant-numeric: tabular-nums; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.date-row input[type="date"] { width: 100%; }
.date-row .field { margin-top: 0; }
@media (max-width: 560px) { .date-row { grid-template-columns: 1fr; } }
.theme-row { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-row select { width: auto; flex: 0 0 auto; }
.theme-row input { flex: 1 1 200px; }
.case-results { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px; max-height: 420px; overflow-y: auto; border: 1px dashed var(--trait-fort); border-radius: 12px; }
.case-result { border: 1px solid var(--trait-fort); background: transparent; color: var(--craie); font: 600 13px var(--sans); padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.case-result:hover { border-color: var(--lueur); color: var(--lueur-texte); }
.case-result.on { background: var(--lueur-fond); border-color: var(--lueur); color: var(--lueur-texte); }
/* Filters of the case search, laid out like the wiki's list page. */
.case-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.case-filters.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.case-filters .field { margin-top: 8px; }
@media (max-width: 820px) { .case-filters, .case-filters.two { grid-template-columns: 1fr; } }
.tag-picker { position: relative; padding: 6px 8px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--puits); }
.tag-picker input { border: 0; background: transparent; padding: 6px 4px; }
.tag-picker input:focus { outline: none; }
.tag-picker .chip-row { margin-bottom: 2px; }
.tag-chip.picked { padding-right: 6px; }
.chip-x { border: 0; background: transparent; color: inherit; font: 600 11px var(--sans); margin-left: 6px; cursor: pointer; opacity: 0.7; }
.chip-x:hover { opacity: 1; }
.tag-input-row { display: flex; align-items: center; }
.tag-input-row input { flex: 1; }
.tag-toggle { border: 0; background: transparent; color: var(--craie-douce); font-size: 20px; line-height: 1; padding: 0 6px; cursor: pointer; }
.tag-toggle:hover { color: var(--craie); }
.tag-option.cat { font-weight: 700; color: var(--craie); background: var(--craie-fond); }
.tag-options::-webkit-scrollbar { width: 10px; }
.tag-options::-webkit-scrollbar-thumb { background: var(--trait-fort); border-radius: 5px; }
.tag-options { scrollbar-width: thin; scrollbar-color: var(--trait-fort) transparent; }
.tag-options { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; margin-top: 4px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--voile); box-shadow: var(--shadow); }
.tag-option { text-align: left; border: 0; border-bottom: 1px solid var(--trait); background: transparent; color: var(--craie); font: 400 14px var(--sans); padding: 8px 12px; cursor: pointer; }
.tag-option:last-child { border-bottom: 0; }
.tag-option:hover { background: var(--lueur-fond); }
.row-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag-chip.mode { border-style: dashed; }
.tag-chip.mode.on { background: var(--braise); border-color: var(--braise); border-style: solid; color: var(--sur-accent); }
/* Search buttons: breathing room above and below, before the results box. */
.case-actions { margin: 14px 0 16px; }
.case-results .case-count { flex: 1 0 100%; }
.case-results .case-more { flex: 1 0 100%; justify-content: center; }
.case-row { flex: 1 0 100%; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--craie-fond); }
.case-row.on { border-color: var(--lueur); background: var(--lueur-fond); }
.case-row .btn { padding: 6px 14px; font-size: 13px; flex: 0 0 auto; }
/* ECG thumbnail on a case row: a click opens the full picture. */
/* The whole tracing must be visible: the box keeps the ECG's own proportions and never crops it. */
.case-thumb { position: relative; flex: 0 0 168px; width: 168px; height: 96px; padding: 0; border: 1px solid var(--trait-fort); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; display: grid; place-items: center; }
.case-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.case-thumb-zoom { position: absolute; right: 4px; bottom: 4px; font-size: 12px; line-height: 1; padding: 2px 5px; border-radius: 6px; background: var(--barre); color: var(--craie); }
.case-thumb:hover { border-color: var(--lueur); }
.case-thumb.empty { cursor: default; background: var(--craie-fond); color: var(--craie-faible); font: 700 11px var(--sans); letter-spacing: 0.08em; }
.case-list li .case-thumb { flex-basis: 112px; width: 112px; height: 64px; }
@media (max-width: 560px) { .case-row { flex-wrap: wrap; } .case-thumb { flex-basis: 100%; width: 100%; height: 160px; } }
.case-main { flex: 1 1 auto; min-width: 0; }
.case-main .case-title { font-family: var(--titre); font-size: 16px; font-weight: 600; margin-right: 8px; }
.case-main .badge { vertical-align: 2px; }
.case-all { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; cursor: pointer; }
.badge.origin { text-decoration: none; text-transform: none; letter-spacing: 0; font-weight: 600; border-color: var(--iris-bord); color: var(--iris); background: var(--iris-fond); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.case-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--craie-fond); }
.case-list li a { font-weight: 600; }
.case-list li .btn { padding: 4px 8px; }
.class-line { color: var(--craie-douce); }

/* ---- broadcast block in the live console ---- */
/* Three fixed columns: the text column absorbs the width (its options line wraps),
   the QR keeps its size and the link column never gets squeezed, so the block
   looks the same before and after the session data arrives. */
.diffusion { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(280px, 320px); gap: 18px 28px; align-items: center; margin: 4px 0 16px; padding: 16px 18px; border: 1px solid var(--trait); border-radius: 16px; background: var(--puits-voile); }
.diffusion-code { min-width: 0; }
.diffusion-code p { min-height: 1.5em; margin: 0; overflow-wrap: anywhere; }
.diffusion-link { min-width: 0; }
.diffusion-link .bank-tools { flex-wrap: nowrap; }
.diffusion-link .bank-tools input { min-width: 0; flex: 1 1 auto; }
.diffusion-link .btn { white-space: nowrap; }
.stepper { min-width: 150px; justify-content: center; }
#live-title:empty::before { content: '…'; color: var(--craie-faible); }
@media (max-width: 900px) { .diffusion { grid-template-columns: minmax(0, 1fr) auto; } .diffusion-link { grid-column: 1 / -1; } }
@media (max-width: 560px) { .diffusion { grid-template-columns: 1fr; } .diffusion-link { grid-column: auto; } }
.diffusion-code { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.session-code.big { height: auto; padding: 10px 22px; font-size: clamp(26px, 4vw, 40px); }
.diffusion-qr img { display: block; width: 132px; height: 132px; border-radius: 12px; background: var(--pastille); }
.diffusion-link .bank-tools input { font-family: var(--mono); font-size: 13px; }

/* ---- tables (progress, history) ---- */
.tbl { overflow-x: auto; }
.progress-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.progress-table th, .progress-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.progress-table th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--craie-faible); font-weight: 700; }
.progress-table .n, .progress-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-table .num { font: 700 12px var(--sans); letter-spacing: 0.06em; color: var(--lueur-texte); background: var(--lueur-fond); border: 1px solid var(--lueur-bord); padding: 2px 8px; border-radius: 12px; margin-right: 6px; }

/* ---- student: question progress, recap, rank, history, replay ---- */
.progress { height: 3px; border-radius: 2px; background: var(--trait); overflow: hidden; margin: 0 0 14px; }
.progress i { display: block; height: 100%; width: 0; background: var(--braise); transition: width 0.4s; }
.rank-me { font-family: var(--titre); font-size: 20px; color: var(--braise); margin: 8px 0; }
.recap { display: flex; flex-direction: column; gap: 14px; }
.recap-q { padding: 12px 14px; border: 1px solid var(--trait); border-radius: 14px; background: var(--craie-fond); }
.recap-q .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.recap-q .head .num { font: 700 12px var(--sans); letter-spacing: 0.06em; color: var(--lueur-texte); background: var(--lueur-fond); border: 1px solid var(--lueur-bord); padding: 2px 8px; border-radius: 12px; }
.recap-q .head .muted { flex: 1 1 200px; color: var(--craie); font-size: 14px; }
.score-pill.mini { font-size: 12px; padding: 3px 10px; margin: 0; }
.choices.compact { gap: 6px; }
.choices.compact .choice { padding: 8px 10px; font-size: 14px; cursor: default; }
.choices.compact .choice .key { flex-basis: 24px; height: 24px; font-size: 11px; }
.recap-q .explanation { margin-top: 10px; font-size: 14px; }
.review-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.review-summary .live-stat { min-width: 96px; padding: 8px 14px; }
.review-summary .live-stat .n { font-size: 22px; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 4px; border-bottom: 1px solid var(--trait); font-size: 14px; }
.history-list li:last-child { border-bottom: 0; }
.history-list li > div:first-child { flex: 1 1 200px; min-width: 0; }
.history-list .title { color: var(--craie); font-weight: 600; }
.history-list .actions { margin-left: auto; }
.history-list .actions .btn { padding: 5px 12px; font-size: 13px; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--craie-fond-2); border: 1px solid var(--trait-fort); position: relative; cursor: pointer; flex: 0 0 auto; margin-top: 2px; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--craie-douce); transition: transform 0.15s; }
.switch input:checked { background: var(--lueur); border-color: var(--lueur); }
.switch input:checked::after { background: var(--uness-blanc); transform: translateX(16px); }

/* ---- step-by-step assistant ---- */
dialog.wizard { max-width: 900px; width: calc(100% - 24px); }
dialog.wizard .box-head .sub { font-family: var(--titre); font-size: 20px; font-weight: 600; color: var(--craie); margin-left: 4px; }
.wizard-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 10px 24px 0; }
.wizard-steps span { height: 4px; border-radius: 2px; background: var(--trait); }
.wizard-steps span.done { background: var(--lueur); }
.wizard-steps span.cur { background: var(--braise); }
.wizard-body { max-height: min(62vh, 640px); overflow: auto; padding-bottom: 8px; }
.wizard-body .ed-step { margin: 0; border: 0; padding: 0; background: transparent; }
.wizard-body .ed-step > .list-head:first-child { display: none; } /* the pop-up head already names the step */
.wizard-body .tag-options { position: static; margin-top: 6px; }
#wizard-hint.err { color: var(--rose); font-weight: 600; }
.wizard-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--trait); }
.ed-step { margin: 0; }
.ed-step.class-meta + .ed-step.class-meta { margin-top: 10px; }
.wizard-summary { display: grid; grid-template-columns: 180px 1fr; gap: 8px 14px; font-size: 14px; }
.wizard-summary dt { color: var(--craie-faible); font-weight: 600; }
.wizard-summary dd { margin: 0; }
@media (max-width: 600px) { .wizard-summary { grid-template-columns: 1fr; } }

/* ---- launch dialog: sections ---- */
dialog.exam-dialog { max-width: 520px; }
dialog.exam-dialog .arrowed-list > li { color: var(--craie); }
dialog.exam-dialog p { color: var(--craie); }
dialog.modal .eyebrow { margin: 6px 0 4px; }
.launch-date { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.launch-date input[type="date"] { width: auto; min-height: 38px; padding: 6px 10px; }
dialog.modal .option { padding: 9px 12px; margin: 6px 0; }
dialog.modal .option input[type="checkbox"], dialog.modal .option input[type="radio"] { width: 16px; height: 16px; }

/* ---- projection screen: lobby with QR ---- */
.ecran-lobby-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; max-width: 1400px; margin: 0 auto; text-align: left; }
@media (max-width: 900px) { .ecran-lobby-grid { grid-template-columns: 1fr; text-align: center; } }
.ecran-qr { text-align: center; }
.ecran-qr img { display: block; width: clamp(160px, 22vw, 320px); height: auto; border-radius: 16px; background: var(--pastille); margin: 0 auto 8px; }
.ecran-qr .muted { font-size: clamp(14px, 1.5vw, 20px); }

/* ---- dark theme (opt-in from the header, data-theme="dark" on <html>, remembered
   in localStorage): the charter's own combination "white on #0D2957", the logo all
   in white as on a coloured ground. The light charter stays the default. ---- */
:root[data-theme="dark"] {
	--nuit: var(--uness-encre);
	--nuit-profonde: #0A2147;
	--voile: #163B78;
	--craie: var(--uness-blanc);
	--craie-douce: rgba(255, 255, 255, 0.76);
	--craie-faible: rgba(255, 255, 255, 0.55);
	--trait: rgba(255, 255, 255, 0.14);
	--trait-fort: rgba(255, 255, 255, 0.28);
	--craie-fond: rgba(255, 255, 255, 0.05);
	--craie-fond-2: rgba(255, 255, 255, 0.10);
	--lueur-fond: rgba(39, 122, 254, 0.22);
	--lueur-fond-2: rgba(39, 122, 254, 0.36);
	--lueur-texte: var(--uness-blanc);
	--lueur-vive: #4A90FF;
	--lueur-bord: rgba(39, 122, 254, 0.6);
	--braise: var(--uness-blanc);
	--braise-fond: rgba(255, 255, 255, 0.10);
	--braise-bord: rgba(255, 255, 255, 0.35);
	--iris: var(--uness-blanc);
	--iris-fond: rgba(255, 255, 255, 0.08);
	--iris-bord: rgba(255, 255, 255, 0.30);
	--rose: #FF8A80;
	--rose-fond: rgba(255, 138, 128, 0.12);
	--rose-bord: rgba(255, 138, 128, 0.45);
	--sur-accent: var(--uness-blanc);
	--puits: #0A2147;
	--puits-voile: rgba(10, 33, 71, 0.55);
	--panneau-bas: var(--voile);
	--barre: rgba(13, 41, 87, 0.92);
	--rideau: rgba(5, 16, 36, 0.7);
	--pastille: var(--uness-blanc);
	--jauge-a: rgba(255, 255, 255, 0.06);
	--jauge-b: rgba(255, 255, 255, 0.14);
	--logo-picto: var(--uness-blanc);
	--logo-texte: var(--uness-blanc);
	--shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	--schema: dark;
}
:root[data-theme="dark"] .session-code, :root[data-theme="dark"] .tag-chip.on, :root[data-theme="dark"] .toast, :root[data-theme="dark"] .tag-chip.mode.on { background: var(--uness-bleu); border-color: var(--uness-bleu); color: var(--uness-blanc); }
:root[data-theme="dark"] .switch input:checked::after { background: var(--uness-blanc); }

/* Full screen (exam mode): the page must look exactly as it does in a tab. The
   browser paints its own black backdrop behind a fullscreen element; give the
   root the page ground so nothing else shows through, and keep the layout. */
:root:fullscreen, :root:-webkit-full-screen { background: var(--nuit); width: 100%; height: 100%; overflow: auto; }
:root:fullscreen::backdrop { background: var(--nuit); }
:root[data-theme="dark"]:fullscreen::backdrop { background: var(--nuit); }

/* Theme switch in the console header. */
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--trait-fort); background: transparent; color: var(--craie-douce); font: 600 13px var(--sans); cursor: pointer; }
@media (max-width: 560px) { .topbar .theme-toggle #theme-label { display: none; } .topbar .theme-toggle { padding: 0 10px; } }
.ecran-footer .theme-toggle { font-size: clamp(12px, 1.1vw, 15px); opacity: 0.7; }
.theme-toggle:hover { color: var(--craie); border-color: var(--craie-douce); background: var(--craie-fond-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--lueur); outline-offset: 2px; }