html{font-size:calc(16px * var(--ui-scale, 1));}
:root {
  --bg-0: #0e1722;
  --bg-1: #132131;
  --bg-2: #1a2b3f;
  --card: rgba(10, 18, 28, 0.84);
  --line: rgba(255,255,255,0.12);
  --text: #f4f8ff;
  --muted: #b6c4d9;
  --accent: #ff5f56;
  --accent-2: #5bc0ff;
  --accent-3: #4bf0b8;
  --gold: #ffd75e;
  --shadow: 0 18px 50px rgba(0,0,0,0.35);
  /* Polices hors ligne : système par défaut, fichiers locaux activés par js/lib/local-fonts.js. */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}
html.font-inter-local {
  --font-ui: "Magnetikos Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html.font-caveat-local {
  --font-hand: "Magnetikos Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-ui);
  background: radial-gradient(circle at top left, #233653 0%, #101923 38%, #0a1017 100%);
}
body.playing { cursor: default; }
body.playing.game-cursor-hidden,
body.playing.game-cursor-hidden * { cursor: none !important; }
body.playing.holding-basket,
body.playing.holding-basket * { cursor: none !important; }
body.playing.video-overlay-active,
body.playing.video-overlay-active *,
body.playing .presentation-overlay,
body.playing .presentation-overlay *,
body.playing .phase-interlude-overlay,
body.playing .phase-interlude-overlay *,
body.playing #questionnaireVictoryScreen,
body.playing #questionnaireVictoryScreen *,
body.playing #questionnaireDefeatScreen,
body.playing #questionnaireDefeatScreen * { cursor: auto !important; }
button, input { font: inherit; }
canvas { display: block; width: 100vw; height: 100vh; }
.game-canvas {
  position: absolute;
  inset: 0;
}
.game-canvas-base { z-index: 1; }
.game-canvas-overlay { z-index: 12; pointer-events: none; }
.hazard-layer { position: absolute; inset: 0; pointer-events: none; }
.hazard-sprite { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transform-origin: center bottom; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.28)); }
.phase-portrait {
  position: absolute;
  bottom: 0;
  width: 10vw;
  max-width: 10vw;
  height: auto;
  z-index: 9;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
  image-rendering: auto;
}

