/* =====================================================
   QUIZ MBI85 - Styles
   Portrait : tout est empilé. Paysage : 2 colonnes.
   Thème cybersécurité : couleurs de :root (inchangées).
   Thème jeu vidéo : body.theme-jeux, plus bas.
   ===================================================== */

:root {
	--ink: #14213D;
	--paper: #EEF2F7;
	--card: #FFFFFF;
	--signal: #FFC93C;
	--signal-ombre: #D9A20E;
	--alert: #E4572E;
	--safe: #1B998B;
	--muted: #56657F;
	--line: #D3DBE6;
	--sur-signal: #14213D;
	--display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rayon: 18px;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #E8EDF6;
		--paper: #0E1629;
		--card: #18233D;
		--alert: #FF6E4D;
		--safe: #34C6B8;
		--muted: #9DAAC3;
		--line: #2A3757;
	}
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: clamp(17px, 0.6vw + 14px, 21px);
	line-height: 1.5;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	overscroll-behavior: none;
	-webkit-text-size-adjust: 100%;
}

input { -webkit-user-select: text; user-select: text; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

#app {
	min-height: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding:
		max(18px, env(safe-area-inset-top))
		max(22px, env(safe-area-inset-right))
		max(24px, env(safe-area-inset-bottom))
		max(22px, env(safe-area-inset-left));
}

.chargement { padding: 40px 0; text-align: center; color: var(--muted); }

/* ---------- En-tête ---------- */
.entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: clamp(20px, 4vh, 44px); }
.marque { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; }
.marque small { display: block; font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--muted); letter-spacing: 0; }
.marque-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.logo { display: block; height: clamp(44px, 7vh, 80px); width: auto; max-width: min(320px, 60vw); object-fit: contain; }
.bouton-discret { background: none; border: 2px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 15px; font-weight: 700; color: var(--muted); }

/* ---------- Titres et boutons ---------- */
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6.4vw, 78px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 20px; }
h2 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; margin: 0 0 14px; }
.accroche { font-size: clamp(20px, 1.2vw + 14px, 26px); font-weight: 700; line-height: 1.35; max-width: 34ch; margin: 0 0 14px; }
.intro { font-size: clamp(19px, 1.2vw + 12px, 23px); color: var(--muted); max-width: 32ch; margin: 0 0 30px; }

.cta {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--rayon);
	background: var(--signal);
	color: var(--sur-signal);
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(24px, 2vw + 14px, 30px);
	padding: 22px;
	box-shadow: 0 6px 0 var(--signal-ombre);
	transition: transform 0.08s, box-shadow 0.08s;
}
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--signal-ombre); }
.cta:disabled { opacity: 0.5; transform: none; }

.bouton-secondaire { background: none; border: 2px solid var(--line); border-radius: 14px; padding: 12px 20px; font-weight: 700; }

.lot { margin: 22px 0 0; padding: 16px 18px; border-left: 6px solid var(--signal); background: var(--card); border-radius: 0 14px 14px 0; font-weight: 700; }
.ferme { margin-top: 16px; color: var(--alert); font-weight: 700; }
.bareme { margin: -16px 0 26px; font-size: 16px; color: var(--muted); }

