/* ── Variables ────────────────────────────────────────────────── */
:root {
  --blue:       #1a6bbf;
  --blue-dark:  #0f4e8f;
  --blue-light: #e8f1fb;
  --orange:     #e8820c;
  --bg:         #f3f6fb;
  --text:       #1a1a2e;
  --text-muted: #666;
  --card-shadow: 0 2px 12px rgba(26,107,191,.1);
  --radius:     10px;
}

/* ── Reset / base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
main { flex: 1; max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; width: 100%; }
h1, h2, h3 { line-height: 1.2; }

/* ── Header ───────────────────────────────────────────────────── */
header { background: var(--blue-dark); color: #fff; }
.header-inner { max-width: 1000px; margin: 0 auto; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-size: 1.15rem; font-weight: 400; flex-shrink: 0; }
.brand:hover { text-decoration: none; opacity: .9; }
.brand strong { font-weight: 800; }
.brand-sub { font-weight: 300; font-size: .9em; opacity: .8; }
.brand-logo { border-radius: 6px; }
.main-nav { display: flex; align-items: center; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.main-nav a { color: rgba(255,255,255,.85); font-size: .88rem; padding: .4rem .8rem; border-radius: 5px; transition: background .15s; }
.main-nav a:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.btn-nav { background: var(--blue); color: #fff !important; border-radius: 5px; padding: .4rem .9rem !important; }
.btn-nav-outline { border: 1px solid rgba(255,255,255,.5); border-radius: 5px; padding: .35rem .8rem !important; }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; margin-left: auto; }

/* ── Footer ───────────────────────────────────────────────────── */
footer { background: var(--blue-dark); color: rgba(255,255,255,.7); padding: 1rem 1.5rem; font-size: .85rem; }
.footer-inner { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-links { display: flex; gap: .4rem 1rem; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.75); }
.footer-links a:hover { color: #fff; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn { display: inline-block; padding: .6rem 1.4rem; border-radius: 6px; font-size: .95rem; font-weight: 600; cursor: pointer; border: none; transition: all .15s; text-decoration: none !important; }
.btn-primary  { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-outline  { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn-outline:hover { background: var(--blue-light); }
.btn-success  { background: #1e8a3e; color: #fff; }
.btn-success:hover { background: #166b30; }
.btn-lg { padding: .8rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: .35rem .8rem; font-size: .84rem; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.badge.public  { background: #d4f0dc; color: #1a6b35; }
.badge.members { background: #fde8cc; color: #a35800; }
.lock-badge    { font-size: .8rem; color: #a35800; }

.level-badge        { display: inline-block; padding: .15rem .55rem; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.level-badge-1 { background: #d4f0dc; color: #1a6b35; }
.level-badge-2 { background: #d0edf5; color: #0d6779; }
.level-badge-3 { background: #fff3d4; color: #8a5c00; }
.level-badge-4 { background: #ffe0d0; color: #8a2800; }
.level-badge-5 { background: #ead4f5; color: #5e0a8a; }

/* ── Flash messages ───────────────────────────────────────────── */
.flash { padding: .8rem 1.2rem; border-radius: 6px; margin-bottom: 1rem; }
.flash-error   { background: #fde8e8; color: #8a0000; border-left: 4px solid #c0392b; }
.flash-success { background: #d4f0dc; color: #1a6b35; border-left: 4px solid #27ae60; }

/* ── Section titles ───────────────────────────────────────────── */
.section-title { font-size: 1.1rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.section-title::after { content: ''; flex: 1; height: 2px; background: var(--blue-light); }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%); color: #fff; border-radius: var(--radius); padding: 3rem 2rem; text-align: center; margin-bottom: 2.5rem; }
.hero h1 { font-size: 2.2rem; font-weight: 800; }
.hero-sub { font-weight: 300; opacity: .8; }
.hero-desc { margin: 1rem auto; max-width: 560px; opacity: .88; line-height: 1.6; font-size: 1.05rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ── Levels grid ──────────────────────────────────────────────── */
.levels-section { margin-bottom: 2.5rem; }
.levels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.level-card { background: #fff; border-radius: var(--radius); padding: 1.2rem 1rem; text-align: center; box-shadow: var(--card-shadow); }
.level-card p { font-size: .82rem; color: var(--text-muted); margin: .3rem 0 .5rem; }
.level-icon { font-size: 1.8rem; display: block; margin-bottom: .4rem; }

/* ── Quiz grid / cards ────────────────────────────────────────── */
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.quiz-card { display: flex; gap: 1rem; background: #fff; border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--card-shadow); color: var(--text); transition: transform .15s, box-shadow .15s; text-decoration: none !important; border: 2px solid transparent; }
.quiz-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,107,191,.15); border-color: var(--blue-light); }
.quiz-card--members { border-left: 3px solid var(--orange); }
.quiz-icon { font-size: 2rem; flex-shrink: 0; align-self: flex-start; }
.quiz-card-body h3 { font-size: 1rem; margin-bottom: .3rem; }
.quiz-card-body p  { font-size: .84rem; color: var(--text-muted); line-height: 1.4; margin-bottom: .5rem; }
.quiz-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.quiz-duration, .quiz-count { font-size: .78rem; color: var(--text-muted); }

/* ── Members CTA ──────────────────────────────────────────────── */
.members-cta { display: flex; align-items: center; gap: 1.5rem; background: #fff8f0; border: 2px solid #f5d0a0; border-radius: var(--radius); padding: 1.4rem 1.8rem; margin-top: 2rem; flex-wrap: wrap; }
.cta-icon { font-size: 2rem; flex-shrink: 0; }
.members-cta strong { display: block; margin-bottom: .2rem; }
.members-cta p { font-size: .9rem; color: var(--text-muted); margin: 0; }
.members-cta .btn { margin-left: auto; }

/* ── Level sections in list ───────────────────────────────────── */
.level-section { margin-bottom: 2.5rem; }
.level-heading { font-size: 1.2rem; font-weight: 700; padding-bottom: .6rem; border-bottom: 2px solid var(--blue-light); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .7rem; }
.level-heading-4, .level-heading-5 { border-bottom-color: #f5d0a0; }

/* ── Quiz intro ───────────────────────────────────────────────── */
.quiz-intro-wrap { display: flex; justify-content: center; padding: 2rem 0; }
.quiz-intro-card { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2.5rem 2rem; max-width: 560px; width: 100%; text-align: center; }
.quiz-intro-icon { font-size: 3.5rem; display: block; margin-bottom: .8rem; }
.quiz-intro-card h1 { font-size: 1.6rem; margin-bottom: .6rem; }
.quiz-intro-desc { color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; }
.quiz-intro-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; background: var(--bg); border-radius: 8px; padding: 1.2rem; margin-bottom: 1.8rem; text-align: left; }
.meta-item { display: flex; flex-direction: column; gap: .2rem; }
.meta-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.intro-lock-notice { background: #fff8f0; border: 1px solid #f5d0a0; border-radius: 8px; padding: 1.2rem; margin-bottom: 1.5rem; }
.intro-lock-notice p { color: var(--text-muted); margin-bottom: 1rem; }
.intro-note { font-size: .85rem; color: var(--text-muted); margin-top: .8rem; }

/* ── Quiz play ────────────────────────────────────────────────── */
.quiz-play-wrap { max-width: 680px; margin: 0 auto; }
.quiz-play-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.quiz-play-title { font-weight: 700; font-size: 1.05rem; flex: 1; }
.progress-bar-wrap { flex: 1; height: 8px; background: var(--blue-light); border-radius: 4px; overflow: hidden; min-width: 100px; }
.progress-bar { height: 100%; background: var(--blue); transition: width .3s; border-radius: 4px; }
.progress-text { font-size: .85rem; color: var(--text-muted); white-space: nowrap; }

.question-block { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2rem 1.8rem; }
.question-num { font-size: .82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.question-text { font-size: 1.2rem; line-height: 1.5; margin-bottom: 1.5rem; }
.choices { display: flex; flex-direction: column; gap: .7rem; }
.choice-label { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border: 2px solid var(--blue-light); border-radius: 8px; cursor: pointer; transition: all .15s; }
.choice-label:hover { border-color: var(--blue); background: var(--blue-light); }
.choice-label.selected { border-color: var(--blue); background: var(--blue-light); }
.choice-label input[type=radio] { position: absolute; opacity: 0; width: 0; }
.choice-letter { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-light); color: var(--blue); font-weight: 700; font-size: .85rem; flex-shrink: 0; transition: all .15s; }
.choice-label.selected .choice-letter { background: var(--blue); color: #fff; }
.choice-text { font-size: .95rem; }

.quiz-nav { display: flex; gap: 1rem; justify-content: space-between; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── Quiz result ──────────────────────────────────────────────── */
.result-wrap { display: flex; justify-content: center; }
.result-card { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2.5rem 2rem; max-width: 680px; width: 100%; }
.result-icon { font-size: 3.5rem; display: block; text-align: center; margin-bottom: .8rem; }
.result-card h1 { text-align: center; font-size: 1.5rem; margin-bottom: 1.2rem; }
.score-display { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin-bottom: .8rem; }
.score-num   { font-size: 4rem; font-weight: 800; color: var(--blue); line-height: 1; }
.score-sep   { font-size: 2rem; color: var(--text-muted); }
.score-total { font-size: 2rem; color: var(--text-muted); }
.score-bar-wrap { height: 12px; background: var(--blue-light); border-radius: 6px; overflow: hidden; margin-bottom: .8rem; }
.score-bar { height: 100%; border-radius: 6px; transition: width .5s ease; }
.score-bar-great { background: #27ae60; }
.score-bar-good  { background: var(--blue); }
.score-bar-ok    { background: var(--orange); }
.score-bar-low   { background: #e74c3c; }
.score-comment { text-align: center; font-size: 1.05rem; margin-bottom: .6rem; font-weight: 600; }
.result-saved { text-align: center; font-size: .9rem; color: var(--text-muted); margin-bottom: 1.8rem; }

.detail-title { font-size: 1.05rem; margin-bottom: 1rem; padding-top: 1rem; border-top: 2px solid var(--blue-light); }
.answer-review { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.8rem; }
.answer-item { padding: .9rem 1.1rem; border-radius: 8px; border-left: 4px solid; }
.answer-correct { background: #f0fdf4; border-color: #27ae60; }
.answer-wrong   { background: #fff5f5; border-color: #e74c3c; }
.answer-q { font-weight: 600; margin-bottom: .3rem; font-size: .93rem; }
.answer-given { font-size: .9rem; }
.answer-correct-text { font-size: .88rem; color: #1a6b35; margin-top: .2rem; }
.tag-correct { background: #d4f0dc; color: #1a6b35; padding: .1rem .5rem; border-radius: 4px; font-size: .8rem; font-weight: 700; margin-left: .4rem; }
.tag-wrong   { background: #fde8e8; color: #8a0000; padding: .1rem .5rem; border-radius: 4px; font-size: .8rem; font-weight: 700; margin-left: .4rem; }
.result-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Profile ──────────────────────────────────────────────────── */
.page-header { margin-bottom: 2rem; }
.page-header h1 { font-size: 1.8rem; }
.text-muted { color: var(--text-muted); }
.profil-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.stat-card { background: #fff; border-radius: var(--radius); padding: 1.4rem 1rem; text-align: center; box-shadow: var(--card-shadow); }
.stat-num   { display: block; font-size: 2.2rem; font-weight: 800; color: var(--blue); }
.stat-label { font-size: .85rem; color: var(--text-muted); }
.scores-grid { display: flex; flex-direction: column; gap: .8rem; }
.score-item { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--card-shadow); }
.score-item-icon { font-size: 1.8rem; flex-shrink: 0; }
.score-item-body { flex: 1; }
.score-item-body strong { display: block; margin-bottom: .2rem; }
.mini-score-bar-wrap { height: 6px; background: var(--blue-light); border-radius: 3px; overflow: hidden; margin: .3rem 0; }
.mini-score-bar { height: 100%; border-radius: 3px; }
.mini-score-bar.great { background: #27ae60; }
.mini-score-bar.good  { background: var(--blue); }
.mini-score-bar.ok    { background: var(--orange); }
.mini-score-text { font-size: .82rem; color: var(--text-muted); }
.history-table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.history-table th { background: var(--blue); color: #fff; padding: .7rem 1rem; text-align: left; font-size: .9rem; }
.history-table td { padding: .6rem 1rem; border-bottom: 1px solid var(--blue-light); font-size: .9rem; }
.history-table tr:last-child td { border-bottom: none; }
.score-great { color: #1a6b35; font-weight: 700; }
.score-good  { color: var(--blue); font-weight: 700; }
.score-ok    { color: #a35800; font-weight: 700; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero h1 { font-size: 1.6rem; }
  .hero-actions { flex-direction: column; }
  .levels-grid { grid-template-columns: repeat(2, 1fr); }
  .quiz-grid { grid-template-columns: 1fr; }
  .profil-stats { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .main-nav { display: none; flex-direction: column; width: 100%; background: var(--blue-dark); padding: .5rem 1.5rem 1rem; }
  header.nav-open .main-nav { display: flex; }
  .main-nav a { padding: .6rem .8rem; }
  .members-cta .btn { margin-left: 0; width: 100%; text-align: center; }
}

/* ══ Jeux ════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
:root {
  --term-bg:   #141821;
  --term-text: #d8dee9;
  --term-user: #8fd16a;
  --term-dir:  #6cb6ff;
  --term-exec: #8fd16a;
  --term-red:  #ff7b72;
  --term-muted:#8b95a7;
  --term-purple:#d2a8ff;
  --mono: ui-monospace, 'DejaVu Sans Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}
code { font-family: var(--mono); font-size: .88em; background: var(--blue-light); color: var(--blue-dark); padding: .05rem .35rem; border-radius: 4px; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--blue-light); }
.flash-in { animation: flash-in .45s ease; }
@keyframes flash-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Accueil */
.hero--game { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; text-align: left; }
.hero--game .hero-desc { margin-left: 0; }
.hero--game .hero-actions { justify-content: flex-start; }
.hero-accent { color: #ffd28a; }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.hero .btn-outline:hover { background: rgba(255,255,255,.12); }
.hero .btn-primary { background: #fff; color: var(--blue-dark); }
.hero .btn-primary:hover { background: var(--blue-light); }
.hero-term { background: var(--term-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.3); min-width: 0; }
.hero-term pre { margin: 0; padding: .9rem 1rem 1.1rem; font-family: var(--mono); font-size: .78rem; line-height: 1.55; color: var(--term-text); white-space: pre-wrap; word-break: break-word; }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.how-item { background: #fff; border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--card-shadow); }
.how-icon { font-size: 1.6rem; display: block; margin-bottom: .4rem; }
.how-item p { font-size: .88rem; color: var(--text-muted); line-height: 1.5; margin-top: .3rem; }
.quizzes-preview { margin-bottom: 2.5rem; }
.path-soon { font-size: .85rem; color: var(--text-muted); margin-top: 1rem; text-align: center; }
.lug { background: var(--blue-light); border-radius: var(--radius); padding: 1.2rem 1.5rem; line-height: 1.6; font-size: .93rem; }

/* Parcours */
.path { list-style: none; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.path::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--blue-light); }
.path-step { display: flex; gap: 1rem; align-items: stretch; position: relative; }
.path-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); font-weight: 800; display: flex; align-items: center; justify-content: center; align-self: center; z-index: 1; }
.path-step--done .path-num { background: #27ae60; border-color: #27ae60; color: #fff; }
.path--compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.path--compact::before { display: none; }
.game-card { flex: 1; display: flex; gap: 1rem; background: #fff; border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--card-shadow); color: var(--text); text-decoration: none !important; border: 2px solid transparent; transition: transform .15s, border-color .15s; min-width: 0; }
.game-card:hover { transform: translateY(-2px); border-color: var(--blue-light); }
.game-theme { font-size: .72rem !important; text-transform: uppercase; letter-spacing: .06em; color: var(--blue) !important; font-weight: 700; margin-bottom: .15rem !important; }
.game-best { font-size: .78rem; color: #1a6b35; font-weight: 700; }
.concepts { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.concepts code { font-size: .74rem; }

/* Page de jeu */
.game-wrap { max-width: 1000px; margin: 0 auto; }
.game-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.game-back { font-size: .88rem; white-space: nowrap; }
.score-live { font-weight: 800; color: var(--blue); white-space: nowrap; }
.game-intro { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: .9rem 1.2rem; margin-bottom: 1.2rem; }
.game-intro summary { cursor: pointer; font-weight: 700; color: var(--blue-dark); }
.game-intro p { margin-top: .6rem; line-height: 1.6; font-size: .93rem; }
.game-end { margin: 2rem auto 0; text-align: center; }
.game-end h2 { margin-bottom: 1rem; }
.round-label { font-size: .82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }

/* Terminal */
.term-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; }
.mission-panel { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.2rem; position: sticky; top: 1rem; }
.mission-num { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.mission-title { font-size: 1.15rem; margin: .2rem 0 .6rem; }
.mission-story { font-size: .9rem; line-height: 1.5; color: var(--text-muted); }
.mission-goal { font-size: .95rem; font-weight: 600; margin: .8rem 0; padding: .6rem .8rem; background: var(--blue-light); border-left: 3px solid var(--blue); border-radius: 4px; }
.mission-goal:empty { display: none; }
.mission-hint { font-family: var(--mono); font-size: .84rem; background: #fff8e6; border-left: 3px solid var(--orange); padding: .5rem .7rem; border-radius: 4px; margin-bottom: .6rem; }
.mission-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.mission-success { margin-top: .9rem; font-size: .86rem; line-height: 1.5; background: #f0fdf4; border-left: 3px solid #27ae60; padding: .6rem .8rem; border-radius: 4px; }
.mission-list { margin: 1rem 0 0 1.1rem; font-size: .82rem; color: var(--text-muted); display: flex; flex-direction: column; gap: .2rem; }
.mission-list .m-current { color: var(--blue-dark); font-weight: 700; }
.mission-list .m-ok::marker, .mission-list .m-ok { color: #1a6b35; }
.mission-list .m-hint { color: #8a5c00; }
.mission-list .m-skip { color: #b0b0b0; text-decoration: line-through; }
.term { background: var(--term-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(15,78,143,.25); display: flex; flex-direction: column; height: min(70vh, 620px); min-width: 0; cursor: text; }
.term-bar { background: #232a36; padding: .45rem .7rem; display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.term-bar span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar span:nth-child(2) { background: #febc2e; }
.term-bar span:nth-child(3) { background: #28c840; }
.term-bar em { color: var(--term-muted); font-style: normal; font-size: .78rem; margin-left: .5rem; font-family: var(--mono); }
.term-body { flex: 1; overflow-y: auto; padding: .7rem .9rem; font-family: var(--mono); font-size: .86rem; line-height: 1.45; color: var(--term-text); }
.t-line { white-space: pre-wrap; word-break: break-word; }
.term-input-line { display: flex; align-items: baseline; white-space: pre; }
#term-prompt { flex-shrink: 0; }
#term-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--term-text); font: inherit; caret-color: var(--term-user); padding: 0; }
.t-u { color: var(--term-user); font-weight: 700; }
.t-d { color: var(--term-dir); font-weight: 700; }
.t-x { color: var(--term-exec); font-weight: 700; }
.t-r { color: var(--term-red); }
.t-g { color: var(--term-user); }
.t-m { color: var(--term-muted); font-style: italic; }
.t-p { color: var(--term-purple); }
.term-tips { font-size: .8rem; color: var(--text-muted); margin-top: .6rem; text-align: right; }

/* Associations */
.pairs-board, .perm-board { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.5rem; }
.pairs-howto { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; }
.pairs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.2rem; }
.pairs-col-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .5rem; }
.pairs-col { display: flex; flex-direction: column; gap: .5rem; }
.pair-item { text-align: left; font: inherit; font-size: .92rem; padding: .7rem .9rem; border: 2px solid var(--blue-light); background: #fff; border-radius: 8px; cursor: pointer; color: var(--text); transition: border-color .15s, background .15s, opacity .3s; }
.pair-left { font-family: var(--mono); font-weight: 700; color: var(--blue-dark); }
.pair-item:hover { border-color: var(--blue); }
.pair-item.selected { border-color: var(--blue); background: var(--blue-light); }
.pair-item.matched { border-color: #9fdcb4; background: #f0fdf4; color: #1a6b35; cursor: default; opacity: .75; }
.pair-item.wrong { border-color: #e74c3c; background: #fff5f5; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pairs-explain { margin-top: 1.2rem; font-size: .92rem; line-height: 1.55; min-height: 1.5em; padding: 0; }
.pairs-explain.ok { background: #f0fdf4; border-left: 3px solid #27ae60; padding: .7rem .9rem; border-radius: 4px; }
.pairs-explain.ko { background: #fff5f5; border-left: 3px solid #e74c3c; padding: .7rem .9rem; border-radius: 4px; }
.pairs-next { text-align: center; margin-top: 1rem; }

/* Permissions */
.perm-board { max-width: 640px; margin: 0 auto; text-align: center; }
.perm-context { color: var(--text-muted); font-size: .95rem; line-height: 1.5; }
.perm-question { font-size: 1.2rem; margin: .8rem 0 1rem; }
.perm-question code { font-size: 1.05em; }
.perm-legend { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.perm-legend b { font-family: var(--mono); color: var(--blue-dark); }
.perm-grid { display: inline-flex; flex-direction: column; gap: .5rem; }
.perm-row { display: grid; grid-template-columns: 9.5rem repeat(3, 3rem) 2.5rem; gap: .4rem; align-items: center; }
.perm-who { text-align: right; font-size: .85rem; color: var(--text-muted); padding-right: .4rem; }
.perm-bit { height: 3rem; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 1.3rem; font-weight: 700; border-radius: 8px; border: 2px solid var(--blue-light); background: #fff; color: #b8c4d4; }
button.perm-bit { cursor: pointer; }
button.perm-bit:hover { border-color: var(--blue); }
.perm-bit.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.perm-sum { font-family: var(--mono); font-weight: 700; color: var(--blue-dark); text-align: left; }
.perm-live { font-family: var(--mono); font-size: 1.1rem; margin-top: .8rem; color: var(--blue-dark); }
.perm-octal-wrap { margin-top: 1.2rem; display: flex; justify-content: center; align-items: center; gap: .6rem; font-family: var(--mono); font-size: 1.3rem; }
#perm-octal { width: 5.5rem; font: inherit; font-weight: 700; text-align: center; padding: .4rem; border: 2px solid var(--blue); border-radius: 8px; letter-spacing: .15em; }
.perm-actions { margin-top: 1.2rem; }
.perm-feedback { margin-top: 1rem; font-size: .92rem; line-height: 1.5; min-height: 1.5em; }
.perm-feedback.ok { color: #1a6b35; }
.perm-feedback.ko { color: #a3261b; }

@media (max-width: 800px) {
  .hero--game { grid-template-columns: 1fr; }
  .term-layout { grid-template-columns: 1fr; }
  .mission-panel { position: static; }
  .mission-list { display: none; }
  .game-header .quiz-play-title { flex-basis: 100%; order: -1; }
  .term { height: 60vh; }
}
@media (max-width: 600px) {
  .hero--game .hero-actions { flex-direction: column; }
  .pairs-cols { grid-template-columns: 1fr 1.3fr; gap: .6rem; }
  .pair-item { font-size: .82rem; padding: .55rem .6rem; }
  .perm-row { grid-template-columns: 5.5rem repeat(3, 2.6rem) 2rem; }
  .perm-who { font-size: .72rem; }
  .term-body { font-size: .78rem; }
  .term-tips { text-align: left; }
  .path::before { display: none; }
  .path-num { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flash-in, .pair-item.wrong, .caret { animation: none; }
}

/* ══ Cours ═══════════════════════════════════════════════════════ */
.step-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.game-card-link { color: inherit; }
.mission-cours { display: inline-block; margin-top: .7rem; font-size: .86rem; font-weight: 600; }

.cours-head { margin-bottom: 1.5rem; }
.cours-head h1 { font-size: 1.9rem; margin: .2rem 0 .4rem; }
.cours-summary { color: var(--text-muted); font-size: 1.02rem; line-height: 1.5; max-width: 60ch; }
.cours-tools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.level-switch { display: inline-flex; align-items: center; gap: .2rem; background: #fff; border-radius: 20px; padding: .2rem; box-shadow: var(--card-shadow); font-size: .85rem; }
.level-switch span { padding: 0 .4rem 0 .6rem; color: var(--text-muted); }
.level-switch button { border: none; background: none; font: inherit; padding: .3rem .8rem; border-radius: 16px; cursor: pointer; color: var(--text); }
.level-switch button.active { background: var(--blue); color: #fff; }

.cours-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; align-items: start; }
.cours-toc { position: sticky; top: 1rem; font-size: .86rem; }
.cours-toc-title { font-weight: 700; color: var(--blue-dark); margin-bottom: .5rem; }
.cours-toc ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; color: var(--text-muted); }
.cours-toc a { color: var(--text); }

.cours-article { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2rem 2.2rem; line-height: 1.7; font-size: 1rem; max-width: 760px; }
.cours-article h2 { font-size: 1.35rem; color: var(--blue-dark); margin: 2.2rem 0 .8rem; padding-top: .4rem; border-top: 2px solid var(--blue-light); scroll-margin-top: 1rem; }
.cours-article h2:first-child { margin-top: 0; border-top: none; }
.cours-article h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }
.cours-article p, .cours-article ul, .cours-article ol { margin-bottom: .9rem; }
.cours-article ul, .cours-article ol { padding-left: 1.4rem; }
.cours-article li { margin-bottom: .3rem; }
.cours-article table { width: 100%; border-collapse: collapse; margin: .4rem 0 1.2rem; font-size: .93rem; display: block; overflow-x: auto; }
.cours-article th { background: var(--blue-light); color: var(--blue-dark); text-align: left; padding: .5rem .7rem; }
.cours-article td { border-bottom: 1px solid var(--blue-light); padding: .5rem .7rem; vertical-align: top; }
.cours-article pre { background: var(--term-bg); color: var(--term-text); border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; margin-bottom: 1rem; font-size: .86rem; line-height: 1.5; }
.cours-article pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.cours-article details { background: var(--bg); border-radius: 8px; padding: .6rem .9rem; margin-bottom: .6rem; }
.cours-article summary { cursor: pointer; font-weight: 600; }
.cours-article details[open] summary { margin-bottom: .4rem; }

.try { background: var(--term-bg); border-radius: 8px; padding: .5rem .6rem; margin: .4rem 0 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.try-row { display: flex; align-items: center; gap: .6rem; padding: .2rem .4rem; border-radius: 4px; }
.try-row:hover { background: rgba(255,255,255,.05); }
.try-row code { flex: 1; background: none; color: var(--term-text); font-size: .9rem; padding: 0; white-space: pre-wrap; }
.try-row code::before { content: '$ '; color: var(--term-user); font-weight: 700; }
.try-comment { font-family: var(--mono); font-size: .82rem; color: var(--term-muted); padding: .2rem .4rem; }
.try-btn { flex-shrink: 0; font: inherit; font-size: .76rem; font-weight: 700; color: var(--term-bg); background: var(--term-user); border: none; border-radius: 4px; padding: .2rem .55rem; cursor: pointer; }
.try-btn:hover { filter: brightness(1.1); }

.admonition { border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0 1.2rem; border-left: 4px solid var(--blue); background: var(--blue-light); }
.admonition > :last-child { margin-bottom: 0; }
.admonition-title { font-weight: 700; margin-bottom: .3rem !important; }
.admonition.astuce { background: #f0fdf4; border-color: #27ae60; }
.admonition.astuce .admonition-title::before { content: '💡 '; }
.admonition.piege { background: #fff5f5; border-color: #e74c3c; }
.admonition.piege .admonition-title::before { content: '⚠️ '; }
.admonition.info .admonition-title::before { content: 'ℹ️ '; }
.admonition.terminale { background: #f6efff; border-color: #8e44ad; }
.admonition.terminale .admonition-title::before { content: '🎓 '; }
.admonition.vrai { background: #fff8e6; border-color: var(--orange); }
.admonition.vrai .admonition-title::before { content: '🐧 '; }
body.niveau-3e .admonition.terminale { display: none; }

.cheatsheet { border: 2px dashed var(--blue); border-radius: 10px; padding: 1rem 1.2rem .4rem; }
.cheatsheet table { display: table; }
.cheatsheet td:first-child { white-space: nowrap; }

.cours-next { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 2.5rem; padding: 1.2rem; border-radius: var(--radius); background: var(--blue-light); }
.cours-next div { flex: 1; min-width: 200px; }
.cours-next p { margin: .2rem 0 0; font-size: .9rem; color: var(--text-muted); line-height: 1.4; }

.sandbox-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; font: inherit; font-weight: 700; background: var(--term-bg); color: var(--term-user); border: none; border-radius: 30px; padding: .8rem 1.2rem; box-shadow: 0 6px 20px rgba(0,0,0,.3); cursor: pointer; }
.sandbox { position: fixed; right: 1rem; bottom: 1rem; z-index: 21; width: min(560px, calc(100vw - 2rem)); background: #232a36; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.4); overflow: hidden; }
.sandbox-head { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: .82rem; padding: .45rem .8rem; }
.sandbox-head button { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; }
.sandbox .term { height: min(46vh, 380px); border-radius: 0; box-shadow: none; }

@media (max-width: 800px) {
  .cours-layout { grid-template-columns: minmax(0, 1fr); }
  .cours-toc { position: static; background: #fff; border-radius: var(--radius); padding: 1rem; box-shadow: var(--card-shadow); }
  .cours-article { padding: 1.3rem 1.1rem; }
  .sandbox { right: 0; bottom: 0; width: 100vw; border-radius: 10px 10px 0 0; }
}

@media print {
  header, footer, .cours-toc, .cours-tools, .game-back, .sandbox, .sandbox-toggle, .cours-next, .try-btn { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .cours-layout { display: block; }
  .cours-article { box-shadow: none; padding: 0; max-width: none; }
  .try, .cours-article pre { background: #f3f3f3; }
  .try-row code, .cours-article pre { color: #000; }
  body.print-cheat .cours-head, body.print-cheat .cours-article > *:not(.cheatsheet) { display: none !important; }
  body.print-cheat .cheatsheet { border: none; padding: 0; }
  body.print-cheat .cheatsheet::before { content: 'Aide-mémoire — Alpinux'; display: block; font-weight: 700; font-size: 1.2rem; margin-bottom: .6rem; }
}