.phase-portrait-left { left: 0; }
.phase-portrait-right { right: 0; }
.tornado-sprite { z-index: 11; will-change: transform, opacity, left, top; filter: drop-shadow(0 16px 22px rgba(0,0,0,0.36)) drop-shadow(0 0 18px rgba(210,240,255,0.22)); mix-blend-mode: screen; }
.web-sprite {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
  opacity: var(--web-alpha, 0.8);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.22));
  animation: webSway var(--web-speed, 2600ms) ease-in-out infinite;
}
.web-sprite.web--loaded { animation-name: webTension; }
.web-sprite.web--breaking { animation-name: webShake; }
@keyframes webSway {
  0% { transform: translate3d(calc(var(--web-jx, 0.8px) * -0.35), calc(var(--web-jy, 0.8px) * -0.45), 0) rotate(calc(var(--web-rot, 0deg) - 0.65deg)) scale(var(--web-scale, 1)); }
  50% { transform: translate3d(calc(var(--web-jx, 0.8px) * 0.35), calc(var(--web-jy, 0.8px) * 0.45), 0) rotate(calc(var(--web-rot, 0deg) + 0.65deg)) scale(calc(var(--web-scale, 1) * 1.008)); }
  100% { transform: translate3d(calc(var(--web-jx, 0.8px) * -0.35), calc(var(--web-jy, 0.8px) * -0.45), 0) rotate(calc(var(--web-rot, 0deg) - 0.65deg)) scale(var(--web-scale, 1)); }
}
@keyframes webTension {
  0% { transform: translate3d(calc(var(--web-jx, 1.8px) * -0.55), calc(var(--web-jy, 1.6px) * -0.6), 0) rotate(calc(var(--web-rot, 0deg) - 1.1deg)) scale(var(--web-scale, 1)); }
  20% { transform: translate3d(calc(var(--web-jx, 1.8px) * 0.55), calc(var(--web-jy, 1.6px) * 0.45), 0) rotate(calc(var(--web-rot, 0deg) + 0.95deg)) scale(calc(var(--web-scale, 1) * 1.01)); }
  40% { transform: translate3d(calc(var(--web-jx, 1.8px) * -0.45), calc(var(--web-jy, 1.6px) * 0.55), 0) rotate(calc(var(--web-rot, 0deg) - 0.85deg)) scale(calc(var(--web-scale, 1) * 0.997)); }
  60% { transform: translate3d(calc(var(--web-jx, 1.8px) * 0.38), calc(var(--web-jy, 1.6px) * -0.5), 0) rotate(calc(var(--web-rot, 0deg) + 1.05deg)) scale(calc(var(--web-scale, 1) * 1.012)); }
  100% { transform: translate3d(calc(var(--web-jx, 1.8px) * -0.55), calc(var(--web-jy, 1.6px) * -0.6), 0) rotate(calc(var(--web-rot, 0deg) - 1.1deg)) scale(var(--web-scale, 1)); }
}
@keyframes webShake {
  0% { transform: translate3d(calc(var(--web-jx, 3px) * -0.8), calc(var(--web-jy, 2.6px) * -0.75), 0) rotate(calc(var(--web-rot, 0deg) - 1.7deg)) scale(var(--web-scale, 1)); }
  12% { transform: translate3d(calc(var(--web-jx, 3px) * 0.75), calc(var(--web-jy, 2.6px) * 0.48), 0) rotate(calc(var(--web-rot, 0deg) + 1.5deg)) scale(calc(var(--web-scale, 1) * 1.016)); }
  24% { transform: translate3d(calc(var(--web-jx, 3px) * -0.64), calc(var(--web-jy, 2.6px) * 0.62), 0) rotate(calc(var(--web-rot, 0deg) - 1.45deg)) scale(calc(var(--web-scale, 1) * 0.994)); }
  36% { transform: translate3d(calc(var(--web-jx, 3px) * 0.55), calc(var(--web-jy, 2.6px) * -0.44), 0) rotate(calc(var(--web-rot, 0deg) + 1.35deg)) scale(calc(var(--web-scale, 1) * 1.014)); }
  48% { transform: translate3d(calc(var(--web-jx, 3px) * -0.48), calc(var(--web-jy, 2.6px) * 0.34), 0) rotate(calc(var(--web-rot, 0deg) - 1.1deg)) scale(calc(var(--web-scale, 1) * 0.998)); }
  60% { transform: translate3d(calc(var(--web-jx, 3px) * 0.7), calc(var(--web-jy, 2.6px) * -0.42), 0) rotate(calc(var(--web-rot, 0deg) + 1.3deg)) scale(calc(var(--web-scale, 1) * 1.012)); }
  72% { transform: translate3d(calc(var(--web-jx, 3px) * -0.58), calc(var(--web-jy, 2.6px) * 0.56), 0) rotate(calc(var(--web-rot, 0deg) - 1.45deg)) scale(calc(var(--web-scale, 1) * 0.995)); }
  100% { transform: translate3d(calc(var(--web-jx, 3px) * -0.8), calc(var(--web-jy, 2.6px) * -0.75), 0) rotate(calc(var(--web-rot, 0deg) - 1.7deg)) scale(var(--web-scale, 1)); }
}
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 14, 0.7); backdrop-filter: blur(12px); z-index: 10;
}
.card {
  background: linear-gradient(180deg, rgba(19, 31, 47, 0.94), rgba(8, 15, 24, 0.96));
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.inset { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)); }
.eyebrow, .question-kicker, .field-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: #89a9cd; font-weight: 800;
}
.menu-overlay { padding: 16px; }
.wizard-shell {
  width: min(860px, calc(100vw - 28px));
  padding: 28px;
}
.wizard-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.wizard-badge {
  width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,95,86,0.22), rgba(91,192,255,0.18));
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 42px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
h1 {
  font-size: clamp(38px, 6vw, 62px);
  margin: 0 0 8px;
  letter-spacing: -0.045em;
}
.subtitle { margin: 0 0 10px; color: #dde8f5; font-size: 18px; line-height: 1.45; }
.intro, .status-tip, .muted { color: var(--muted); line-height: 1.55; }
.intro { margin: 0; }
.wizard-progress {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 20px 0 26px;
}
.wizard-dot {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.07);
}
.wizard-dot.active { background: linear-gradient(90deg, rgba(255,95,86,0.94), rgba(91,192,255,0.92)); }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.question-title {
  margin: 6px 0 18px;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.08;
}
.hero-input, .text-input {
  width: 100%; border-radius: 22px; border: 1px solid rgba(255,255,255,0.14); background: rgba(7,12,19,0.92);
  color: white; padding: 18px 20px; font-size: 24px; outline: none;
}
.text-input:focus { border-color: rgba(91,192,255,0.6); box-shadow: 0 0 0 4px rgba(91,192,255,0.12); }
.wizard-options, .chip-group { display: grid; gap: 12px; }
.profile-grid { grid-template-columns: repeat(3, 1fr); }
.mode-grid { grid-template-columns: repeat(2, 1fr); }
.three-up { grid-template-columns: repeat(3, 1fr); }
.option-card, .chip {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: white;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.option-card:hover, .chip:hover, .primary-btn:hover, .ghost-btn:hover, .stage-chip:hover, .latest-stage-button:hover { transform: translateY(-1px); }
.option-card {
  border-radius: 24px; padding: 18px; min-height: 152px; display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.option-card.compact { min-height: 136px; }
.option-card.selected {
  border-color: rgba(91,192,255,0.48);
  background: linear-gradient(180deg, rgba(91,192,255,0.15), rgba(255,95,86,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 10px 22px rgba(0,0,0,0.18);
}
.option-icon { font-size: 30px; }
.option-title { font-size: 21px; }
.option-desc { color: var(--muted); line-height: 1.45; font-size: 14px; }
.chip {
  border-radius: 16px; padding: 16px 18px; font-weight: 800; font-size: 18px;
}
.chip.selected {
  background: linear-gradient(135deg, rgba(255,95,86,0.26), rgba(91,192,255,0.18));
  border-color: rgba(255,255,255,0.28);
}
.secondary-question {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
}
.secondary-title { margin: 0 0 12px; font-size: 18px; color: #eaf1fb; }
.step-actions {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap;
}
.step-actions.single-end { justify-content: flex-end; }
.primary-btn, .ghost-btn {
  border: none; border-radius: 16px; padding: 15px 22px; cursor: pointer; font-size: 16px; font-weight: 800;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.primary-btn { background: linear-gradient(135deg, #ff6d63, #ff8e55); color: #10161d; }
.ghost-btn { background: rgba(255,255,255,0.04); color: white; border: 1px solid rgba(255,255,255,0.12); }
.selection-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.summary-pill {
  display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #eef5ff; font-weight: 700;
}
.resume-grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px; margin-bottom: 16px;
}
.resume-panel { padding: 18px; }
.stage-picker {
  display: grid; gap: 10px;
}
.stage-chip, .latest-stage-button {
  width: 100%; text-align: left; border-radius: 20px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: white;
}
.stage-chip {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
}
.stage-chip.selected, .latest-stage-button {
  background: linear-gradient(135deg, rgba(255,95,86,0.16), rgba(91,192,255,0.14));
  border-color: rgba(255,255,255,0.22);
}
.stage-chip-index {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); font-weight: 900;
}
.stage-chip-text { display: flex; flex-direction: column; gap: 4px; }
.stage-chip-text small, .latest-stage-button small { color: var(--gold); letter-spacing: 0.08em; }
.latest-stage-card { min-height: 92px; }
.latest-stage-kicker { display: block; margin-bottom: 8px; color: #c7d9ef; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; }
.small-copy { margin: 10px 0 0; font-size: 14px; }
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.compact-summary { margin-top: 6px; }
.summary-card, .stat-box {
  padding: 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03);
  display: flex; flex-direction: column; gap: 7px;
}
.summary-card span, .stat-box span { color: var(--muted); font-size: 12px; }
.summary-card strong, .stat-box strong { font-size: 28px; }
.final-actions { align-items: center; }

.stage-preview {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,225,106,0.14), transparent 24%),
    radial-gradient(circle at 50% 70%, rgba(91,192,255,0.09), transparent 28%),
    linear-gradient(180deg, rgba(2,5,10,0.18), rgba(2,5,10,0.46));
  backdrop-filter: blur(6px);
}
.stage-preview-card {
  width: min(940px, calc(100vw - 56px));
  padding: clamp(26px, 4vw, 42px);
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(9,15,24,0.88), rgba(7,11,19,0.94));
  box-shadow: 0 28px 80px rgba(0,0,0,0.46), inset 0 0 0 1px rgba(255,255,255,0.04);
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  overflow: hidden;
}
.stage-preview-card::before {
  content: '';
  position: absolute;
  inset: -20% auto auto -30%;
  width: 34%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,225,106,0.12), rgba(255,255,255,0));
  transform: skewX(-20deg);
  animation: stagePreviewSweep 5.2s ease-in-out infinite;
}
.stage-preview-kicker {
  position: relative;
  z-index: 1;
  color: #ffe98b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.stage-preview-stage {
  position: relative;
  z-index: 1;
  color: rgba(220,231,244,0.78);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.stage-preview-question {
  position: relative;
  z-index: 1;
  max-width: 28ch;
  color: #fff7da;
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.018em;
  white-space: pre-line;
  text-wrap: balance;
  text-shadow: 0 8px 24px rgba(0,0,0,0.34), 0 0 18px rgba(255,225,106,0.06);
  animation: stagePreviewFloat 3.2s ease-in-out infinite;
}
.stage-preview-countdown {
  position: relative;
  z-index: 1;
  min-width: 72px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #dbe8f7;
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 800;
}
.stage-preview-progress {
  position: relative;
  z-index: 1;
  width: min(520px, 80%);
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.stage-preview-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  background: linear-gradient(90deg, #ffe16a, #ff8c63 48%, #5bc0ff);
  box-shadow: 0 0 18px rgba(255,225,106,0.35);
}
@keyframes stagePreviewFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
@keyframes stagePreviewSweep {
  0% { transform: translateX(-180%) skewX(-20deg); opacity: 0; }
  18% { opacity: 0.65; }
  50% { transform: translateX(280%) skewX(-20deg); opacity: 0.32; }
  100% { transform: translateX(280%) skewX(-20deg); opacity: 0; }
}

.hud-top {
  position: absolute; top: 18px; left: 18px; right: 18px; display: grid; grid-template-columns: 1.1fr auto; gap: 16px; z-index: 3;
}
.hud-card {
  background: rgba(6, 11, 18, 0.68); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; padding: 18px 20px; backdrop-filter: blur(10px);
}
.objective-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 225, 106, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 rgba(255,225,106,0);
  animation: objectiveCardGlow 5.6s ease-in-out infinite;
}
.objective-card::before {
  content: '';
  position: absolute;
  inset: -18% auto -18% -24%;
  width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,225,106,0.13), rgba(255,255,255,0));
  transform: skewX(-18deg) translateX(-180%);
  opacity: 0.7;
  pointer-events: none;
  animation: objectiveSweep 6.8s ease-in-out infinite;
}
.hud-label { color: #88a6c8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 800; }
.hud-label:empty { display: none; }
.objective-text {
  position: relative;
  z-index: 1;
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.34;
  margin: 8px 0 8px;
  white-space: pre-line;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff8cf;
  text-shadow: 0 0 8px rgba(255,225,106,0.12), 0 0 18px rgba(91,192,255,0.08);
  animation: objectiveTextPulse 3.2s ease-in-out infinite;
}
.stage-text, .mini-line { color: var(--muted); font-size: 14px; }
.timer-card { text-align: right; min-width: 320px; }
.countdown { font-size: clamp(40px, 6vw, 66px); line-height: 1; font-weight: 900; margin-top: 8px; letter-spacing: -0.04em; color: #ffe98b; }
.listen-btn {
  margin-top: 8px; border: none; border-radius: 999px; background: rgba(91,192,255,0.18); color: white; padding: 10px 14px; cursor: pointer; font-weight: 700;
}
.listen-btn:disabled { opacity: 0.4; cursor: default; }
.bottom-bar {
  position: absolute; left: clamp(136px, 12vw, 210px); right: 18px; bottom: 18px; z-index: 7;
  display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 14px 18px;
  background: rgba(5, 10, 16, 0.8); border-radius: 22px; border: 1px solid rgba(255,255,255,0.1);
}
.bottom-left, .bottom-right { display: flex; gap: 12px; align-items: center; }
.bottom-right { max-width: 52%; justify-content: flex-end; text-align: right; color: var(--muted); }
.status-chip {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.charge-bar {
  width: 220px; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; border: 1px solid rgba(255,255,255,0.08);
}
.charge-fill {
  width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #5bc0ff, #ff5f56);
}
.pulse-text { color: var(--muted); font-size: 14px; }
@keyframes objectiveCardGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 rgba(255,225,106,0); border-color: rgba(255,225,106,0.16); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 26px rgba(255,225,106,0.1); border-color: rgba(255,225,106,0.32); }
}
@keyframes objectiveTextPulse {
  0%, 100% { transform: translateY(0); filter: saturate(1); text-shadow: 0 0 8px rgba(255,225,106,0.12), 0 0 18px rgba(91,192,255,0.08); }
  50% { transform: translateY(-1px); filter: saturate(1.04); text-shadow: 0 0 12px rgba(255,225,106,0.18), 0 0 24px rgba(91,192,255,0.12); }
}
@keyframes objectiveSweep {
  0%, 18% { transform: skewX(-18deg) translateX(-180%); opacity: 0; }
  30% { opacity: 0.62; }
  58% { transform: skewX(-18deg) translateX(430%); opacity: 0.36; }
  100% { transform: skewX(-18deg) translateX(430%); opacity: 0; }
}
.modal { width: min(560px, calc(100vw - 32px)); padding: 28px; text-align: center; }
.modal.small { width: min(420px, calc(100vw - 32px)); }
.result-stage-name { color: var(--muted); margin: 2px 0 10px; }
.result-answer { font-size: 28px; font-weight: 900; margin: 8px 0 20px; }
.result-meta { min-height: 40px; margin-top: 14px; color: var(--muted); line-height: 1.5; }
.result-recap { margin-top: 14px; text-align: left; display: grid; gap: 10px; }
.result-recap-title { color: #ffe16a; font-weight: 800; text-align: center; }
.result-recap-item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}
.result-recap-question { color: #f4f8ff; }
.result-recap-index { color: #ffe16a; font-weight: 800; }
.result-recap-answer { margin-top: 6px; color: #a8c2df; }
.result-recap-empty {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: #9fb7d1;
  text-align: center;
}
.modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .wizard-shell { padding: 22px; }
  .wizard-header { grid-template-columns: 1fr; }
  .wizard-badge { width: 70px; height: 70px; font-size: 34px; }
  .profile-grid, .mode-grid, .three-up, .resume-grid, .summary-grid { grid-template-columns: 1fr; }
  .step-actions, .modal-actions, .bottom-bar { flex-direction: column; }
  .bottom-right { max-width: unset; text-align: center; }
  .hud-top { grid-template-columns: 1fr; }
  .timer-card { min-width: 0; text-align: left; }
}


/* V6.3 simplification accueil */
.menu-overlay { padding: 20px; }
.wizard-shell {
  width: min(640px, calc(100vw - 28px));
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, rgba(15, 24, 36, 0.96), rgba(8, 14, 22, 0.98));
}
.wizard-header {
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.eyebrow, .subtitle, .intro { display: none; }
.wizard-badge {
  width: 58px; height: 58px; border-radius: 16px; font-size: 30px;
  background: rgba(255,255,255,0.05);
}
h1 {
  font-size: clamp(24px, 5vw, 34px);
  margin: 0;
}
.wizard-progress { margin: 10px 0 14px; gap: 8px; }
.wizard-dot { height: 6px; }
.question-kicker { display:none; }
.question-title {
  margin: 4px 0 12px;
  font-size: clamp(24px, 4.8vw, 34px);
}
.hero-input, .text-input {
  padding: 16px 18px; font-size: 22px; border-radius: 16px;
}
.option-card {
  min-height: 118px;
  border-radius: 20px;
  padding: 16px;
  gap: 8px;
}
.option-card.compact { min-height: 104px; }
.option-title { font-size: 19px; }
.option-desc { font-size: 12px; }
.secondary-question {
  margin-top: 14px; padding-top: 14px;
}
.step-actions { margin-top: 16px; }
.primary-btn, .ghost-btn {
  border-radius: 14px; padding: 14px 18px;
}
.status-tip, .compact-summary, #latestStageLabel, #latestStageCard, #roadmapHeader, #stagePickerHint {
  display: none !important;
}
.resume-grid {
  grid-template-columns: 1fr;
  margin-bottom: 10px;
}
.resume-panel {
  padding: 0;
  background: transparent;
  border: none;
}
.stage-picker {
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}
.stage-chip, .latest-stage-button {
  border-radius: 14px;
  padding: 10px 12px;
}
.selection-summary {
  margin: 2px 0 12px;
}
.summary-pill {
  padding: 8px 12px; font-size: 12px;
}
.final-actions {
  justify-content: space-between;
}
#resetBtn { opacity: 0.72; }
@media (max-width: 720px) {
  .wizard-shell { width: min(100vw - 16px, 560px); padding: 18px 16px 14px; }
  .wizard-header { grid-template-columns: auto 1fr; }
  .mode-grid, .profile-grid, .three-up { grid-template-columns: 1fr; }
}


/* V6.4 accueil allégé */
.compact-start-shell {
  width: min(760px, calc(100vw - 28px));
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(13, 19, 28, 0.95), rgba(8, 12, 18, 0.97));
}
.compact-start-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.compact-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 28px;
}
.compact-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.start-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.start-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.compact-question {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
}
.inline-question {
  margin-bottom: 10px;
}
.compact-choice-grid {
  gap: 10px;
}
.compact-choice-grid .option-card {
  min-height: 108px;
  padding: 14px;
  border-radius: 16px;
  gap: 6px;
}
.compact-choice-grid .option-icon {
  font-size: 22px;
}
.compact-choice-grid .option-title {
  font-size: 17px;
}
.compact-choice-grid .option-desc {
  font-size: 12px;
  line-height: 1.35;
}
.language-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.compact-chip-group {
  gap: 8px;
}
.compact-chip-group .chip {
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 16px;
}
.target-inline {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px;
}
.section-headline-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.compact-status {
  margin: 6px 0 0;
  font-size: 12px;
}
.compact-selection-summary {
  margin: 0;
  justify-content: flex-end;
}
.compact-selection-summary .summary-pill {
  padding: 8px 12px;
  font-size: 12px;
}
.compact-stage-picker {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.compact-stage-picker .stage-chip {
  padding: 10px 12px;
  border-radius: 14px;
}
.compact-stage-picker .stage-chip-index {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.slim-summary {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.slim-summary .summary-card {
  padding: 12px;
  border-radius: 14px;
  gap: 4px;
}
.slim-summary .summary-card span {
  font-size: 11px;
}
.slim-summary .summary-card strong {
  font-size: 20px;
}
.compact-start-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 860px) {
  .language-line,
  .compact-stage-picker,
  .slim-summary {
    grid-template-columns: 1fr;
  }
  .compact-selection-summary {
    justify-content: flex-start;
  }
  .compact-start-actions {
    flex-direction: column;
  }
}

/* V6.5 accueil ultra-minimal + aimant visible */
.menu-overlay {
  padding: 12px;
}
.compact-start-shell {
  width: min(760px, calc(100vw - 20px));
  max-height: min(92vh, 720px);
  overflow: auto;
  padding: 18px 18px 16px;
  border-radius: 24px;
}
.compact-start-header {
  margin-bottom: 10px;
  gap: 10px;
}
.compact-badge {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 22px;
}
#titleText {
  font-size: clamp(22px, 4.3vw, 32px);
  line-height: 1.05;
}
.compact-subtitle,
.compact-choice-grid .option-icon,
.compact-choice-grid .option-desc,
.compact-selection-summary,
.slim-summary,
#statusTip,
#roadmapHeader {
  display: none !important;
}
.start-section {
  margin-top: 10px;
  padding-top: 10px;
}
.compact-question,
.inline-question,
.secondary-title,
.field-label {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 700;
}
.language-line {
  display: block;
}
.target-inline {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
}
.compact-choice-grid,
.compact-chip-group,
.compact-stage-picker {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}
.compact-choice-grid .option-card,
.compact-chip-group .chip,
.compact-stage-picker .stage-chip {
  width: auto;
  min-height: 0;
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: rgba(255,255,255,0.035);
}
.compact-choice-grid .option-title,
.compact-chip-group .chip,
.compact-stage-picker .stage-chip-text strong {
  font-size: 15px;
  font-weight: 800;
}
.compact-stage-picker {
  margin-top: 2px;
}
.compact-stage-picker .stage-chip {
  padding: 8px 12px;
}
.compact-stage-picker .stage-chip-index {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
.compact-stage-picker .stage-chip-text {
  gap: 0;
}
.compact-stage-picker .stage-chip-text small {
  display: none;
}
.section-headline-row {
  display: block;
}
.compact-start-actions {
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
#resetBtn {
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--muted);
  opacity: 0.75;
  font-size: 12px;
}
#startBtn {
  padding: 10px 16px;
  border-radius: 14px;
}
@media (max-width: 680px) {
  .compact-start-shell {
    width: calc(100vw - 14px);
    padding: 16px 14px 14px;
  }
  .compact-start-actions {
    gap: 10px;
    flex-wrap: wrap;
  }
}

