/* Formation CAP IA — styles (charte couleurs AÉLIO, marque neutre) */

@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #1A2E4A;
  --navy-mid: #2E4A6E;
  --or: #F5A623;
  --fond: #EEF2F7;
  --or-doux: #FDF3DF;
  --blanc: #FFFFFF;
  --vert: #2E7D5B;
  --vert-doux: #E6F4EE;
  --rouge: #B4452E;
  --rouge-doux: #FBEAE5;
  --gris: #5A6B80;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(26, 46, 74, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  background: var(--fond);
  color: var(--navy);
  line-height: 1.55;
  min-height: 100vh;
}

/* ---------- Header ---------- */
.topbar {
  background: var(--navy);
  color: var(--blanc);
  padding: 0.9rem 1.2rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.brand {
  text-decoration: none;
  color: var(--blanc);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.brand span { color: var(--or); }
.back-link {
  color: var(--or);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}
.back-link:active { opacity: 0.7; }

/* ---------- Layout ---------- */
.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.4rem 1.2rem 4rem;
}
.page-title { font-size: 1.45rem; font-weight: 500; margin-bottom: 0.3rem; }
.page-sub { color: var(--gris); font-size: 0.95rem; margin-bottom: 1.4rem; }

/* ---------- Onde signature (cercles concentriques, filigrane) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--blanc);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  margin-bottom: 1.5rem;
}
.hero h1 { font-size: 1.5rem; font-weight: 500; position: relative; }
.hero p { position: relative; margin-top: 0.5rem; font-size: 0.95rem; color: #CBD6E4; max-width: 34rem; }
.hero .onde {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  opacity: 0.13;
  pointer-events: none;
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.cols2 { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  color: var(--navy);
  display: block;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
a.card:active, a.card:hover { border-color: var(--or); }
.card h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 0.25rem; }
.card p { font-size: 0.88rem; color: var(--gris); }
.card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy-mid);
  background: var(--fond);
  border-radius: 20px;
  padding: 0.15rem 0.65rem;
  margin-bottom: 0.55rem;
}
.card .tag.ok { background: var(--vert-doux); color: var(--vert); }

/* ---------- Progression ---------- */
.progress-wrap { margin: 0.4rem 0 1.4rem; }
.progress-label { font-size: 0.85rem; color: var(--gris); margin-bottom: 0.35rem; display: flex; justify-content: space-between; }
.progress-bar { background: #DDE5EE; border-radius: 20px; height: 10px; overflow: hidden; }
.progress-fill { background: var(--or); height: 100%; border-radius: 20px; transition: width 0.4s; }

/* ---------- Cartes de rappel (révision) ---------- */
.recall {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem;
  margin-bottom: 0.9rem;
  border-left: 4px solid var(--or);
}
.recall h3 { font-size: 1rem; font-weight: 500; margin-bottom: 0.45rem; }
.recall p { font-size: 0.92rem; margin-bottom: 0.4rem; }
.recall p:last-child { margin-bottom: 0; }
.recall .punch {
  background: var(--or-doux);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #7A5510;
  margin-top: 0.55rem;
}

/* ---------- Quiz ---------- */
.quiz-q {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
}
.quiz-q .qnum { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--or); margin-bottom: 0.3rem; }
.quiz-q .qtext { font-size: 1rem; font-weight: 500; margin-bottom: 0.85rem; }
.opt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--fond);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.opt:disabled { cursor: default; opacity: 1; }
.opt.correct { background: var(--vert-doux); border-color: var(--vert); }
.opt.wrong { background: var(--rouge-doux); border-color: var(--rouge); }
.opt.dim { opacity: 0.45; }
.explain {
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  margin-top: 0.5rem;
  display: none;
}
.explain.show { display: block; }
.explain.good { background: var(--vert-doux); color: var(--vert); }
.explain.bad { background: var(--rouge-doux); color: var(--rouge); }

