/* Quiz infernal Animateur — application (app.js, editor.js, live.js).
   Interface claire et calme ; la couleur forte est réservée à la marque (violet du logo) et aux
   actions. L'écran de la salle a ses propres styles (show.css). */

:root {
	--fond: #f6f5fa;
	--blanc: #ffffff;
	--encre: #1d1a2a;
	--ardoise: #5c5673;
	--brume: #8b86a0;
	--trait: #e5e2ee;
	--trait-fort: #cfcadf;
	--violet: #31038a;
	--violet-2: #4b2bb3;
	--violet-doux: #efeafd;
	--violet-pale: #f7f4ff;
	--flamme: #fdd018;
	--braise: #ff4343;
	--bon: #0b7a38;
	--bon-doux: #e4f5ea;
	--alerte: #8a5300;
	--alerte-doux: #fff3d6;
	--danger: #c42b2b;
	--danger-doux: #fde8e8;
	--info-doux: #e8f1fd;
	--r: 12px;
	--r-s: 8px;
	--ombre: 0 1px 2px rgba(29, 26, 42, .06), 0 1px 1px rgba(29, 26, 42, .03);
	--ombre-haute: 0 18px 50px rgba(29, 26, 42, .18);
	--police: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 16px/1.5 var(--police); }
body.qa-full { background: #000; overflow: hidden; }
a { color: var(--violet-2); text-underline-offset: 2px; }
a:hover { color: var(--violet); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--flamme); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .7em; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muet { color: var(--ardoise); }
.petit { font-size: .875rem; }
.tout-petit { font-size: .8rem; }
.num { font-variant-numeric: tabular-nums; }
.gras { font-weight: 700; }
.ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ligne.fin { justify-content: flex-end; }
.ligne.entre { justify-content: space-between; }
.pile { display: grid; gap: 16px; }
.pile.serree { gap: 8px; }
.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .grille2, .grille3 { grid-template-columns: 1fr; } }
.icone { width: 20px; height: 20px; flex: none; }
.icone.p { width: 16px; height: 16px; }