/* V7.0 entrée cinématique et magique */
.boot-overlay {
  z-index: 30;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(118, 212, 255, 0.10), transparent 30%),
    radial-gradient(circle at 50% 78%, rgba(255, 165, 112, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(2, 4, 8, 0.96), rgba(5, 8, 14, 0.98));
  transition: opacity .48s ease, visibility .48s ease;
}
.boot-overlay.boot-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-veil,
.boot-overlay::before,
.boot-overlay::after {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
}
.boot-veil {
  background:
    radial-gradient(circle at 30% 40%, rgba(91,192,255,0.08), transparent 22%),
    radial-gradient(circle at 70% 32%, rgba(255,215,94,0.07), transparent 18%),
    radial-gradient(circle at 50% 72%, rgba(255,95,86,0.06), transparent 20%);
  filter: blur(22px);
  animation: bootMist 12s ease-in-out infinite alternate;
}
.boot-overlay::before {
  background: radial-gradient(circle at center, rgba(255,255,255,0.09), transparent 42%);
  filter: blur(40px);
  opacity: 0.42;
  animation: bootGlow 7s ease-in-out infinite;
}
.boot-overlay::after {
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.05) 48%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 24%, transparent 76%, rgba(255,255,255,0.02));
  opacity: 0.38;
  transform: translateX(-12%);
  animation: bootSweep 10s linear infinite;
}
.boot-shell {
  position: relative;
  z-index: 1;
  width: min(92vw, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.boot-kicker {
  margin: 0;
  color: rgba(205, 224, 246, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}
.boot-title {
  margin: 0;
  font-size: clamp(36px, 6vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-shadow: 0 8px 30px rgba(0,0,0,0.42);
}
.boot-copy {
  max-width: 640px;
  margin: 0 0 6px;
  color: rgba(225, 234, 246, 0.80);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.55;
}
.boot-art-frame {
  position: relative;
  width: min(92vw, 640px);
  padding: 18px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(91,192,255,0.06);
  backdrop-filter: blur(10px);
  animation: bootFloat 7s ease-in-out infinite;
}
.boot-art-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 26px;
  background: radial-gradient(circle at 50% 40%, rgba(91,192,255,0.14), transparent 38%);
  filter: blur(26px);
  opacity: 0.75;
}
.boot-art {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 54vh;
  object-fit: contain;
  border-radius: 24px;
  display: block;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.boot-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
  border-radius: 999px;
  padding: 16px 28px;
  min-width: 260px;
  font: 800 15px/1 var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #eef6ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    linear-gradient(135deg, rgba(91,192,255,0.18), rgba(255,215,94,0.12), rgba(255,95,86,0.14));
  box-shadow:
    0 18px 42px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.20);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  animation: bootButtonAura 2.8s ease-in-out infinite;
}
.boot-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    0 24px 50px rgba(0,0,0,0.34),
    0 0 0 8px rgba(91,192,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}
.boot-btn:active {
  transform: translateY(0);
}
.boot-hint {
  color: rgba(214, 225, 241, 0.62);
  font-size: 12px;
  letter-spacing: 0.04em;
}
@keyframes bootFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}
@keyframes bootGlow {
  0%, 100% { opacity: 0.24; transform: scale(0.96); }
  50% { opacity: 0.46; transform: scale(1.04); }
}
@keyframes bootMist {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@keyframes bootSweep {
  0% { transform: translateX(-16%); }
  100% { transform: translateX(16%); }
}
@keyframes bootButtonAura {
  0%, 100% { box-shadow: 0 18px 42px rgba(0,0,0,0.28), 0 0 0 0 rgba(91,192,255,0), inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -1px 0 rgba(0,0,0,0.20); }
  50% { box-shadow: 0 20px 48px rgba(0,0,0,0.32), 0 0 0 10px rgba(91,192,255,0), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.20); }
}
.menu-overlay {
  overflow: hidden;
}
.menu-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.menu-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(7, 12, 20, 0.10), rgba(3, 6, 10, 0.78) 70%),
    linear-gradient(180deg, rgba(5, 8, 12, 0.68), rgba(5, 8, 12, 0.84));
}
.menu-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.30;
  filter: saturate(1.02) brightness(0.88);
}
.compact-start-shell {
  position: relative;
  z-index: 1;
}
@media (max-width: 740px) {
  .boot-shell {
    width: min(94vw, 640px);
    gap: 12px;
  }
  .boot-kicker {
    font-size: 11px;
    letter-spacing: 0.28em;
  }
  .boot-copy {
    font-size: 14px;
    max-width: 92vw;
  }
  .boot-art-frame {
    padding: 12px;
    border-radius: 24px;
  }
  .boot-art {
    max-height: 48vh;
    border-radius: 16px;
  }
  .boot-btn {
    min-width: 220px;
    width: min(84vw, 320px);
    padding: 15px 18px;
    font-size: 14px;
    letter-spacing: 0.16em;
  }
}

/* V8.0 écran d'accueil inspiré de Home.png */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.boot-overlay-home {
  z-index: 40;
  background: radial-gradient(circle at 50% 35%, rgba(255,205,64,0.08), transparent 26%), #000;
}
.boot-home-shell {
  display: grid;
  justify-items: center;
  gap: 26px;
}
.boot-home-art {
  width: min(88vw, 640px);
  max-height: 68vh;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.55));
}
.boot-home-btn {
  border: 3px solid rgba(255,255,255,0.96);
  border-radius: 999px;
  padding: 18px 34px;
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff2a9;
  background: linear-gradient(180deg, #f2ae00, #ce8a00);
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), 0 0 0 8px rgba(255,255,255,0.05);
  cursor: pointer;
  animation: bootPulse 1.8s ease-in-out infinite;
}
@keyframes bootPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.home-overlay {
  align-items: stretch;
  padding: 28px 32px;
  background: #000;
}
.home-shell {
  width: min(1280px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: 36px;
}
.home-left-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.home-video-frame {
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: transparent;
}
.home-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}
.home-slogan {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 44px);
  line-height: 1.08;
  color: #e1aa00;
  text-align: center;
  text-shadow: 0 4px 18px rgba(0,0,0,0.38);
}
.home-right-panel {
  display: grid;
  justify-items: center;
  gap: 28px;
  text-align: center;
}
.home-brand-arch {
  position: relative;
  width: min(560px, 100%);
  height: 172px;
  margin-top: 6px;
}
.magnet-side {
  position: absolute;
  top: 92px;
  font-size: clamp(40px, 4vw, 68px);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}
.magnet-side.left { left: 18px; transform: rotate(-30deg); }
.magnet-side.right { right: 18px; transform: rotate(30deg) scaleX(-1); }
.arch-letter {
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r)) ;
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 8px 18px rgba(0,0,0,0.42);
}
.arch-letter.a1 { --x: 120px; --y: 112px; --r: -34deg; color:#ffe27e; }
.arch-letter.a2 { --x: 160px; --y: 84px; --r: -26deg; color:#ffda55; }
.arch-letter.a3 { --x: 205px; --y: 62px; --r: -18deg; color:#ff6b57; }
.arch-letter.a4 { --x: 256px; --y: 46px; --r: -10deg; color:#00b8ff; }
.arch-letter.a5 { --x: 312px; --y: 38px; --r: -4deg; color:#ffe659; }
.arch-letter.a6 { --x: 368px; --y: 44px; --r: 4deg; color:#6de27f; }
.arch-letter.a7 { --x: 420px; --y: 58px; --r: 12deg; color:#9166ff; }
.arch-letter.a8 { --x: 464px; --y: 80px; --r: 20deg; color:#6d53ff; }
.arch-letter.a9 { --x: 500px; --y: 108px; --r: 28deg; color:#f8c400; }
.arch-letter.a10 { --x: 528px; --y: 138px; --r: 36deg; color:#00a6ff; }
.home-copy {
  width: min(520px, 100%);
  margin: -2px 0 0;
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.35;
  color: #f2f2f2;
}
.home-group {
  width: min(520px, 100%);
  display: grid;
  gap: 10px;
}
.home-heading {
  margin: 0;
  color: #f0bc00;
  font-size: clamp(16px, 1.35vw, 23px);
  font-weight: 900;
  letter-spacing: 0.03em;
}
.home-play-config-group,
.home-progress-group {
  gap: 12px;
}
.home-progress-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}
.home-progress-card {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 112px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  text-align: center;
}
.home-progress-value {
  color: #fff;
  font-size: clamp(28px, 2.5vw, 44px);
  font-weight: 900;
  line-height: 1;
}
.home-progress-label {
  color: rgba(255,255,255,0.78);
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 700;
}
.home-progress-summary {
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,0.84);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.45;
}
.home-secondary-btn {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.86);
  font-size: clamp(16px, 1.2vw, 22px);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.home-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 16px;
}
.home-choice {
  min-height: 58px;
  border-radius: 14px;
  border: 3px solid transparent;
  background: transparent;
  color: #fff;
  font-size: clamp(16px, 1.35vw, 24px);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.home-choice.selected {
  border-color: #ff3b8b;
  box-shadow: 0 0 0 3px rgba(255,59,139,0.12);
}
.home-choice:hover { transform: translateY(-1px); }
.home-level-group { gap: 12px; }
.home-levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.home-level {
  min-width: 34px;
  min-height: 46px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: clamp(18px, 1.7vw, 28px);
  cursor: pointer;
}
.home-level.selected {
  outline: 3px solid #ff3b8b;
  outline-offset: 2px;
  border-radius: 6px;
}
.home-questionnaire-group { gap: 12px; }
.home-helper {
  margin: -6px 0 0;
  color: rgba(233,240,248,0.68);
  font-size: 12px;
  line-height: 1.45;
}
.home-questionnaire-controls {
  display: grid;
  gap: 12px;
}
.home-select-wrap {
  display: grid;
  gap: 8px;
}
.home-select-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.68);
  text-transform: uppercase;
}
.home-select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(255,245,248,0.10), rgba(214,240,255,0.08));
  color: #fff;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.18);
}
.home-select:focus {
  border-color: rgba(255,255,255,0.34);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.20);
}
.home-select option {
  color: #111;
}
.home-questionnaires {
  display: grid;
  gap: 12px;
}
.home-questionnaire {
  width: 100%;
  text-align: left;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
  color: #fff;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  display: grid;
  gap: 6px;
}
.home-questionnaire:hover { transform: translateY(-1px); }
.home-questionnaire strong {
  font-size: clamp(17px, 1.2vw, 22px);
  letter-spacing: 0.02em;
}
.home-questionnaire span {
  color: rgba(233,240,248,0.74);
  font-size: 12px;
  line-height: 1.45;
}
.home-questionnaire.selected {
  border-color: rgba(255,255,255,0.24);
  background: linear-gradient(135deg, rgba(255,95,86,0.15), rgba(91,192,255,0.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 26px rgba(0,0,0,0.18);
}
.home-questionnaire-meta {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  color: rgba(233,240,248,0.84);
  font-size: 12px;
  line-height: 1.55;
}
.home-actions {
  display: grid;
  gap: 8px;
  justify-items: center;
}
.home-start-btn {
  min-width: 198px;
  border-radius: 16px;
  border: 4px solid #fff;
  background: linear-gradient(180deg, #f0be00, #e2ab00);
  color: #161616;
  font-size: clamp(20px, 1.55vw, 27px);
  font-weight: 900;
  padding: 14px 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.34);
}
.home-reset-btn {
  background: transparent;
  color: rgba(255,255,255,0.42);
  border: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  .home-progress-cards {
    grid-template-columns: 1fr;
  }
  .home-primary-toggle .home-choice {
    min-height: 66px;
  }
  .home-shell {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .home-left-panel { order: 2; }
  .home-right-panel { order: 1; }
  .home-brand-arch {
    transform: scale(.9);
    transform-origin: center top;
    height: 148px;
  }
  .home-copy,
  .home-group,
  .home-slogan { width: min(92vw, 620px); }
}

@media (max-width: 760px){.home-top-actions{grid-template-columns:1fr}}

@media (max-width: 640px) {
  .home-overlay { padding: 18px 14px; }
  .home-brand-arch { width: 100%; height: 132px; }
  .home-mode-toggle { grid-template-columns: 1fr; gap: 12px; }
  .magnet-side.left { left: 2px; }
  .magnet-side.right { right: 2px; }
  .arch-letter.a1 { --x: 68px; --y: 98px; }
  .arch-letter.a2 { --x: 96px; --y: 78px; }
  .arch-letter.a3 { --x: 132px; --y: 60px; }
  .arch-letter.a4 { --x: 174px; --y: 46px; }
  .arch-letter.a5 { --x: 220px; --y: 40px; }
  .arch-letter.a6 { --x: 266px; --y: 44px; }
  .arch-letter.a7 { --x: 308px; --y: 56px; }
  .arch-letter.a8 { --x: 344px; --y: 74px; }
  .arch-letter.a9 { --x: 374px; --y: 96px; }
  .arch-letter.a10 { --x: 400px; --y: 118px; }
}
.home-level.locked {
  opacity: .28;
  cursor: default;
}
.home-level:disabled { pointer-events: none; }


.home-brand-wrap {
  width: min(820px, 100%);
  margin: 0 auto 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home-brand-image {
  display: block;
  width: min(820px, 100%);
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,0.42));
}
.home-copy {
  max-width: 720px;
  margin: 0 auto 8px;
}
@media (max-width: 980px) {
  .home-brand-wrap { width: 100%; margin-bottom: 6px; }
  .home-brand-image { width: 100%; }
}


.questionnaire-victory-overlay,
.questionnaire-summary-overlay {
  z-index: 12;
  padding: 24px;
  background: rgba(2, 6, 12, 0.82);
  backdrop-filter: blur(10px);
}

.questionnaire-victory-video {
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 28px 80px rgba(0,0,0,0.55);
  background: #000;
  object-fit: contain;
  image-rendering: auto;
}


.questionnaire-summary-card {
  width: min(1040px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(9,15,24,0.94), rgba(7,11,19,0.97));
  box-shadow: 0 28px 80px rgba(0,0,0,0.5);
}

.questionnaire-summary-subtitle {
  margin: 8px 0 18px;
  color: #d9e8f8;
}

.questionnaire-summary-list {
  display: grid;
  gap: 12px;
}

.questionnaire-summary-item {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}

.questionnaire-summary-q {
  color: #f4f8ff;
  line-height: 1.45;
}

.questionnaire-summary-index {
  color: #ffe16a;
  font-weight: 800;
}

.questionnaire-summary-a {
  margin-top: 8px;
  color: #a8c2df;
}

.questionnaire-summary-hint {
  margin: 18px 0 0;
  text-align: center;
  color: #ffe16a;
  font-weight: 700;
}


.questionnaire-summary-section {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.questionnaire-summary-section:first-child {
  margin-top: 0;
}

.questionnaire-summary-section-title {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: #ffe16a;
}

.questionnaire-summary-group {
  display: grid;
  gap: 12px;
}

.questionnaire-summary-item-pending .questionnaire-summary-q {
  color: #dfeafb;
}

.questionnaire-summary-empty {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: #9fb7d1;
}


.specialized-access-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  color: #fff6a8;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 14px 18px;
  cursor: pointer;
}
@keyframes specializedBlink {
  from { opacity: 1; box-shadow: 0 0 0 rgba(255,230,120,0); }
  to { opacity: 1; box-shadow: 0 0 0 rgba(255,230,120,0); }
}
.specialized-overlay {
  background: rgba(0,0,0,0.96);
  z-index: 40;
}
.specialized-shell {
  width: min(1180px, 94vw);
  height: min(88vh, 880px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
}
.specialized-topbar, .specialized-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.specialized-title {
  margin: 6px 0 0;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
}
.specialized-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 24px;
  min-height: 0;
}
.specialized-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-content: start;
  gap: 10px;
}
.specialized-domino {
  min-height: 92px;
  border: 0;
  border-radius: 22px;
  padding: 16px 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--domino) 88%, white 12%), color-mix(in srgb, var(--domino) 70%, black 30%));
  color: white;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 24px rgba(0,0,0,0.28);
  transform: translateY(0) scale(1);
  transition: transform 140ms ease, box-shadow 140ms ease, outline-color 140ms ease;
}
.specialized-domino.selected, .specialized-domino:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 28px rgba(0,0,0,0.34);
  outline: 3px solid rgba(255,255,255,0.5);
}
.specialized-list-panel {
  min-height: 0;
  border-radius: 28px;
  padding: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}
