Spaces:

Enoder
/

Georevision

Sleeping

App Files Files Community

Georevision / app.py

Enoder

Create app.py

6e4ecb0 verified 6 months ago

Raw

History Blame

61.6 kB

	<!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 & 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>> 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>