/* ——— Boutons ——— */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 42px; padding: 8px 16px; border-radius: 10px;
	border: 1px solid var(--trait-fort); background: var(--blanc); color: var(--encre);
	font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--violet-pale); border-color: var(--violet-2); color: var(--violet); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.prim { background: var(--violet); border-color: var(--violet); color: #fff; }
.btn.prim:hover { background: var(--violet-2); color: #fff; }
.btn.feu { background: var(--braise); border-color: var(--braise); color: #fff; }
.btn.feu:hover { background: #e43131; color: #fff; }
.btn.fantome { background: transparent; border-color: transparent; }
.btn.fantome:hover { background: var(--violet-doux); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-doux); border-color: var(--danger); color: var(--danger); }
.btn.pt { min-height: 34px; padding: 4px 12px; font-size: .875rem; border-radius: 8px; }
.btn.gd { min-height: 54px; padding: 12px 24px; font-size: 1.05rem; border-radius: 14px; }
.btn.ic { width: 38px; min-height: 38px; padding: 0; }
.btn.ic.pt { width: 32px; min-height: 32px; }
.btn.bloc { width: 100%; }
.btn.actif { background: var(--violet-doux); border-color: var(--violet-2); color: var(--violet); }
.lien-btn { background: none; border: 0; padding: 0; color: var(--violet-2); text-decoration: underline; cursor: pointer; font-weight: 400; }

/* ——— Champs ——— */
.champ { display: grid; gap: 6px; min-width: 0; }
.champ > label, .champ > .lab { font-weight: 700; font-size: .9rem; }
.champ .aide { color: var(--ardoise); font-size: .84rem; }
.entree, .champ input[type=text], .champ input[type=email], .champ input[type=password], .champ input[type=number], .champ input[type=time], .champ input[type=date], .champ input[type=url], .champ input[type=search], .champ select, .champ textarea, input.entree, select.entree, textarea.entree {
	width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r-s);
	border: 1px solid var(--trait-fort); background: var(--blanc);
}
.champ textarea, textarea.entree { min-height: 90px; resize: vertical; line-height: 1.45; }
.entree:focus, .champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--violet-2); outline: 2px solid var(--violet-doux); outline-offset: 0; }
.entree.court, .champ input.entree.court { width: 110px; }
.entree.tres-court, .champ input.entree.tres-court { width: 80px; }
.champ > input, .champ > select, .champ > .segments { align-self: start; }
.erreur-champ { color: var(--danger); font-size: .85rem; }
.case { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.35; }
.case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--violet); flex: none; }
.case .aide { display: block; color: var(--ardoise); font-size: .84rem; }
.segments { display: inline-flex; flex-wrap: wrap; background: var(--fond); border: 1px solid var(--trait); border-radius: 10px; padding: 3px; gap: 3px; }
.segments button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--ardoise); display: inline-flex; align-items: center; gap: 6px; }
.segments button[aria-pressed="true"] { background: var(--blanc); color: var(--violet); box-shadow: var(--ombre); }
.curseur { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.curseur input[type=range] { width: 100%; accent-color: var(--violet); }

/* ——— Panneaux ——— */
.panneau { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); }
.panneau > .tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.panneau > .corps { padding: 18px; }
.panneau.plat { box-shadow: none; }
.encart { border-radius: var(--r); padding: 12px 14px; font-size: .92rem; display: flex; gap: 10px; align-items: flex-start; }
.encart.info { background: var(--info-doux); }
.encart.alerte { background: var(--alerte-doux); color: #5d3a00; }
.encart.danger { background: var(--danger-doux); color: #7b1515; }
.encart.bon { background: var(--bon-doux); color: #0b4d25; }
.encart.fort { background: var(--violet-doux); color: var(--violet); }
.encart .icone { margin-top: 1px; }
.pastille { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--fond); color: var(--ardoise); border: 1px solid var(--trait); white-space: nowrap; }
.pastille.v { background: var(--violet-doux); color: var(--violet); border-color: transparent; }
.pastille.b { background: var(--bon-doux); color: var(--bon); border-color: transparent; }
.pastille.a { background: var(--alerte-doux); color: var(--alerte); border-color: transparent; }
.pastille.r { background: var(--danger-doux); color: var(--danger); border-color: transparent; }
.vide { text-align: center; padding: 40px 16px; color: var(--ardoise); }
.vide .icone { width: 40px; height: 40px; color: var(--brume); margin-bottom: 8px; }

/* ——— Structure ——— */
.cadre { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--violet); color: #fff; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; text-decoration: none; }
.marque img { width: 42px; height: 42px; }
.marque b { display: block; font-family: "Bungee", var(--police); font-weight: 400; font-size: .95rem; line-height: 1; }
.marque span { display: block; color: #cfc4f3; font-size: .8rem; margin-top: 4px; }
.lienm { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: #ece7fc; text-decoration: none; }
.lienm:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lienm[aria-current="page"] { background: #fff; color: var(--violet); font-weight: 700; }
.menu .sep { height: 1px; background: rgba(255, 255, 255, .14); margin: 10px 4px; }
.menu-pied { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; }
.menu-pied select { width: 100%; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 6px 8px; margin: 6px 0 10px; }
.menu-pied select option { color: var(--encre); }
.menu-pied .actions { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.menu-pied button, .menu-pied a { color: #fff; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-size: .86rem; }
.contenu { min-width: 0; padding: 28px 32px 80px; max-width: 1280px; width: 100%; }
.entete { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin-bottom: 22px; }
.entete .titres { flex: 1 1 320px; min-width: 0; }
.entete .titres p { color: var(--ardoise); margin: 6px 0 0; }
.barre-mobile { display: none; }
.voile { display: none; }
.direct { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--braise); color: #fff; border-radius: var(--r); padding: 12px 16px; margin-bottom: 20px; }
.direct b { font-weight: 700; }
.direct .btn { border-color: #fff; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; flex: none; }
@keyframes pulse { 50% { opacity: .25; } }

@media (max-width: 900px) {
	.cadre { grid-template-columns: 1fr; }
	.menu { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
	.cadre.ouvert .menu { transform: none; box-shadow: var(--ombre-haute); }
	.voile { display: none; }
	.cadre.ouvert .voile { display: block; position: fixed; inset: 0; background: rgba(20, 16, 40, .4); z-index: 55; }
	.barre-mobile { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; background: var(--violet); color: #fff; padding: 10px 16px; }
	.barre-mobile img { width: 32px; height: 32px; }
	.barre-mobile b { font-family: "Bungee", var(--police); font-weight: 400; font-size: .85rem; }
	.barre-mobile button { background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; }
	.contenu { padding: 20px 16px 90px; }
}

/* ——— Cartes de quiz ——— */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; }
.carte .vignette { aspect-ratio: 16 / 9; position: relative; background: #140a33; }
.carte .vignette .qs-frame { position: absolute; inset: 0; border-radius: 0; }
.carte .corps { padding: 14px 16px; display: grid; gap: 6px; flex: 1; }
.carte h3 { font-size: 1.05rem; }
.carte .pied { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--trait); flex-wrap: wrap; }
.carte.nouvelle { border-style: dashed; border-width: 2px; background: transparent; box-shadow: none; align-items: center; justify-content: center; min-height: 240px; cursor: pointer; color: var(--violet); font-weight: 700; gap: 10px; }
.carte.nouvelle:hover { background: var(--violet-pale); }

/* ——— Tableaux ——— */
.tableau { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tableau th { text-align: left; font-size: .8rem; color: var(--ardoise); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 9px 10px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .d { text-align: right; }
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ——— Jauge ——— */
.jauge { height: 10px; border-radius: 999px; background: var(--fond); border: 1px solid var(--trait); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--violet-2); border-radius: 999px; }
.jauge.haute i { background: var(--braise); }

/* ——— Fenêtres ——— */
dialog.fen { border: 0; padding: 0; border-radius: 16px; box-shadow: var(--ombre-haute); width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); color: var(--encre); }
dialog.fen.large { width: min(1100px, calc(100vw - 24px)); }
dialog.fen::backdrop { background: rgba(20, 16, 40, .5); }
.fen-in { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.fen-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--trait); }
.fen-corps { padding: 18px 20px; overflow-y: auto; }
.fen-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--trait); flex-wrap: wrap; }
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; display: grid; gap: 8px; width: min(460px, calc(100vw - 24px)); }
.toast { background: var(--encre); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--ombre-haute); font-size: .94rem; animation: monte .2s both; }
.toast.err { background: var(--danger); }
@keyframes monte { from { transform: translateY(10px); opacity: 0; } }

/* ——— Connexion ——— */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 500px at 50% -100px, #3c0fa6, transparent 70%), #160636; }
.auth-boite { width: min(440px, 100%); background: var(--blanc); border-radius: 18px; box-shadow: var(--ombre-haute); padding: 28px; }
.auth-boite .marque { color: var(--violet); padding: 0 0 18px; }
.auth-boite .marque span { color: var(--ardoise); }
.auth-boite h1 { font-size: 1.35rem; margin-bottom: 6px; }
.auth-boite form { display: grid; gap: 14px; margin-top: 18px; }
.code-entree { font-size: 1.8rem !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.auth-liens { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: .9rem; }
.auth-langue { position: fixed; top: 14px; right: 16px; color: #fff; }

/* ——— Éditeur ——— */
.ed { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ed-barre { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--blanc); border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.ed-barre .titre { font-weight: 700; font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 200px; }
.ed-etat { font-size: .84rem; color: var(--ardoise); display: inline-flex; align-items: center; gap: 6px; }
.ed-etat.err { color: var(--danger); }
.ed-corps { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(360px, 34%); min-height: 0; }
.ed-plan { border-right: 1px solid var(--trait); background: var(--blanc); overflow-y: auto; padding: 12px 10px 40px; }
.ed-form { overflow-y: auto; padding: 22px 26px 80px; }
.ed-apercu { border-left: 1px solid var(--trait); background: #ebe8f3; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ed-apercu .scene { aspect-ratio: 16 / 9; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 26px rgba(20, 16, 40, .25); background: #000; }
.ed-apercu .scene .qs-frame { position: absolute; inset: 0; }
.ed-onglets { display: none; }
@media (max-width: 1180px) { .ed-corps { grid-template-columns: 270px minmax(0, 1fr); } .ed-apercu { display: none; } .ed-apercu.montre { display: flex; position: fixed; inset: auto 12px 12px auto; width: min(420px, 60vw); z-index: 30; border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-haute); } }
@media (max-width: 800px) {
	.ed-corps { grid-template-columns: 1fr; }
	.ed-plan { display: none; border-right: 0; }
	.ed.vue-plan .ed-plan { display: block; }
	.ed.vue-plan .ed-form { display: none; }
	.ed-onglets { display: flex; gap: 6px; padding: 8px 12px; background: var(--blanc); border-bottom: 1px solid var(--trait); }
	.ed-form { padding: 16px 16px 90px; }
	.ed-barre { gap: 6px; }
	.ed-barre .lbl, .ed-barre .oeil { display: none; }
	.ed-barre .titre { flex-basis: 120px; }
	.ed-apercu.montre { width: calc(100vw - 24px); }
}
.plan-titre { font-size: .76rem; font-weight: 700; color: var(--brume); text-transform: uppercase; letter-spacing: .06em; margin: 16px 8px 6px; }
.plan-lien { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 9px; border-radius: 9px; cursor: pointer; color: var(--encre); font-size: .92rem; }
.plan-lien:hover { background: var(--violet-pale); }
.plan-lien[aria-current="true"] { background: var(--violet-doux); color: var(--violet); font-weight: 700; }
.plan-lien .icone { color: var(--brume); }
.plan-lien[aria-current="true"] .icone { color: var(--violet); }
.plan-ronde { border: 1px solid var(--trait); border-radius: 12px; margin: 8px 0; background: var(--fond); }
.plan-ronde > .plan-lien { font-weight: 700; }
.plan-q { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 8px; }
.plan-q .plan-lien { padding: 6px 8px; font-size: .88rem; gap: 7px; }
.plan-q .n { color: var(--brume); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.plan-q .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.plan-q.drag-over { box-shadow: inset 0 2px 0 var(--violet-2); }
.plan-q .poignee { cursor: grab; color: var(--brume); padding: 4px; border: 0; background: none; }
.plan-ajout { display: flex; gap: 4px; padding: 4px 8px 10px; flex-wrap: wrap; }
.q-type { font-size: .72rem; }
.section-ed { display: grid; gap: 18px; max-width: 860px; }
.section-ed > h2 { font-size: 1.3rem; }
.bloc-ed { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 16px; display: grid; gap: 14px; }
.bloc-ed > h3 { display: flex; align-items: center; gap: 8px; }
.choix-ligne { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.choix-ligne .lettre { width: 34px; height: 34px; border-radius: 8px; background: var(--fond); display: grid; place-items: center; font-weight: 700; color: var(--ardoise); }
.choix-ligne.bonne .lettre { background: var(--bon); color: #fff; }
.choix-ligne input[type=radio] { width: 20px; height: 20px; accent-color: var(--bon); }
.partie-ligne { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) 90px 120px auto; gap: 8px; align-items: end; }
@media (max-width: 800px) { .partie-ligne { grid-template-columns: 1fr 1fr; } }
.media-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.media-choix button { border: 2px solid var(--trait); background: var(--blanc); border-radius: 12px; padding: 12px; cursor: pointer; display: grid; gap: 4px; justify-items: start; text-align: left; }
.media-choix button[aria-pressed="true"] { border-color: var(--violet-2); background: var(--violet-pale); }
.media-choix button b { display: flex; align-items: center; gap: 8px; }
.media-choix .reco { color: var(--bon); font-size: .78rem; font-weight: 700; }
.lecteur { background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; position: relative; }
.lecteur.audio { aspect-ratio: auto; background: var(--fond); padding: 10px; }
.lecteur iframe, .lecteur video, .lecteur > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lecteur.audio audio { width: 100%; }
.extrait { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.extrait .champ .ligne { flex-wrap: nowrap; }
.miniatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.miniature { border: 2px solid var(--trait); border-radius: 10px; background: var(--blanc); padding: 0; cursor: pointer; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.miniature[aria-pressed="true"] { border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-doux); }
.miniature .img { aspect-ratio: 4 / 3; background: var(--fond) center / contain no-repeat; display: grid; place-items: center; color: var(--brume); }
.miniature .img .icone { width: 34px; height: 34px; }
.miniature .nom { font-size: .76rem; padding: 5px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot { border: 2px dashed var(--trait-fort); border-radius: 12px; padding: 18px; text-align: center; color: var(--ardoise); background: var(--blanc); cursor: pointer; }
.depot.survol { border-color: var(--violet-2); background: var(--violet-pale); }
.envoi { display: grid; gap: 6px; }
.blocs-liste { display: grid; gap: 10px; }
.bloc-ligne { border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); }
.bloc-ligne > .tete { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--trait); background: var(--fond); border-radius: 12px 12px 0 0; }
.bloc-ligne > .tete b { flex: 1; font-size: .9rem; }
.bloc-ligne > .corps { padding: 12px; display: grid; gap: 10px; }
.themes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.theme-carte { border: 2px solid var(--trait); border-radius: 12px; overflow: hidden; background: var(--blanc); cursor: pointer; padding: 0; text-align: left; }
.theme-carte[aria-pressed="true"] { border-color: var(--violet-2); box-shadow: 0 0 0 3px var(--violet-doux); }
.theme-carte .scene { aspect-ratio: 16 / 9; position: relative; }
.theme-carte .scene .qs-frame { position: absolute; inset: 0; border-radius: 0; }
.theme-carte .nom { padding: 8px 10px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.couleur { display: flex; align-items: center; gap: 8px; border: 1px solid var(--trait); border-radius: 10px; padding: 6px 8px; background: var(--blanc); }
.couleur input[type=color] { width: 38px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; }
.banque-res { display: grid; gap: 8px; }
.banque-item { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; background: var(--blanc); }
.banque-item.choisi { border-color: var(--violet-2); background: var(--violet-pale); }
.banque-item .q { font-weight: 700; }
.banque-item .rep { font-size: .86rem; color: var(--ardoise); }
.banque-item img { width: 64px; height: 48px; object-fit: contain; background: var(--fond); border-radius: 6px; }
.banque-filtres { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 800px) { .banque-filtres { grid-template-columns: 1fr 1fr; } }

/* ——— Console ——— */
.cons { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: #120a2c; color: #f4f0ff; }
.cons a { color: #d9ccff; }
.cons-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1c0f45; border-bottom: 1px solid #2d1c68; flex-wrap: wrap; }
.cons-tete b { font-size: .98rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voyant { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: #2a1a5e; color: #cbbef5; }
.voyant i { width: 8px; height: 8px; border-radius: 50%; background: #8b86a0; }
.voyant.ok i { background: #36d27a; }
.voyant.mal i { background: var(--braise); }
.cons-corps { padding: 14px; display: grid; gap: 14px; align-content: start; max-width: 1100px; width: 100%; margin: 0 auto; }
.cons-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .cons-grille { grid-template-columns: 1fr; } }
.cons-carte { background: #1b1040; border: 1px solid #2d1c68; border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.cons-carte h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: #a99bdc; }
.cons-scene { aspect-ratio: 16 / 9; position: relative; border-radius: 10px; overflow: hidden; background: #000; }
.cons-scene .qs-frame { position: absolute; inset: 0; }
.cons-rep { background: #0f3a24; border: 1px solid #1b6b42; color: #d7ffe7; border-radius: 12px; padding: 12px 14px; font-size: 1.05rem; }
.cons-rep b { color: #7ff0ae; }
.cons-notes { background: #3a2a07; border: 1px solid #6b4f10; color: #ffeec2; border-radius: 12px; padding: 10px 12px; font-size: .95rem; white-space: pre-line; }
.cons .btn { background: #2a1a5e; border-color: #3d2a82; color: #fff; }
.cons .btn:hover { background: #3a2680; border-color: #6a55c9; color: #fff; }
.cons .btn.prim { background: var(--flamme); border-color: var(--flamme); color: #1d1a2a; }
.cons .btn.prim:hover { background: #ffe15c; color: #1d1a2a; }
.cons .btn.feu { background: var(--braise); border-color: var(--braise); }
.cons .btn.actif { background: #efe7ff; color: var(--violet); border-color: #efe7ff; }
.cons .entree, .cons input, .cons select { background: #120a2c; border-color: #3d2a82; color: #fff; }
.cons-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #1c0f45; border-top: 1px solid #2d1c68; }
.cons-nav .btn { min-height: 62px; font-size: 1.15rem; border-radius: 16px; }
.cons-nav .suivant small { display: block; font-weight: 400; font-size: .78rem; opacity: .8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-nav .suivant { flex-direction: column; gap: 0; }
.cons-media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cons-media .btn { min-height: 56px; flex-direction: column; gap: 2px; font-size: .82rem; }
.cons-media .btn .icone { width: 24px; height: 24px; }
.cons-outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cons-outils .btn { min-height: 52px; white-space: normal; text-align: center; font-size: .86rem; }
.cons-onglets { display: flex; gap: 6px; overflow-x: auto; }
.cons-onglets button { flex: none; border: 1px solid #3d2a82; background: transparent; color: #cbbef5; padding: 8px 14px; border-radius: 999px; font-weight: 700; cursor: pointer; }
.cons-onglets button[aria-pressed="true"] { background: #efe7ff; color: var(--violet); border-color: #efe7ff; }
.cons-plan { display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.cons-plan button { text-align: left; border: 0; background: transparent; color: #e6defc; padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; font-size: .92rem; }
.cons-plan button:hover { background: #2a1a5e; }
.cons-plan button[aria-current="true"] { background: var(--flamme); color: #1d1a2a; font-weight: 700; }
.cons-plan button .n { opacity: .6; min-width: 2.2em; font-variant-numeric: tabular-nums; }
.cons-plan .grp { margin-top: 8px; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: #a99bdc; padding: 0 10px; }
.cons-points table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cons-points th, .cons-points td { padding: 6px 5px; border-bottom: 1px solid #2d1c68; text-align: center; }
.cons-points th:first-child, .cons-points td:first-child { text-align: left; }
.cons-points th { color: #a99bdc; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.cons-points th.cur { color: var(--flamme); }
.cons-points input { width: 62px; min-height: 38px; text-align: center; border-radius: 8px; padding: 4px; font-variant-numeric: tabular-nums; }
.cons-points td.cur input { border-color: var(--flamme); }
.cons-points .tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.suggestions { display: grid; gap: 4px; margin-top: 6px; }
.suggestions button { text-align: left; border: 1px solid #3d2a82; background: #221353; color: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.filtres-cons { display: grid; gap: 10px; }
.cons .curseur span { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* ——— Écran de la salle ——— */
.salle { position: fixed; inset: 0; background: #000; }
.salle .qs-frame { position: absolute; inset: 0; }
.salle-depart { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(8, 4, 20, .92); color: #fff; text-align: center; padding: 24px; }
.salle-depart .boite { max-width: 640px; display: grid; gap: 16px; justify-items: center; }
.salle-depart h1 { font-family: "Bungee", var(--police); font-weight: 400; font-size: 2rem; }
.salle-depart .btn { font-size: 1.2rem; min-height: 64px; padding: 14px 30px; }
.salle-depart kbd, .touches kbd { background: #2a1a5e; border: 1px solid #4b3a8f; border-radius: 6px; padding: 1px 7px; font-family: inherit; font-size: .85rem; color: #fff; }
.touches { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; text-align: left; font-size: .92rem; color: #d6cdf6; }
.salle-barre { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; display: flex; gap: 6px; padding: 8px; border-radius: 16px; background: rgba(20, 10, 50, .88); backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: opacity .3s; }
.salle-barre.cache { opacity: 0; pointer-events: none; }
.salle-barre .btn { background: transparent; border-color: transparent; color: #fff; min-height: 44px; }
.salle-barre .btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.salle-avis { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 95; background: rgba(20, 10, 50, .9); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: .95rem; }

/* ——— Répétition ——— */
.repet { height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 420px; background: #0b0620; }
.repet-salle { position: relative; }
.repet-salle .qs-frame { position: absolute; inset: 0; }
.repet-cons { overflow-y: auto; border-left: 1px solid #2d1c68; }
.repet-cons .cons { min-height: 100%; }
@media (max-width: 1000px) { .repet { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; } .repet-cons { border-left: 0; border-top: 1px solid #2d1c68; } }

/* ——— Feuille ——— */
.feuille-page { min-height: 100vh; background: #d9d6e2; }
.feuille-barre { position: sticky; top: 0; z-index: 10; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--blanc); border-bottom: 1px solid var(--trait); }
@media print { .feuille-barre, .toasts { display: none !important; } .feuille-page { background: #fff; } }
.repet-cons .cons-grille { grid-template-columns: 1fr; }

/* ——— Composer un quiz ——— */
.pas { display: inline-flex; align-items: center; gap: 10px; }
.pas b { min-width: 2ch; text-align: center; font-size: 1.1rem; }
.compo-rondes { display: grid; gap: 8px; }
.compo-ronde { display: grid; grid-template-columns: 84px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--r-s); }
.compo-ronde.soi { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 2fr) auto; }
.compo-ronde .theme { justify-content: flex-start; min-width: 0; }
.compo-ronde .theme span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compo-ronde .qc { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compo-ronde .qc select { width: auto; }
.compo-ronde .qc .btn[aria-pressed="true"] { background: var(--violet); color: #fff; border-color: var(--violet); }
@media (max-width: 800px) { .compo-ronde, .compo-ronde.soi { grid-template-columns: 1fr 1fr; } .compo-ronde .n { grid-column: 1 / -1; } .compo-ronde .theme { grid-column: 1 / -1; } .compo-ronde .qc { grid-column: 1 / -1; } }
.cats-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; margin-top: 12px; max-height: 52vh; overflow-y: auto; padding: 2px; }

/* ——— Flèche des remplaçantes ——— */
.alt-barre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; background: var(--violet-pale); border: 1px solid var(--violet-doux); border-radius: var(--r-s); }
.alt-barre .lab { font-weight: 700; color: var(--violet); }

/* ——— Assistant ——— */
.assist { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 40; display: flex; flex-direction: column; background: var(--blanc); border-left: 1px solid var(--trait-fort); box-shadow: var(--ombre-haute); }
.assist[hidden] { display: none; }
.assist-tete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.assist-tete b { flex: 1; display: inline-flex; align-items: center; gap: 6px; color: var(--violet); }
.assist-fil { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--fond); }
.bulle { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .94rem; line-height: 1.45; }
.bulle p { margin: 0 0 8px; white-space: pre-wrap; }
.bulle p:last-child { margin-bottom: 0; }
.bulle.moi { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 4px; }
.bulle.lui { align-self: flex-start; background: var(--blanc); border: 1px solid var(--trait); border-bottom-left-radius: 4px; }
.bulle.lui .ligne { margin-top: 8px; }
.bulle.attente { color: var(--ardoise); font-style: italic; }
.bulle.err { background: var(--danger-doux); border-color: transparent; color: #7b1515; }
.assist-saisie { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 4px; border-top: 1px solid var(--trait); }
.assist-saisie textarea { flex: 1; resize: none; }
.assist-note { margin: 0; padding: 4px 12px 10px; }

/* ——— Vérification ——— */
.btn .point { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--braise); color: #fff; font-size: .72rem; font-weight: 700; }
.btn .point.attente { background: var(--brume); }
.btn .point[hidden] { display: none; }
.sugg { border: 1px solid var(--trait); border-radius: var(--r-s); padding: 12px 14px; margin-top: 12px; display: grid; gap: 8px; }
.sugg p { margin: 0; }
.sugg .q { color: var(--ardoise); font-size: .92rem; }
.sugg.applied, .sugg.ignored { background: var(--fond); }
.sugg.ignored > p, .sugg.ignored .avant-apres { opacity: .6; }
.avant-apres { display: grid; gap: 3px; font-size: .92rem; }
.avant-apres .lab { font-size: .8rem; font-weight: 700; color: var(--ardoise); }
.avant-apres del { background: var(--danger-doux); color: #7b1515; padding: 2px 6px; border-radius: 4px; }
.avant-apres ins { background: var(--bon-doux); color: #0b4d25; padding: 2px 6px; border-radius: 4px; text-decoration: none; }