.specialized-questionnaire-list {
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  display: grid;
  gap: 12px;
  padding-right: 8px;
  min-height: 0;
  max-height: 100%;
}
.specialized-item {
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: white;
  border-radius: 20px;
  padding: 16px 18px;
  cursor: pointer;
  display: grid;
  gap: 6px;
}
.specialized-item.selected, .specialized-item:hover {
  border-color: color-mix(in srgb, var(--category-color, #4f7cff) 70%, white 30%);
  background: linear-gradient(180deg,color-mix(in srgb, var(--category-color, #4f7cff) 25%, rgba(24,34,58,.97)),rgba(12,18,32,.95));
}
.specialized-item-title { font-weight: 800; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.3; }
.specialized-item-meta, .specialized-progress, .specialized-empty { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.35; }
.specialized-item p { margin: 0; color: rgba(255,255,255,0.78); font-size: 0.92rem; line-height: 1.45; }
@media (max-width: 900px) {
  .specialized-grid { grid-template-columns: 1fr; }
}

.specialized-legend { margin: 6px 0 0; color: rgba(255,255,255,0.76); font-size: 0.84rem; line-height: 1.4; }

.specialized-grid > * { min-height: 0; }
.specialized-categories {
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  padding-right: 8px;
  min-height: 0;
  max-height: 100%;
}
.specialized-list-panel {
  overflow: hidden;
}
.specialized-questionnaire-list,
.specialized-categories {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}
.specialized-questionnaire-list::-webkit-scrollbar,
.specialized-categories::-webkit-scrollbar {
  width: 14px;
}
.specialized-questionnaire-list::-webkit-scrollbar-track,
.specialized-categories::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}
.specialized-questionnaire-list::-webkit-scrollbar-thumb,
.specialized-categories::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.52);
  border: 3px solid rgba(6,10,20,0.18);
  border-radius: 999px;
}
.specialized-questionnaire-list::-webkit-scrollbar-thumb:hover,
.specialized-categories::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.68);
}
.specialized-list-header > div { min-width: 0; }


.home-main-group {
  gap: 12px;
}
.home-questionnaire-controls {
  display: none !important;
}
.home-questionnaire-group {
  gap: 10px;
}
.home-copy {
  width: min(420px, 100%);
  font-size: clamp(16px, 1.2vw, 22px);
  line-height: 1.25;
  color: #f4f0d7;
}
.home-heading {
  font-size: clamp(19px, 1.55vw, 27px);
}
.specialized-access-btn {
  max-width: 380px;
  margin-inline: auto;
  padding: 10px 16px;
  border-radius: 14px;
}

