/* 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); }
/* The native drop-down list is painted by the browser outside the page: give it
   plain hex colours (some browsers ignore custom properties there), white in the
   light charter, the well colour in the dark theme. */
select, select option, select optgroup { background-color: #FFFFFF; color: #0D2957; color-scheme: light; }
:root[data-theme="dark"] select, :root[data-theme="dark"] select option, :root[data-theme="dark"] select optgroup { background-color: #0A2147; color: #FFFFFF; color-scheme: dark; }
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: 12px 16px; margin: 10px 0; font-size: 15px; border: 1px solid transparent; border-left-width: 5px; }
.notice.err { background: var(--rose-fond); color: var(--rose); border-color: var(--rose-bord); border-left-color: var(--rose); font-weight: 600; }
.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 { font-size: 14px; padding: 7px 14px; } /* the presenter zooms and measures on the projected screen too (2026-09-30) */
/* 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%; }

/* ---- "Nouvel ECG" pop-up (2026-10-01): the wiki's exam form, asked at the drop ---- */
dialog.ecg-dialog { max-width: 940px; }
.ecg-dialog-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 4px 20px; }
.ecg-dialog-form .field:first-child { margin-top: 4px; }
.ecg-dialog-form .grid-3.tight { align-items: start; }
.ecg-dialog-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding-top: 4px; }
.ecg-dialog-side img { width: 100%; border: 1px solid var(--trait-fort); border-radius: 10px; background: #fff; }
.ecg-dialog .notice.err, .ecg-dialog .btn-row { grid-column: 1 / -1; }
.ecg-dialog .req { color: var(--rose); font-weight: 700; }
.ecg-dialog .box-head .sub { margin-left: auto; }
@media (max-width: 700px) { .ecg-dialog-body { grid-template-columns: 1fr; } .ecg-dialog-side { order: -1; flex-direction: row; align-items: center; } .ecg-dialog-side img { width: 140px; } }

/* ---- ECG viewer (2026-09-30): pan, zoom, measurements, caliper, calibration ---- */
.ecgview { position: fixed; inset: 0; z-index: 50; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--craie); flex-direction: column; background: var(--nuit); }
.ecgview[open] { display: flex; }
.ecgview::backdrop { background: transparent; }
.ecgview-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px; background: var(--barre); border-bottom: 1px solid var(--trait); }
.ecgview-tools, .ecgview-zoom, .ecgview-scale { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ecgview-bar .btn { padding: 6px 12px; font-size: 13px; }
.ecgview-bar .btn[aria-pressed="true"] { background: var(--craie); border-color: var(--craie); color: var(--sur-accent); }
.ecgview-scale label { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 600; color: var(--craie-douce); }
.ecgview-scale select, .ecgview-ref { width: auto; padding: 4px 8px; font-size: 13px; border-radius: 8px; }
.ecgview-close { margin-left: auto; }
.ecgview-hint { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 5px 12px; font-size: 13px; color: var(--craie-douce); background: var(--barre); border-bottom: 1px solid var(--trait); }
.ecgview-status { font-weight: 600; color: var(--craie); }
.ecgview-stage { position: relative; flex: 1; overflow: hidden; background: #cfd4dc; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.ecgview-stage.tool-move:active { cursor: grabbing; }
.ecgview-stage.tool-time, .ecgview-stage.tool-amp, .ecgview-stage.tool-both, .ecgview-stage.tool-calib { cursor: crosshair; }
.ecgview-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; background: #fff; pointer-events: none; }
.ecgview-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ecgview-overlay text { font: 700 14px var(--sans); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.ecgview-pin circle { fill: #277AFE; stroke: #fff; stroke-width: 2px; }
.ecgview-pin.on circle { fill: #0D2957; }
.ecgview-pin text { fill: #fff; stroke: none; font-size: 13px; }
@media (max-width: 640px) {
	.ecgview-bar { gap: 6px 8px; padding: 6px 8px; }
	.ecgview-bar .btn { padding: 5px 9px; font-size: 12px; }
	.ecgview-scale label { font-size: 11px; }
	.ecgview-hint { padding: 4px 8px; font-size: 12px; }
	/* On a phone the explanation of the tool would push the tracing down: only the calibration keeps its instruction. */
	.ecgview:not(.calibrating) .ecgview-hint-text { display: none; }
}

/* ---- console home: the lists live behind buttons (2026-09-30) ---- */
.home-actions { margin: 4px 0 0; }
.home-toggle[aria-pressed="true"] { background: var(--craie); border-color: var(--craie); color: var(--sur-accent); }
.home-toggle .count { font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--craie-fond-2); color: var(--craie); }
.home-toggle[aria-pressed="true"] .count { background: var(--sur-accent); }
.home-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--trait); }
.home-panel .bank-tools { margin-top: 0; }

/* ---- 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 alert (case removed, link copied, quiz imported…): top centre, under the
   header, above every overlay, so it is seen wherever the page is scrolled. */
.toast {
	position: fixed;
	left: 50%;
	top: 76px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	max-width: min(720px, calc(100% - 32px));
	padding: 14px 16px 14px 22px;
	border-radius: 14px;
	background: var(--craie);
	color: var(--sur-accent);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	box-shadow: 0 14px 40px rgba(13, 41, 87, 0.35), 0 0 0 4px var(--lueur-fond-2);
	z-index: 60;
	animation: toast-in 0.25s ease-out;
}
.toast .toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.toast-undo { flex-shrink: 0; padding: 7px 16px; border: 0; border-radius: 999px; background: var(--uness-blanc); color: var(--uness-encre); font: inherit; font-size: 15px; cursor: pointer; }
.toast-undo:hover { background: var(--lueur-fond-2); }
.toast-close { flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.8; }
.toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.toast-undo:focus-visible, .toast-close:focus-visible { outline: 3px solid var(--uness-blanc); outline-offset: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.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 picker (2026-09-28): tall results on the left, the cases attached to the
   class on the right, kept in view while the results scroll. */
.case-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 14px; align-items: start; margin: 0 0 10px; }
.case-workspace:has(.case-results[hidden]) { grid-template-columns: 1fr; }
.case-picked { position: sticky; top: 0; max-height: min(72vh, 1000px); overflow: auto; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--voile); }
.case-picked .list-head { margin: 4px 0 10px; }
/* "Ajouter un ECG": the button is a drop target, and so is the whole case area. */
.ecg-drop { cursor: pointer; border: 1px dashed var(--trait-fort); }
.ecg-drop.drop-armed, .case-workspace.drop-armed { outline: 2px dashed var(--lueur); outline-offset: 3px; background: var(--lueur-fond); }
/* Drop zone of a question without image: a wide dashed band. */
.q-ecg-drop { display: flex; align-items: center; justify-content: center; min-height: 72px; margin: 8px 0 12px; border: 1px dashed var(--trait-fort); border-radius: 12px; color: var(--craie-douce); font: 600 14px var(--sans); background: var(--craie-fond); }
.q-ecg-drop:hover { border-color: var(--lueur); color: var(--craie); }
/* An attached case in the narrow column: thumbnail, text and the remove button on
   one row, the source host underneath, the context clamped to three lines. */
.case-picked .case-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; }
.case-picked .case-list li .case-thumb { flex-basis: auto; width: 96px; height: 56px; }
.case-picked .case-list li .case-main .muted { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.case-picked .case-list li > span.muted { grid-column: 1 / 3; margin-left: 0 !important; }
.case-picked .case-list li > .btn, .case-picked .case-list li > .case-btns { grid-row: 1; grid-column: 3; display: flex; gap: 2px; }
.case-btns .btn { padding: 6px 10px; }
/* Bottom line, the full width of the card: origin on the left, the bank action on the right, never wrapped. */
.case-picked .case-list li > .case-foot { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.case-foot .btn { padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.case-picked .case-list li.muted { display: block; }
@media (max-width: 900px) { .case-workspace { grid-template-columns: 1fr; } .case-picked { position: static; max-height: none; } }
.case-results { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 10px; max-height: min(72vh, 1000px); 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.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.case-filters .field { margin-top: 8px; }
@media (max-width: 820px) { .case-filters, .case-filters.two, .case-filters.three { 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: 1200px; 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(80vh, 1000px); 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-hint.err { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
/* A finding in the validation banner is a link to its zone; the zone flashes on arrival. */
.problem-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.problem-link:hover { color: var(--craie); }
@keyframes attention { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--lueur-fond-2), 0 0 0 6px var(--lueur); } }
.attention { animation: attention 2.2s ease-out 1; border-radius: 12px; }
.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, :root[data-theme="dark"] .home-toggle[aria-pressed="true"], :root[data-theme="dark"] .ecgview-bar .btn[aria-pressed="true"] { background: var(--uness-bleu); border-color: var(--uness-bleu); color: var(--uness-blanc); }
:root[data-theme="dark"] .home-toggle[aria-pressed="true"] .count { background: var(--uness-blanc); color: var(--uness-bleu); }
: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; }