.result-box {
  background: var(--navy);
  color: var(--blanc);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  margin-top: 1.2rem;
  display: none;
}
.result-box.show { display: block; }
.result-box .score { font-size: 2rem; font-weight: 500; color: var(--or); }
.result-box p { margin-top: 0.4rem; font-size: 0.92rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  background: var(--or);
  color: var(--navy);
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:active { opacity: 0.85; }
.btn.ghost { background: transparent; border: 2px solid var(--navy-mid); color: var(--navy); }
.btn.small { font-size: 0.82rem; padding: 0.45rem 0.9rem; border-radius: 8px; }
.btn.full { display: block; width: 100%; }

/* ---------- Banque de prompts ---------- */
.prompt-card {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem;
  margin-bottom: 0.9rem;
}
.prompt-card h3 { font-size: 1rem; font-weight: 500; }
.prompt-card .use { font-size: 0.85rem; color: var(--gris); margin: 0.25rem 0 0.7rem; }
.prompt-body {
  background: var(--fond);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  font-size: 0.84rem;
  white-space: pre-wrap;
  display: none;
  margin-bottom: 0.7rem;
}
.prompt-body.show { display: block; }
.prompt-body b { font-weight: 500; color: var(--navy-mid); }
.prompt-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Constructeur ACTIF ---------- */
.field { margin-bottom: 1rem; }
.field label { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; font-weight: 500; margin-bottom: 0.3rem; }
.field label .lettre {
  background: var(--navy);
  color: var(--or);
  border-radius: 8px;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  flex: none;
}
.field .hint { font-size: 0.8rem; color: var(--gris); margin-bottom: 0.35rem; }
.field textarea {
  width: 100%;
  min-height: 3.2rem;
  border: 2px solid #D5DEE9;
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--navy);
  resize: vertical;
  background: var(--blanc);
}
.field textarea:focus { outline: none; border-color: var(--or); }
.assembled {
  background: var(--navy);
  color: #E8EDF4;
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  font-size: 0.9rem;
  white-space: pre-wrap;
  min-height: 5rem;
  margin-bottom: 0.8rem;
}
.assembled .placeholder { color: #7C8DA5; font-style: italic; }

/* ---------- Halluciné ou pas ---------- */
.hallu-card {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.4rem;
  text-align: center;
}
.hallu-card .counter { font-size: 0.8rem; color: var(--gris); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.9rem; }
.hallu-card .claim { font-size: 1.05rem; font-weight: 500; margin-bottom: 1.3rem; min-height: 4.5rem; }
.hallu-btns { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.hallu-btns .btn { flex: 1; min-width: 8rem; max-width: 14rem; }
.btn.vrai { background: var(--vert); color: var(--blanc); }
.btn.faux { background: var(--rouge); color: var(--blanc); }

/* ---------- Tableaux / cadre légal ---------- */
.legal-block {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
}
.legal-block h2 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.6rem; }
.legal-block h3 { font-size: 0.95rem; font-weight: 500; margin: 0.8rem 0 0.3rem; }
.legal-block p, .legal-block li { font-size: 0.9rem; margin-bottom: 0.4rem; }
.legal-block ul { padding-left: 1.2rem; }
.niveau { border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; font-size: 0.88rem; }
.niveau b { font-weight: 500; display: block; margin-bottom: 0.15rem; }
.niveau.interdit { background: var(--rouge-doux); }
.niveau.eleve { background: var(--or-doux); }
.niveau.minimal { background: var(--vert-doux); }
.regle-or {
  background: var(--or-doux);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 500;
  color: #7A5510;
  margin-bottom: 1rem;
}

/* ---------- Documents ---------- */
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
  margin-bottom: 0.7rem;
  text-decoration: none;
  color: var(--navy);
}
.doc-row .doc-name { font-size: 0.95rem; font-weight: 500; }
.doc-row .doc-desc { font-size: 0.8rem; color: var(--gris); }
.doc-row .dl { color: var(--or); font-weight: 500; font-size: 0.85rem; white-space: nowrap; }

/* ---------- Divers ---------- */
.footer {
  text-align: center;
  color: var(--gris);
  font-size: 0.78rem;
  padding: 1.5rem 1rem 2.5rem;
}
.toast {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--blanc);
  border-radius: 10px;
  padding: 0.6rem 1.2rem;
  font-size: 0.88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 100;
}
.toast.show { opacity: 1; }
.empty-note { color: var(--gris); font-size: 0.9rem; font-style: italic; padding: 0.5rem 0.2rem; }

/* ================= v2 — format cours / pages éditoriales ================= */

.nav-links { display: flex; gap: 1rem; align-items: center; }
.nav-links a { color: #CBD6E4; text-decoration: none; font-size: 0.86rem; font-weight: 500; }
.nav-links a.active, .nav-links a:hover { color: var(--or); }
@media (max-width: 560px) { .nav-links { gap: 0.7rem; } .nav-links a { font-size: 0.8rem; } }

/* Accueil — liste de chapitres */
.chapitres { margin-top: 0.4rem; }
.chapitre-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.4rem;
  margin-bottom: 0.85rem;
  text-decoration: none;
  color: var(--navy);
  border: 1px solid transparent;
}
.chapitre-row:hover { border-color: var(--or); }
.chapitre-num {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.9rem;
  color: var(--or);
  line-height: 1;
  min-width: 2.4rem;
  padding-top: 0.15rem;
}
.chapitre-body { flex: 1; }
.chapitre-body h3 { font-size: 1.12rem; font-weight: 500; margin-bottom: 0.25rem; }
.chapitre-body p { font-size: 0.9rem; color: var(--gris); margin-bottom: 0.45rem; }
.chapitre-meta { font-size: 0.78rem; color: var(--navy-mid); display: flex; gap: 0.9rem; flex-wrap: wrap; }
.chapitre-meta .valide { color: var(--vert); font-weight: 500; }

.section-intro { margin: 2rem 0 0.9rem; }
.section-intro h2 { font-size: 1.2rem; font-weight: 500; }
.section-intro p { color: var(--gris); font-size: 0.92rem; margin-top: 0.2rem; }