.specialized-group{display:grid;gap:12px;margin-bottom:20px}
.specialized-group-title{display:flex;justify-content:space-between;align-items:center;font-weight:800;letter-spacing:.02em;color:#eef3ff;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
.specialized-group-title span{font-size:.85rem;color:#b9c4e6}
.specialized-item{display:grid;gap:8px;padding:16px 18px;border-radius:18px;border:1px solid color-mix(in srgb, var(--category-color, rgba(255,255,255,.18)) 58%, rgba(255,255,255,.10));background:linear-gradient(180deg,color-mix(in srgb, var(--category-color, #4f7cff) 18%, rgba(18,26,46,.95)),rgba(9,14,27,.92));box-shadow:0 12px 34px rgba(0,0,0,.18);position:relative;overflow:hidden}
.specialized-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,color-mix(in srgb, var(--category-color, #4f7cff) 90%, white 10%),color-mix(in srgb, var(--category-color, #4f7cff) 60%, black 40%));opacity:.95}
.specialized-item>*{position:relative;z-index:1}
.specialized-item-topline{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.specialized-item-title{display:block;flex:1 1 280px;min-width:0;overflow-wrap:anywhere}
.specialized-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.03em}
.specialized-badge-accessible{background:rgba(61,190,129,.18);color:#9bf0c5}
.specialized-badge-intermediaire{background:rgba(92,150,255,.18);color:#bdd5ff}
.specialized-badge-avance{background:rgba(255,194,82,.18);color:#ffe09b}
.specialized-badge-expert{background:rgba(217,90,167,.18);color:#ffc1ea}
.specialized-item-meta{color:#c6d0ee;font-weight:700;letter-spacing:.02em;display:block;white-space:normal;overflow-wrap:anywhere}
.specialized-progress{color:#8cf0c9;font-weight:700}
.specialized-item-mission{color:#d7dff6;line-height:1.45}

.home-top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.home-options-btn{border-radius:14px;padding:11px 14px;background:rgba(8,16,34,.42);border:1px solid rgba(255,255,255,.14);font-size:clamp(14px,1vw,18px);font-weight:800;line-height:1.2;min-height:54px}

.home-special-btn{
  border-color:rgba(255,215,84,.56);
  background:linear-gradient(180deg, rgba(120,92,12,.42), rgba(72,51,7,.38));
  color:#fff3b5;
  box-shadow:0 10px 26px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,225,134,.08);
}
.home-special-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,225,134,.12)}
.home-options-btn.selected{border-color:#ff3b8b;box-shadow:0 0 0 1px rgba(255,59,139,.18) inset}
.home-options-summary{margin:10px 0 0;color:rgba(255,255,255,.76);font-size:.92rem;line-height:1.45}
.options-overlay{background:radial-gradient(circle at top, rgba(33,53,98,.72), rgba(6,10,20,.96))}
.options-shell{width:min(1040px,92vw);max-height:90vh;overflow:auto;border-radius:28px;padding:24px;background:linear-gradient(180deg,rgba(9,14,27,.98),rgba(17,26,48,.96));border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px rgba(0,0,0,.42)}
.options-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:16px;align-items:stretch}
.options-card{border-radius:22px;padding:20px;background:linear-gradient(180deg,rgba(18,26,46,.95),rgba(9,14,27,.92));border:1px solid rgba(255,255,255,.10);box-shadow:0 12px 34px rgba(0,0,0,.18)}
.options-card h3{margin:0 0 12px;font-size:1.05rem}
.options-illustration-card{display:grid;place-items:center;text-align:center;min-height:260px;padding:10px;background:radial-gradient(circle at top, rgba(255,255,255,.05), rgba(10,14,26,.4) 58%), linear-gradient(180deg, rgba(18,26,46,.95), rgba(9,14,27,.92))}
.options-illustration-image{display:block;max-width:100%;max-height:420px;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.36))}
.options-toggle{display:flex;gap:10px;flex-wrap:wrap}
.options-help{margin:12px 0 0;color:#d7dff6;line-height:1.45}
.options-list{margin:0;padding-left:18px;display:grid;gap:10px;color:#d7dff6;line-height:1.45}
.options-list strong{color:#fff}
@media (max-width: 860px){.options-grid{grid-template-columns:1fr}}

.options-field{display:grid;gap:10px;margin:0 0 14px;color:#fff;font-weight:700}
.options-field span{color:#fff}
.options-field input[type="range"]{width:100%}
.options-select{max-width:240px}

.questionnaire-summary-actions-rich{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.questionnaire-summary-actions-rich .secondary-btn,.questionnaire-summary-actions-rich .primary-btn,.questionnaire-summary-actions-rich .ghost-btn{min-width:180px}.questionnaire-summary-hint{margin-top:10px}


.specialized-tools{display:grid;gap:10px;margin:4px 0 6px}
.specialized-quick-filters{display:flex;flex-wrap:wrap;gap:8px}
.specialized-filter{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#eef3ff;border-radius:999px;padding:8px 12px;font:inherit;font-weight:800;cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.specialized-filter:hover,.specialized-filter.selected{background:rgba(105,145,255,.18);border-color:rgba(161,192,255,.42);transform:translateY(-1px)}
.specialized-memory-summary{display:flex;flex-wrap:wrap;gap:10px;color:#d7dff6;font-size:.9rem;line-height:1.4}
.specialized-memory-summary strong{color:#fff}
.specialized-item-tools{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto;max-width:100%}
.specialized-favorite{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#ffd45b;font-size:1.05rem;font-weight:900;cursor:pointer}
.specialized-favorite.is-favorite{background:rgba(255,212,91,.18);border-color:rgba(255,212,91,.42)}
.specialized-memory-row{display:flex;flex-wrap:wrap;gap:8px}
.specialized-memory-chip{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:.76rem;font-weight:800;letter-spacing:.02em}
.specialized-memory-fragile{background:rgba(255,127,80,.14);color:#ffb197}
.specialized-memory-review{background:rgba(114,163,255,.16);color:#c7daff}
.specialized-memory-acquired{background:rgba(98,208,149,.16);color:#bdf3d2}
.specialized-memory-recent{background:rgba(248,215,90,.16);color:#ffe58a}


.challenge-banner{margin-top:12px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(20,32,58,.92),rgba(9,14,27,.88));color:#eef3ff;line-height:1.45;box-shadow:0 12px 34px rgba(0,0,0,.16)}
.challenge-banner strong{color:#ffe58a}
.challenge-banner-message{margin-top:6px;color:#d7dff6;font-style:italic}
.challenge-shell{width:min(1080px,94vw)}
.challenge-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;margin-top:16px}
.challenge-preview-card{display:grid;gap:12px;place-items:center;text-align:center}
.challenge-diploma-image{display:block;max-width:100%;max-height:520px;object-fit:contain;border-radius:16px;box-shadow:0 18px 30px rgba(0,0,0,.28)}
.challenge-field{display:grid;gap:8px;margin-bottom:14px}
.challenge-field label span{font-weight:800;color:#fff}
.challenge-field input,.challenge-field textarea{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;padding:12px 14px;font:inherit}
.challenge-field input[readonly]{opacity:.85}
.challenge-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.challenge-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.challenge-result{margin-top:12px;color:#d7dff6;line-height:1.45;min-height:24px}
.challenge-availability{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(105,145,255,.14);color:#dce7ff;font-weight:800;margin-bottom:14px}
@media (max-width: 900px){.challenge-grid{grid-template-columns:1fr}.challenge-row{grid-template-columns:1fr}}

.specialized-top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.specialized-delete-btn{border:1px solid rgba(255,255,255,.14);background:rgba(255,116,116,.08);color:#ffd2d2;border-radius:999px;padding:6px 10px;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}
.specialized-delete-btn:hover{background:rgba(255,116,116,.18);border-color:rgba(255,171,171,.42)}
.custom-shell{width:min(1180px,95vw)}
.custom-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;margin-top:16px}
.custom-questions-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.custom-rows{display:grid;gap:10px;max-height:54vh;overflow:auto;padding-right:4px}
.custom-row{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:12px;background:rgba(255,255,255,.04)}
.custom-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#fff;font-weight:800}
.custom-row-remove{border:0;background:transparent;color:#ffb4b4;font:inherit;font-weight:800;cursor:pointer}
.custom-row-grid{display:grid;gap:8px}
.custom-row-grid textarea,.custom-row-grid input{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;padding:10px 12px;font:inherit}
@media (max-width: 900px){.custom-grid{grid-template-columns:1fr}}


.diploma-shell { max-width: 980px; }
.diploma-preview-card {
  position: relative;
  width: min(92vw, 820px);
  aspect-ratio: 1536 / 1043;
  margin: 0 auto 18px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  background: #111 url('../assets/Diplome.png') center/cover no-repeat;
}
.diploma-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #422b16;
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}
.diploma-name {
  top: 35%;
  width: 78%;
  font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive;
  font-size: clamp(24px, 4.5vw, 54px);
  line-height: 1.1;
}
.diploma-questionnaire {
  top: 51%;
  width: 75%;
  font-size: clamp(16px, 2.4vw, 28px);
  font-weight: 700;
}
.diploma-mention {
  top: 60%;
  width: 72%;
  font-size: clamp(15px, 2.1vw, 24px);
}
.diploma-date {
  top: 69%;
  font-size: clamp(13px, 1.8vw, 20px);
}
.diploma-sender {
  top: 76%;
  width: 70%;
  font-size: clamp(12px, 1.6vw, 18px);
}
.diploma-actions { justify-content: center; }
@media print {
  body * { visibility: hidden !important; }
  #diplomaScreen, #diplomaScreen * { visibility: visible !important; }
  #diplomaScreen { position: fixed; inset: 0; background: white !important; }
  .diploma-preview-card { width: 100%; max-width: none; box-shadow: none; margin: 0; }
  .diploma-actions, .specialized-topbar { display: none !important; }
}


.specialized-spotlight {
  display: grid;
  cursor: pointer;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(198, 221, 181, 0.18);
  background:
    radial-gradient(circle at top left, rgba(165,190,120,0.08), transparent 34%),
    linear-gradient(180deg, rgba(20,30,26,0.88), rgba(12,18,16,0.92));
  box-shadow: 0 16px 34px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
}
.specialized-spotlight-eyebrow {
  color: rgba(215, 232, 194, 0.84);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.specialized-spotlight-title {
  margin-top: 3px;
  color: #eef5e6;
  font-size: clamp(1.02rem, 1.25vw, 1.28rem);
  font-weight: 900;
}
.specialized-spotlight-copy {
  margin: 6px 0 0;
  color: rgba(231, 238, 228, 0.78);
  line-height: 1.42;
}
.specialized-access-btn {
  max-width: none;
  min-width: 320px;
  padding: 13px 18px;
  border: 1px solid rgba(192, 217, 173, 0.26);
  background: linear-gradient(180deg, rgba(110,136,102,0.22), rgba(71,92,67,0.24));
  color: #eef6e8;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  letter-spacing: 0.02em;
  text-transform: none;
}
.specialized-access-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(123,149,114,0.26), rgba(78,100,73,0.28));
}

.phase-interlude-skip-btn,
.presentation-skip-btn {
  position: static;
  margin: 6px auto 0;
  z-index: 25000;
  border: 2px solid rgba(252,242,210,0.92);
  background: rgba(36, 22, 10, 0.96);
  color: #fff7e8;
  border-radius: 999px;
  padding: 12px 18px;
  font: 900 18px/1.1 Arial, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
}
.phase-interlude-skip-btn:hover,
.presentation-skip-btn:hover {
  background: rgba(28, 35, 46, 0.86);
}

.presentation-overlay {
  background: radial-gradient(circle at center, rgba(14, 22, 34, 0.96), rgba(5, 8, 14, 0.985));
  z-index: 35;
}
.presentation-shell {
  width: min(96vw, 1180px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.presentation-video {
  width: 100%;
  max-height: 92vh;
  border-radius: 22px;
  background: #000;
  box-shadow: 0 24px 90px rgba(0,0,0,0.45);
}


.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.specialized-search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.specialized-search-wrap{flex:1 1 320px}
.specialized-search-input{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:12px 14px;
  font:inherit;
  font-weight:700;
}
.specialized-search-input::placeholder{color:rgba(238,243,255,.62)}
.specialized-clear-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#eef3ff;
  border-radius:14px;
  padding:10px 14px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.specialized-level-filters{display:flex;flex-wrap:wrap;gap:8px}
.specialized-spotlight-copy{max-width:34ch}
.specialized-spotlight-title{letter-spacing:.01em}


.video-skip-btn-visible {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.presentation-shell,
.phase-interlude-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.presentation-shell > .presentation-video,
.phase-interlude-shell > .questionnaire-victory-video {
  flex: 0 1 auto;
}
.presentation-skip-btn,
.phase-interlude-skip-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(8, 14, 24, 0.78);
  color: #fff8dd;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 12px 34px rgba(0,0,0,0.30);
}
.presentation-skip-btn:hover,
.phase-interlude-skip-btn:hover {
  background: rgba(18, 28, 44, 0.92);
}
.presentation-overlay-active .presentation-video,
#phaseInterludeScreen .questionnaire-victory-video {
  box-shadow: 0 24px 90px rgba(0,0,0,0.55);
}
.questionnaire-summary-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(245,235,210,0.70), rgba(230,213,178,0.78)),
    url('../assets/old-paper.jpg') center/cover no-repeat;
  color: #4f3920;
  border: 1px solid rgba(116,79,35,0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.22);
}
.questionnaire-summary-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 24px;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(132,92,41,0.02) 0 2px, rgba(255,255,255,0.02) 2px 4px);
  mix-blend-mode: multiply;
  opacity: 0.75;
}
.questionnaire-summary-card > * { position: relative; z-index: 1; }

.revision-music-toggle {
  align-self: flex-end;
  margin: -6px 0 8px auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(122,86,46,0.30);
  background: rgba(255,248,234,0.86);
  color: #53371f;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(61,41,17,0.12);
}
.revision-music-toggle[aria-pressed="true"] {
  opacity: 0.72;
}
#questionnaireSummaryTitle,
.questionnaire-summary-section-title {
  font-family: var(--font-hand);
  letter-spacing: 0.01em;
  color: #5b3a1d;
}
#questionnaireSummaryTitle { font-size: clamp(36px, 5vw, 58px); line-height: 0.98; }
.questionnaire-summary-section-title { font-size: clamp(26px, 3.8vw, 38px); margin-bottom: 10px; }
.questionnaire-summary-subtitle,
.questionnaire-summary-q,
.questionnaire-summary-a,
.questionnaire-summary-hint,
.questionnaire-summary-empty,
.questionnaire-summary-coach-line,
.questionnaire-summary-suggestions {
  color: #5c4428;
}
.questionnaire-summary-item,
.questionnaire-summary-coach-body,
.questionnaire-summary-memory {
  background: rgba(255,248,233,0.52);
  border: 1px solid rgba(130,96,55,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}
.questionnaire-summary-item-pending .questionnaire-summary-q {
  color: #8b5632;
}
.questionnaire-summary-actions-rich .secondary-btn,
.questionnaire-summary-actions-rich .primary-btn,
.questionnaire-summary-actions-rich .ghost-btn {
  background: rgba(255,248,234,0.72);
  color: #53371f;
  border-color: rgba(122,86,46,0.28);
}
.questionnaire-summary-actions-rich .primary-btn {
  background: linear-gradient(180deg, rgba(173,132,77,0.94), rgba(130,94,49,0.96));
  color: #fff9ef;
}
.questionnaire-summary-coach-body {
  padding: 14px 16px;
  border-radius: 18px;
}
.questionnaire-summary-coach-line { margin: 0 0 8px; }
.questionnaire-summary-suggestions {
  margin: 10px 0 0 18px;
  padding: 0;
}
.questionnaire-summary-suggestions li { margin-bottom: 6px; }
.status-chip {
  border-radius: 14px;
  padding: 8px 10px;
  min-width: 44px;
  text-align: center;
}


.questionnaire-summary-list { gap: 16px; }
.questionnaire-summary-page { display: none; gap: 16px; }
.questionnaire-summary-page.is-active { display: grid; }
.questionnaire-summary-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 8px;
}
.questionnaire-summary-pagination[hidden] { display: none !important; }
.questionnaire-summary-page-indicator {
  font-weight: 800;
  color: #5b3a1d;
  min-width: 92px;
  text-align: center;
}
.questionnaire-summary-page-btn {
  min-width: 132px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(122,86,46,0.30);
  background: rgba(255,248,234,0.82);
  color: #53371f;
  font-weight: 800;
  cursor: pointer;
}
.questionnaire-summary-page-btn:disabled { opacity: 0.45; cursor: default; }


.questionnaire-victory-answer-recall {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  max-width: min(88vw, 860px);
  padding: 0.8rem 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(8, 14, 24, 0.72);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
  color: #f7fbff;
  text-align: center;
  line-height: 1.35;
  backdrop-filter: blur(10px);
  z-index: 2;
  pointer-events: none;
}
.questionnaire-victory-answer-recall strong {
  color: #ffd75e;
}
.questionnaire-victory-answer-recall span {
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.presentation-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.learn-review-shell {
  width: min(1440px, calc(100vw - 32px));
  max-height: min(920px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.learn-review-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.learn-review-grid {
  display: grid;
  grid-template-columns: 240px 360px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
}
.learn-review-list-panel, .learn-review-paper { min-height: 0; }
.learn-review-paper {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 28px;
  overflow: hidden;
}
.learn-review-pages {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 8px;
}
.learn-review-item {
  background: rgba(255, 249, 236, 0.72);
}
.learn-review-footer, .learn-review-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.learn-review-footer {
  margin-top: 14px;
  border-top: 1px solid rgba(116,79,35,0.18);
  padding-top: 14px;
}
@media (max-width: 1180px) {
  .learn-review-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .learn-review-paper { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .learn-review-grid { grid-template-columns: 1fr; }
}

.specialized-spotlight:focus-visible{outline:3px solid rgba(255,223,125,.55);outline-offset:3px}
.specialized-spotlight:hover{transform:translateY(-1px);border-color:rgba(226,205,128,.32)}

.home-special-row-wrap{display:grid;gap:10px;margin:12px 0 8px}
.home-special-row-label{font-size:.86rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#ffe9a3;padding:0 2px}
.specialized-spotlight-row{grid-template-columns:1fr auto;min-height:118px;border:2px solid rgba(255,215,84,.52);background:linear-gradient(180deg, rgba(60,45,8,.52), rgba(26,19,6,.72));box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,233,163,.08)}
.specialized-spotlight-row .specialized-spotlight-title{font-size:clamp(1.14rem, 1.45vw, 1.5rem);color:#fff2bf}
.specialized-spotlight-row .specialized-spotlight-copy{color:rgba(255,244,214,.86);max-width:52ch}
.specialized-spotlight-row .specialized-spotlight-eyebrow{color:rgba(255,233,163,.86)}
.specialized-spotlight-row .specialized-access-btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;font-weight:900;background:linear-gradient(180deg, rgba(255,223,125,.28), rgba(126,92,14,.34));border:1px solid rgba(255,228,147,.45);color:#fff7dc}
.specialized-spotlight-row.selected,.specialized-spotlight-row[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(255,225,122,.24),0 18px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,233,163,.12)}
@media (max-width: 760px){.specialized-spotlight-row{grid-template-columns:1fr}.specialized-spotlight-row .specialized-access-btn{min-width:0;width:100%}}



/* --- Pass 1 : écran "Apprendre & réviser" / corrections --- */
.learn-review-shell {
  width: min(1480px, calc(100vw - 28px));
  max-height: min(940px, calc(100vh - 24px));
}
.learn-review-grid {
  grid-template-columns: 210px 400px minmax(0, 1fr);
  gap: 16px;
}
.learn-review-topbar {
  gap: 12px;
}
.learn-review-paper {
  padding: 24px 24px 18px;
}
.learn-review-pages {
  gap: 10px;
}
.learn-review-footer {
  margin-top: 12px;
  padding-top: 12px;
}
.learn-review-pagination {
  justify-content: flex-start;
}
.specialized-categories,
.specialized-questionnaire-list,
.learn-review-pages {
  overflow-y: auto;
}
.specialized-categories {
  grid-template-columns: 1fr;
}
.specialized-domino {
  min-height: 72px;
  padding: 14px 12px;
  border-radius: 20px;
}
.learn-review-list-panel .specialized-list-header {
  margin-bottom: 4px;
}
.learn-review-list-panel .specialized-legend,
#learnReviewPaperMeta {
  line-height: 1.45;
}
#learnReviewPaperMeta {
  margin-bottom: 14px;
}
.questionnaire-paper-title,
.questionnaire-title-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.questionnaire-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(116, 79, 35, 0.12);
  border: 1px solid rgba(116, 79, 35, 0.18);
  color: #6b4420;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.questionnaire-title-badge-paper {
  background: rgba(116, 79, 35, 0.14);
  border-color: rgba(116, 79, 35, 0.24);
}
.questionnaire-title-label {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.questionnaire-title-label-paper {
  flex-basis: 320px;
}
.specialized-item {
  padding: 14px 16px;
  gap: 8px;
}
.specialized-item-title {
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.35;
}
.learn-review-item {
  border-color: rgba(116,79,35,0.12);
}
.learn-review-item .questionnaire-summary-question,
.learn-review-item .questionnaire-summary-answer {
  color: #5e4424;
  line-height: 1.45;
}
.learn-review-item .questionnaire-summary-answer strong {
  color: #3d2b15;
}
#learnReviewPrevBtn,
#learnReviewNextBtn,
#learnReviewStartBtn {
  min-height: 44px;
}
#learnReviewPrevBtn[disabled],
#learnReviewNextBtn[disabled] {
  opacity: 0.52;
  cursor: default;
}
#learnReviewPageLabel {
  font-weight: 800;
  color: #7a5730;
}
@media (max-width: 1280px) {
  .learn-review-grid {
    grid-template-columns: 190px 330px minmax(0, 1fr);
  }
}
@media (max-width: 980px) {
  .learn-review-grid {
    grid-template-columns: 1fr;
  }
  .learn-review-paper,
  .learn-review-list-panel,
  .specialized-categories {
    max-height: none;
  }
}


/* --- Pass 2 : lisibilité forte de la liste des questionnaires --- */
.learn-review-list-panel {
  background: rgba(7, 10, 20, 0.94);
  border: 1px solid rgba(255,255,255,0.08);
}

.learn-review-list-panel .specialized-questionnaire-list {
  gap: 10px;
  padding-right: 10px;
}

.learn-review-list-panel .specialized-item {
  background: linear-gradient(180deg, rgba(19,24,41,0.98), rgba(10,14,28,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.learn-review-list-panel .specialized-item:hover,
.learn-review-list-panel .specialized-item.selected {
  background: linear-gradient(180deg, rgba(42,54,92,0.98), rgba(18,26,48,0.98));
  border-color: rgba(126, 170, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(126, 170, 255, 0.18), 0 10px 18px rgba(0,0,0,0.22);
}

.learn-review-list-panel .specialized-item-topline {
  align-items: center;
  gap: 10px;
}

.learn-review-list-panel .specialized-item-title,
.learn-review-list-panel .questionnaire-title-inline,
.learn-review-list-panel .questionnaire-title-label {
  color: #f7f9ff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: none;
}

.learn-review-list-panel .questionnaire-title-inline {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.learn-review-list-panel .questionnaire-title-label {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.learn-review-list-panel .questionnaire-title-badge {
  min-width: 40px;
  height: 26px;
  padding: 0 9px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #f3f6ff;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.learn-review-list-panel .specialized-item-tools {
  flex: 0 0 auto;
}

.learn-review-list-panel .specialized-item-meta,
.learn-review-list-panel .specialized-progress,
.learn-review-list-panel .specialized-item p,
.learn-review-list-panel .specialized-item-mission,
.learn-review-list-panel .specialized-empty,
.learn-review-list-panel .specialized-legend {
  color: rgba(235, 241, 255, 0.82);
}

.learn-review-list-panel .specialized-item-meta {
  font-size: 0.88rem;
}

.learn-review-list-panel .specialized-item p,
.learn-review-list-panel .specialized-item-mission {
  font-size: 0.9rem;
  line-height: 1.45;
}

.learn-review-list-panel .specialized-favorite,
.learn-review-list-panel .specialized-delete-btn {
  opacity: 0.95;
}

.learn-review-list-panel .specialized-questionnaire-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.28);
  border-radius: 999px;
}

@media (max-width: 1280px) {
  .learn-review-list-panel .questionnaire-title-inline {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}


/* --- Pass 3 : rendre la liste des questionnaires franchement lisible --- */
.learn-review-list-panel .specialized-questionnaire-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 4px 10px 8px 2px !important;
}

.learn-review-list-panel .specialized-item {
  display: block !important;
  min-height: auto !important;
  height: auto !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  overflow: visible !important;
}

.learn-review-list-panel .specialized-item-topline {
  display: block !important;
}

.learn-review-list-panel .specialized-item-title,
.learn-review-list-panel .questionnaire-title-inline,
.learn-review-list-panel .questionnaire-title-label {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  padding: 0 !important;
}

.learn-review-list-panel .questionnaire-title-inline {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.learn-review-list-panel .questionnaire-title-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.learn-review-list-panel .questionnaire-title-badge {
  flex: 0 0 auto !important;
  margin-top: 1px !important;
}

.learn-review-list-panel .specialized-item-tools,
.learn-review-list-panel .specialized-item-meta,
.learn-review-list-panel .specialized-item p,
.learn-review-list-panel .specialized-item-mission,
.learn-review-list-panel .specialized-memory-row,
.learn-review-list-panel .specialized-progress {
  display: none !important;
}


/* --- Pass 4 : nettoyage de l'en-tête après suppression du texte d'aide --- */
.learn-review-list-panel .specialized-list-header {
  margin-bottom: 10px;
}
.learn-review-list-panel #learnReviewCategoryTitle {
  margin-bottom: 0;
}


/* Pass 5 : apprendre & réviser */
.learn-review-grid { grid-template-columns: 190px 380px minmax(0, 1fr); align-items: stretch; }
.learn-review-paper { min-width: 0; }
.learn-review-pages { max-height: 100%; }
.learn-review-paper .questionnaire-summary-item { line-height: 1.42; }
.learn-review-paper .questionnaire-summary-answer { margin-top: 6px; }
#learnReviewPaperMeta { font-size: .98rem; }
@media (max-width: 1280px) {
  .learn-review-grid { grid-template-columns: 170px 330px minmax(0, 1fr); }
}


/* --- Pass 8 : lisibilité forte de la vue "Choisis un thème puis un questionnaire" --- */
.specialized-shell {
  width: min(1320px, 96vw) !important;
  height: min(90vh, 920px) !important;
  gap: 14px !important;
}

.specialized-grid {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 18px !important;
}

.specialized-categories {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding-right: 10px !important;
}

.specialized-domino {
  min-height: 72px !important;
  padding: 14px 16px !important;
  border-radius: 22px !important;
  font-size: 1rem !important;
}

.specialized-list-panel {
  padding: 18px 20px !important;
  grid-template-rows: auto auto auto auto 1fr !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.specialized-list-header {
  align-items: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.specialized-list-header > div:first-child {
  flex: 1 1 420px !important;
  min-width: 0 !important;
}

.specialized-list-header > *:last-child {
  flex: 0 0 auto !important;
}

.specialized-title {
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  line-height: 1.1 !important;
}

.specialized-legend {
  margin-top: 4px !important;
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.84) !important;
}

#specializedDefaultBtn,
.specialized-default-btn,
button[id="specializedDefaultBtn"] {
  min-height: 46px !important;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  font-size: 0.95rem !important;
  white-space: normal !important;
  max-width: 320px !important;
}

.specialized-quick-filters,
.specialized-level-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.specialized-quick-filters .pill-btn,
.specialized-level-filters .pill-btn,
.specialized-quick-filters button,
.specialized-level-filters button {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}

.specialized-search-row,
.specialized-search-wrap {
  margin: 0 !important;
}

.specialized-search-input,
#specializedSearchInput {
  min-height: 46px !important;
  font-size: 1rem !important;
  padding: 10px 14px !important;
}

.specialized-memory-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.88) !important;
  margin-bottom: 2px !important;
}

.specialized-questionnaire-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 10px 4px 2px !important;
}

.specialized-questionnaire-list .specialized-item {
  display: block !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  min-height: auto !important;
  height: auto !important;
  background: linear-gradient(180deg, rgba(18,28,56,0.98), rgba(5,12,28,0.98)) !important;
  border: 1px solid rgba(90, 153, 255, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.specialized-questionnaire-list .specialized-item:hover,
.specialized-questionnaire-list .specialized-item.selected {
  background: linear-gradient(180deg, rgba(28,48,99,0.98), rgba(8,19,44,0.98)) !important;
  border-color: rgba(124, 181, 255, 0.76) !important;
  box-shadow: 0 0 0 1px rgba(124, 181, 255, 0.18), 0 10px 20px rgba(0,0,0,0.22) !important;
}

.specialized-questionnaire-list .specialized-item-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.specialized-questionnaire-list .specialized-item-title,
.specialized-questionnaire-list .questionnaire-title-inline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.specialized-questionnaire-list .questionnaire-title-inline {
  flex-wrap: nowrap !important;
}

.specialized-questionnaire-list .questionnaire-title-label,
.specialized-questionnaire-list .specialized-item-title {
  color: #f7faff !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.specialized-questionnaire-list .questionnaire-title-badge {
  min-width: 40px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #eef4ff !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  flex: 0 0 auto !important;
}

.specialized-questionnaire-list .specialized-item-meta {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(225,235,255,0.82) !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.specialized-questionnaire-list .specialized-item-mission,
.specialized-questionnaire-list .specialized-memory-row,
.specialized-questionnaire-list .specialized-progress {
  display: none !important;
}

.specialized-questionnaire-list .specialized-item-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.specialized-questionnaire-list .specialized-favorite {
  width: 34px !important;
  height: 34px !important;
}

@media (max-width: 1100px) {
  .specialized-grid {
    grid-template-columns: 1fr !important;
  }
}


/* --- Pass 9 : reset brutal de la liste pour la rendre enfin lisible --- */
.specialized-questionnaire-list {
  display: block !important;
  padding: 6px 10px 8px 4px !important;
}

.specialized-questionnaire-list .specialized-item {
  all: unset;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 0 12px 0 !important;
  padding: 0 16px !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  background: linear-gradient(180deg, rgba(16,28,64,0.98), rgba(6,12,28,0.98)) !important;
  border: 1px solid rgba(85, 140, 255, 0.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
  overflow: hidden !important;
}

.specialized-questionnaire-list .specialized-item:hover,
.specialized-questionnaire-list .specialized-item.selected {
  background: linear-gradient(180deg, rgba(30,50,104,0.98), rgba(9,20,46,0.98)) !important;
  border-color: rgba(130, 185, 255, 0.82) !important;
  box-shadow: 0 0 0 1px rgba(130, 185, 255, 0.18), 0 10px 20px rgba(0,0,0,0.22) !important;
}

.specialized-questionnaire-list .specialized-item-topline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.specialized-questionnaire-list .specialized-item-title,
.specialized-questionnaire-list .questionnaire-title-inline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.specialized-questionnaire-list .questionnaire-title-inline {
  flex-wrap: nowrap !important;
}

.specialized-questionnaire-list .questionnaire-title-badge {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 24px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef4ff !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}

.specialized-questionnaire-list .questionnaire-title-label,
.specialized-questionnaire-list .specialized-item-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #f7faff !important;
  font-size: 1.06rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.specialized-questionnaire-list .specialized-item-meta,
.specialized-questionnaire-list .specialized-item-mission,
.specialized-questionnaire-list .specialized-memory-row,
.specialized-questionnaire-list .specialized-progress,
.specialized-questionnaire-list .specialized-delete-btn {
  display: none !important;
}

.specialized-questionnaire-list .specialized-item-tools {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: 12px !important;
}

.specialized-questionnaire-list .specialized-favorite {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

.specialized-questionnaire-list .specialized-item::before,
.specialized-questionnaire-list .specialized-item::after {
  display: none !important;
}

/* Classeur de connaissances : profils locaux légers */
.binder-overlay {
  z-index: 55;
  padding: 20px;
  background: radial-gradient(circle at 50% 20%, rgba(27,43,67,.97), rgba(5,9,15,.985));
}
.binder-shell {
  width: min(920px, 94vw);
  max-height: min(88vh, 820px);
  overflow: auto;
  border-radius: 30px;
  padding: clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(19,31,47,.97), rgba(8,15,24,.98));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}
.binder-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}
.binder-title {
  margin: 5px 0 4px;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}
.binder-subtitle {
  margin: 0;
  max-width: 62ch;
  color: rgba(235,242,251,.72);
  line-height: 1.5;
}
.binder-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.binder-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 18px;
  color: rgba(235,242,251,.72);
  text-align: center;
}
.binder-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
}
.binder-card.current {
  border-color: rgba(244,190,0,.66);
  box-shadow: inset 0 0 0 1px rgba(244,190,0,.16);
}
.binder-card-main {
  width: 100%;
  display: grid;
  gap: 5px;
  text-align: left;
  border: 0;
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(255,255,255,.045);
  color: #fff;
  cursor: pointer;
}
.binder-card-main:hover { background: rgba(255,255,255,.085); }
.binder-card-top { display: flex; align-items: center; gap: 10px; }
.binder-card-text { display: grid; gap: 3px; min-width: 0; }
.binder-card-name { font-size: 1.08rem; font-weight: 900; }
.binder-card-status { color: #f0c94c; font-size: .78rem; font-weight: 800; }
.binder-card-stats { color: rgba(235,242,251,.7); font-size: .78rem; line-height: 1.4; }
.binder-card-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.binder-card-actions button {
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(242,246,252,.78);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.binder-card-actions button:hover { color: #fff; border-color: rgba(255,255,255,.28); }
.binder-card-actions .binder-delete-btn:hover { border-color: rgba(255,104,104,.58); color: #ffd5d5; }
.binder-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.binder-name-wrap { display: grid; gap: 7px; color: rgba(235,242,251,.75); font-size: .8rem; font-weight: 800; }
.binder-avatar-wrap { display: grid; gap: 7px; color: rgba(235,242,251,.75); font-size: .8rem; font-weight: 800; }
.binder-avatar-btn { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; }
.binder-name-wrap input {
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 12px 14px;
  font: inherit;
  outline: none;
}
.binder-name-wrap input:focus { border-color: rgba(244,190,0,.7); box-shadow: 0 0 0 3px rgba(244,190,0,.11); }
.binder-avatar-wrap { display: grid; gap: 7px; color: rgba(235,242,251,.75); font-size: .8rem; font-weight: 800; }
.binder-avatar-btn { min-height: 47px; justify-content: flex-start; gap: 10px; }
.avatar-chip {
  --avatar-sheet-image: none;
  --avatar-pos-x: 0%;
  --avatar-pos-y: 0%;
  display: inline-block;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-color: rgba(255,255,255,.06);
  background-image: var(--avatar-sheet-image);
  background-repeat: no-repeat;
  background-size: 500% 600%;
  background-position: var(--avatar-pos-x) var(--avatar-pos-y);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.avatar-chip-inline { width: 34px; height: 34px; border-radius: 11px; }
.avatar-chip-medium { width: 48px; height: 48px; border-radius: 14px; }
.avatar-chip-large { width: 74px; height: 74px; border-radius: 20px; }
.avatar-chip-card { width: 54px; height: 54px; border-radius: 15px; }
.avatar-chip-pick { width: 100%; height: 100%; border-radius: 16px; }
.avatar-picker-overlay {
  z-index: 56;
  padding: 20px;
  background: radial-gradient(circle at 50% 20%, rgba(27,43,67,.97), rgba(5,9,15,.985));
}
.avatar-picker-shell {
  width: min(980px, 95vw);
  max-height: min(90vh, 880px);
  overflow: auto;
  border-radius: 30px;
  padding: clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(19,31,47,.97), rgba(8,15,24,.98));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}
.avatar-picker-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.avatar-picker-tab {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(245,248,251,.84);
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.avatar-picker-tab.selected { border-color: rgba(244,190,0,.72); color: #fff; box-shadow: inset 0 0 0 1px rgba(244,190,0,.14); }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.avatar-picker-item {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 7px;
  cursor: pointer;
}
.avatar-picker-item.selected { border-color: rgba(244,190,0,.72); box-shadow: 0 0 0 2px rgba(244,190,0,.14) inset; background: rgba(244,190,0,.07); }
.avatar-picker-item:hover { background: rgba(255,255,255,.08); }
.avatar-picker-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar-picker-selection { display: flex; align-items: center; gap: 12px; }
.avatar-picker-selection-label { color: rgba(235,242,251,.65); font-size: .78rem; font-weight: 800; }
.avatar-picker-current-text { font-weight: 800; }
.home-binder-btn { display: inline-flex; align-items: center; gap: 8px; }
.binder-create-btn { min-height: 45px; }
.avatar-chip {
  --avatar-sheet-image: none;
  --avatar-pos-x: 0%;
  --avatar-pos-y: 0%;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 16px;
  background-color: rgba(255,255,255,.08);
  background-image: var(--avatar-sheet-image);
  background-size: 500% 600%;
  background-position: var(--avatar-pos-x) var(--avatar-pos-y);
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.avatar-chip-medium { width: 46px; height: 46px; }
.avatar-chip-card { width: 54px; height: 54px; border-radius: 18px; }
.avatar-chip-inline { width: 26px; height: 26px; border-radius: 10px; vertical-align: middle; margin-right: 8px; }
.avatar-chip-large { width: 72px; height: 72px; border-radius: 22px; }
.avatar-chip-pick { width: 100%; aspect-ratio: 1 / 1; border-radius: 18px; }
.home-binder-btn { display: inline-flex; align-items: center; gap: 2px; }
.avatar-picker-overlay {
  z-index: 56;
  padding: 20px;
  background: radial-gradient(circle at 50% 20%, rgba(27,43,67,.97), rgba(5,9,15,.985));
}
.avatar-picker-shell {
  width: min(980px, 95vw);
  max-height: min(90vh, 860px);
  overflow: auto;
  border-radius: 30px;
  padding: clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(19,31,47,.97), rgba(8,15,24,.98));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}
.avatar-picker-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 14px; }
.avatar-picker-tab {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(242,246,252,.86);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.avatar-picker-tab.selected { border-color: rgba(244,190,0,.72); background: rgba(244,190,0,.12); color: #fff; }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.avatar-picker-item {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  padding: 8px;
  cursor: pointer;
}
.avatar-picker-item.selected { border-color: rgba(244,190,0,.72); background: rgba(244,190,0,.08); box-shadow: inset 0 0 0 1px rgba(244,190,0,.16); }
.avatar-picker-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; }
.avatar-picker-selection { display: flex; align-items: center; gap: 12px; }
.avatar-picker-selection-label { color: rgba(235,242,251,.64); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.avatar-picker-current-text { color: #fff; font-weight: 800; }
.binder-feedback { min-height: 1.2em; margin: 8px 0 0; color: #ffe39a; font-size: .8rem; }
.binder-guest-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(235,242,251,.58);
  font-size: .76rem;
}
.home-binder-btn { border-color: rgba(244,190,0,.32); }
.home-binder-btn.selected { border-color: rgba(244,190,0,.72); box-shadow: inset 0 0 0 1px rgba(244,190,0,.14); }
@media (max-width: 640px) {
  .binder-overlay { padding: 10px; }
  .binder-shell { width: 100%; max-height: 94vh; border-radius: 22px; padding: 18px; }
  .binder-topbar { align-items: stretch; }
  .binder-topbar { flex-direction: column; }
  .binder-close-btn { align-self: flex-end; }
  .binder-list { grid-template-columns: 1fr; }
  .binder-create-row { grid-template-columns: 1fr; }
  .binder-guest-row { align-items: flex-start; flex-direction: column; }
  .avatar-picker-shell { width: 100%; max-height: 94vh; border-radius: 22px; padding: 18px; }
  .avatar-picker-footer { flex-direction: column; align-items: stretch; }
  .avatar-picker-selection { align-self: flex-start; }
}
.binder-overlay[data-mode="choose"] .binder-card-actions { display: flex; }

/* Avatars de classeur */
.avatar-chip {
  display: inline-block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-image: var(--avatar-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(244,190,0,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 5px 14px rgba(0,0,0,.22);
}
.avatar-chip-inline {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  margin-right: 7px;
  vertical-align: middle;
}
.avatar-chip-medium { width: 46px; height: 46px; border-radius: 14px; }
.avatar-chip-card { width: 62px; height: 62px; border-radius: 18px; }
.avatar-chip-large { width: 72px; height: 72px; border-radius: 20px; }
.avatar-chip-pick {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 15px;
  box-shadow: none;
}
.home-binder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.binder-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.binder-card-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.binder-card-name { overflow-wrap: anywhere; }
.binder-avatar-wrap {
  display: grid;
  gap: 7px;
  color: rgba(235,242,251,.75);
  font-size: .8rem;
  font-weight: 800;
}
.binder-avatar-btn {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  padding: 6px 11px;
}
.binder-create-row {
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.avatar-picker-overlay {
  z-index: 66;
  padding: 16px;
  background: rgba(4,8,13,.88);
  backdrop-filter: blur(5px);
}
.avatar-picker-shell {
  width: min(940px, 96vw);
  max-height: min(92vh, 900px);
  overflow: auto;
  border-radius: 28px;
  padding: clamp(18px, 2.5vw, 28px);
  background: linear-gradient(180deg, rgba(25,38,55,.985), rgba(8,15,24,.99));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.avatar-picker-topbar { margin-bottom: 14px; }
.avatar-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.avatar-picker-tab {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(244,247,252,.82);
  border-radius: 999px;
  padding: 8px 13px;
  font: inherit;
  font-size: .8rem;
  font-weight: 850;
  cursor: pointer;
}
.avatar-picker-tab:hover { background: rgba(255,255,255,.09); color: #fff; }
.avatar-picker-tab.selected {
  color: #15100a;
  background: #f0c94c;
  border-color: #ffe17a;
  box-shadow: 0 0 0 2px rgba(240,201,76,.14);
}
.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(58px, 1fr));
  gap: 8px;
}
.avatar-picker-item {
  appearance: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  padding: 4px;
  border-radius: 18px;
  aspect-ratio: 1;
  min-width: 0;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.avatar-picker-item:hover {
  transform: translateY(-2px);
  border-color: rgba(244,190,0,.5);
}
.avatar-picker-item.selected {
  border-color: #f0c94c;
  box-shadow: 0 0 0 3px rgba(240,201,76,.22);
}
.avatar-picker-item:focus-visible,
.avatar-picker-tab:focus-visible,
.binder-avatar-btn:focus-visible {
  outline: 3px solid rgba(255,225,122,.8);
  outline-offset: 2px;
}
.avatar-picker-footer {
  position: sticky;
  bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 0 2px;
  background: linear-gradient(180deg, rgba(8,15,24,0), rgba(8,15,24,.98) 24%);
}
.avatar-picker-selection {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.avatar-picker-selection-label {
  color: rgba(235,242,251,.56);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.avatar-picker-current-text {
  margin-top: 3px;
  color: #fff;
  font-size: .9rem;
  font-weight: 850;
}
@media (max-width: 820px) {
  .avatar-picker-grid { grid-template-columns: repeat(6, minmax(54px, 1fr)); }
}
@media (max-width: 640px) {
  .binder-create-row { grid-template-columns: 1fr; }
  .binder-avatar-btn { width: 100%; justify-content: flex-start; }
  .avatar-picker-overlay { padding: 8px; }
  .avatar-picker-shell { width: 100%; max-height: 95vh; border-radius: 22px; padding: 16px; }
  .avatar-picker-grid { grid-template-columns: repeat(5, minmax(48px, 1fr)); gap: 6px; }
  .avatar-picker-footer { align-items: stretch; flex-direction: column; }
  .avatar-picker-footer .primary-btn { width: 100%; }
}
@media (max-width: 390px) {
  .avatar-picker-grid { grid-template-columns: repeat(4, minmax(46px, 1fr)); }
}

/* Correctif avatars : images natives, sans dépendance aux arrière-plans CSS. */
img.avatar-chip {
  display: block;
  object-fit: cover;
  object-position: center;
  max-width: none;
  background: rgba(255,255,255,.06);
}
.avatar-picker-item > img.avatar-chip-pick {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
.home-binder-btn > img.avatar-chip-inline {
  display: block;
  flex: 0 0 auto;
}

/* Accueil personnel d'un classeur existant */
.profile-home-overlay {
  z-index: 34;
  padding: clamp(12px, 2vw, 24px);
  background:
    radial-gradient(circle at 18% 12%, rgba(46,74,107,.96), rgba(8,15,24,.985) 48%, rgba(4,8,13,.995)),
    #07101a;
}
.profile-home-shell {
  width: min(1180px, 96vw);
  max-height: min(92vh, 900px);
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(19,31,47,.985), rgba(8,15,24,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.5);
}
.profile-home-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 32px);
  border-right: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(244,190,0,.07), rgba(255,255,255,.02));
}
.profile-home-avatar {
  width: clamp(112px, 12vw, 160px);
  height: clamp(112px, 12vw, 160px);
  object-fit: cover;
  border-radius: 28px;
  border: 3px solid rgba(244,190,0,.7);
  box-shadow: 0 16px 44px rgba(0,0,0,.32), 0 0 0 6px rgba(244,190,0,.08);
  background: rgba(255,255,255,.06);
}
.profile-home-identity { width: 100%; text-align: center; }
.profile-home-name { margin: 5px 0 8px; font-size: clamp(1.55rem, 2.8vw, 2.3rem); }
.profile-home-summary { margin: 0; color: rgba(235,242,251,.7); line-height: 1.5; font-size: .88rem; }
.profile-home-sidebar-actions { width: 100%; margin-top: auto; display: grid; gap: 8px; }
.profile-home-sidebar-actions .ghost-btn { width: 100%; justify-content: center; }
.profile-home-main {
  min-width: 0;
  overflow: auto;
  padding: clamp(20px, 2.8vw, 34px) clamp(20px, 3vw, 38px) clamp(24px, 3vw, 38px) 0;
}
.profile-home-topbar { display: grid; gap: 16px; margin-bottom: 18px; }
.profile-home-title { margin: 4px 0 6px; font-size: clamp(1.55rem, 3vw, 2.45rem); }
.profile-home-copy { margin: 0; color: rgba(235,242,251,.7); line-height: 1.5; max-width: 68ch; }
.profile-home-level-toggle { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-home-level-toggle button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(242,246,252,.74);
  padding: 7px 12px;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
}
.profile-home-level-toggle button.selected {
  color: #fff7cf;
  border-color: rgba(244,190,0,.68);
  background: rgba(244,190,0,.13);
  box-shadow: inset 0 0 0 1px rgba(244,190,0,.09);
}
.profile-home-incomplete-list { display: grid; gap: 10px; min-height: 132px; }
.profile-home-empty {
  min-height: 132px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 20px;
  color: rgba(235,242,251,.64);
  text-align: center;
  background: rgba(255,255,255,.025);
}
.profile-home-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
.profile-home-progress-main { min-width: 0; }
.profile-home-progress-title { font-weight: 900; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-home-progress-meta { margin-top: 4px; color: rgba(235,242,251,.62); font-size: .75rem; }
.profile-home-progress-track { height: 7px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.09); }
.profile-home-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e3a82b, #ffe28a); }
.profile-home-progress-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.profile-home-progress-actions button {
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .74rem;
  white-space: nowrap;
}
.profile-home-new-game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  padding: 20px;
  border: 1px solid rgba(244,190,0,.25);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(244,190,0,.085), rgba(255,255,255,.035));
}
.profile-home-new-game h3 { margin: 4px 0 5px; font-size: 1.25rem; }
.profile-home-new-game p { margin: 0; color: rgba(235,242,251,.66); line-height: 1.45; }
.profile-home-new-actions { display: grid; gap: 9px; min-width: 220px; }
.profile-home-action-btn { width: 100%; justify-content: center; }
.profile-found-review-overlay { z-index: 66; }
.profile-found-review-card { width: min(880px, 92vw); max-height: 88vh; overflow: auto; }
.profile-found-review-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.profile-found-review-topbar h2 { margin: 4px 0 5px; }
.profile-found-review-list { max-height: min(55vh, 520px); overflow: auto; }
.profile-found-review-actions { margin-top: 16px; justify-content: flex-end; }
@media (max-width: 820px) {
  .profile-home-shell { grid-template-columns: 1fr; max-height: 94vh; overflow: auto; }
  .profile-home-sidebar { display: grid; grid-template-columns: auto 1fr; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .profile-home-avatar { width: 92px; height: 92px; border-radius: 22px; }
  .profile-home-identity { text-align: left; }
  .profile-home-sidebar-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin-top: 0; }
  .profile-home-sidebar-actions .ghost-btn { width: auto; flex: 1 1 150px; }
  .profile-home-main { overflow: visible; padding: 18px; }
  .profile-home-new-game { grid-template-columns: 1fr; }
  .profile-home-new-actions { min-width: 0; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .profile-home-overlay { padding: 7px; }
  .profile-home-shell { border-radius: 22px; }
  .profile-home-sidebar { padding: 15px; gap: 12px; }
  .profile-home-avatar { width: 76px; height: 76px; border-radius: 18px; }
  .profile-home-progress-card { grid-template-columns: 1fr; }
  .profile-home-progress-actions { justify-content: stretch; }
  .profile-home-progress-actions button { flex: 1; }
  .profile-home-new-actions { grid-template-columns: 1fr; }
  .profile-found-review-topbar { flex-direction: column; }
}

/* Défis : accès depuis le classeur personnel uniquement */
.profile-home-challenge-btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  border-color: rgba(244,190,0,.48);
}
.challenge-receive-shell { width: min(760px, 94vw); }
#challengeCodeInput {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 12px 14px;
  font: 600 .8rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  outline: none;
}
#challengeCodeInput:focus {
  border-color: rgba(244,190,0,.7);
  box-shadow: 0 0 0 3px rgba(244,190,0,.11);
}
@media (max-width: 760px) {
  .profile-home-challenge-btn { width: auto; flex: 1 1 100%; }
}

/* Les fenêtres ouvertes depuis l'accueil personnel doivent rester au-dessus de celui-ci. */
#challengeScreen,
#challengeReceiveScreen,
#optionsScreen,
#learnReviewScreen,
#diplomaScreen {
  z-index: 72;
}

/* --- Classement scolaire canonique des questionnaires --- */
.specialized-grid.specialized-grid-selects {
  grid-template-columns: minmax(0, 1fr) !important;
}
.specialized-big-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  margin: 2px 0 4px;
}
.specialized-big-select-wrap {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.specialized-big-select-label {
  color: rgba(241,246,255,.82);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.specialized-big-select {
  width: 100%;
  min-height: 58px;
  padding: 0 48px 0 17px;
  border-radius: 18px;
  border: 1px solid rgba(244,190,0,.52);
  background: linear-gradient(180deg, rgba(27,42,73,.98), rgba(10,20,39,.98));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.16);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 850;
  cursor: pointer;
  outline: none;
}
.specialized-big-select:hover,
.specialized-big-select:focus {
  border-color: rgba(255,213,69,.9);
  box-shadow: 0 0 0 3px rgba(244,190,0,.12), 0 10px 24px rgba(0,0,0,.2);
}
.specialized-big-select option {
  background: #111d31;
  color: #fff;
}
@media (max-width: 760px) {
  .specialized-big-selects { grid-template-columns: 1fr; }
  .specialized-big-select { min-height: 54px; font-size: 1rem; }
}

/* Compteurs de bibliothèque : toujours montrer l'ampleur du catalogue et le résultat des filtres. */
.specialized-catalog-count,
.profile-home-catalog-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(244,190,0,.26);
  border-radius: 999px;
  background: rgba(244,190,0,.08);
  color: rgba(245,248,255,.88);
  font-size: .9rem;
  line-height: 1.3;
}
.specialized-catalog-count strong,
.profile-home-catalog-count strong {
  color: #ffe38a;
  font-size: 1.06em;
}
.profile-home-catalog-count {
  margin-top: 12px;
}
@media (max-width: 640px) {
  .specialized-catalog-count,
  .profile-home-catalog-count {
    border-radius: 16px;
    font-size: .82rem;
  }
}

/* --- Mode Quiz des classeurs personnels --- */
.profile-home-quiz-btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: .95rem;
  box-shadow: 0 10px 26px rgba(244,190,0,.12);
}
.quiz-overlay {
  z-index: 76;
  padding: clamp(10px, 2vw, 24px);
  background:
    radial-gradient(circle at 18% 10%, rgba(48,76,111,.97), rgba(8,15,24,.99) 48%, rgba(4,8,13,.995)),
    #07101a;
}
.quiz-shell {
  width: min(1000px, 96vw);
  max-height: min(94vh, 920px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  padding: clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(19,31,47,.99), rgba(8,15,24,.995));
  box-shadow: 0 30px 96px rgba(0,0,0,.52);
}
.quiz-topbar,
.quiz-play-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.quiz-title { margin: 5px 0 6px; font-size: clamp(1.7rem, 3vw, 2.55rem); }
.quiz-subtitle { margin: 0; max-width: 68ch; color: rgba(235,242,251,.7); line-height: 1.5; }
.quiz-incomplete-panel {
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(244,190,0,.34);
  background: linear-gradient(135deg, rgba(244,190,0,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.quiz-incomplete-panel.empty { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.quiz-incomplete-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.quiz-incomplete-title { margin: 3px 0 0; color: #fff; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.quiz-incomplete-count {
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(244,190,0,.52);
  background: rgba(244,190,0,.13);
  color: #ffe078;
  font-weight: 950;
}
.quiz-incomplete-help { margin: 8px 0 14px; color: rgba(235,242,251,.66); font-size: .82rem; line-height: 1.45; }
.quiz-incomplete-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: end;
}
.quiz-start-incomplete-btn { min-height: 60px; min-width: 190px; justify-content: center; }
.quiz-incomplete-meta { min-height: 1.25em; margin: 10px 2px 0; color: rgba(255,236,164,.78); font-size: .8rem; }
.quiz-incomplete-panel.empty .quiz-incomplete-meta { color: rgba(235,242,251,.54); }
.quiz-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.quiz-select-wrap {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: rgba(242,246,252,.82);
  font-size: .88rem;
  font-weight: 900;
}
.quiz-questionnaire-wrap { margin-top: 14px; }
.quiz-big-select {
  width: 100%;
  min-height: 60px;
  padding: 0 48px 0 17px;
  border-radius: 18px;
  border: 1px solid rgba(244,190,0,.54);
  background: linear-gradient(180deg, rgba(27,42,73,.98), rgba(10,20,39,.98));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.16);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 850;
  cursor: pointer;
  outline: none;
}
.quiz-big-select:focus,
.quiz-big-select:hover { border-color: rgba(255,216,76,.94); box-shadow: 0 0 0 3px rgba(244,190,0,.11); }
.quiz-setup-count {
  margin: 12px 2px 0;
  min-height: 1.4em;
  color: rgba(235,242,251,.68);
  font-size: .86rem;
}
.quiz-setup-count strong { color: #ffe078; }
.quiz-length-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
}
.quiz-length-label { margin-right: 4px; color: rgba(235,242,251,.76); font-weight: 900; }
.quiz-length-row button {
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(242,246,252,.78);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}
.quiz-length-row button.selected {
  color: #fff8d2;
  border-color: rgba(244,190,0,.72);
  background: rgba(244,190,0,.14);
}
.quiz-setup-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.quiz-setup-actions button { min-height: 50px; justify-content: center; }
.quiz-setup-feedback { min-height: 1.3em; margin: 10px 2px 0; color: #ffe49b; }

.quiz-play-shell { width: min(1080px, 96vw); overflow: auto; }
.quiz-play-header {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.quiz-player-badge { display: flex; align-items: center; gap: 11px; min-width: 190px; }
.quiz-player-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: cover;
  border-radius: 15px;
  border: 2px solid rgba(244,190,0,.6);
  background: rgba(255,255,255,.05);
}
.quiz-player-name { color: #fff; font-weight: 950; }
.quiz-play-source { margin-top: 2px; color: rgba(235,242,251,.58); font-size: .74rem; }
.quiz-play-progress-wrap { width: min(360px, 42vw); }
.quiz-play-progress-text { margin-bottom: 6px; text-align: center; color: rgba(235,242,251,.72); font-size: .8rem; font-weight: 850; }
.quiz-play-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.09); }
.quiz-play-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e3a82b, #ffe38d); transition: width .22s ease; }
.quiz-question-view {
  width: min(880px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 50px) 0 4px;
  text-align: center;
}
.quiz-question-meta { margin-bottom: 10px; }
.quiz-question-text {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(1.45rem, 3.5vw, 2.65rem);
  line-height: 1.18;
  text-wrap: balance;
}
.quiz-answer-pattern {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(30px, 5vw, 58px); /* l'espace de la réponse est réellement donné */
  row-gap: 18px;
  margin: clamp(28px, 4vh, 42px) auto 10px;
  max-width: 100%;
}
.quiz-pattern-word {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(5px, .8vw, 9px);
  white-space: nowrap;
}
.quiz-pattern-slot {
  display: inline-grid;
  place-items: center;
  width: clamp(10px, 1.35vw, 15px);
  height: clamp(10px, 1.35vw, 15px);
  color: rgba(255,239,181,.88);
  font-size: clamp(.56rem, 1vw, .82rem);
  line-height: 1;
  text-shadow: 0 0 12px rgba(244,190,0,.24);
}
.quiz-answer-shape-meta { margin: 0; color: rgba(235,242,251,.62); font-size: .84rem; font-weight: 750; }
.quiz-answer-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(28px, 4.5vw, 52px); /* même séparation que le gabarit : espaces fournis */
  row-gap: 12px;
  margin: 24px auto 12px;
}
.quiz-answer-word-input {
  width: min(100%, max(92px, calc(var(--quiz-word-chars, 8) * 1.38ch + 34px)));
  min-height: 58px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  color: #fff;
  padding: 10px 15px;
  outline: none;
  text-align: center;
  text-transform: uppercase;
  font: 900 clamp(1.05rem, 2.3vw, 1.55rem)/1.15 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.quiz-answer-word-input:focus { border-color: rgba(244,190,0,.82); box-shadow: 0 0 0 4px rgba(244,190,0,.11); }
.quiz-answer-word-input:disabled { opacity: .9; color: #fff; }
.quiz-answer-tools { display: grid; justify-items: center; gap: 9px; margin-top: 8px; }
.quiz-symbols-toggle { min-height: 34px; padding: 6px 12px; font-size: .75rem; }
.quiz-symbol-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 590px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.quiz-symbol-palette button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.quiz-symbol-palette button:hover { border-color: rgba(244,190,0,.65); background: rgba(244,190,0,.1); }
.quiz-feedback {
  min-height: 52px;
  display: grid;
  place-items: center;
  margin: 14px auto 0;
  padding: 10px 14px;
  border-radius: 14px;
  color: rgba(235,242,251,.78);
  font-weight: 800;
}
.quiz-feedback-correct { color: #caffcf; background: rgba(53,179,88,.12); border: 1px solid rgba(83,216,117,.26); }
.quiz-feedback-wrong { color: #ffd2cc; background: rgba(206,72,58,.12); border: 1px solid rgba(255,113,96,.24); }
.quiz-feedback-warning { color: #ffe8a7; background: rgba(244,190,0,.08); }
.quiz-question-actions { display: flex; justify-content: center; margin-top: 10px; }
.quiz-submit-btn { min-width: 220px; min-height: 52px; justify-content: center; font-size: 1rem; }
.quiz-summary-view { width: min(760px, 100%); margin: 0 auto; padding: clamp(38px, 7vh, 74px) 0; text-align: center; }
.quiz-summary-view h2 { margin: 5px 0 14px; font-size: clamp(1.8rem, 4vw, 3rem); }
.quiz-summary-score strong { display: inline-block; font-size: clamp(2.6rem, 8vw, 5rem); color: #ffe078; line-height: 1; }
.quiz-summary-text { margin: 18px auto 0; max-width: 60ch; color: rgba(235,242,251,.7); line-height: 1.55; }
.quiz-summary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.quiz-summary-actions button { min-height: 46px; }

@media (max-width: 760px) {
  .profile-home-quiz-btn { width: auto; flex: 1 1 100%; }
  .quiz-shell { border-radius: 22px; padding: 17px; }
  .quiz-topbar { flex-direction: column; }
  .quiz-setup-grid { grid-template-columns: 1fr; }
  .quiz-incomplete-controls { grid-template-columns: 1fr; }
  .quiz-start-incomplete-btn { width: 100%; min-width: 0; }
  .quiz-setup-actions { grid-template-columns: 1fr; }
  .quiz-play-header { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .quiz-play-progress-wrap { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .quiz-player-badge { min-width: 0; }
  .quiz-question-view { padding-top: 28px; }
  .quiz-answer-pattern { column-gap: 34px; }
  .quiz-answer-groups { column-gap: 30px; }
}
@media (max-width: 460px) {
  .quiz-player-avatar { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
  .quiz-answer-pattern { column-gap: 28px; }
  .quiz-pattern-word { gap: 4px; }
  .quiz-pattern-slot { width: 9px; height: 9px; font-size: .52rem; }
  .quiz-answer-word-input { min-height: 52px; padding: 8px 10px; }
  .quiz-summary-actions { display: grid; grid-template-columns: 1fr; }
}

/* Accès au Mode Classe */
.home-class-mode-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border-color: rgba(118,183,255,.38); }
.home-class-mode-btn:hover { text-decoration: none; }
.profile-home-class-mode-link { text-decoration:none; display:flex; align-items:center; justify-content:center; }