/* ---------- Accueil ---------- */
.accueil { display: grid; gap: 44px; }
.classement h2 { margin-bottom: 8px; }
.ligne { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.ligne .rang { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--muted); text-align: center; }
.ligne:first-of-type .rang { background: var(--signal); color: var(--sur-signal); border-radius: 10px; }
.ligne .nom { font-weight: 700; }
.ligne .detail { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.ligne .points { font-family: var(--display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.vide { color: var(--muted); padding: 12px 0; }

/* ---------- Formulaire ---------- */
.formulaire { max-width: 640px; margin: 0 auto; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: block; font-weight: 700; margin: 16px 0 6px; }
.facultatif { font-weight: 400; color: var(--muted); }
.champ { width: 100%; padding: 15px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); font-size: 20px; }
.champ:focus { border-color: var(--ink); outline: none; }
.case { display: flex; gap: 14px; align-items: flex-start; font-weight: 400; margin: 16px 0; }
.case input { width: 28px; height: 28px; flex: none; margin-top: 1px; accent-color: var(--safe); }
.erreur { color: var(--alert); font-weight: 700; min-height: 1.5em; margin: 10px 0; }
.retour { margin-bottom: 20px; }

/* ---------- Décompte 3-2-1 ---------- */
.decompte { min-height: 80vh; display: grid; place-items: center; text-align: center; }
.decompte b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(150px, 38vmin, 320px); line-height: 1; animation: surgir 0.9s ease-out; }
@keyframes surgir { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }

/* ---------- Jeu ---------- */
.hud { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: max(8px, env(safe-area-inset-top)) 0 14px; margin-top: calc(-1 * max(8px, env(safe-area-inset-top))); }
.hud-ligne { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: 8px; }
.hud-gauche { display: flex; align-items: baseline; gap: 16px; }
.hud-droite { display: flex; align-items: center; gap: 18px; }
.coeurs { display: inline-flex; gap: 6px; font-size: clamp(26px, 2vw + 16px, 36px); line-height: 1; }
.coeur { color: var(--alert); }
.coeur.perdu { color: var(--line); }
.coeur.vient-de-perdre { animation: perdre-vie 0.6s ease-out; }
@keyframes perdre-vie { 0% { transform: scale(1.5); color: var(--alert); } 40% { transform: scale(0.8) rotate(-12deg); } 100% { transform: scale(1); } }
.hud-score { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.4vw + 12px, 26px); background: var(--card); border-radius: 10px; padding: 2px 12px; font-variant-numeric: tabular-nums; }
.secondes { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 2.4vw + 14px, 38px); font-variant-numeric: tabular-nums; }
.meche { height: 16px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meche i { display: block; height: 100%; width: 100%; background: var(--signal); border-radius: 99px; transition: width 0.25s linear, background 0.3s; }
.meche.urgent i { background: var(--alert); }

.jeu { display: grid; gap: 20px; }
.question { font-family: var(--display); font-weight: 800; font-size: clamp(25px, 1.8vw + 14px, 36px); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.reponses { display: grid; gap: 12px; }
.reponse {
	text-align: left;
	background: var(--card);
	border: 3px solid var(--line);
	border-radius: 16px;
	padding: 16px 18px;
	min-height: 66px;
	font-size: clamp(18px, 0.8vw + 13px, 22px);
	font-weight: 700;
	transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.reponse:not(:disabled):active { border-color: var(--ink); }
.reponse:disabled { cursor: default; }
.reponse.choisie { border-color: var(--ink); }
.reponse.juste { border-color: var(--safe); background: color-mix(in srgb, var(--safe) 15%, var(--card)); }
.reponse.fausse { border-color: var(--alert); background: color-mix(in srgb, var(--alert) 13%, var(--card)); }
.reponse.estompee { opacity: 0.45; }

.correction { padding: 20px; border-radius: 16px; background: var(--card); border: 3px solid var(--safe); }
.correction.ratee { border-color: var(--alert); }
.correction strong { display: block; font-family: var(--display); font-size: 26px; margin-bottom: 6px; }
.correction p { margin: 0 0 18px; }
.correction .bonne-reponse { margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--safe) 14%, var(--card)); }
.correction .bonne-reponse span, .correction .pourquoi { font-weight: 700; color: var(--muted); }

.zone-correction:empty { display: none; }

/* ---------- Mises en situation ---------- */
.mail { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 17px; box-shadow: 0 10px 30px -18px rgba(20, 33, 61, 0.5); }
.mail-entete { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.mail-entete span { color: var(--muted); }
.mail-corps { padding: 14px 16px; white-space: pre-line; }
.mail-bouton { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 8px; background: #1F5FBF; color: #fff; font-weight: 700; }
.mail-pj { margin: 0 16px 16px; padding: 10px 12px; border: 2px dashed var(--line); border-radius: 10px; font-weight: 700; }

.sms { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 10px 30px -18px rgba(20, 33, 61, 0.5); }
.sms-de { font-size: 14px; color: var(--muted); text-align: center; font-weight: 700; }
.sms-bulle { align-self: flex-start; max-width: 90%; background: var(--paper); border-radius: 20px 20px 20px 5px; padding: 12px 16px; font-size: 17px; white-space: pre-line; }
.sms-lien { color: #1F6FE0; text-decoration: underline; word-break: break-all; }

.popup { background: #C62828; color: #fff; border-radius: 16px; padding: 20px; text-align: center; font-size: 17px; border: 4px solid #fff; box-shadow: 0 0 0 3px #C62828, 0 14px 30px -14px rgba(0, 0, 0, 0.6); }
.popup b { display: block; font-size: 23px; margin-bottom: 6px; }
.popup-action { display: inline-block; margin-top: 12px; background: #fff; color: #C62828; padding: 8px 16px; border-radius: 8px; font-weight: 700; }

.note { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--ink); border-radius: 14px; padding: 16px 18px; font-size: 18px; white-space: pre-line; }

/* ---------- Fin de partie ---------- */
.fin { display: grid; gap: 10px; }
.fin-intro { font-size: 22px; color: var(--muted); margin: 0; }
.score { font-family: var(--display); font-weight: 800; font-size: clamp(100px, 22vmin, 200px); line-height: 0.9; letter-spacing: -0.045em; margin: 4px 0 8px; }
.chiffres { display: flex; gap: 32px; flex-wrap: wrap; margin: 14px 0 26px; }
.chiffres div { font-size: 15px; color: var(--muted); }
.chiffres b { display: block; font-family: var(--display); font-size: 34px; color: var(--ink); }
.retour-auto { font-size: 14px; color: var(--muted); text-align: center; margin-top: 12px; }

/* ---------- Bandeau réseau ---------- */
.bandeau-reseau { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); background: var(--alert); color: #fff; font-weight: 700; text-align: center; z-index: 30; }

/* ---------- « Vous êtes toujours là ? » ---------- */
.toujours-la { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(8, 12, 24, 0.72); }
.toujours-la-boite { width: min(520px, 100%); background: var(--card); color: var(--ink); border-radius: 22px; padding: 28px; text-align: center; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); animation: surgir-boite 0.25s ease-out; }
.toujours-la-boite h2 { margin-bottom: 10px; }
.toujours-la-decompte { color: var(--muted); margin: 0 0 22px; font-variant-numeric: tabular-nums; }
@keyframes surgir-boite { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* =====================================================
   CHOIX DU THÈME
   Chaque tuile donne un avant-goût de son quiz.
   ===================================================== */
.choix h1 { margin-bottom: 12px; }
.choix .intro { margin-bottom: 26px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.tuile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 10px;
	min-height: clamp(210px, 32vh, 340px);
	padding: clamp(22px, 3vw, 34px);
	border: 0;
	border-radius: 24px;
	text-align: left;
	background: var(--card);
	color: var(--ink);
	box-shadow: 0 8px 0 rgba(0, 0, 0, 0.28);
	transition: transform 0.08s, box-shadow 0.08s;
}
.tuile:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); }
.tuile-emoji { font-size: clamp(48px, 6vmin, 72px); line-height: 1; margin-bottom: auto; }
.tuile-nom { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 2.6vw + 14px, 46px); line-height: 1; letter-spacing: -0.02em; }
.tuile-titre { font-size: clamp(17px, 0.6vw + 13px, 20px); font-weight: 700; opacity: 0.85; max-width: 26ch; }

.tuile-cyber { background: #14213D; color: #EEF2F7; }
.tuile-cyber .tuile-nom { color: #FFC93C; }

.tuile-jeux {
	background: #1A0F35 repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 5px);
	color: #F4EEFF;
	box-shadow: 0 8px 0 #5B2BD1;
}
.tuile-jeux:active { box-shadow: 0 3px 0 #5B2BD1; }
.tuile-jeux .tuile-nom { font-family: "Press Start 2P", monospace; font-weight: 400; font-size: clamp(20px, 1.4vw + 12px, 28px); line-height: 1.35; letter-spacing: 0; color: #FFD23F; }

.theme-nom { margin: 0 0 12px; font-weight: 700; color: var(--muted); }
.changer-theme { margin-top: 22px; }

/* =====================================================
   THÈME JEU VIDÉO : salle d'arcade
   Écran sombre à lignes de balayage, titres et chiffres en police pixel.
   ===================================================== */
body.theme-jeux {
	--ink: #F4EEFF;
	--paper: #1A0F35;
	--card: #2A1B55;
	--signal: #FFD23F;
	--signal-ombre: #B98C00;
	--alert: #FF5470;
	--safe: #3DDC97;
	--muted: #B9ABDD;
	--line: #43307A;
	--sur-signal: #1A0F35;
	--pixel: "Press Start 2P", "Courier New", monospace;
	color-scheme: dark;
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px);
	background-attachment: fixed;
}
body.theme-jeux h1 { font-family: var(--pixel); font-weight: 400; font-size: clamp(22px, 2.6vw + 8px, 44px); line-height: 1.4; letter-spacing: 0; }
body.theme-jeux .cta { font-family: var(--pixel); font-weight: 400; font-size: clamp(16px, 1vw + 11px, 22px); line-height: 1.4; }
body.theme-jeux .decompte b { font-family: var(--pixel); font-weight: 400; font-size: clamp(90px, 26vmin, 210px); color: var(--signal); }
body.theme-jeux .score { font-family: var(--pixel); font-weight: 400; font-size: clamp(54px, 12vmin, 118px); line-height: 1.1; letter-spacing: 0; color: var(--signal); }
body.theme-jeux .hud-score,
body.theme-jeux .secondes,
body.theme-jeux .ligne .points,
body.theme-jeux .ligne .rang,
body.theme-jeux .chiffres b { font-family: var(--pixel); font-weight: 400; letter-spacing: 0; }
body.theme-jeux .hud-score { font-size: clamp(12px, 0.6vw + 9px, 16px); padding: 6px 10px; }
body.theme-jeux .secondes { font-size: clamp(16px, 1vw + 10px, 22px); }
body.theme-jeux .ligne .points { font-size: clamp(14px, 0.6vw + 10px, 18px); }
body.theme-jeux .ligne .rang { font-size: 15px; padding: 6px 0; }
body.theme-jeux .chiffres b { font-size: 22px; margin-bottom: 6px; }
body.theme-jeux .coeur { color: var(--alert); text-shadow: 0 0 10px rgba(255, 84, 112, 0.55); }
body.theme-jeux .coeur.perdu { color: var(--line); text-shadow: none; }
body.theme-jeux .reponse { border-radius: 10px; }
body.theme-jeux .correction { border-radius: 10px; }

/* =====================================================
   PAYSAGE : tablette couchée, écran large
   ===================================================== */
@media (orientation: landscape) and (min-width: 900px), (orientation: landscape) and (max-height: 540px) {
	.accueil { grid-template-columns: 1.2fr 0.8fr; align-items: start; gap: 64px; }
	.accueil .classement { background: var(--card); border-radius: 22px; padding: 22px 24px; }

	.jeu {
		grid-template-columns: 1.05fr 0.95fr;
		grid-template-areas: "hud hud" "gauche droite" "correction droite";
		grid-template-rows: auto auto 1fr;
		column-gap: 32px;
		row-gap: 20px;
		align-items: start;
	}
	.jeu .hud { grid-area: hud; }
	.jeu .colonne-gauche { grid-area: gauche; }
	.jeu .colonne-droite { grid-area: droite; }
	.jeu .zone-correction { grid-area: correction; }

	.fin { grid-template-columns: 1fr 1fr; column-gap: 60px; align-items: center; }
	.fin .fin-actions { grid-column: 2; }
}

/* Smartphone couché : peu de hauteur */
@media (orientation: landscape) and (max-height: 540px) {
	.entete { margin-bottom: 14px; }
	.tuile { min-height: 150px; }
	body.theme-jeux h1 { font-size: clamp(18px, 3vw, 26px); }
	body.theme-jeux .score { font-size: 56px; }
	h1 { font-size: clamp(32px, 5vw, 48px); }
	.intro { margin-bottom: 18px; }
	.jeu { column-gap: 18px; row-gap: 12px; }
	.jeu .hud { position: static; margin-top: 0; padding-top: 0; }
	.correction { padding: 14px; }
	.correction strong { font-size: 21px; }
	.correction p { margin-bottom: 12px; font-size: 16px; }
	.question { font-size: 22px; }
	.reponse { min-height: 52px; padding: 10px 14px; font-size: 17px; }
	.cta { padding: 14px; font-size: 22px; }
	.decompte { min-height: 70vh; }
	.score { font-size: 90px; }
}

/* Petits écrans portrait */
@media (max-width: 420px) {
	.deux-colonnes { grid-template-columns: 1fr; gap: 0; }
	.chiffres { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.decompte b { animation: none; }
	.tuile { transition: none; }
	.toujours-la-boite { animation: none; }
	.coeur.vient-de-perdre { animation: none; }
	.meche i, .cta, .reponse { transition: none; }
}