/* Page de cours — typographie éditoriale */
.cours { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.2rem 1.6rem 2.6rem; }
@media (min-width: 700px) { .cours { padding: 2.8rem 3rem 3rem; } }
.cours .kicker { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--or); margin-bottom: 0.5rem; }
.cours h1 { font-size: 1.7rem; font-weight: 500; line-height: 1.25; margin-bottom: 0.4rem; }
.cours .duree { font-size: 0.82rem; color: var(--gris); margin-bottom: 1.3rem; }
.cours .chapo {
  font-size: 1.02rem;
  color: var(--navy-mid);
  border-left: 3px solid var(--or);
  padding-left: 1rem;
  margin-bottom: 2rem;
  line-height: 1.65;
}
.cours h2 {
  font-size: 1.22rem;
  font-weight: 500;
  margin: 2.2rem 0 0.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid #E3EAF2;
}
.cours section:first-of-type h2 { border-top: none; padding-top: 0; margin-top: 0; }
.cours p { font-size: 0.97rem; line-height: 1.75; margin-bottom: 0.9rem; }
@media (min-width: 700px) { .cours p { text-align: justify; } }
.cours p b { font-weight: 500; color: var(--navy); }
.cours p i { font-style: italic; color: var(--gris); }
.aretenir {
  background: var(--or-doux);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 1.1rem 0 0.4rem;
  font-size: 0.9rem;
  color: #7A5510;
}
.aretenir b { font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.74rem; display: block; margin-bottom: 0.25rem; }

.cours-quiz { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid #E3EAF2; }
.cours-quiz > h2 { font-size: 1.22rem; font-weight: 500; margin-bottom: 0.3rem; }
.cours-quiz > .quiz-note { font-size: 0.88rem; color: var(--gris); margin-bottom: 1.2rem; }
.cours-quiz .quiz-q { box-shadow: none; border: 1px solid #E3EAF2; }

.cours-nav { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }

/* Page outils — rangées descriptives */
.outil-row {
  display: block;
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
  margin-bottom: 0.85rem;
  text-decoration: none;
  color: var(--navy);
  border: 1px solid transparent;
}
.outil-row:hover { border-color: var(--or); }
.outil-row h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.3rem; }
.outil-row h3 span { color: var(--or); font-size: 0.85rem; margin-left: 0.4rem; }
.outil-row p { font-size: 0.9rem; color: var(--gris); }
.bandeau-docs {
  background: var(--navy);
  color: var(--blanc);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  flex-wrap: wrap;
}
.bandeau-docs h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 0.2rem; }
.bandeau-docs p { font-size: 0.85rem; color: #CBD6E4; }
.bandeau-docs .dl { color: var(--or); font-weight: 500; white-space: nowrap; }

/* ================= v3 — architecture multi-niveaux ================= */

/* Fil d'Ariane */
.crumb { font-size: 0.82rem; color: var(--gris); margin-bottom: 1rem; }
.crumb a { color: var(--navy-mid); text-decoration: none; font-weight: 500; }
.crumb a:hover { color: var(--or); }
.crumb .sep { margin: 0 0.35rem; color: #A8B6C8; }

/* Accueil — portails de section */
.portail {
  display: block;
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.6rem 1.4rem;
  margin-bottom: 1rem;
  text-decoration: none;
  color: var(--navy);
  border: 1px solid transparent;
}
.portail:hover { border-color: var(--or); }
.portail .portail-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; }
.portail .portail-num {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  color: var(--or);
  line-height: 1;
}
.portail h3 { font-size: 1.25rem; font-weight: 500; }
.portail > p { font-size: 0.92rem; color: var(--gris); margin-bottom: 0.9rem; }
.portail .sublinks { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.portail .sublinks span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--navy-mid);
  background: var(--fond);
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
}
.portail .sublinks span.done { background: var(--vert-doux); color: var(--vert); }
.portail .portail-cta { margin-top: 1rem; font-size: 0.88rem; font-weight: 500; color: var(--or); }

.reprendre {
  background: var(--navy);
  color: var(--blanc);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  text-decoration: none;
}
.reprendre h3 { font-size: 1rem; font-weight: 500; margin-bottom: 0.15rem; }
.reprendre p { font-size: 0.85rem; color: #CBD6E4; }
.reprendre .dl { color: var(--or); font-weight: 500; white-space: nowrap; }

/* CTA vers le QCM en fin de cours */
.cta-quiz {
  background: var(--navy);
  color: var(--blanc);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin-top: 2.4rem;
  text-align: center;
}
.cta-quiz h2 { font-size: 1.15rem; font-weight: 500; margin-bottom: 0.35rem; border: none; padding: 0; }
.cta-quiz p { font-size: 0.9rem; color: #CBD6E4; margin-bottom: 1rem; text-align: center; }
.cta-quiz .valide-note { color: var(--vert-doux); font-size: 0.85rem; margin-top: 0.6rem; }

/* Page QCM */
.quiz-header {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.6rem;
  margin-bottom: 1.2rem;
}
.quiz-header .kicker { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--or); margin-bottom: 0.4rem; }
.quiz-header h1 { font-size: 1.4rem; font-weight: 500; margin-bottom: 0.3rem; }
.quiz-header p { font-size: 0.9rem; color: var(--gris); }