Spaces:

Enoder
/

Georevision

Sleeping

App Files Files Community

Enoder commited on Mar 5

Commit

6e4ecb0

verified ·

1 Parent(s): b77dc8b

Create app.py

Browse files

Files changed (1) hide show

app.py +1237 -0

app.py ADDED Viewed

	@@ -0,0 +1,1237 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>GéoRévision — Tectonique des Plaques</title>
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0a0c14;
+    --surface: #111420;
+    --surface2: #181d2e;
+    --accent: #e8440a;
+    --accent2: #3a7bd5;
+    --accent3: #22c97a;
+    --gold: #f5c842;
+    --text: #e8e6e0;
+    --muted: #6b7090;
+    --border: #252a3d;
+    --ch3: #e8440a;
+    --ch4: #3a7bd5;
+    --ch5: #22c97a;
+    --synth: #f5c842;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Space Mono', monospace;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  /* ── BACKGROUND ── */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 60% 40% at 15% 20%, rgba(232,68,10,0.08) 0%, transparent 60%),
+      radial-gradient(ellipse 50% 50% at 85% 80%, rgba(58,123,213,0.07) 0%, transparent 60%),
+      radial-gradient(ellipse 40% 40% at 50% 50%, rgba(34,201,122,0.04) 0%, transparent 60%);
+    pointer-events: none;
+    z-index: 0;
+  }
+  .wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 20px 60px; }
+  /* ── HEADER ── */
+  header {
+    padding: 40px 0 30px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 30px;
+  }
+  .header-top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
+  header h1 {
+    font-family: 'Syne', sans-serif;
+    font-weight: 800;
+    font-size: clamp(2rem, 5vw, 3.2rem);
+    letter-spacing: -2px;
+    line-height: 1;
+  }
+  header h1 span { color: var(--accent); }
+  .subtitle { font-size: 0.75rem; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; }
+  .science-tag {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 4px 10px;
+    font-size: 0.65rem;
+    color: var(--gold);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+  /* ── STATS BAR ── */
+  .stats-bar {
+    display: flex; gap: 20px; flex-wrap: wrap;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin-bottom: 24px;
+  }
+  .stat { display: flex; flex-direction: column; gap: 2px; }
+  .stat-val { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.5rem; }
+  .stat-label { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
+  .stat-val.green { color: var(--accent3); }
+  .stat-val.red { color: var(--accent); }
+  .stat-val.blue { color: var(--accent2); }
+  .stat-val.gold { color: var(--gold); }
+  /* ── NAV TABS ── */
+  .tabs {
+    display: flex; gap: 4px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 4px;
+    margin-bottom: 24px;
+    overflow-x: auto;
+  }
+  .tab {
+    flex: 1; min-width: 80px;
+    padding: 10px 14px;
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.7rem;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all .2s;
+    white-space: nowrap;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .tab.active {
+    background: var(--accent);
+    color: white;
+  }
+  .tab:hover:not(.active) { background: var(--surface2); color: var(--text); }
+  /* ── SCREENS ── */
+  .screen { display: none; }
+  .screen.active { display: block; }
+  /* ── CHAPTER FILTER ── */
+  .filter-row {
+    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
+  }
+  .filter-btn {
+    padding: 6px 14px;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.68rem;
+    cursor: pointer;
+    transition: all .2s;
+  }
+  .filter-btn.active { color: white; border-color: transparent; }
+  .filter-btn[data-ch="all"].active { background: var(--muted); }
+  .filter-btn[data-ch="3"].active { background: var(--ch3); }
+  .filter-btn[data-ch="4"].active { background: var(--ch4); }
+  .filter-btn[data-ch="5"].active { background: var(--ch5); }
+  .filter-btn[data-ch="synth"].active { background: var(--synth); color: #000; }
+  /* ── FLASHCARD ── */
+  .flashcard-zone {
+    perspective: 1200px;
+    margin-bottom: 20px;
+  }
+  .card-wrap {
+    width: 100%;
+    min-height: 260px;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform .5s cubic-bezier(.4,0,.2,1);
+    cursor: pointer;
+  }
+  .card-wrap.flipped { transform: rotateY(180deg); }
+  .card-face {
+    position: absolute; inset: 0;
+    backface-visibility: hidden;
+    border-radius: 12px;
+    padding: 36px 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 260px;
+  }
+  .card-front {
+    background: var(--surface);
+    border: 1px solid var(--border);
+  }
+  .card-back {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    transform: rotateY(180deg);
+  }
+  .card-chapter {
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 16px;
+    font-weight: 700;
+  }
+  .card-number {
+    position: absolute;
+    top: 16px; right: 20px;
+    font-size: 0.65rem;
+    color: var(--muted);
+  }
+  .card-question {
+    font-family: 'Syne', sans-serif;
+    font-size: clamp(1rem, 2.5vw, 1.3rem);
+    font-weight: 700;
+    line-height: 1.4;
+    color: var(--text);
+  }
+  .card-hint {
+    margin-top: 12px;
+    font-size: 0.7rem;
+    color: var(--muted);
+    font-style: italic;
+  }
+  .card-answer {
+    font-size: clamp(0.85rem, 2vw, 1rem);
+    line-height: 1.7;
+    color: var(--text);
+  }
+  .card-answer strong { color: var(--gold); }
+  .card-flip-hint {
+    position: absolute;
+    bottom: 16px; right: 20px;
+    font-size: 0.6rem;
+    color: var(--muted);
+    letter-spacing: 1px;
+  }
+  /* ── PROGRESS RING ── */
+  .progress-area {
+    display: flex; align-items: center; gap: 20px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin-bottom: 16px;
+  }
+  .progress-bar-outer {
+    flex: 1; height: 6px;
+    background: var(--border);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  .progress-bar-inner {
+    height: 100%;
+    border-radius: 3px;
+    background: linear-gradient(90deg, var(--accent), var(--gold));
+    transition: width .4s ease;
+  }
+  .progress-text { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
+  /* ── CARD CONTROLS ── */
+  .card-controls {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 24px;
+  }
+  .ctrl-btn {
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--text);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.72rem;
+    cursor: pointer;
+    transition: all .2s;
+    text-align: center;
+    line-height: 1.3;
+  }
+  .ctrl-btn:hover { transform: translateY(-2px); }
+  .ctrl-btn.bad { border-color: var(--accent); }
+  .ctrl-btn.bad:hover { background: var(--accent); }
+  .ctrl-btn.ok { border-color: var(--gold); }
+  .ctrl-btn.ok:hover { background: var(--gold); color: #000; }
+  .ctrl-btn.good { border-color: var(--accent3); }
+  .ctrl-btn.good:hover { background: var(--accent3); color: #000; }
+  .ctrl-btn.nav { border-color: var(--border); }
+  .ctrl-btn.nav:hover { background: var(--surface2); }
+  .ctrl-btn small { display: block; font-size: 0.58rem; color: var(--muted); margin-top: 2px; }
+  .ctrl-btn.bad small { color: rgba(232,68,10,0.7); }
+  .ctrl-btn.ok small { color: rgba(245,200,66,0.7); }
+  .ctrl-btn.good small { color: rgba(34,201,122,0.7); }
+  /* ── QUIZ SCREEN ── */
+  .quiz-q {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 28px 32px;
+    margin-bottom: 16px;
+  }
+  .quiz-meta {
+    font-size: 0.62rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--muted);
+    margin-bottom: 12px;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .quiz-question {
+    font-family: 'Syne', sans-serif;
+    font-size: clamp(1rem, 2.5vw, 1.2rem);
+    font-weight: 700;
+    line-height: 1.5;
+  }
+  .quiz-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
+  .quiz-opt {
+    padding: 14px 20px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--text);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all .2s;
+    text-align: left;
+    line-height: 1.4;
+  }
+  .quiz-opt:hover:not(:disabled) { border-color: var(--accent2); background: var(--surface2); }
+  .quiz-opt.correct { border-color: var(--accent3) !important; background: rgba(34,201,122,0.1) !important; color: var(--accent3); }
+  .quiz-opt.wrong { border-color: var(--accent) !important; background: rgba(232,68,10,0.1) !important; color: var(--accent); }
+  .quiz-opt:disabled { cursor: default; }
+  .quiz-feedback {
+    padding: 14px 20px;
+    border-radius: 8px;
+    font-size: 0.78rem;
+    line-height: 1.6;
+    margin-bottom: 16px;
+    display: none;
+  }
+  .quiz-feedback.show { display: block; }
+  .quiz-feedback.correct-fb { background: rgba(34,201,122,0.08); border: 1px solid rgba(34,201,122,0.3); color: var(--accent3); }
+  .quiz-feedback.wrong-fb { background: rgba(232,68,10,0.08); border: 1px solid rgba(232,68,10,0.3); color: var(--accent); }
+  .quiz-next {
+    padding: 12px 28px;
+    background: var(--accent);
+    border: none;
+    border-radius: 8px;
+    color: white;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.78rem;
+    cursor: pointer;
+    display: none;
+    transition: all .2s;
+  }
+  .quiz-next.show { display: inline-block; }
+  .quiz-next:hover { background: #ff5520; transform: translateY(-1px); }
+  /* QUIZ RESULTS */
+  .quiz-result {
+    text-align: center;
+    padding: 50px 20px;
+    display: none;
+  }
+  .quiz-result.show { display: block; }
+  .result-score {
+    font-family: 'Syne', sans-serif;
+    font-size: 5rem;
+    font-weight: 800;
+    line-height: 1;
+    margin-bottom: 8px;
+  }
+  .result-label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; }
+  .result-msg { font-size: 1.1rem; margin-bottom: 32px; line-height: 1.6; }
+  .restart-btn {
+    padding: 14px 32px;
+    background: var(--accent);
+    border: none;
+    border-radius: 8px;
+    color: white;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.82rem;
+    cursor: pointer;
+    margin: 0 6px;
+    transition: all .2s;
+  }
+  .restart-btn:hover { background: #ff5520; }
+  .restart-btn.outline {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text);
+  }
+  .restart-btn.outline:hover { background: var(--surface2); }
+  /* ── REVIEW MAP ── */
+  .review-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+    gap: 6px;
+    margin-bottom: 24px;
+  }
+  .review-cell {
+    aspect-ratio: 1;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.6rem;
+    color: var(--muted);
+    cursor: pointer;
+    transition: all .2s;
+    font-weight: 700;
+  }
+  .review-cell:hover { transform: scale(1.1); border-color: var(--accent2); }
+  .review-cell.status-good { background: rgba(34,201,122,0.2); border-color: var(--accent3); color: var(--accent3); }
+  .review-cell.status-ok { background: rgba(245,200,66,0.2); border-color: var(--gold); color: var(--gold); }
+  .review-cell.status-bad { background: rgba(232,68,10,0.2); border-color: var(--accent); color: var(--accent); }
+  .review-cell.status-unseen { opacity: 0.4; }
+  .legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
+  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; color: var(--muted); }
+  .legend-dot { width: 10px; height: 10px; border-radius: 2px; }
+  .legend-dot.green { background: var(--accent3); }
+  .legend-dot.gold { background: var(--gold); }
+  .legend-dot.red { background: var(--accent); }
+  .legend-dot.grey { background: var(--surface2); border: 1px solid var(--border); }
+  /* ── RECAP SCREEN ── */
+  .recap-section { margin-bottom: 28px; }
+  .recap-title {
+    font-family: 'Syne', sans-serif;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    font-weight: 700;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 14px;
+  }
+  .recap-item {
+    padding: 12px 16px;
+    border-left: 3px solid var(--border);
+    margin-bottom: 8px;
+    background: var(--surface);
+    border-radius: 0 6px 6px 0;
+    font-size: 0.78rem;
+    line-height: 1.6;
+    transition: border-color .2s;
+  }
+  .recap-item:hover { border-left-color: var(--accent2); }
+  .recap-item .num { color: var(--muted); font-size: 0.62rem; display: block; margin-bottom: 4px; }
+  .recap-ch3 { border-left-color: rgba(232,68,10,0.4); }
+  .recap-ch4 { border-left-color: rgba(58,123,213,0.4); }
+  .recap-ch5 { border-left-color: rgba(34,201,122,0.4); }
+  .recap-synth { border-left-color: rgba(245,200,66,0.4); }
+  /* ── ANIMATIONS ── */
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(16px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .screen.active { animation: fadeUp .3s ease; }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  /* ── RESPONSIVE ── */
+  @media (max-width: 600px) {
+    .card-controls { grid-template-columns: 1fr 1fr; }
+    .stats-bar { gap: 14px; }
+    .card-face { padding: 24px 20px; }
+  }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <div class="header-top">
+      <h1>GÉO<span>RÉVISION</span></h1>
+      <span class="science-tag">Méthode Ebbinghaus + Testing Effect</span>
+    </div>
+    <div class="subtitle">Tectonique des Plaques — Chapitres 3, 4, 5 &amp; Synthèse · 76 notions</div>
+  </header>
+  <!-- STATS -->
+  <div class="stats-bar">
+    <div class="stat"><span class="stat-val gold" id="stat-total">76</span><span class="stat-label">Notions</span></div>
+    <div class="stat"><span class="stat-val green" id="stat-maîtrisé">0</span><span class="stat-label">Maîtrisées</span></div>
+    <div class="stat"><span class="stat-val" style="color:var(--gold)" id="stat-appris">0</span><span class="stat-label">En cours</span></div>
+    <div class="stat"><span class="stat-val red" id="stat-revoir">0</span><span class="stat-label">À revoir</span></div>
+    <div class="stat"><span class="stat-val blue" id="stat-quiz-score">—</span><span class="stat-label">Score Quiz</span></div>
+  </div>
+  <!-- TABS -->
+  <div class="tabs">
+    <button class="tab active" onclick="showScreen('flashcard')">Flashcards</button>
+    <button class="tab" onclick="showScreen('quiz')">Quiz</button>
+    <button class="tab" onclick="showScreen('map')">Carte</button>
+    <button class="tab" onclick="showScreen('recap')">Récap. complet</button>
+  </div>
+  <!-- ═══════ FLASHCARD SCREEN ═══════ -->
+  <div class="screen active" id="screen-flashcard">
+    <div class="filter-row">
+      <button class="filter-btn active" data-ch="all" onclick="setFilter('all', this)">Tout (76)</button>
+      <button class="filter-btn" data-ch="3" onclick="setFilter('3', this)">CH.3 Mobilité (19)</button>
+      <button class="filter-btn" data-ch="4" onclick="setFilter('4', this)">CH.4 Divergence (21)</button>
+      <button class="filter-btn" data-ch="5" onclick="setFilter('5', this)">CH.5 Convergence (20)</button>
+      <button class="filter-btn" data-ch="synth" onclick="setFilter('synth', this)">Synthèse (5+1)</button>
+      <button class="filter-btn" data-ch="weak" onclick="setFilter('weak', this)">⚠ À revoir</button>
+    </div>
+    <div class="progress-area">
+      <div class="progress-bar-outer"><div class="progress-bar-inner" id="fc-progress" style="width:0%"></div></div>
+      <span class="progress-text" id="fc-counter">0 / 0</span>
+    </div>
+    <div class="flashcard-zone" onclick="flipCard()">
+      <div class="card-wrap" id="card-wrap">
+        <div class="card-face card-front">
+          <span class="card-number" id="card-num"></span>
+          <div class="card-chapter" id="card-chap"></div>
+          <div class="card-question" id="card-q"></div>
+          <div class="card-hint" id="card-hint"></div>
+          <div class="card-flip-hint">CLIQUER POUR RÉVÉLER ↗</div>
+        </div>
+        <div class="card-face card-back">
+          <span class="card-number" id="card-num2"></span>
+          <div class="card-chapter" id="card-chap2"></div>
+          <div class="card-answer" id="card-a"></div>
+          <div class="card-flip-hint">← RETOURNER</div>
+        </div>
+      </div>
+    </div>
+    <div class="card-controls" id="card-controls" style="display:none">
+      <button class="ctrl-btn bad" onclick="rateCard(0)">✗ À revoir<small>Je ne savais pas</small></button>
+      <button class="ctrl-btn ok" onclick="rateCard(1)">~ Hésitant<small>Approximatif</small></button>
+      <button class="ctrl-btn good" onclick="rateCard(2)">✓ Maîtrisé<small>Réponse exacte</small></button>
+    </div>
+    <div class="card-controls" id="card-nav">
+      <button class="ctrl-btn nav" onclick="prevCard()">← Précédent</button>
+      <button class="ctrl-btn nav" onclick="shuffleCards()">⟳ Mélanger</button>
+      <button class="ctrl-btn nav" onclick="nextCard()">Suivant →</button>
+    </div>
+  </div>
+  <!-- ═══════ QUIZ SCREEN ═══════ -->
+  <div class="screen" id="screen-quiz">
+    <div class="filter-row">
+      <button class="filter-btn active" data-ch="all" onclick="setQuizFilter('all', this)">Tout</button>
+      <button class="filter-btn" data-ch="3" onclick="setQuizFilter('3', this)">CH.3</button>
+      <button class="filter-btn" data-ch="4" onclick="setQuizFilter('4', this)">CH.4</button>
+      <button class="filter-btn" data-ch="5" onclick="setQuizFilter('5', this)">CH.5</button>
+      <button class="filter-btn" data-ch="weak" onclick="setQuizFilter('weak', this)">⚠ Faibles</button>
+    </div>
+    <div id="quiz-container">
+      <div class="quiz-q">
+        <div class="quiz-meta">
+          <span id="quiz-chapter-tag"></span>
+          <span id="quiz-progress-tag"></span>
+        </div>
+        <div class="quiz-question" id="quiz-q-text"></div>
+      </div>
+      <div class="quiz-options" id="quiz-options"></div>
+      <div class="quiz-feedback" id="quiz-feedback"></div>
+      <button class="quiz-next" id="quiz-next" onclick="nextQuiz()">Question suivante →</button>
+    </div>
+    <div class="quiz-result" id="quiz-result">
+      <div class="result-score" id="result-score"></div>
+      <div class="result-label">score final</div>
+      <div class="result-msg" id="result-msg"></div>
+      <button class="restart-btn" onclick="restartQuiz()">Recommencer</button>
+      <button class="restart-btn outline" onclick="showScreen('flashcard')">Réviser les flashcards</button>
+    </div>
+  </div>
+  <!-- ═══════ MAP SCREEN ═══════ -->
+  <div class="screen" id="screen-map">
+    <div class="legend">
+      <div class="legend-item"><div class="legend-dot green"></div>Maîtrisé</div>
+      <div class="legend-item"><div class="legend-dot gold"></div>Hésitant</div>
+      <div class="legend-item"><div class="legend-dot red"></div>À revoir</div>
+      <div class="legend-item"><div class="legend-dot grey"></div>Non vu</div>
+    </div>
+    <div class="review-grid" id="review-grid"></div>
+    <p style="font-size:0.7rem;color:var(--muted)">Cliquez sur un numéro pour aller directement à la carte correspondante.</p>
+  </div>
+  <!-- ═══════ RECAP SCREEN ═══════ -->
+  <div class="screen" id="screen-recap">
+    <div id="recap-content"></div>
+  </div>
+</div>
+<script>
+// ══════════════════════════════════════════════════
+//  DATA — 76 cartes complètes
+// ══════════════════════════════════════════════════
+const CARDS = [
+  // CH.3 — I. Les plaques et leurs frontières
+  {id:1, ch:"3", section:"CH.3 — Limites de plaques",
+   q:"Quels sont les 3 grands types de limites de plaques ?",
+   hint:"Pense : naissance / destruction / collision",
+   a:"<strong>Dorsales</strong> (divergence/accrétion), <strong>Fosses océaniques</strong> (convergence/subduction), <strong>Chaînes de montagnes</strong> (convergence/collision)."},
+  {id:2, ch:"3", section:"CH.3 — Dorsales",
+   q:"Quelles roches sont produites à la dorsale ? Quelle est leur texture ?",
+   hint:"Deux roches, deux textures",
+   a:"<strong>Basalte</strong> (texture microlithique, refroidissement rapide en surface) et <strong>Gabbro</strong> (texture grenue, refroidissement lent en profondeur)."},
+  {id:3, ch:"3", section:"CH.3 — Dorsales",
+   q:"Quel type de failles caractérise les dorsales ? Pourquoi ?",
+   hint:"Extension ou compression ?",
+   a:"<strong>Failles normales</strong>, car la divergence des plaques crée une extension (étirement) de la croûte."},
+  {id:4, ch:"3", section:"CH.3 — Dorsales",
+   q:"Quelles sont les caractéristiques sismiques et thermiques d'une dorsale ?",
+   hint:"Profondeur + intensité + flux",
+   a:"Sismicité <strong>superficielle et de faible magnitude</strong>. Flux géothermique <strong>élevé</strong> en raison du magmatisme ascendant."},
+  {id:5, ch:"3", section:"CH.3 — Fosses",
+   q:"Quelles roches plutoniques et volcaniques sont produites aux zones de subduction ?",
+   hint:"4 roches, 2 textures différentes",
+   a:"Plutoniques (grenues) : <strong>diorite, granite</strong>. Volcaniques (microlithiques) : <strong>andésite, rhyolite</strong>."},
+  {id:6, ch:"3", section:"CH.3 — Fosses",
+   q:"Comment se répartissent les foyers sismiques en zone de subduction ? Jusqu'où ?",
+   hint:"Un plan célèbre",
+   a:"Selon le <strong>plan de Wadati-Benioff</strong> : plan incliné suivant la plaque plongeante, atteignant <strong>700 km de profondeur</strong>."},
+  {id:7, ch:"3", section:"CH.3 — Fosses",
+   q:"Décris le flux géothermique en zone de subduction (deux zones distinctes).",
+   hint:"Froid ici, chaud là-bas",
+   a:"<strong>Bas</strong> au niveau de la plaque froide qui plonge. <strong>Fort</strong> au niveau de l'arc volcanique sus-jacent."},
+  {id:8, ch:"3", section:"CH.3 — Collision",
+   q:"Quelles sont les caractéristiques géologiques et sismiques d'une zone de collision ?",
+   hint:"Type de failles + profondeur séismes",
+   a:"<strong>Failles inverses</strong>, flux géothermique <strong>faible</strong>, sismicité principalement <strong>superficielle</strong>."},
+  {id:9, ch:"3", section:"CH.3 — Points chauds",
+   q:"Comment un alignement de volcans inactifs prouve-t-il le mouvement des plaques ?",
+   hint:"Âge + distance",
+   a:"Le point chaud est <strong>fixe</strong> dans le manteau profond. La plaque se déplace au-dessus : l'âge des volcans <strong>augmente avec la distance</strong> au volcan actif."},
+  {id:10, ch:"3", section:"CH.3 — Anomalies magnétiques",
+   q:"Qu'est-ce qu'une anomalie magnétique positive vs négative ?",
+   hint:"Intensité mesurée vs moyenne",
+   a:"<strong>Positive</strong> : intensité mesurée > moyenne → période de polarité normale. <strong>Négative</strong> : intensité < moyenne → période inverse (pôles inversés)."},
+  {id:11, ch:"3", section:"CH.3 — Anomalies magnétiques",
+   q:"Décris le patron des anomalies magnétiques autour d'une dorsale.",
+   hint:"Symétrie + image",
+   a:"Bandes <strong>parallèles et symétriques</strong> par rapport à l'axe de la dorsale, comme un <strong>double tapis roulant</strong>. Plus les basaltes sont loin, plus ils sont vieux."},
+  {id:12, ch:"3", section:"CH.3 — Anomalies magnétiques",
+   q:"Que révèle l'âge et l'épaisseur des sédiments sur le plancher océanique ?",
+   hint:"Loi simple distance/âge",
+   a:"L'épaisseur et l'âge des sédiments au contact du basalte <strong>augmentent avec la distance</strong> à la dorsale : preuve de l'expansion océanique."},
+  {id:13, ch:"3", section:"CH.3 — Géodésie",
+   q:"Que permet la géodésie spatiale (GPS) en tectonique ?",
+   hint:"Précision + deux types de vitesses",
+   a:"Localisation des stations au <strong>millimètre près</strong>, calcul des vitesses <strong>absolues</strong> (par rapport à repères fixes) et <strong>relatives</strong> (entre deux plaques)."},
+  {id:14, ch:"3", section:"CH.3 — Résumé frontières",
+   q:"Quelle frontière présente une vallée axiale (rift) ? Quel type de mouvement ?",
+   hint:"Rift = fossé d'effondrement",
+   a:"La <strong>dorsale</strong> : mouvement de <strong>divergence</strong>. La vallée axiale (rift) témoigne de l'extension."},
+  {id:15, ch:"3", section:"CH.3 — Résumé frontières",
+   q:"Lithosphère terrestre : structure de base et activité aux frontières.",
+   hint:"Découpe + concentration",
+   a:"Découpée en <strong>plaques lithosphériques rigides</strong>. Les frontières concentrent l'essentiel de l'<strong>activité sismique et volcanique</strong>."},
+  {id:16, ch:"3", section:"CH.3 — Anomalies magnétiques",
+   q:"Comment les basaltes enregistrent-ils le champ magnétique ?",
+   hint:"Moment clé = refroidissement",
+   a:"En se <strong>refroidissant</strong>, les minéraux magnétiques (magnétite) se figent dans la direction du champ magnétique terrestre du moment."},
+  {id:17, ch:"3", section:"CH.3 — Dorsales",
+   q:"Que produit l'accrétion océanique à la dorsale ?",
+   hint:"Naît quoi ?",
+   a:"La <strong>croûte océanique</strong> : basalte en surface + gabbro en profondeur + péridotite mantellique sous-jacente."},
+  {id:18, ch:"3", section:"CH.3 — Fosses",
+   q:"Qu'est-ce qu'une fosse océanique ? Quel processus y est associé ?",
+   hint:"Plongement…",
+   a:"Dépression profonde marquant une <strong>zone de subduction</strong> : plongement d'une plaque océanique dense dans le manteau."},
+  {id:19, ch:"3", section:"CH.3 — Collision",
+   q:"Qu'est-ce qu'une chaîne de montagnes en termes tectoniques ?",
+   hint:"Fermeture d'un océan",
+   a:"Zone de <strong>collision continentale</strong> : résultat de la convergence de deux plaques continentales après fermeture d'un océan."},
+  // CH.4 — I. Dorsales rapides
+  {id:20, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Quelle est la vitesse d'écartement d'une dorsale rapide ? Exemple ?",
+   hint:"10–16 cm/an — Quel océan ?",
+   a:"<strong>10 à 16 cm/an</strong>. Exemple : dorsale du Pacifique Est (Pacifique)."},
+  {id:21, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Quelle est la morphologie d'une dorsale rapide (rift, bombement) ?",
+   hint:"Opposé de la dorsale lente",
+   a:"<strong>Bombement large</strong> mais <strong>vallée axiale quasi absente</strong> ou peu marquée (magmatisme abondant comble le rift)."},
+  {id:22, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Décris le processus de fusion partielle sous une dorsale (étapes).",
+   hint:"Convection → décompression → solidus",
+   a:"<strong>1.</strong> Remontée des péridotites par <strong>convection</strong>. <strong>2.</strong> <strong>Décompression adiabatique</strong> : le géotherme recoupe le solidus. <strong>3.</strong> <strong>Fusion partielle</strong> (~15%) → gouttelettes de magma."},
+  {id:23, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Où se loge la chambre magmatique sous une dorsale rapide ? Quelles roches en sortent ?",
+   hint:"Profondeur + 2 roches",
+   a:"Entre <strong>2 et 7 km</strong>. Refroidissement lent → <strong>gabbros</strong> (grenu). Remontée et refroidissement rapide → <strong>basaltes</strong> (microlithique)."},
+  {id:24, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Quelle épaisseur de croûte produit une dorsale rapide ?",
+   hint:"Chiffre précis",
+   a:"Croûte océanique régulière de <strong>5 à 7 km</strong> d'épaisseur."},
+  {id:25, ch:"4", section:"CH.4 — Dorsales lentes",
+   q:"Quelle est la vitesse d'écartement d'une dorsale lente ? Exemple ?",
+   hint:"1–5 cm/an — Quel océan ?",
+   a:"<strong>1 à 5 cm/an</strong>. Exemple : dorsale médio-atlantique (Atlantique)."},
+  {id:26, ch:"4", section:"CH.4 — Dorsales lentes",
+   q:"Morphologie d'une dorsale lente : rift, magmatisme, expansion.",
+   hint:"Opposé de rapide",
+   a:"<strong>Rift très marqué</strong> avec grandes failles de détachement. Magmatisme <strong>réduit et discontinu</strong>. Expansion parfois assurée par <strong>étirement tectonique</strong>."},
+  {id:27, ch:"4", section:"CH.4 — Dorsales lentes",
+   q:"Qu'est-ce que la serpentinisation et quand se produit-elle ?",
+   hint:"Roche + eau + dorsale lente",
+   a:"Hydratation des <strong>péridotites</strong> (manteau) qui remontent directement en surface faute de magmatisme. L'eau transforme l'olivine en <strong>serpentine</strong>."},
+  {id:28, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Qu'est-ce que le métamorphisme hydrothermal ? Quand se produit-il ?",
+   hint:"Eau + chaleur + minéraux",
+   a:"Transformation <strong>à l'état solide</strong> des minéraux de la croûte océanique par infiltration d'eau de mer chauffée. Produit des minéraux <strong>hydratés</strong>."},
+  {id:29, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Quelle séquence de faciès métamorphiques lors du vieillissement océanique ?",
+   hint:"Deux températures, deux faciès",
+   a:"<strong>&gt; 700°C</strong> : faciès <strong>amphibolite</strong> (hornblende). Entre <strong>500–700°C</strong> : faciès <strong>schiste vert</strong> (chlorite + actinote)."},
+  {id:30, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Comment évolue la densité de la lithosphère océanique avec le temps ?",
+   hint:"Refroidissement → épaississement → densité",
+   a:"La lithosphère <strong>se refroidit</strong>, <strong>s'épaissit</strong> (l'isotherme 1300°C s'approfondit), et sa <strong>densité augmente</strong> jusqu'à dépasser celle de l'asthénosphère."},
+  {id:31, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Où et comment naissent les fumeurs noirs ?",
+   hint:"Cycle eau de mer",
+   a:"L'eau de mer s'infiltre dans la croûte, se <strong>réchauffe</strong> au contact du magma, se charge en minéraux et ressort sous forme de <strong>sources hydrothermales chaudes</strong>."},
+  {id:32, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Qu'est-ce que la décompression adiabatique ? Pourquoi déclenche-t-elle la fusion ?",
+   hint:"Pas de perte de chaleur",
+   a:"Remontée de matériel <strong>sans échange de chaleur</strong> avec l'environnement. La pression baisse, le point de fusion (solidus) aussi : le géotherme <strong>recoupe le solidus</strong> → fusion partielle."},
+  {id:33, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Quelle est la signification de l'isotherme 1300°C pour la lithosphère ?",
+   hint:"Limite LAB",
+   a:"C'est la <strong>limite lithosphère-asthénosphère (LAB)</strong>. Elle s'approfondit avec le refroidissement de la plaque qui s'éloigne de la dorsale."},
+  {id:34, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Basalte en coussin vs basalte en filon : quelle différence ?",
+   hint:"Eau vs air",
+   a:"<strong>Coussin</strong> : refroidissement très rapide au contact de l'eau (lave sous-marine). <strong>Filon</strong> : injection de magma dans des fissures (dykes)."},
+  {id:35, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Quelle minéralogie correspond au faciès schiste vert ?",
+   hint:"Température < 500°C",
+   a:"Présence de <strong>chlorite</strong> et d'<strong>actinote</strong> (amphibole calcique) : minéraux hydratés de basse température."},
+  {id:36, ch:"4", section:"CH.4 — Dorsales lentes",
+   q:"Pourquoi une dorsale lente a-t-elle un rift très marqué ?",
+   hint:"Magma insuffisant pour…",
+   a:"Le magmatisme est trop faible pour <strong>combler l'espace créé par l'écartement</strong>. L'extension tectonique forme donc un <strong>fossé d'effondrement profond</strong>."},
+  {id:37, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Quelle transformation minérale correspond au faciès amphibolite ?",
+   hint:"Pyroxène + Plagioclase → ?",
+   a:"L'assemblage initial <strong>pyroxène + plagioclase</strong> (gabbro) se transforme en <strong>hornblende</strong> (amphibole) sous l'action de l'hydrothermalisme > 700°C."},
+  {id:38, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"La péridotite fond entièrement sous une dorsale ? Quel pourcentage ?",
+   hint:"Partielle !",
+   a:"Non : seulement <strong>fusion partielle (~15%)</strong>. Le reste reste à l'état solide. C'est le liquide qui monte former la croûte."},
+  {id:39, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Quel est le rôle de la convection mantellique dans le fonctionnement d'une dorsale ?",
+   hint:"Mouvement ascendant",
+   a:"La <strong>convection</strong> (mouvements de matière du manteau chaud) assure la <strong>remontée des péridotites</strong> sous la dorsale, déclenchant la décompression et la fusion."},
+  {id:40, ch:"4", section:"CH.4 — Dorsales lentes",
+   q:"Qu'est-ce qu'une faille de détachement aux dorsales lentes ?",
+   hint:"Grande faille, faible pendage",
+   a:"Grande <strong>faille à faible pendage</strong> (presque horizontale) permettant l'exhumation de roches profondes (péridotites) directement sur le plancher océanique."},
+  // CH.5 — Zones de convergence
+  {id:41, ch:"5", section:"CH.5 — Marqueurs de subduction",
+   q:"Quels sont les 3 marqueurs principaux d'une zone de subduction ?",
+   hint:"1 relief / 1 alignement / 1 séismique",
+   a:"<strong>1.</strong> Fosse océanique profonde. <strong>2.</strong> Alignement volcanique (arc insulaire ou cordillère). <strong>3.</strong> Plan de Wadati-Benioff (sismicité profonde)."},
+  {id:42, ch:"5", section:"CH.5 — Marqueurs de subduction",
+   q:"Pourquoi la sismicité suit-elle un plan incliné en subduction ?",
+   hint:"Rigidité de la plaque",
+   a:"La plaque océanique reste <strong>rigide</strong> en plongeant (elle est froide). Les contraintes génèrent des séismes le long du plan de contact : le <strong>plan de Wadati-Benioff</strong>."},
+  {id:43, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Pourquoi le volcanisme de subduction est-il explosif ?",
+   hint:"Composition du magma",
+   a:"Le magma est riche en <strong>silice</strong> (très visqueux) et en <strong>gaz dissous</strong>. La viscosité empêche le dégazage progressif → explosion violente."},
+  {id:44, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Quelle est la chaîne de réactions menant au volcanisme de subduction ?",
+   hint:"Eau → péridotite → magma",
+   a:"<strong>1.</strong> Métamorphisme de subduction → libération d'<strong>eau</strong>. <strong>2.</strong> L'eau monte dans le <strong>coin mantellique</strong>. <strong>3.</strong> Elle abaisse le point de fusion des péridotites. <strong>4.</strong> <strong>Fusion partielle</strong> → magma → volcanisme."},
+  {id:45, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Quelles sont les 4 roches de subduction et leur texture ?",
+   hint:"2 volcaniques + 2 plutoniques",
+   a:"Volcaniques (microlithique) : <strong>andésite, rhyolite</strong>. Plutoniques (grenue) : <strong>diorite, granite</strong>."},
+  {id:46, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Pourquoi existe-t-il une telle diversité de roches en subduction ?",
+   hint:"2 processus",
+   a:"<strong>Cristallisation fractionnée</strong> (différenciation du magma en refroidissant) et <strong>contamination</strong> par la croûte continentale traversée."},
+  {id:47, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Quel est le signe minéralogique caractéristique des roches de subduction ?",
+   hint:"OH dans les minéraux",
+   a:"Présence de <strong>minéraux hydratés</strong> portant des groupements <strong>OH</strong> (ex. : amphibole, biotite, muscovite)."},
+  {id:48, ch:"5", section:"CH.5 — Métamorphisme de subduction",
+   q:"Quelle séquence de faciès métamorphiques subit la plaque subduite ?",
+   hint:"3 faciès successifs",
+   a:"<strong>Schiste vert</strong> → <strong>schiste bleu</strong> (apparition de glaucophane, HP-BT) → <strong>éclogite</strong> (grenat + jadéite, > 50 km)."},
+  {id:49, ch:"5", section:"CH.5 — Métamorphisme de subduction",
+   q:"Quelle minéralogie caractérise le faciès schiste bleu ?",
+   hint:"Minéral bleu, HP-BT",
+   a:"Présence de <strong>glaucophane</strong> (amphibole sodique bleue), indicateur de conditions <strong>Haute Pression – Basse Température</strong>."},
+  {id:50, ch:"5", section:"CH.5 — Métamorphisme de subduction",
+   q:"Quelle minéralogie caractérise le faciès éclogite et à quelle profondeur ?",
+   hint:"> 50 km",
+   a:"<strong>Grenat</strong> + <strong>jadéite</strong> (pyroxène sodique), formés à partir de > <strong>50 km</strong> de profondeur sous très haute pression."},
+  {id:51, ch:"5", section:"CH.5 — Métamorphisme de subduction",
+   q:"En quoi le contexte P-T de la subduction est-il unique ?",
+   hint:"Comparer avec métamorphisme classique",
+   a:"<strong>Haute Pression / Basse Température</strong> : la plaque s'enfonce vite et reste froide — contraire du métamorphisme de contact (BT/BP) ou de collision."},
+  {id:52, ch:"5", section:"CH.5 — Moteur de la tectonique",
+   q:"Quel est le moteur principal du mouvement des plaques ?",
+   hint:"Force de tirage",
+   a:"La <strong>traction de la plaque subduite</strong> (froide et dense) : elle tire la plaque par gravité, entraînant les mouvements descendants de la <strong>convection mantellique</strong>."},
+  {id:53, ch:"5", section:"CH.5 — Moteur de la tectonique",
+   q:"Quel lien y a-t-il entre subduction et convection mantellique ?",
+   hint:"Cause-conséquence",
+   a:"La subduction <strong>entretient</strong> les courants descendants froids de la convection. Les plaques ne sont pas portées passivement : elles <strong>tirent activement</strong> sur le reste de la lithosphère."},
+  {id:54, ch:"5", section:"CH.5 — Collision",
+   q:"Comment se produit une collision continentale ?",
+   hint:"Après quoi ?",
+   a:"Après la <strong>fermeture complète d'un océan</strong> par subduction : les deux marges continentales entrent en contact et ne peuvent plus plonger (croûte trop légère)."},
+  {id:55, ch:"5", section:"CH.5 — Collision",
+   q:"Quelles structures géologiques témoignent d'une collision en surface ?",
+   hint:"3 structures",
+   a:"<strong>Plis</strong>, <strong>failles inverses</strong> et <strong>nappes de charriage</strong> (grandes masses de roches déplacées horizontalement)."},
+  {id:56, ch:"5", section:"CH.5 — Collision",
+   q:"Qu'est-ce qu'une racine crustale ? À quelle profondeur descend le Moho ?",
+   hint:"Iceberg crustal",
+   a:"Épaississement de la croûte vers le bas : le <strong>Moho</strong> peut descendre jusqu'à <strong>70 km</strong> (normal : ~35 km). C'est le pendant souterrain des reliefs élevés."},
+  {id:57, ch:"5", section:"CH.5 — Collision",
+   q:"Quels types de roches métamorphiques se forment en contexte de collision ?",
+   hint:"Roches foliées",
+   a:"Roches <strong>foliées</strong> : <strong>micaschistes</strong> (faible à modéré métamorphisme) et <strong>gneiss</strong> (fort métamorphisme)."},
+  {id:58, ch:"5", section:"CH.5 — Marqueurs de subduction",
+   q:"Quelle différence entre arc insulaire et cordillère en subduction ?",
+   hint:"Océan–Océan vs Océan–Continent",
+   a:"<strong>Arc insulaire</strong> : subduction Océan/Océan → volcanisme en mer. <strong>Cordillère</strong> : subduction Océan/Continent → volcanisme en bordure de continent."},
+  {id:59, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Qu'est-ce que le coin mantellique et quel est son rôle ?",
+   hint:"Wedge",
+   a:"Portion du <strong>manteau de la plaque chevauchante</strong> entre les deux plaques. Il reçoit l'<strong>eau libérée</strong> par la plaque subduite → sa péridotite fond partiellement."},
+  {id:60, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Risque volcanique caractéristique des zones de subduction ?",
+   hint:"Nuage mortel",
+   a:"Les <strong>nuées ardentes</strong> (coulées pyroclastiques) : mélanges brûlants de gaz, cendres et débris à très grande vitesse. Lié à la viscosité élevée du magma."},
+  // SYNTHÈSE
+  {id:61, ch:"synth", section:"SYNTHÈSE — Cycle lithosphérique",
+   q:"Résume en 5 étapes le cycle de la lithosphère océanique.",
+   hint:"Naissance → mort",
+   a:"<strong>1.</strong> Naissance à la <strong>dorsale</strong> (HT, BP). <strong>2.</strong> Hydratation + refroidissement (schistes verts). <strong>3.</strong> Densification → <strong>subduction</strong>. <strong>4.</strong> Métamorphisme HP-BT (schiste bleu → éclogite) + libération d'eau. <strong>5.</strong> Déclenchement du <strong>magmatisme</strong> → croûte continentale."},
+  {id:62, ch:"synth", section:"SYNTHÈSE — Moteur",
+   q:"Quel processus assure la continuité de la convection mantellique globale ?",
+   hint:"Traction + plongement",
+   a:"La <strong>traction de la plaque plongeante</strong> (slab pull) : force gravitaire exercée par la plaque froide et dense, moteur principal du cycle convectif global."},
+  {id:63, ch:"synth", section:"SYNTHÈSE — Eau",
+   q:"Quel est le rôle de l'eau dans le cycle de la lithosphère ?",
+   hint:"Partout : dorsale → subduction",
+   a:"À la <strong>dorsale</strong> : hydratation hydrothermal (schistes verts). En <strong>subduction</strong> : expulsion par métamorphisme → abaissement du solidus des péridotites → magmatisme."},
+  {id:64, ch:"synth", section:"SYNTHÈSE — Cycle lithosphérique",
+   q:"Où naît et où meurt la lithosphère océanique ?",
+   hint:"Deux lieux opposés",
+   a:"<strong>Naissance</strong> à la <strong>dorsale</strong> (accrétion). <strong>Mort</strong> à la <strong>fosse de subduction</strong> (réintégration dans le manteau)."},
+  {id:65, ch:"synth", section:"SYNTHÈSE — Croûte continentale",
+   q:"Comment la croûte continentale est-elle créée via la subduction ?",
+   hint:"Eau → fusion → granite",
+   a:"L'eau libérée déclenche la fusion du coin mantellique → magma riche en silice → volcanisme + intrusions → <strong>granite et diorite</strong> constituant la croûte continentale."},
+  // Notions complémentaires extraites du texte
+  {id:66, ch:"3", section:"CH.3 — Anomalies magnétiques",
+   q:"Qu'est-ce qu'une polarité magnétique normale vs inverse ?",
+   hint:"Pôles Nord et Sud",
+   a:"<strong>Normale</strong> : orientation actuelle (pôle magnétique Nord ≈ pôle géographique Nord). <strong>Inverse</strong> : pôles <strong>Nord et Sud magnétiques inversés</strong>."},
+  {id:67, ch:"4", section:"CH.4 — Vieillissement",
+   q:"Pourquoi la lithosphère océanique devient-elle plus dense avec le temps ?",
+   hint:"Refroidissement + manteau",
+   a:"En se refroidissant, elle intègre du manteau refroidi par sa base, et les minéraux se contractent. La densité dépasse finalement celle de l'<strong>asthénosphère</strong> sous-jacente (~3,3 g/cm³)."},
+  {id:68, ch:"5", section:"CH.5 — Métamorphisme de subduction",
+   q:"Pourquoi dit-on que le métamorphisme de subduction est HP-BT ?",
+   hint:"Vitesse d'enfouissement",
+   a:"La plaque <strong>s'enfonce rapidement</strong> : la pression augmente vite mais la plaque froide ne se réchauffe pas assez rapidement → conditions de <strong>Haute Pression, Basse Température</strong>."},
+  {id:69, ch:"5", section:"CH.5 — Collision",
+   q:"Pourquoi la croûte continentale ne peut-elle pas subduire ?",
+   hint:"Densité vs manteau",
+   a:"La croûte continentale est <strong>moins dense</strong> (~2,7 g/cm³) que le manteau (~3,3 g/cm³) : elle flotte et ne peut pas plonger. C'est ce qui provoque la <strong>collision</strong>."},
+  {id:70, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Qu'est-ce que le géotherme et le solidus dans le contexte des dorsales ?",
+   hint:"Deux courbes sur un graphique P-T",
+   a:"Le <strong>géotherme</strong> décrit la température en fonction de la profondeur. Le <strong>solidus</strong> est la courbe en dessous de laquelle la roche est solide. Quand le géotherme <strong>recoupe le solidus</strong>, la roche fond."},
+  {id:71, ch:"3", section:"CH.3 — Résumé général",
+   q:"Quels indices prouvent l'expansion océanique (3 types) ?",
+   hint:"Magnétique + sédimentaire + géodésique",
+   a:"<strong>1.</strong> Anomalies magnétiques symétriques. <strong>2.</strong> Âge/épaisseur croissants des sédiments. <strong>3.</strong> Mesures GPS (géodésie spatiale)."},
+  {id:72, ch:"4", section:"CH.4 — Dorsales rapides",
+   q:"Quelle est la composition minéralogique initiale d'un gabbro (avant métamorphisme) ?",
+   hint:"2 minéraux principaux",
+   a:"<strong>Pyroxène</strong> (clinopyroxène) + <strong>plagioclase</strong> (feldspath calcique). Ces minéraux sont remplacés par hornblende puis chlorite + actinote lors du métamorphisme hydrothermal."},
+  {id:73, ch:"5", section:"CH.5 — Marqueurs de subduction",
+   q:"Quelle force initie le mouvement de la plaque vers la fosse ?",
+   hint:"Densité + gravité",
+   a:"La plaque océanique vieillie est <strong>plus dense que l'asthénosphère</strong>. La gravité provoque son <strong>plongement spontané</strong> (slab pull), qui tire le reste de la plaque."},
+  {id:74, ch:"5", section:"CH.5 — Magmatisme de subduction",
+   q:"Quelle roche est l'équivalent plutonique de l'andésite ?",
+   hint:"Roche à grain visible",
+   a:"La <strong>diorite</strong> : même composition mais refroidissement lent en profondeur → texture <strong>grenue</strong> (cristaux visibles à l'œil nu)."},
+  {id:75, ch:"4", section:"CH.4 — Vieillissement",
+   q:"À quelle température se place la limite faciès amphibolite / faciès schiste vert ?",
+   hint:"Deux seuils de température",
+   a:"<strong>Amphibolite</strong> : > 700°C. <strong>Schiste vert</strong> : entre 300 et 500°C. La transition se fait autour de <strong>500–700°C</strong>."},
+  {id:76, ch:"synth", section:"SYNTHÈSE — Cycle lithosphérique",
+   q:"Cite les 3 faciès de métamorphisme qui jalonnent le parcours d'une plaque océanique du rifting à l'arc volcanique.",
+   hint:"Dorsale → plaque âgée → subduction",
+   a:"<strong>Schiste vert</strong> (hydrothermalisme dorsale et vieillissement). <strong>Schiste bleu</strong> (début subduction, HP-BT). <strong>Éclogite</strong> (subduction profonde > 50 km)."},
+];
+// ══════════════════════════════════════════════════
+//  STATE
+// ══════════════════════════════════════════════════
+let cardStatus = {}; // id -> 0 (bad) | 1 (ok) | 2 (good)
+let currentFilter = 'all';
+let filteredCards = [];
+let currentIndex = 0;
+let isFlipped = false;
+let ratingMade = false;
+let quizFilter = 'all';
+let quizCards = [];
+let quizIndex = 0;
+let quizScore = 0;
+let quizAnswered = false;
+// ══════════════════════════════════════════════════
+//  NAV
+// ══════════════════════════════════════════════════
+function showScreen(name) {
+  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+  document.getElementById('screen-' + name).classList.add('active');
+  document.querySelectorAll('.tab').forEach((t, i) => {
+    const names = ['flashcard','quiz','map','recap'];
+    t.classList.toggle('active', names[i] === name);
+  });
+  if (name === 'map') renderMap();
+  if (name === 'recap') renderRecap();
+  if (name === 'quiz') initQuiz();
+}
+// ══════════════════════════════════════════════════
+//  FILTER
+// ══════════════════════════════════════════════════
+function getFiltered(filter) {
+  if (filter === 'all') return [...CARDS];
+  if (filter === 'weak') return CARDS.filter(c => cardStatus[c.id] === 0 || cardStatus[c.id] === undefined);
+  return CARDS.filter(c => c.ch === filter);
+}
+function setFilter(ch, btn) {
+  currentFilter = ch;
+  document.querySelectorAll('#screen-flashcard .filter-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  filteredCards = getFiltered(ch);
+  currentIndex = 0;
+  isFlipped = false;
+  ratingMade = false;
+  renderCard();
+}
+// ══════════════════════════════════════════════════
+//  FLASHCARD
+// ══════════════════════════════════════════════════
+function renderCard() {
+  if (!filteredCards.length) return;
+  const c = filteredCards[currentIndex];
+  const wrap = document.getElementById('card-wrap');
+  wrap.classList.remove('flipped');
+  isFlipped = false;
+  ratingMade = false;
+  document.getElementById('card-controls').style.display = 'none';
+  // Chapter color
+  const colors = {3:'var(--ch3)', 4:'var(--ch4)', 5:'var(--ch5)', synth:'var(--synth)'};
+  const col = colors[c.ch] || 'var(--muted)';
+  document.getElementById('card-num').textContent = '#' + c.id;
+  document.getElementById('card-num2').textContent = '#' + c.id;
+  document.getElementById('card-chap').innerHTML = `<span style="color:${col}">${c.section}</span>`;
+  document.getElementById('card-chap2').innerHTML = `<span style="color:${col}">${c.section}</span>`;
+  document.getElementById('card-q').textContent = c.q;
+  document.getElementById('card-hint').textContent = c.hint ? '💡 ' + c.hint : '';
+  document.getElementById('card-a').innerHTML = c.a;
+  // Progress
+  const pct = ((currentIndex + 1) / filteredCards.length * 100).toFixed(0);
+  document.getElementById('fc-progress').style.width = pct + '%';
+  document.getElementById('fc-counter').textContent = (currentIndex + 1) + ' / ' + filteredCards.length;
+  updateStats();
+}
+function flipCard() {
+  const wrap = document.getElementById('card-wrap');
+  isFlipped = !isFlipped;
+  wrap.classList.toggle('flipped', isFlipped);
+  if (isFlipped && !ratingMade) {
+    document.getElementById('card-controls').style.display = 'grid';
+  }
+}
+function rateCard(score) {
+  const c = filteredCards[currentIndex];
+  cardStatus[c.id] = score;
+  ratingMade = true;
+  document.getElementById('card-controls').style.display = 'none';
+  updateStats();
+  setTimeout(() => nextCard(), 400);
+}
+function nextCard() {
+  if (currentIndex < filteredCards.length - 1) {
+    currentIndex++;
+  } else {
+    currentIndex = 0;
+  }
+  renderCard();
+}
+function prevCard() {
+  if (currentIndex > 0) currentIndex--;
+  else currentIndex = filteredCards.length - 1;
+  renderCard();
+}
+function shuffleCards() {
+  for (let i = filteredCards.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [filteredCards[i], filteredCards[j]] = [filteredCards[j], filteredCards[i]];
+  }
+  currentIndex = 0;
+  renderCard();
+}
+// ══════════════════════════════════════════════════
+//  STATS
+// ══════════════════════════════════════════════════
+function updateStats() {
+  let good = 0, ok = 0, bad = 0;
+  CARDS.forEach(c => {
+    if (cardStatus[c.id] === 2) good++;
+    else if (cardStatus[c.id] === 1) ok++;
+    else if (cardStatus[c.id] === 0) bad++;
+  });
+  document.getElementById('stat-maîtrisé').textContent = good;
+  document.getElementById('stat-appris').textContent = ok;
+  document.getElementById('stat-revoir').textContent = bad;
+}
+// ══════════════════════════════════════════════════
+//  QUIZ
+// ══════════════════════════════════════════════════
+const WRONG_POOL = [
+  "Cristallisation fractionnée","Plan de Wadati-Benioff","Décompression adiabatique",
+  "Fusion partielle","Serpentinisation","Dorsale médio-atlantique","Glaucophane",
+  "Faille inverse","Faille normale","Basalte en coussin","Jadéite","Grenat",
+  "Hornblende","Chlorite","Actinote","Gabbro","Andésite","Diorite","Rhyolite",
+  "Schiste bleu","Schiste vert","Éclogite","Slab pull","Coin mantellique",
+  "Chambre magmatique","Isotherme 1300°C","Pyroxène","Plagioclase","Serpentine",
+  "Nappe de charriage","Racine crustale","Moho à 70 km","Solidus","Géotherme",
+  "Arc insulaire","Cordillère","Nuée ardente","5 à 7 km","10 à 16 cm/an",
+  "1 à 5 cm/an","700 km de profondeur","50 km de profondeur","500-700°C",
+  "Fumeurs noirs","Micaschiste","Gneiss","Péridotite","Asthénosphère"
+];
+function buildQuizQuestion(card) {
+  // Extract a short answer from the card answer (first strong)
+  const div = document.createElement('div');
+  div.innerHTML = card.a;
+  const strongs = div.querySelectorAll('strong');
+  let correctAnswer = strongs.length ? strongs[0].textContent : div.textContent.split('.')[0].trim();
+  correctAnswer = correctAnswer.substring(0, 80);
+  // Build wrong answers from pool (different from correct)
+  const wrongs = WRONG_POOL.filter(w => !correctAnswer.toLowerCase().includes(w.toLowerCase()));
+  const shuffled = wrongs.sort(() => Math.random() - 0.5).slice(0, 3);
+  const opts = [...shuffled, correctAnswer].sort(() => Math.random() - 0.5);
+  return { question: card.q, correct: correctAnswer, options: opts, explanation: card.a, section: card.section, ch: card.ch };
+}
+function setQuizFilter(ch, btn) {
+  quizFilter = ch;
+  document.querySelectorAll('#screen-quiz .filter-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  initQuiz();
+}
+function initQuiz() {
+  const pool = getFiltered(quizFilter);
+  quizCards = pool.sort(() => Math.random() - 0.5);
+  quizIndex = 0; quizScore = 0; quizAnswered = false;
+  document.getElementById('quiz-result').classList.remove('show');
+  document.getElementById('quiz-container').style.display = '';
+  showQuizQuestion();
+}
+function showQuizQuestion() {
+  if (quizIndex >= quizCards.length) { showQuizResult(); return; }
+  const card = quizCards[quizIndex];
+  const qdata = buildQuizQuestion(card);
+  const colors = {3:'var(--ch3)', 4:'var(--ch4)', 5:'var(--ch5)', synth:'var(--synth)'};
+  const col = colors[card.ch] || 'var(--muted)';
+  document.getElementById('quiz-chapter-tag').innerHTML = `<span style="color:${col}">${qdata.section}</span>`;
+  document.getElementById('quiz-progress-tag').textContent = `${quizIndex + 1} / ${quizCards.length}`;
+  document.getElementById('quiz-q-text').textContent = qdata.question;
+  const opts = document.getElementById('quiz-options');
+  opts.innerHTML = '';
+  qdata.options.forEach(opt => {
+    const btn = document.createElement('button');
+    btn.className = 'quiz-opt';
+    btn.textContent = opt;
+    btn.onclick = () => answerQuiz(opt, qdata.correct, qdata.explanation, btn);
+    opts.appendChild(btn);
+  });
+  const fb = document.getElementById('quiz-feedback');
+  fb.className = 'quiz-feedback';
+  fb.innerHTML = '';
+  document.getElementById('quiz-next').classList.remove('show');
+  quizAnswered = false;
+}
+function answerQuiz(chosen, correct, explanation, btn) {
+  if (quizAnswered) return;
+  quizAnswered = true;
+  const isCorrect = chosen === correct;
+  if (isCorrect) { quizScore++; btn.classList.add('correct'); }
+  else { btn.classList.add('wrong'); }
+  document.querySelectorAll('.quiz-opt').forEach(b => {
+    b.disabled = true;
+    if (b.textContent === correct) b.classList.add('correct');
+  });
+  const fb = document.getElementById('quiz-feedback');
+  if (isCorrect) {
+    fb.className = 'quiz-feedback correct-fb show';
+    fb.innerHTML = `✓ Bonne réponse ! <br><small>${explanation}</small>`;
+  } else {
+    fb.className = 'quiz-feedback wrong-fb show';
+    fb.innerHTML = `✗ La bonne réponse était : <strong>${correct}</strong><br><small>${explanation}</small>`;
+  }
+  document.getElementById('quiz-next').classList.add('show');
+}
+function nextQuiz() {
+  quizIndex++;
+  showQuizQuestion();
+}
+function showQuizResult() {
+  document.getElementById('quiz-container').style.display = 'none';
+  const result = document.getElementById('quiz-result');
+  result.classList.add('show');
+  const pct = Math.round(quizScore / quizCards.length * 100);
+  const colors = pct >= 80 ? 'var(--accent3)' : pct >= 50 ? 'var(--gold)' : 'var(--accent)';
+  document.getElementById('result-score').style.color = colors;
+  document.getElementById('result-score').textContent = pct + '%';
+  let msg = pct >= 80 ? '🏆 Excellent ! Tu maîtrises ce chapitre.' :
+            pct >= 60 ? '👍 Bien ! Quelques révisions restent utiles.' :
+            pct >= 40 ? '⚠ Des lacunes à combler — retourne aux flashcards !' :
+                        '📚 Reprends les flashcards et révise les notions clés.';
+  document.getElementById('result-msg').textContent = msg;
+  document.getElementById('stat-quiz-score').textContent = pct + '%';
+}
+function restartQuiz() { initQuiz(); }
+// ══════════════════════════════════════════════════
+//  REVIEW MAP
+// ══════════════════════════════════════════════════
+function renderMap() {
+  const grid = document.getElementById('review-grid');
+  grid.innerHTML = '';
+  CARDS.forEach(c => {
+    const div = document.createElement('div');
+    div.className = 'review-cell';
+    const s = cardStatus[c.id];
+    if (s === 2) div.classList.add('status-good');
+    else if (s === 1) div.classList.add('status-ok');
+    else if (s === 0) div.classList.add('status-bad');
+    else div.classList.add('status-unseen');
+    div.textContent = c.id;
+    div.title = c.q;
+    div.onclick = () => {
+      const idx = CARDS.findIndex(x => x.id === c.id);
+      setFilter('all', document.querySelector('#screen-flashcard .filter-btn[data-ch="all"]'));
+      currentIndex = idx;
+      renderCard();
+      showScreen('flashcard');
+    };
+    grid.appendChild(div);
+  });
+}
+// ══════════════════════════════════════════════════
+//  RECAP
+// ══════════════════════════════════════════════════
+function renderRecap() {
+  const groups = {
+    '3': { label: 'CHAPITRE 3 — Mobilité horizontale des plaques', cls: 'recap-ch3', color: 'var(--ch3)' },
+    '4': { label: 'CHAPITRE 4 — Dynamique des zones de divergence', cls: 'recap-ch4', color: 'var(--ch4)' },
+    '5': { label: 'CHAPITRE 5 — Dynamique des zones de convergence', cls: 'recap-ch5', color: 'var(--ch5)' },
+    'synth': { label: 'SYNTHÈSE — Cycle de la lithosphère océanique', cls: 'recap-synth', color: 'var(--synth)' },
+  };
+  let html = '';
+  Object.entries(groups).forEach(([ch, g]) => {
+    const cards = CARDS.filter(c => c.ch === ch);
+    html += `<div class="recap-section">
+      <div class="recap-title" style="color:${g.color}">${g.label} (${cards.length} notions)</div>`;
+    cards.forEach(c => {
+      html += `<div class="recap-item ${g.cls}">
+        <span class="num">Notion #${c.id} — ${c.section}</span>
+        <strong>${c.q}</strong><br>
+        <span style="color:var(--muted);font-size:0.73rem">${c.a.replace(/<[^>]*>/g, '')}</span>
+      </div>`;
+    });
+    html += `</div>`;
+  });
+  document.getElementById('recap-content').innerHTML = html;
+}
+// ══════════════════════════════════════════════════
+//  INIT
+// ══════════════════════════════════════════════════
+filteredCards = [...CARDS];
+renderCard();
+updateStats();
+</script>
+</body>
+</html>