/* =====================================================================
   style.css — Feuille de style de la formation e-Facturation FD HORIZON
   ---------------------------------------------------------------------
   Ce fichier regroupe TOUT le CSS qui était auparavant dans les balises
   <style> du fichier HTML. Il est désormais séparé pour :
     - alléger le HTML et le rendre plus lisible,
     - permettre la mise en cache du style par le navigateur,
     - faciliter la maintenance (un seul endroit pour les styles).

   Sommaire des sections (dans l'ordre) :
     1. Global / Reset, Topbar, Landing page
     2. Styles Module 1
     3. Styles Module 2
     4. Styles Module 3A
     5. Styles Module 3B
     6. Styles Module 4A
     7. Styles Module 4B
     8. Styles Module 5
     9. Accueil / Dashboard
    10. Ajustements responsives (media queries finales)
   ===================================================================== */

/* ══ GLOBAL / RESET ══ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: #fafaf7; color: #1a1a18; }
.spa-page { display: none; min-height: 100vh; flex-direction: column; }
.spa-page.active { display: flex; }

/* ══ TOPBAR ══ */
.topbar {
  background: #0C0C2A;
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 999;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.topbar-logo { display: flex; align-items: center; cursor: pointer; margin-right: 10px; }
.timer-pill {
  display: none; align-items: center; gap: 6px;
  background: rgba(200,168,50,.18); color: #FFD764;
  padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 600;
}
.timer-pill.visible { display: flex; }
.timer-pill.low { background: rgba(220,38,38,.25); color: #FCA5A5; }
.btn-back-dash {
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  padding: 6px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: none; transition: background .15s;
}
.btn-back-dash.visible { display: block; }
.btn-back-dash:hover { background: rgba(255,255,255,.2); }
.btn-deconnect {
  background: transparent; color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; cursor: pointer;
  display: none; transition: color .15s;
}
.btn-deconnect.visible { display: block; }
.btn-deconnect:hover { color: #fff; }

/* ══ LANDING PAGE ══ */
#page-landing { background: #fafaf7; }
.land-hero {
  background: linear-gradient(140deg, #0C0C2A 0%, #1A3A5C 55%, #2D2A8A 100%);
  color: #fff; padding: 80px 24px 96px; text-align: center; position: relative; overflow: hidden;
}
.land-hero::before { content:''; position:absolute; top:-120px; right:-80px; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.04); }
.land-hero::after  { content:''; position:absolute; bottom:-80px; left:-60px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.03); }
.land-hero-inner { max-width: 680px; margin: 0 auto; position: relative; z-index:1; }
.land-kicker { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:1rem; }
.land-hero h1 { font-family:'Syne',sans-serif; font-size:clamp(28px,6vw,52px); font-weight:800; line-height:1.1; margin-bottom:1rem; }
.land-hero h1 span { color:#FFD764; }
.land-hero-desc { font-size:16px; color:rgba(255,255,255,.72); line-height:1.7; max-width:520px; margin:0 auto 2.5rem; }
.land-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-gold {
  background:#C8A832; color:#0C0C2A;
  padding:14px 32px; border-radius:10px;
  font-family:'Syne',sans-serif; font-weight:800; font-size:15px;
  border:none; cursor:pointer; text-decoration:none;
  display:inline-block; transition:all .2s;
  box-shadow: 0 4px 16px rgba(200,168,50,.4);
}
.btn-gold:hover { background:#B8941F; transform:translateY(-2px); }
.btn-outline-w {
  background:transparent; color:#fff;
  padding:13px 26px; border-radius:10px;
  font-family:'Syne',sans-serif; font-weight:600; font-size:14px;
  border:2px solid rgba(255,255,255,.45); cursor:pointer;
  text-decoration:none; display:inline-block; transition:all .2s;
}
.btn-outline-w:hover { border-color:#fff; background:rgba(255,255,255,.08); }

.land-stats {
  background:#fff; border-bottom:1px solid #e8e8e2;
  padding:24px 32px;
  display:flex; justify-content:center; gap:48px; flex-wrap:wrap;
}
.land-stat { text-align:center; }
.land-stat-num { font-family:'Syne',sans-serif; font-size:28px; font-weight:800; color:#0C0C2A; }
.land-stat-lbl { font-size:12px; color:#6b6b67; margin-top:3px; }

.land-content { max-width:820px; margin:0 auto; padding:56px 24px 80px; }
.land-section-lbl { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#1D9E75; margin-bottom:.5rem; }
.land-section-title { font-family:'Syne',sans-serif; font-size:clamp(20px,3.5vw,30px); font-weight:800; color:#0C0C2A; margin-bottom:1rem; line-height:1.2; }
.land-section-sub { font-size:15px; color:#6b6b67; line-height:1.65; max-width:520px; }

.land-modules-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:32px; }
.land-mod-card { background:#fff; border:1px solid #e8e8e2; border-radius:12px; padding:20px; transition:all .2s; }
.land-mod-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.land-mod-num { width:36px; height:36px; border-radius:9px; background:#0C0C2A; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:15px; margin-bottom:12px; }
.land-mod-card h3 { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; color:#0C0C2A; margin-bottom:6px; }
.land-mod-card p { font-size:12px; color:#6b6b67; line-height:1.55; }
.land-mod-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.land-tag { background:#F1EFE8; color:#5F5E5A; font-size:10px; padding:2px 8px; border-radius:99px; font-weight:500; }

.land-pricing-wrap { max-width:460px; margin:0 auto; }
.land-price-box {
  background:#fff; border-radius:18px;
  border:2px solid #0C0C2A;
  padding:44px 38px; text-align:center;
  box-shadow:0 8px 40px rgba(12,12,42,.15);
  position:relative;
}
.price-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:#C8A832; color:#0C0C2A;
  font-family:'Syne',sans-serif; font-weight:800; font-size:11px;
  padding:4px 18px; border-radius:99px; letter-spacing:.08em; text-transform:uppercase;
}
.price-big { font-family:'Syne',sans-serif; font-size:64px; font-weight:900; color:#0C0C2A; line-height:1; }
.price-big sup { font-size:28px; vertical-align:top; margin-top:12px; }
.price-desc { font-size:13px; color:#6b6b67; margin:8px 0 28px; }
.price-features { text-align:left; margin-bottom:28px; }
.price-features li {
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; color:#1a1a18; padding:7px 0;
  border-bottom:1px solid #F1EFE8;
  list-style:none;
}
.price-features li:last-child { border-bottom:none; }
.price-features li::before { content:'✓'; color:#1D9E75; font-weight:700; flex-shrink:0; }
.or-sep { display:flex; align-items:center; gap:12px; margin:20px 0; }
.or-sep::before,.or-sep::after { content:''; flex:1; height:1px; background:#e8e8e2; }
.or-sep span { font-size:12px; color:#6b6b67; }
.btn-primary-dark {
  width:100%; padding:14px;
  background:#0C0C2A; color:#fff;
  border:none; border-radius:10px;
  font-family:'Syne',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.btn-primary-dark:hover { background:#1A1A3A; }

.land-footer { background:#0C0C2A; color:rgba(255,255,255,.5); padding:20px 24px; text-align:center; font-size:12px; margin-top:auto; }
.land-footer strong { color:#C8A832; }

/* ══ ACCESS CODE PAGE ══ */
#page-access { background:#fafaf7; }
.access-center { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.access-card {
  background:#fff; border-radius:18px; padding:52px 44px;
  max-width:420px; width:100%; text-align:center;
  box-shadow:0 8px 36px rgba(12,12,42,.12);
  border-top:4px solid #0C0C2A;
}
.access-icon { font-size:44px; margin-bottom:14px; }
.access-card h2 { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:#0C0C2A; margin-bottom:8px; }
.access-card p { font-size:13px; color:#6b6b67; line-height:1.65; margin-bottom:28px; }
.code-input {
  width:100%; padding:14px 18px;
  border:2px solid #e0e0da; border-radius:10px;
  font-family:'Syne',sans-serif; font-size:20px; text-align:center; letter-spacing:4px; font-weight:700;
  color:#0C0C2A; outline:none; transition:border-color .2s; text-transform:uppercase; margin-bottom:14px;
}
.code-input:focus { border-color:#0C0C2A; }
.code-input.error { border-color:#D85A30; }
.code-err { color:#D85A30; font-size:12px; margin-bottom:12px; display:none; }
.code-err.show { display:block; }
.access-footer-note { margin-top:18px; font-size:11px; color:#6b6b67; line-height:1.6; }
.access-back { display:inline-block; margin-top:14px; font-size:12px; color:#0C0C2A; text-decoration:underline; cursor:pointer; }

/* ══ EXPIRED PAGE ══ */
#page-expired { background:#fafaf7; }
.expired-center { flex:1; display:flex; align-items:center; justify-content:center; padding:40px; }
.expired-card {
  background:#fff; border-radius:18px; padding:52px 44px;
  max-width:460px; text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,.1);
  border-top:4px solid #D85A30;
}
.expired-card .icon { font-size:52px; margin-bottom:16px; }
.expired-card h2 { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:#D85A30; margin-bottom:10px; }
.expired-card p { font-size:14px; color:#6b6b67; line-height:1.6; margin-bottom:24px; }

/* ══ ACCUEIL / DASHBOARD ══ */
#page-dashboard { background:#fafaf7; }

/* ══ MODULE PAGES ══ */
.module-page { background:#fafaf7; flex-direction:column; }

/* Ensure footer-nav sticks to bottom inside module pages */
.module-page .footer-nav { position:sticky; bottom:0; z-index:50; }

/* ══ GLOBAL FOOTER ══ */
.global-footer { background:#0C0C2A; color:rgba(255,255,255,.45); padding:16px 24px; text-align:center; font-size:11px; margin-top:auto; }
.global-footer strong { color:#C8A832; }




/* ============================================================
   RESPONSIVE GLOBAL — PC + Mobile (ajout FDH)
   Breakpoints : 900px (tablette), 640px (mobile), 400px (xs)
   ============================================================ */

/* ── TOPBAR ── */
@media (max-width: 768px) {
  .topbar { padding: 8px 14px; gap: 8px; }
  .topbar-logo img, .topbar-logo svg { height: 56px !important; }
  .timer-pill { font-size: 10px; padding: 4px 10px; }
  .btn-back-dash { font-size: 11px; padding: 6px 10px; }
  #btn-deconnect-gl { font-size: 11px; padding: 6px 10px; }
}
@media (max-width: 480px) {
  .topbar { padding: 6px 10px; }
  .topbar-logo img, .topbar-logo svg { height: 44px !important; }
  .timer-pill { display: none !important; }
}

/* ── LANDING — HERO ── */
@media (max-width: 768px) {
  .land-hero { padding: 48px 18px 64px; }
  .land-hero h1 { font-size: clamp(28px, 7vw, 48px); }
  .land-hero-desc { font-size: 14px; }
  .land-btns { flex-direction: column; align-items: center; gap: 10px; }
  .btn-gold, .btn-outline-w { width: 100%; max-width: 320px; text-align: center; }
}

/* ── LANDING — STATS BAR ── */
@media (max-width: 640px) {
  .land-stats { flex-wrap: wrap; gap: 8px; padding: 16px 12px; justify-content: center; }
  .land-stat { min-width: 70px; }
  .land-stat-num { font-size: 20px; }
}

/* ── LANDING — SECTIONS ── */
@media (max-width: 768px) {
  .land-section { padding: 40px 18px; }
  .land-section-title { font-size: clamp(20px, 5vw, 32px); }
  .land-parcours-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .land-modules-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .land-mod-card { padding: 14px; }
}
@media (max-width: 480px) {
  .land-modules-grid { grid-template-columns: 1fr !important; }
}

/* ── LANDING — PRICING ── */
@media (max-width: 640px) {
  .land-pricing-wrap { padding: 0 14px; }
  .land-price-box { padding: 24px 18px; }
  .price-big { font-size: 52px; }
  .price-features li { font-size: 13px; }
}

/* ── PAGE ACCESS / EXPIRED ── */
@media (max-width: 480px) {
  .access-card, .expired-card { padding: 24px 18px; margin: 0 12px; }
  .code-input { font-size: 16px; letter-spacing: 4px; }
}

/* ── DASHBOARD — HERO ── */
@media (max-width: 768px) {
  #page-dashboard .dash-hero { padding: 32px 18px 56px; }
  #page-dashboard .dash-hero h1 { font-size: clamp(20px, 5vw, 32px); }
  #page-dashboard .dash-stats { flex-wrap: wrap; gap: 8px; }
}

/* ── DASHBOARD — PARCOURS SELECTOR ── */
@media (max-width: 640px) {
  #page-dashboard .parcours-selector { padding: 0 12px; margin-top: -1.5rem; }
  #page-dashboard .parcours-grid { grid-template-columns: 1fr; gap: 10px; }
  #page-dashboard .parcours-card { padding: 16px; }
}

/* ── DASHBOARD — MODULE CARDS ── */
@media (max-width: 768px) {
  #page-dashboard .modules-grid { grid-template-columns: 1fr; }
  #page-dashboard .mc-card { padding: 14px 14px 14px 18px; }
}

/* ── MODULES — GLOBAL ── */
@media (max-width: 768px) {
  /* Hero modules */
  .hero { padding: 36px 18px 48px; }
  .hero h1 { font-size: clamp(22px, 5.5vw, 36px); }
  .hero-meta { flex-wrap: wrap; gap: 6px; }
  /* Nav progress */
  .nav-progress { padding: 10px 14px; overflow-x: auto; }
  .nav-dots { gap: 6px; }
  /* Sections */
  .section-block { padding: 20px 16px; margin-bottom: 14px; }
  .section-label { font-size: 10px; }
  /* Grilles 2 colonnes → 1 colonne */
  .before-after, .compare-grid, .two-col-grid,
  .platform-grid, .persona-grid, .case-grid { 
    grid-template-columns: 1fr !important; 
  }
  /* Tableaux scrollables */
  .table-wrap, table { overflow-x: auto; display: block; width: 100%; }
  table { min-width: 400px; }
  /* Flip cards */
  .flip-grid { grid-template-columns: 1fr 1fr !important; }
  /* Quiz */
  .quiz-wrap { padding: 18px 14px; }
  .choices { grid-template-columns: 1fr !important; }
  /* Slider simulateur */
  .simu-sliders { padding: 16px; }
  /* Stepper */
  .stepper-nav { gap: 4px; overflow-x: auto; padding-bottom: 6px; }
  .step-btn { font-size: 11px; padding: 6px 10px; min-width: 60px; }
}

@media (max-width: 480px) {
  .hero { padding: 28px 14px 36px; }
  .flip-grid { grid-template-columns: 1fr !important; }
  .flip-card { height: auto; min-height: 160px; }
  /* Checklist */
  .checklist-item { font-size: 13px; padding: 10px 12px; }
  /* Tags */
  .tag, .hero-tag { font-size: 10px; padding: 3px 8px; }
  /* Boutons */
  .btn-primary, .btn-secondary { font-size: 13px; padding: 10px 16px; }
  /* Score final */
  .score-box { padding: 24px 16px; }
  .score-num { font-size: 48px; }
  /* Attestation */
  .attestation { padding: 24px 16px; }
}

/* ── MODULE 3A — Simulateur coût ── */
@media (max-width: 640px) {
  .cost-table th, .cost-table td { font-size: 12px; padding: 8px 6px; }
  .simu-result { flex-direction: column; gap: 10px; }
}

/* ── MODULE 4B — Dashboard simulé ── */
@media (max-width: 640px) {
  .dash-sim-grid { grid-template-columns: 1fr 1fr !important; }
  .invoice-statuses { grid-template-columns: 1fr !important; }
}

/* ── FOOTER ── */
@media (max-width: 640px) {
  .global-footer { font-size: 11px; padding: 16px 14px; text-align: center; }
}

/* ── UTILITAIRES MOBILES ── */
@media (max-width: 768px) {
  /* Empêcher overflow horizontal global */
  .spa-page { overflow-x: hidden; }
  /* Images et iframes */
  img { max-width: 100%; height: auto; }
  /* Inputs plus grands au toucher */
  input[type="text"], input[type="number"], select {
    font-size: 16px; /* évite le zoom auto iOS */
  }
}


/* ── CORRECTIONS OVERFLOW MOBILE (patch 2) ── */

/* Empêcher tout débordement horizontal */
* { box-sizing: border-box; }
body, .spa-page { overflow-x: hidden; max-width: 100vw; }

/* Textes longs : wrap forcé */
p, li, td, th, .section-block, .alert, .tip,
.choice-btn, .size-btn, .mc-desc, .hero-desc,
.land-hero-desc, .pc-sub, .price-features li {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Titres : ne pas couper */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Tableaux : scroll horizontal */
table {
  display: table;
  width: 100%;
  table-layout: auto;
}
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
}

@media (max-width: 768px) {
  /* Wrapper automatique pour tous les tableaux */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  table td, table th {
    white-space: normal;
    min-width: 80px;
  }

  /* Sections et blocs : pas de dépassement */
  .section-block, .alert, .tip, .info-box,
  .flip-card, .accordion-item, .cas-block,
  .scenario-block, .persona-card, .stepper-panel {
    max-width: 100%;
    overflow: hidden;
  }

  /* Flex items : wrap */
  .hero-meta, .tag-row, .module-tags, .nav-info-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Before/after + compare : forcer 1 col */
  [class*="before-after"],
  [class*="compare-grid"],
  [class*="two-col"],
  [class*="platform-grid"],
  [class*="persona-grid"],
  [class*="case-grid"],
  .before-after, .compare-grid, .two-col-grid,
  .platform-grid, .persona-grid, .case-grid,
  .format-cards, .status-grid, .anom-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }

  /* Stepper navigation */
  .stepper-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .stepper-nav::-webkit-scrollbar { display: none; }
  .step-btn { flex-shrink: 0; }

  /* Flip cards : hauteur auto */
  .flip-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .flip-card { height: auto !important; min-height: 120px; }
  .flip-front, .flip-back {
    position: relative;
    backface-visibility: visible;
  }

  /* Choices quiz */
  .choices, .choice-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .choice-btn {
    text-align: left;
    padding: 12px 14px;
    font-size: 13px;
    width: 100%;
  }

  /* Simulateur sliders */
  .simu-grid, .simu-row {
    flex-direction: column;
    gap: 10px;
  }
  input[type="range"] { width: 100%; }

  /* Format cards module 1 (flip-style) */
  .format-card, .type-card {
    width: 100%;
    max-width: 100%;
  }

  /* Alertes et tips */
  .alert, .tip, .conseil-box, .info-banner {
    padding: 14px 12px;
    font-size: 13px;
  }

  /* Glossaire */
  .glossary-grid { grid-template-columns: 1fr !important; }

  /* Persona / scenario cards */
  .persona-card, .scenario-card, .cas-block {
    padding: 16px 14px;
  }

  /* Checklist items */
  .checklist-item, .chk-item {
    padding: 10px 12px;
    font-size: 13px;
  }
  .chk-item label { display: flex; gap: 8px; align-items: flex-start; }

  /* Message templates */
  .msg-template, .template-box {
    padding: 14px 12px;
    font-size: 13px;
  }

  /* Dashboard simulé module 4B */
  .dash-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .recon-steps { flex-direction: column; }

  /* Fiche réflexe / pilotage */
  .fiche-grid, .fiche-cols {
    grid-template-columns: 1fr !important;
    flex-direction: column;
  }

  /* Attestation module 5 */
  .attestation {
    padding: 20px 14px;
    font-size: 13px;
  }
  .att-name-input { font-size: 16px; width: 100%; }

  /* Nav dots progress */
  .nav-dots {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 4px 0;
    scrollbar-width: none;
  }
  .nav-dot { flex-shrink: 0; }
}

@media (max-width: 400px) {
  .section-block { padding: 16px 12px; }
  h2 { font-size: 20px !important; }
  .hero h1 { font-size: 24px !important; }
}


/* ============================================================
   RESPONSIVE MODULES 2, 3A, 3B, 4A, 4B — patch ciblé mobile
   ============================================================ */

/* ── COMMUN TOUS MODULES ── */
@media (max-width: 768px) {
  #page-m2 .main, #page-m3a .main, #page-m3b .main,
  #page-m4a .main, #page-m4b .main {
    padding: 1.5rem 1rem 3rem;
    overflow-x: hidden;
  }
  #page-m2 .hero-inner, #page-m3a .hero-inner, #page-m3b .hero-inner,
  #page-m4a .hero-inner, #page-m4b .hero-inner {
    padding: 0 1rem;
  }
  /* Nav dots progress bar */
  #page-m2 .nav-progress, #page-m3a .nav-progress, #page-m3b .nav-progress,
  #page-m4a .nav-progress, #page-m4b .nav-progress {
    padding: 8px 12px;
    overflow-x: auto;
  }
  #page-m2 .nav-info, #page-m3a .nav-info, #page-m3b .nav-info,
  #page-m4a .nav-info, #page-m4b .nav-info {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
  }
  /* Titres hero */
  #page-m2 .hero h1, #page-m3a .hero h1, #page-m3b .hero h1,
  #page-m4a .hero h1, #page-m4b .hero h1 {
    font-size: clamp(20px, 6vw, 34px);
  }
  /* Quiz options : 1 colonne */
  #page-m2 .q-options, #page-m3a .q-options, #page-m3b .q-options,
  #page-m4a .q-options, #page-m4b .q-options {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  #page-m2 .q-opt, #page-m3a .q-opt, #page-m3b .q-opt,
  #page-m4a .q-opt, #page-m4b .q-opt {
    font-size: 13px;
    padding: 10px 12px;
    text-align: left;
  }
  /* Score final */
  #page-m2 .score-final, #page-m3a .score-final, #page-m3b .score-final,
  #page-m4a .score-final, #page-m4b .score-final {
    padding: 24px 16px;
  }
  #page-m2 .score-pills, #page-m3a .score-pills, #page-m3b .score-pills,
  #page-m4a .score-pills, #page-m4b .score-pills {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  /* Boutons footer */
  #page-m2 .footer-nav, #page-m3a .footer-nav, #page-m3b .footer-nav,
  #page-m4a .footer-nav, #page-m4b .footer-nav {
    flex-direction: column;
    gap: 10px;
    padding: 16px 12px;
  }
  #page-m2 .btn-next-mod, #page-m3a .btn-next-mod, #page-m3b .btn-next-mod,
  #page-m4a .btn-next-mod, #page-m4b .btn-next-mod,
  #page-m2 .btn-replay, #page-m3a .btn-replay, #page-m3b .btn-replay,
  #page-m4a .btn-replay, #page-m4b .btn-replay {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ══════════════════════════════════════
   MODULE 2 — Concepts clés
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Flip cards */
  #page-m2 .flip-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  #page-m2 .flip-card {
    height: 160px;
  }
  #page-m2 .flip-front-icon { font-size: 24px; }
  #page-m2 .flip-front-title { font-size: 13px; }

  /* Accordéon formats */
  #page-m2 .acc-head { padding: 12px 14px; }
  #page-m2 .acc-badge { display: none; }

  /* Plateformes PPF/PDP */
  #page-m2 .plat-grid { grid-template-columns: 1fr !important; }
  #page-m2 .plat-card { padding: 16px; }

  /* Flux e-facture */
  #page-m2 .flux-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  #page-m2 .flux-arrow { display: none; }
  #page-m2 .flux-node { width: 100%; text-align: left; }

  /* Glossaire */
  #page-m2 .glos-item { padding: 12px 14px; }
  #page-m2 .glos-term { font-size: 14px; }
}

@media (max-width: 480px) {
  #page-m2 .flip-grid { grid-template-columns: 1fr !important; }
  #page-m2 .flip-card { height: auto; min-height: 120px; }
}

/* ══════════════════════════════════════
   MODULE 3A — Dirigeants TPE
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Quiz orientation */
  #page-m3a .orient-step { padding: 20px 16px; }
  #page-m3a .orient-opts {
    flex-direction: column;
    gap: 8px;
  }
  #page-m3a .orient-btn {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    font-size: 13px;
  }

  /* Tableau de coûts */
  #page-m3a .cost-table-wrap,
  #page-m3a .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
    border-radius: 8px;
  }
  #page-m3a .cost-table,
  #page-m3a table {
    min-width: 480px;
    font-size: 12px;
  }
  #page-m3a table th,
  #page-m3a table td { padding: 8px 10px; white-space: normal; }

  /* Simulateur de budget */
  #page-m3a .simu-wrap { padding: 16px; }
  #page-m3a .simu-sliders {
    flex-direction: column;
    gap: 12px;
  }
  #page-m3a .simu-slider-row {
    flex-direction: column;
    gap: 6px;
  }
  #page-m3a input[type="range"] { width: 100%; }
  #page-m3a .simu-results {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  #page-m3a .cost-var { font-size: 13px; }

  /* Scénarios personas */
  #page-m3a .scenario-header { flex-wrap: wrap; gap: 8px; }
  #page-m3a .scenario-tags { flex-wrap: wrap; }
  #page-m3a .scenario-case { padding: 14px; }

  /* Questions expert-comptable */
  #page-m3a .qec-item { padding: 12px 14px; font-size: 13px; }
  #page-m3a .qec-item button {
    padding: 6px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Checklist */
  #page-m3a .chk-item { padding: 10px 12px; }
}

/* ══════════════════════════════════════
   MODULE 3B — Secrétaires PME
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Simulateur interface logiciel */
  #page-m3b .simu-interface {
    border-radius: 10px;
    overflow: hidden;
  }
  #page-m3b .simu-topbar {
    padding: 8px 12px;
    font-size: 12px;
  }
  #page-m3b .simu-progress-steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 0;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  #page-m3b .simu-progress-steps::-webkit-scrollbar { display: none; }
  #page-m3b .simu-step { flex-shrink: 0; min-width: 80px; }
  #page-m3b .simu-step-label { font-size: 10px; }
  #page-m3b .simu-content-area { padding: 14px; }
  #page-m3b .simu-field-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  #page-m3b .simu-field { font-size: 12px; padding: 8px 10px; }
  #page-m3b .simu-nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  #page-m3b .simu-btn { font-size: 12px; padding: 8px 14px; }

  /* 6 statuts */
  #page-m3b .statuts-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  #page-m3b .statut-card { padding: 14px; }

  /* Cas d'anomalie */
  #page-m3b .anomalie-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  #page-m3b .anomalie-tabs::-webkit-scrollbar { display: none; }
  #page-m3b .anom-tab { flex-shrink: 0; font-size: 12px; padding: 8px 12px; }
  #page-m3b .anom-card { padding: 14px; }
  #page-m3b .anom-steps { gap: 8px; }
  #page-m3b .anom-step { font-size: 13px; }

  /* FAQ */
  #page-m3b .faq-q { font-size: 13px; }
  #page-m3b .faq-body { font-size: 13px; }

  /* Fiche réflexe */
  #page-m3b .fiche-grid { grid-template-columns: 1fr !important; }
  #page-m3b .fiche-head { padding: 14px; flex-wrap: wrap; gap: 8px; }
  #page-m3b .dl-btn { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════
   MODULE 4A — Dirigeants TPE (action)
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Roadmap migration */
  #page-m4a .roadmap {
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
  }
  #page-m4a .rm-step {
    width: 100% !important;
    display: flex;
    flex-direction: column;
  }
  #page-m4a .rm-left { width: 100%; padding: 12px 14px; }
  #page-m4a .rm-body { padding: 12px 14px; }
  #page-m4a .rm-connector { display: none; }

  /* Paramètres logiciel (accordéon) */
  #page-m4a .param-head { padding: 12px 14px; }
  #page-m4a .param-icon { font-size: 20px; }
  #page-m4a .param-body { padding: 12px 14px; font-size: 13px; }

  /* Checklist Jour J */
  #page-m4a .chk-item { padding: 10px 12px; font-size: 13px; }
  #page-m4a .launch-success { padding: 20px 16px; }

  /* Onglets messages */
  #page-m4a .comm-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  #page-m4a .comm-tabs::-webkit-scrollbar { display: none; }
  #page-m4a .comm-tab { flex-shrink: 0; font-size: 12px; padding: 8px 12px; }
  #page-m4a .msg-template,
  #page-m4a .template-box {
    padding: 14px;
    font-size: 13px;
  }
  #page-m4a .copy-msg-btn {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }

  /* Archivage avant/après */
  #page-m4a .archive-grid { grid-template-columns: 1fr !important; }
  #page-m4a .archive-card { padding: 14px; }

  /* Fiche de pilotage */
  #page-m4a .fiche-grid { grid-template-columns: 1fr !important; }
  #page-m4a .fiche-head { padding: 14px; flex-wrap: wrap; gap: 8px; }
  #page-m4a .dl-btn { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════
   MODULE 4B — Secrétaires PME (gestion)
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Dashboard simulé */
  #page-m4b .dash-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  #page-m4b .kpi-card { padding: 12px; }
  #page-m4b .kpi-num { font-size: 22px; }

  #page-m4b .dash-topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
  }
  #page-m4b .dash-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #page-m4b .dash-row {
    min-width: 400px;
    font-size: 12px;
    padding: 8px 10px;
  }
  #page-m4b .dash-row-client { font-size: 12px; }
  #page-m4b .dash-status { font-size: 10px; padding: 2px 7px; }

  /* Réconciliation */
  #page-m4b .recon-steps {
    flex-direction: column !important;
    gap: 10px;
    align-items: flex-start;
  }
  #page-m4b .recon-step { flex-direction: row; align-items: center; gap: 10px; }
  #page-m4b .recon-step-label { font-size: 12px; }
  #page-m4b .recon-table {
    overflow-x: auto;
    display: block;
    width: 100%;
  }
  #page-m4b .recon-table table { min-width: 360px; font-size: 12px; }

  /* Cas avancés */
  #page-m4b .cas-grid { gap: 8px; }
  #page-m4b .cas-head { padding: 12px 14px; }
  #page-m4b .cas-title { font-size: 13px; }
  #page-m4b .cas-body { padding: 12px 14px; font-size: 13px; }
  #page-m4b .cas-step { font-size: 13px; }

  /* Routine checklist */
  #page-m4b .routine-week { margin-bottom: 12px; }
  #page-m4b .rw-header { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  #page-m4b .rw-tasks { padding: 10px 12px; }
  #page-m4b .rw-task { font-size: 13px; padding: 6px 0; }

  /* Timeline traçabilité */
  #page-m4b .trace-timeline { padding: 14px; }
  #page-m4b .trace-card { padding: 10px 12px; }
  #page-m4b .trace-action { font-size: 13px; }
  #page-m4b .trace-detail { font-size: 12px; }

  /* Mémo avancé */
  #page-m4b .memo-grid { grid-template-columns: 1fr !important; }
  #page-m4b .memo-head { padding: 14px; flex-wrap: wrap; gap: 8px; }
  #page-m4b .dl-btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  #page-m4b .dash-kpi-row { grid-template-columns: 1fr 1fr !important; }
  #page-m4b .kpi-num { font-size: 18px; }
  #page-m4b .kpi-label { font-size: 10px; }
}


/* ============================================================
   PATCH PRÉCIS — Modules 3A, 3B, 4B (overflow et min-width)
   ============================================================ */

@media (max-width: 768px) {

  /* ── MODULE 3A ── */

  /* 1. Débloquer le tableau de coûts (overflow:hidden → auto) */
  #page-m3a .cost-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #page-m3a .cost-table {
    min-width: 420px;
    font-size: 12px;
  }
  #page-m3a .cost-table th,
  #page-m3a .cost-table td {
    padding: 8px 10px;
    white-space: normal;
    font-size: 12px;
  }

  /* 2. Simulateur — label min-width */
  #page-m3a .simu-row {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  #page-m3a .simu-row label {
    min-width: unset !important;
    font-size: 13px;
  }
  #page-m3a .simu-row .val {
    min-width: unset !important;
    text-align: left;
  }
  #page-m3a input[type="range"] { width: 100%; }

  /* 3. Résultats simulateur (classe namespaced) */
  #page-m3a .simu-results_m3a {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* 4. Quiz orientation — options en colonne */
  #page-m3a .orient-opts {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }
  #page-m3a .orient-btn {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    font-size: 13px;
  }

  /* 5. Questions expert-comptable */
  #page-m3a .qec-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  #page-m3a .qec-num { min-width: unset !important; }

  /* ── MODULE 3B ── */

  /* 6. Stepper vertical — body ne déborde pas */
  #page-m3b .stepper { padding: 0 2px; }
  #page-m3b .step-item {
    display: flex;
    gap: 12px;
    padding: 0 0 16px 0;
  }
  #page-m3b .step-body {
    flex: 1;
    min-width: 0;        /* empêche le débordement flex */
    overflow: hidden;
  }
  #page-m3b .step-card {
    padding: 12px 14px;
    overflow: hidden;
  }
  #page-m3b .step-title { font-size: 14px; }
  #page-m3b .step-detail { font-size: 13px; }

  /* 7. Interface simulateur — débloquer le scroll interne */
  #page-m3b .simu-interface {
    overflow: visible !important;
    border: 1px solid #e8e8e2;
  }
  #page-m3b .simu-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #page-m3b .simu-content-area {
    min-width: 0;
    padding: 12px;
  }
  #page-m3b .simu-field-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  #page-m3b .simu-field {
    font-size: 12px;
    padding: 8px 10px;
    word-break: break-word;
  }

  /* 8. Cas anomalie — step num min-width */
  #page-m3b .anom-card {
    overflow: visible !important;
  }
  #page-m3b .anom-steps { gap: 8px; }
  #page-m3b .anom-step { font-size: 12px; }

  /* 9. FAQ */
  #page-m3b .faq-list { overflow: visible !important; }
  #page-m3b .faq-q { font-size: 13px; padding: 12px 14px; }
  #page-m3b .faq-body { font-size: 13px; padding: 10px 14px; }

  /* 10. Fiche réflexe */
  #page-m3b .fiche-wrap { overflow: visible !important; }
  #page-m3b .fiche-grid { grid-template-columns: 1fr !important; }
  #page-m3b .fiche-section { padding: 12px 14px; }
  #page-m3b .fiche-item { font-size: 13px; }

  /* ── MODULE 4B ── */

  /* 11. Dashboard simulé — débloquer overflow */
  #page-m4b .dashboard {
    overflow: visible !important;
  }
  #page-m4b .dash-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #page-m4b .dash-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    padding: 10px;
    min-width: 0;
  }
  #page-m4b .kpi-card {
    padding: 10px 8px;
    min-width: 0;
  }
  #page-m4b .kpi-num { font-size: 20px; }
  #page-m4b .kpi-label { font-size: 10px; }

  /* 12. Liste factures scrollable */
  #page-m4b .dash-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  #page-m4b .dash-row {
    min-width: 380px;
    font-size: 12px;
  }
  #page-m4b .dash-row-num { min-width: unset !important; }
  #page-m4b .dash-row-amount { min-width: unset !important; }

  /* 13. Réconciliation — étapes scrollables */
  #page-m4b .recon-steps {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 4px;
  }
  #page-m4b .recon-step {
    min-width: 80px;
    flex-shrink: 0;
  }
  #page-m4b .recon-step-label { font-size: 10px; }

  /* 14. Tableau de réconciliation */
  #page-m4b .recon-table {
    overflow-x: auto !important;
    display: block;
    width: 100%;
  }
  #page-m4b .recon-table table {
    min-width: 320px;
    font-size: 12px;
  }

  /* 15. Cas avancés — débloquer */
  #page-m4b .cas-item { overflow: visible !important; }
  #page-m4b .cas-head { padding: 12px 14px; }
  #page-m4b .cas-body { padding: 12px 14px; font-size: 13px; }
  #page-m4b .cas-step { font-size: 12px; gap: 8px; }

  /* 16. Routine checklist — débloquer */
  #page-m4b .routine-wrap { overflow: visible !important; }
  #page-m4b .rw-tasks { overflow: visible !important; }
  #page-m4b .rw-task { font-size: 13px; padding: 8px 12px; }
  #page-m4b .rw-header { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  #page-m4b .rw-badge { font-size: 10px; }

  /* 17. Timeline traçabilité */
  #page-m4b .trace-timeline { padding: 12px; }
  #page-m4b .trace-card { padding: 10px 12px; min-width: 0; }
  #page-m4b .trace-action { font-size: 13px; word-break: break-word; }
  #page-m4b .trace-detail { font-size: 11px; }
  #page-m4b .trace-body { min-width: 0; flex: 1; overflow: hidden; }

  /* 18. Mémo avancé */
  #page-m4b .memo-wrap { overflow: visible !important; }
  #page-m4b .memo-grid { grid-template-columns: 1fr !important; }
  #page-m4b .memo-item { font-size: 13px; }
}

@media (max-width: 400px) {
  #page-m3a .cost-table { min-width: 340px; font-size: 11px; }
  #page-m4b .dash-row { min-width: 320px; }
  #page-m4b .kpi-num { font-size: 18px; }
}

/* ── Module m1 ──*/

  :root {
    --teal: #1D9E75;
    --teal-light: #E1F5EE;
    --teal-dark: #085041;
    --coral: #D85A30;
    --coral-light: #FAECE7;
    --purple: #534AB7;
    --purple-light: #EEEDFE;
    --amber: #BA7517;
    --amber-light: #FAEEDA;
    --gray: #5F5E5A;
    --gray-light: #F1EFE8;
    --text: #1a1a18;
    --text-muted: #6b6b67;
    --bg: #fafaf7;
    --white: #ffffff;
    --radius: 16px;
    --radius-sm: 10px;
  }

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

  
#page-m1 body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
  }

  /* ── HEADER ── */
  
#page-m1 .hero {
    background: var(--teal-dark);
    color: white;
    padding: 3rem 2rem 4rem;
    position: relative;
    overflow: hidden;
  }
  
#page-m1 .hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
  }
  
#page-m1 .hero::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
  }
  
#page-m1 .hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
  
#page-m1 .module-tag {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.15);
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 1.2rem;
  }
  
#page-m1 .hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
  }
  
#page-m1 .hero h1 span { color: #9FE1CB; }
  
#page-m1 .hero-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    flex-wrap: wrap;
  }
  
#page-m1 .hero-meta span::before { content: '⏱ '; }
  
#page-m1 .hero-meta span:last-child::before { content: '🎯 '; }

  /* ── PROGRESS BAR ── */
  
#page-m1 .progress-wrap { background: #e8e8e4; height: 5px; position: sticky; top: 0; z-index: 100; }
  
#page-m1 .progress-fill { height: 100%; width: 0%; background: var(--teal); transition: width 0.6s ease; }

  /* ── MAIN ── */
  
#page-m1 .main { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

  /* ── SECTION INTRO ── */
  
#page-m1 .intro-card {
    background: var(--white);
    border: 1px solid #e8e8e2;
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
  }
  
#page-m1 .intro-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
  }
  
#page-m1 .intro-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
  
#page-m1 .intro-card strong { color: var(--text); font-weight: 500; }

  /* ── SECTIONS ── */
  
#page-m1 .section-label {
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
#page-m1 .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--teal-light);
  }
  
#page-m1 .section-title {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 1.25rem;
    line-height: 1.25;
  }
  
#page-m1 .section-block { margin-bottom: 3rem; }

  /* ── WHY CARDS ── */
  
#page-m1 .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
  @media (max-width: 480px) { 
#page-m1 .why-grid { grid-template-columns: 1fr; } }
  
#page-m1 .why-card {
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
  }
  
#page-m1 .why-card.teal { background: var(--teal-light); }
  
#page-m1 .why-card.purple { background: var(--purple-light); }
  
#page-m1 .why-card.amber { background: var(--amber-light); }
  
#page-m1 .why-card.coral { background: var(--coral-light); }
  
#page-m1 .why-num {
    font-family: 'Syne', sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    opacity: 0.15;
    position: absolute;
    top: 8px; right: 14px;
  }
  
#page-m1 .why-card.teal .why-num { color: var(--teal-dark); }
  
#page-m1 .why-card.purple .why-num { color: var(--purple); }
  
#page-m1 .why-card.amber .why-num { color: var(--amber); }
  
#page-m1 .why-card.coral .why-num { color: var(--coral); }
  
#page-m1 .why-icon { font-size: 22px; margin-bottom: 10px; display: block; }
  
#page-m1 .why-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  
#page-m1 .why-card.teal h3 { color: var(--teal-dark); }
  
#page-m1 .why-card.purple h3 { color: #3C3489; }
  
#page-m1 .why-card.amber h3 { color: #633806; }
  
#page-m1 .why-card.coral h3 { color: #712B13; }
  
#page-m1 .why-card p { font-size: 13px; line-height: 1.5; color: var(--text-muted); }

  /* ── TIMELINE ── */
  
#page-m1 .timeline { position: relative; padding-left: 2rem; }
  
#page-m1 .timeline::before {
    content: '';
    position: absolute;
    left: 8px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--teal), var(--purple));
    border-radius: 2px;
  }
  
#page-m1 .tl-item { position: relative; margin-bottom: 1.5rem; }
  
#page-m1 .tl-dot {
    position: absolute;
    left: -24px; top: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--teal);
    background: var(--teal);
  }
  
#page-m1 .tl-item:nth-child(2) .tl-dot { background: #7F77DD; box-shadow: 0 0 0 2px #7F77DD; }
  
#page-m1 .tl-item:nth-child(3) .tl-dot { background: var(--purple); box-shadow: 0 0 0 2px var(--purple); }
  
#page-m1 .tl-date {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--teal);
    margin-bottom: 3px;
  }
  
#page-m1 .tl-item:nth-child(2) .tl-date { color: #7F77DD; }
  
#page-m1 .tl-item:nth-child(3) .tl-date { color: var(--purple); }
  
#page-m1 .tl-card {
    background: var(--white);
    border: 1px solid #e8e8e2;
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
  }
  
#page-m1 .tl-card h3 { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
  
#page-m1 .tl-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
  
#page-m1 .tl-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 99px;
    margin-top: 8px;
  }
  
#page-m1 .badge-teal { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m1 .badge-purple { background: var(--purple-light); color: #3C3489; }

  /* ── INTERACTIVE SIZE SELECTOR ── */
  
#page-m1 .selector-wrap {
    background: var(--white);
    border: 1px solid #e8e8e2;
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
#page-m1 .selector-label { font-size: 14px; font-weight: 500; margin-bottom: 1rem; }
  
#page-m1 .size-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.25rem; }
  
#page-m1 .size-btn {
    padding: 8px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid #e0e0da;
    border-radius: 99px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  
#page-m1 .size-btn:hover { border-color: var(--teal); color: var(--teal); }
  
#page-m1 .size-btn.active { background: var(--teal); border-color: var(--teal); color: white; }
  
#page-m1 .size-result {
    display: none;
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    animation: fadeIn 0.3s ease;
  }
  
#page-m1 .size-result.visible { display: block; }
  
#page-m1 .size-result.tpe { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m1 .size-result.pme { background: var(--purple-light); border-left: 3px solid var(--purple); }
  
#page-m1 .size-result.eti { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m1 .size-result.ge { background: var(--coral-light); border-left: 3px solid var(--coral); }
  
#page-m1 .result-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
  
#page-m1 .tpe .result-title { color: var(--teal-dark); }
  
#page-m1 .pme .result-title { color: #3C3489; }
  
#page-m1 .eti .result-title { color: #633806; }
  
#page-m1 .ge .result-title { color: #712B13; }
  
#page-m1 .result-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
  
#page-m1 .result-body strong { color: var(--text); font-weight: 500; }
  
#page-m1 .date-highlight {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 800;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
  }
  
#page-m1 .tpe .date-highlight { background: rgba(29,158,117,0.15); color: var(--teal-dark); }
  
#page-m1 .pme .date-highlight { background: rgba(83,74,183,0.12); color: #3C3489; }
  
#page-m1 .eti .date-highlight { background: rgba(186,117,23,0.15); color: #633806; }
  
#page-m1 .ge .date-highlight { background: rgba(216,90,48,0.12); color: #712B13; }

  /* ── BEFORE / AFTER ── */
  
#page-m1 .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 460px) { 
#page-m1 .ba-grid { grid-template-columns: 1fr; } }
  
#page-m1 .ba-col { border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m1 .ba-head {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 14px;
  }
  
#page-m1 .ba-col.before .ba-head { background: #e8e8e2; color: var(--gray); }
  
#page-m1 .ba-col.after .ba-head { background: var(--teal); color: white; }
  
#page-m1 .ba-items { background: var(--white); border: 1px solid #e8e8e2; border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  
#page-m1 .ba-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0ec;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
  }
  
#page-m1 .ba-item:last-child { border-bottom: none; }
  
#page-m1 .ba-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  
#page-m1 .before .ba-dot { background: #c4c4be; }
  
#page-m1 .after .ba-dot { background: var(--teal); }
  
#page-m1 .after .ba-item { color: #3a3a38; }

  /* ── ALERT BOX ── */
  
#page-m1 .alert {
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 1.5rem;
    background: var(--amber-light);
    border-left: 3px solid var(--amber);
  }
  
#page-m1 .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  
#page-m1 .alert p { font-size: 13px; color: #4A2800; line-height: 1.6; }
  
#page-m1 .alert p strong { font-weight: 500; }

  /* ── QUIZ ── */
  
#page-m1 .quiz-wrap {
    background: var(--white);
    border: 1px solid #e8e8e2;
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-top: 1rem;
  }
  
#page-m1 .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  
#page-m1 .quiz-counter {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
  }
  
#page-m1 .quiz-score-badge {
    font-size: 12px;
    font-weight: 500;
    background: var(--teal-light);
    color: var(--teal-dark);
    padding: 3px 10px;
    border-radius: 99px;
  }
  
#page-m1 .qbar-wrap { height: 3px; background: #eeeeea; border-radius: 2px; margin-bottom: 1.5rem; }
  
#page-m1 .qbar-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width 0.4s; }
  
#page-m1 .q-text-main { font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 1.25rem; color: var(--text); }
  
#page-m1 .q-options { display: flex; flex-direction: column; gap: 8px; }
  
#page-m1 .q-opt {
    padding: 11px 15px;
    border: 1.5px solid #e0e0da;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
    line-height: 1.45;
  }
  
#page-m1 .q-opt:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-light); }
  
#page-m1 .q-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m1 .q-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: #712B13; }
  
#page-m1 .q-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m1 .q-feedback {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-top: 12px;
    line-height: 1.6;
    display: none;
  }
  
#page-m1 .q-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m1 .q-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m1 .q-feedback.ko { background: var(--coral-light); color: #712B13; }
  
#page-m1 .q-next {
    margin-top: 1rem;
    padding: 9px 22px;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    background: var(--teal-dark);
    color: white;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    display: none;
    transition: opacity 0.2s;
  }
  
#page-m1 .q-next:hover { opacity: 0.85; }
  
#page-m1 .q-next.show { display: inline-block; animation: fadeIn 0.3s ease; }

  /* Score final */
  
#page-m1 .score-final {
    text-align: center;
    padding: 1rem 0;
    display: none;
    animation: fadeIn 0.4s ease;
  }
  
#page-m1 .score-final.show { display: block; }
  
#page-m1 .score-emoji { font-size: 52px; margin-bottom: 0.75rem; }
  
#page-m1 .score-big {
    font-family: 'Syne', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--teal-dark);
    line-height: 1;
    margin-bottom: 0.4rem;
  }
  
#page-m1 .score-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
  
#page-m1 .score-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m1 .score-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 99px;
  }
  
#page-m1 .score-pill.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m1 .score-pill.ko { background: var(--coral-light); color: #712B13; }
  
#page-m1 .score-msg { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 380px; margin: 0 auto 1.5rem; }
  
#page-m1 .btn-replay {
    padding: 10px 26px;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid var(--teal);
    border-radius: 99px;
    background: transparent;
    color: var(--teal-dark);
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.15s;
  }
  
#page-m1 .btn-replay:hover { background: var(--teal-light); }
  
#page-m1 .btn-next-mod {
    padding: 10px 26px;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    background: var(--teal-dark);
    border: none;
    border-radius: 99px;
    color: white;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  
#page-m1 .btn-next-mod:hover { opacity: 0.85; }

  /* ── FOOTER NAV ── */
  
#page-m1 .footer-nav {
    background: var(--white);
    border-top: 1px solid #e8e8e2;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: 0;
  }
  
#page-m1 .nav-info { font-size: 12px; color: var(--text-muted); }
  
#page-m1 .nav-dots { display: flex; gap: 6px; }
  
#page-m1 .nav-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #d8d8d2;
    transition: background 0.3s;
  }
  
#page-m1 .nav-dot.done { background: var(--teal); }
  
#page-m1 .nav-dot.active { background: var(--teal-dark); transform: scale(1.2); }

  /* ── ANIMATIONS ── */
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  
#page-m1 .section-block { animation: fadeIn 0.5s ease both; }
  
#page-m1 .section-block:nth-child(2) { animation-delay: 0.1s; }
  
#page-m1 .section-block:nth-child(3) { animation-delay: 0.2s; }
  
#page-m1 .section-block:nth-child(4) { animation-delay: 0.3s; }

/* ── Module m2 ──*/

  :root {
    --teal: #1D9E75;
    --teal-light: #E1F5EE;
    --teal-dark: #085041;
    --coral: #D85A30;
    --coral-light: #FAECE7;
    --purple: #534AB7;
    --purple-light: #EEEDFE;
    --purple-dark: #3C3489;
    --amber: #BA7517;
    --amber-light: #FAEEDA;
    --amber-dark: #633806;
    --gray: #5F5E5A;
    --gray-light: #F1EFE8;
    --text: #1a1a18;
    --text-muted: #6b6b67;
    --bg: #fafaf7;
    --white: #ffffff;
    --radius: 16px;
    --radius-sm: 10px;
  }
  
#page-m2 * { box-sizing: border-box; margin: 0; padding: 0; }
  
#page-m2 body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }

  /* PROGRESS */
  
#page-m2 .progress-wrap { background: #e8e8e4; height: 5px; position: sticky; top: 0; z-index: 100; }
  
#page-m2 .progress-fill { height: 100%; width: 0%; background: var(--purple); transition: width 0.5s ease; }

  /* HERO */
  
#page-m2 .hero { background: var(--purple-dark); color: white; padding: 3rem 2rem 4rem; position: relative; overflow: hidden; }
  
#page-m2 .hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); }
  
#page-m2 .hero::after { content: ''; position: absolute; bottom: -50px; left: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.04); }
  
#page-m2 .hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
  
#page-m2 .module-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 5px 14px; border-radius: 99px; margin-bottom: 1.2rem; }
  
#page-m2 .hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(26px, 5vw, 40px); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
  
#page-m2 .hero h1 span { color: #AFA9EC; }
  
#page-m2 .hero-meta { display: flex; gap: 1.5rem; font-size: 13px; color: rgba(255,255,255,0.65); flex-wrap: wrap; }

  /* MAIN */
  
#page-m2 .main { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

  /* INTRO */
  
#page-m2 .intro-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 2.5rem; display: flex; gap: 1.25rem; align-items: flex-start; }
  
#page-m2 .intro-icon { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
  
#page-m2 .intro-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
  
#page-m2 .intro-card p + p { margin-top: 8px; }
  
#page-m2 .intro-card strong { color: var(--text); font-weight: 500; }

  /* SECTION */
  
#page-m2 .section-block { margin-bottom: 3rem; animation: fadeIn 0.5s ease both; }
  
#page-m2 .section-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 8px; }
  
#page-m2 .section-label::after { content: ''; flex: 1; height: 1px; background: var(--purple-light); }
  
#page-m2 .section-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.25; }

  /* FACTURE TYPES — FLIP CARDS */
  
#page-m2 .flip-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 1.5rem; }
  @media (max-width: 500px) { 
#page-m2 .flip-grid { grid-template-columns: 1fr; } }
  
#page-m2 .flip-card { perspective: 800px; height: 200px; cursor: pointer; }
  
#page-m2 .flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.55s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }
  
#page-m2 .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
  
#page-m2 .flip-front, #page-m2 .flip-back { position: absolute; inset: 0; border-radius: var(--radius-sm); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; }
  
#page-m2 .flip-front { border: 1px solid #e8e8e2; background: var(--white); }
  
#page-m2 .flip-back { transform: rotateY(180deg); }
  
#page-m2 .flip-back.teal { background: var(--teal-light); border: 1px solid rgba(29,158,117,0.2); }
  
#page-m2 .flip-back.purple { background: var(--purple-light); border: 1px solid rgba(83,74,183,0.2); }
  
#page-m2 .flip-back.amber { background: var(--amber-light); border: 1px solid rgba(186,117,23,0.2); }
  
#page-m2 .flip-front-icon { font-size: 26px; }
  
#page-m2 .flip-front-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
  
#page-m2 .flip-front-hint { font-size: 11px; color: var(--text-muted); }
  
#page-m2 .flip-back p { font-size: 12px; line-height: 1.55; }
  
#page-m2 .flip-back.teal p { color: var(--teal-dark); }
  
#page-m2 .flip-back.purple p { color: var(--purple-dark); }
  
#page-m2 .flip-back.amber p { color: var(--amber-dark); }
  
#page-m2 .flip-back-tag { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
  
#page-m2 .flip-back.teal .flip-back-tag { color: var(--teal-dark); }
  
#page-m2 .flip-back.purple .flip-back-tag { color: var(--purple-dark); }
  
#page-m2 .flip-back.amber .flip-back-tag { color: var(--amber-dark); }

  /* FORMATS — ACCORDION */
  
#page-m2 .accordion { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.5rem; }
  
#page-m2 .acc-item { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m2 .acc-head { display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
  
#page-m2 .acc-head:hover { background: var(--bg); }
  
#page-m2 .acc-icon { font-size: 18px; flex-shrink: 0; }
  
#page-m2 .acc-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; flex: 1; }
  
#page-m2 .acc-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
  
#page-m2 .badge-obligatoire { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m2 .badge-optionnel { background: var(--gray-light); color: var(--gray); }
  
#page-m2 .badge-mixte { background: var(--purple-light); color: var(--purple-dark); }
  
#page-m2 .acc-chevron { font-size: 12px; color: var(--text-muted); transition: transform 0.3s; flex-shrink: 0; }
  
#page-m2 .acc-item.open .acc-chevron { transform: rotate(180deg); }
  
#page-m2 .acc-body { display: none; padding: 0 1.25rem 1.25rem; }
  
#page-m2 .acc-item.open .acc-body { display: block; animation: fadeIn 0.2s ease; }
  
#page-m2 .acc-body p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
  
#page-m2 .acc-body p + p { margin-top: 8px; }
  
#page-m2 .acc-body strong { color: var(--text); font-weight: 500; }
  
#page-m2 .acc-example { display: inline-block; margin-top: 10px; font-size: 12px; font-family: 'DM Sans', sans-serif; font-style: italic; background: var(--bg); border: 1px solid #e0e0da; border-radius: 6px; padding: 6px 12px; color: var(--text-muted); }

  /* PLATEFORMES — CARDS COMPARÉES */
  
#page-m2 .plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.5rem; }
  @media (max-width: 460px) { 
#page-m2 .plat-grid { grid-template-columns: 1fr; } }
  
#page-m2 .plat-card { border-radius: var(--radius-sm); border: 1px solid #e8e8e2; background: var(--white); overflow: hidden; }
  
#page-m2 .plat-head { padding: 1rem 1.25rem 0.75rem; }
  
#page-m2 .plat-logo { font-size: 22px; margin-bottom: 8px; }
  
#page-m2 .plat-name { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 3px; }
  
#page-m2 .plat-name.ppf { color: var(--teal-dark); }
  
#page-m2 .plat-name.pdp { color: var(--purple-dark); }
  
#page-m2 .plat-sub { font-size: 12px; color: var(--text-muted); }
  
#page-m2 .plat-divider { height: 1px; background: #f0f0ec; margin: 0 1.25rem; }
  
#page-m2 .plat-body { padding: 0.75rem 1.25rem 1.25rem; }
  
#page-m2 .plat-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 7px; line-height: 1.45; }
  
#page-m2 .plat-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  
#page-m2 .ppf .plat-dot { background: var(--teal); }
  
#page-m2 .pdp .plat-dot { background: var(--purple); }
  
#page-m2 .plat-tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; margin-top: 6px; }
  
#page-m2 .plat-tag.ppf { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m2 .plat-tag.pdp { background: var(--purple-light); color: var(--purple-dark); }

  /* FLUX ANIMÉ */
  
#page-m2 .flux-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
  
#page-m2 .flux-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 1.25rem; text-align: center; letter-spacing: 0.05em; }
  
#page-m2 .flux-row { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; overflow-x: auto; }
  
#page-m2 .flux-node { text-align: center; min-width: 80px; flex-shrink: 0; }
  
#page-m2 .flux-bubble { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 6px; border: 2px solid transparent; }
  
#page-m2 .flux-bubble.emetteur { background: var(--teal-light); border-color: rgba(29,158,117,0.3); }
  
#page-m2 .flux-bubble.plateforme { background: var(--purple-light); border-color: rgba(83,74,183,0.3); }
  
#page-m2 .flux-bubble.dgfip { background: var(--amber-light); border-color: rgba(186,117,23,0.3); }
  
#page-m2 .flux-bubble.receveur { background: var(--coral-light); border-color: rgba(216,90,48,0.25); }
  
#page-m2 .flux-label { font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.3; }
  
#page-m2 .flux-arrow { display: flex; flex-direction: column; align-items: center; padding: 0 6px; flex-shrink: 0; margin-bottom: 20px; }
  
#page-m2 .flux-arrow-line { width: 32px; height: 2px; background: linear-gradient(to right, var(--purple), var(--teal)); border-radius: 2px; position: relative; }
  
#page-m2 .flux-arrow-line::after { content: '▶'; position: absolute; right: -8px; top: -6px; font-size: 10px; color: var(--teal); }
  
#page-m2 .flux-arrow-text { font-size: 10px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
  
#page-m2 .flux-note { margin-top: 1rem; font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; padding: 8px 12px; background: var(--bg); border-radius: var(--radius-sm); }

  /* GLOSSAIRE INTERACTIF */
  
#page-m2 .glossaire { display: flex; flex-direction: column; gap: 0; border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m2 .glos-item { border-bottom: 1px solid #f0f0ec; }
  
#page-m2 .glos-item:last-child { border-bottom: none; }
  
#page-m2 .glos-head { display: flex; align-items: center; gap: 12px; padding: 0.9rem 1.25rem; cursor: pointer; background: var(--white); transition: background 0.15s; user-select: none; }
  
#page-m2 .glos-head:hover { background: var(--bg); }
  
#page-m2 .glos-term { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; flex: 1; color: var(--text); }
  
#page-m2 .glos-abbr { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 99px; background: var(--gray-light); color: var(--gray); white-space: nowrap; }
  
#page-m2 .glos-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.3s; }
  
#page-m2 .glos-item.open .glos-chevron { transform: rotate(180deg); }
  
#page-m2 .glos-body { display: none; padding: 0 1.25rem 1rem 1.25rem; background: var(--white); }
  
#page-m2 .glos-item.open .glos-body { display: block; animation: fadeIn 0.2s ease; }
  
#page-m2 .glos-body p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
  
#page-m2 .glos-body strong { color: var(--text); font-weight: 500; }
  
#page-m2 .glos-body .example { margin-top: 8px; font-size: 12px; font-style: italic; color: var(--purple); }

  /* ALERT */
  
#page-m2 .alert { border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; margin-top: 1.25rem; }
  
#page-m2 .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  
#page-m2 .alert p { font-size: 13px; line-height: 1.6; }
  
#page-m2 .alert p strong { font-weight: 500; }
  
#page-m2 .alert.amber { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m2 .alert.amber p { color: #4A2800; }
  
#page-m2 .alert.teal { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m2 .alert.teal p { color: var(--teal-dark); }
  
#page-m2 .alert.purple { background: var(--purple-light); border-left: 3px solid var(--purple); }
  
#page-m2 .alert.purple p { color: var(--purple-dark); }

  /* QUIZ */
  
#page-m2 .quiz-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-top: 1rem; }
  
#page-m2 .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  
#page-m2 .quiz-counter { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  
#page-m2 .quiz-score-badge { font-size: 12px; font-weight: 500; background: var(--purple-light); color: var(--purple-dark); padding: 3px 10px; border-radius: 99px; }
  
#page-m2 .qbar-wrap { height: 3px; background: #eeeeea; border-radius: 2px; margin-bottom: 1.5rem; }
  
#page-m2 .qbar-fill { height: 100%; background: var(--purple); border-radius: 2px; transition: width 0.4s; }
  
#page-m2 .q-text-main { font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 1.25rem; color: var(--text); }
  
#page-m2 .q-options { display: flex; flex-direction: column; gap: 8px; }
  
#page-m2 .q-opt { padding: 11px 15px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; transition: all 0.15s; line-height: 1.45; }
  
#page-m2 .q-opt:hover:not(:disabled) { border-color: var(--purple); color: var(--purple-dark); background: var(--purple-light); }
  
#page-m2 .q-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m2 .q-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: #712B13; }
  
#page-m2 .q-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m2 .q-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.6; display: none; }
  
#page-m2 .q-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m2 .q-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m2 .q-feedback.ko { background: var(--coral-light); color: #712B13; }
  
#page-m2 .q-next { margin-top: 1rem; padding: 9px 22px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--purple-dark); color: white; border: none; border-radius: 99px; cursor: pointer; display: none; transition: opacity 0.2s; }
  
#page-m2 .q-next:hover { opacity: 0.85; }
  
#page-m2 .q-next.show { display: inline-block; animation: fadeIn 0.3s ease; }

  /* SCORE FINAL */
  
#page-m2 .score-final { text-align: center; padding: 1rem 0; display: none; animation: fadeIn 0.4s ease; }
  
#page-m2 .score-final.show { display: block; }
  
#page-m2 .score-emoji { font-size: 52px; margin-bottom: 0.75rem; }
  
#page-m2 .score-big { font-family: 'Syne', sans-serif; font-size: 48px; font-weight: 800; color: var(--purple-dark); line-height: 1; margin-bottom: 0.4rem; }
  
#page-m2 .score-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
  
#page-m2 .score-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m2 .score-pill { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 99px; }
  
#page-m2 .score-pill.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m2 .score-pill.ko { background: var(--coral-light); color: #712B13; }
  
#page-m2 .score-msg { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 380px; margin: 0 auto 1.5rem; }
  
#page-m2 .btn-replay { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; border: 1.5px solid var(--purple); border-radius: 99px; background: transparent; color: var(--purple-dark); cursor: pointer; margin-right: 8px; transition: all 0.15s; }
  
#page-m2 .btn-replay:hover { background: var(--purple-light); }
  
#page-m2 .btn-next-mod { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--purple-dark); border: none; border-radius: 99px; color: white; cursor: pointer; transition: opacity 0.15s; }
  
#page-m2 .btn-next-mod:hover { opacity: 0.85; }

  /* FOOTER NAV */
  
#page-m2 .footer-nav { background: var(--white); border-top: 1px solid #e8e8e2; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; bottom: 0; }
  
#page-m2 .nav-info { font-size: 12px; color: var(--text-muted); }
  
#page-m2 .nav-dots { display: flex; gap: 6px; }
  
#page-m2 .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d8d2; transition: all 0.3s; }
  
#page-m2 .nav-dot.done { background: var(--purple); opacity: 0.4; }
  
#page-m2 .nav-dot.active { background: var(--purple-dark); transform: scale(1.2); }

  /* GLOSSAIRE DOWNLOAD */
  
#page-m2 .dl-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.25rem; padding: 10px 20px; border: 1.5px solid var(--purple); border-radius: 99px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--purple-dark); background: transparent; cursor: pointer; transition: background 0.15s; text-decoration: none; }
  
#page-m2 .dl-btn:hover { background: var(--purple-light); }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  
#page-m2 .section-block:nth-child(2) { animation-delay: 0.05s; }
  
#page-m2 .section-block:nth-child(3) { animation-delay: 0.1s; }
  
#page-m2 .section-block:nth-child(4) { animation-delay: 0.15s; }
  
#page-m2 .section-block:nth-child(5) { animation-delay: 0.2s; }

/* ── Module m3a ──*/

  :root {
    --coral: #D85A30; --coral-light: #FAECE7; --coral-dark: #712B13;
    --teal: #1D9E75; --teal-light: #E1F5EE; --teal-dark: #085041;
    --purple: #534AB7; --purple-light: #EEEDFE; --purple-dark: #3C3489;
    --amber: #BA7517; --amber-light: #FAEEDA; --amber-dark: #633806;
    --gray: #5F5E5A; --gray-light: #F1EFE8;
    --text: #1a1a18; --text-muted: #6b6b67; --bg: #fafaf7; --white: #ffffff;
    --radius: 16px; --radius-sm: 10px;
  }
  
#page-m3a * { box-sizing: border-box; margin: 0; padding: 0; }
  
#page-m3a body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }
  
#page-m3a .progress-wrap { background: #e8e8e4; height: 5px; position: sticky; top: 0; z-index: 100; }
  
#page-m3a .progress-fill { height: 100%; width: 0%; background: var(--coral); transition: width 0.5s ease; }
  
#page-m3a .hero { background: var(--coral-dark); color: white; padding: 3rem 2rem 4rem; position: relative; overflow: hidden; }
  
#page-m3a .hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); }
  
#page-m3a .hero::after { content: ''; position: absolute; bottom: -50px; left: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.04); }
  
#page-m3a .hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
  
#page-m3a .module-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 5px 14px; border-radius: 99px; margin-bottom: 0.5rem; }
  
#page-m3a .parcours-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(245,196,179,0.3); color: #F5C4B3; padding: 4px 12px; border-radius: 99px; margin-left: 8px; }
  
#page-m3a .hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(26px, 5vw, 40px); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; margin-top: 0.8rem; }
  
#page-m3a .hero h1 span { color: #F0997B; }
  
#page-m3a .hero-meta { display: flex; gap: 1.5rem; font-size: 13px; color: rgba(255,255,255,0.65); flex-wrap: wrap; }
  
#page-m3a .main { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
  
#page-m3a .intro-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 2.5rem; display: flex; gap: 1.25rem; align-items: flex-start; }
  
#page-m3a .intro-icon { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
  
#page-m3a .intro-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
  
#page-m3a .intro-card p + p { margin-top: 8px; }
  
#page-m3a .intro-card strong { color: var(--text); font-weight: 500; }
  
#page-m3a .section-block { margin-bottom: 3rem; animation: fadeIn 0.5s ease both; }
  
#page-m3a .section-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 8px; }
  
#page-m3a .section-label::after { content: ''; flex: 1; height: 1px; background: var(--coral-light); }
  
#page-m3a .section-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.25; }
  
#page-m3a .alert { border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; margin-top: 1.25rem; }
  
#page-m3a .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  
#page-m3a .alert p { font-size: 13px; line-height: 1.6; }
  
#page-m3a .alert p strong { font-weight: 500; }
  
#page-m3a .alert.amber { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m3a .alert.amber p { color: #4A2800; }
  
#page-m3a .alert.teal { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m3a .alert.teal p { color: var(--teal-dark); }
  
#page-m3a .alert.coral { background: var(--coral-light); border-left: 3px solid var(--coral); }
  
#page-m3a .alert.coral p { color: var(--coral-dark); }

  /* ORIENTATION */
  
#page-m3a .orient-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 1.5rem; }
  
#page-m3a .orient-step { display: none; }
  
#page-m3a .orient-step.active { display: block; animation: fadeIn 0.3s ease; }
  
#page-m3a .orient-question { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 1.25rem; line-height: 1.5; }
  
#page-m3a .orient-opts { display: flex; flex-direction: column; gap: 8px; }
  
#page-m3a .orient-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; transition: all 0.15s; line-height: 1.4; }
  
#page-m3a .orient-btn:hover { border-color: var(--coral); color: var(--coral-dark); background: var(--coral-light); }
  
#page-m3a .orient-btn-icon { font-size: 20px; flex-shrink: 0; }
  
#page-m3a .orient-result { border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; animation: fadeIn 0.35s ease; }
  
#page-m3a .orient-result.ppf { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m3a .orient-result.pdp { background: var(--purple-light); border-left: 3px solid var(--purple); }
  
#page-m3a .orient-result.both { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m3a .orient-result-title { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  
#page-m3a .orient-result.ppf .orient-result-title { color: var(--teal-dark); }
  
#page-m3a .orient-result.pdp .orient-result-title { color: var(--purple-dark); }
  
#page-m3a .orient-result.both .orient-result-title { color: var(--amber-dark); }
  
#page-m3a .orient-result p { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
  
#page-m3a .orient-result p strong { color: var(--text); font-weight: 500; }
  
#page-m3a .orient-restart { margin-top: 12px; font-size: 12px; color: var(--text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: 'DM Sans', sans-serif; }
  
#page-m3a .orient-progress { display: flex; gap: 6px; margin-bottom: 1rem; }
  
#page-m3a .op-dot { width: 6px; height: 6px; border-radius: 50%; background: #d8d8d2; transition: background 0.3s; }
  
#page-m3a .op-dot.done { background: var(--coral); }
  
#page-m3a .op-dot.active { background: var(--coral-dark); transform: scale(1.3); }

  /* COÛTS */
  
#page-m3a .cost-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.25rem; }
  
#page-m3a .cost-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  
#page-m3a .cost-table th { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 14px; text-align: left; background: var(--bg); color: var(--text-muted); border-bottom: 1px solid #e8e8e2; }
  
#page-m3a .cost-table td { padding: 11px 14px; border-bottom: 1px solid #f0f0ec; vertical-align: top; color: var(--text-muted); line-height: 1.5; }
  
#page-m3a .cost-table tr:last-child td { border-bottom: none; }
  
#page-m3a .cost-table td:first-child { font-weight: 500; color: var(--text); width: 38%; }
  
#page-m3a .cost-free { display: inline-block; background: var(--teal-light); color: var(--teal-dark); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
  
#page-m3a .cost-paid { display: inline-block; background: var(--amber-light); color: var(--amber-dark); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
  
#page-m3a .cost-var { display: inline-block; background: var(--purple-light); color: var(--purple-dark); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }

  /* SIMULATEUR */
  
#page-m3a .simu-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
  
#page-m3a .simu-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 1.25rem; }
  
#page-m3a .simu-row { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
  
#page-m3a .simu-row label { font-size: 13px; color: var(--text-muted); min-width: 180px; flex-shrink: 0; }
  
#page-m3a .simu-row input[type=range] { flex: 1; }
  
#page-m3a .simu-row .val { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; min-width: 52px; text-align: right; color: var(--text); }
  
#page-m3a .simu-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.25rem; }
  
#page-m3a .simu-card { border-radius: var(--radius-sm); padding: 1rem; }
  
#page-m3a .simu-card.ppf { background: var(--teal-light); }
  
#page-m3a .simu-card.pdp { background: var(--purple-light); }
  
#page-m3a .simu-card-label { font-size: 11px; font-weight: 700; font-family: 'Syne', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  
#page-m3a .simu-card.ppf .simu-card-label { color: var(--teal-dark); }
  
#page-m3a .simu-card.pdp .simu-card-label { color: var(--purple-dark); }
  
#page-m3a .simu-card-price { font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
  
#page-m3a .simu-card.ppf .simu-card-price { color: var(--teal-dark); }
  
#page-m3a .simu-card.pdp .simu-card-price { color: var(--purple-dark); }
  
#page-m3a .simu-card-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
  
#page-m3a .simu-note { font-size: 12px; color: var(--text-muted); font-style: italic; margin-top: 10px; line-height: 1.5; }

  /* SCÉNARIOS */
  
#page-m3a .scenario-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 1.5rem; }
  
#page-m3a .scenario-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.25rem; }
  
#page-m3a .scenario-tag-btn { padding: 7px 16px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; border: 1.5px solid #e0e0da; border-radius: 99px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
  
#page-m3a .scenario-tag-btn:hover { border-color: var(--coral); color: var(--coral-dark); }
  
#page-m3a .scenario-tag-btn.active { background: var(--coral-dark); border-color: var(--coral-dark); color: white; }
  
#page-m3a .scenario-case { display: none; }
  
#page-m3a .scenario-case.active { display: block; animation: fadeIn 0.3s ease; }
  
#page-m3a .scenario-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1rem; }
  
#page-m3a .scenario-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--coral-light); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  
#page-m3a .scenario-name { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  
#page-m3a .scenario-role { font-size: 12px; color: var(--text-muted); }
  
#page-m3a .scenario-situation { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; background: var(--bg); border-radius: var(--radius-sm); padding: 1rem 1.25rem; }
  
#page-m3a .scenario-reco { border-radius: var(--radius-sm); padding: 1rem 1.25rem; }
  
#page-m3a .scenario-reco.ppf { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m3a .scenario-reco.pdp { background: var(--purple-light); border-left: 3px solid var(--purple); }
  
#page-m3a .scenario-reco.both { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m3a .reco-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
  
#page-m3a .scenario-reco.ppf .reco-label { color: var(--teal-dark); }
  
#page-m3a .scenario-reco.pdp .reco-label { color: var(--purple-dark); }
  
#page-m3a .scenario-reco.both .reco-label { color: var(--amber-dark); }
  
#page-m3a .scenario-reco p { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
  
#page-m3a .scenario-reco p strong { color: var(--text); font-weight: 500; }

  /* QUESTIONS EC */
  
#page-m3a .qec-instructions { font-size: 13px; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.6; }
  
#page-m3a .qec-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }
  
#page-m3a .qec-item { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: all 0.15s; }
  
#page-m3a .qec-item:hover { border-color: var(--coral); background: var(--coral-light); }
  
#page-m3a .qec-item.copied { border-color: var(--teal); background: var(--teal-light); }
  
#page-m3a .qec-num { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 800; color: var(--coral); flex-shrink: 0; min-width: 22px; }
  
#page-m3a .qec-item.copied .qec-num { color: var(--teal-dark); }
  
#page-m3a .qec-content { flex: 1; }
  
#page-m3a .qec-text { font-size: 14px; color: var(--text); line-height: 1.5; }
  
#page-m3a .qec-item.copied .qec-text { color: var(--teal-dark); }
  
#page-m3a .qec-hint { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 4px; }
  
#page-m3a .qec-item.copied .qec-hint { color: #5DCAA5; }
  
#page-m3a .qec-copy-tag { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 99px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
  
#page-m3a .qec-copy-tag.idle { background: var(--gray-light); color: var(--gray); }
  
#page-m3a .qec-copy-tag.done { background: var(--teal-light); color: var(--teal-dark); }

  /* CHECKLIST */
  
#page-m3a .chk-counter { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
  
#page-m3a .chk-progress-bar { height: 4px; background: #e8e8e2; border-radius: 2px; margin-bottom: 12px; }
  
#page-m3a .chk-progress-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width 0.4s; }
  
#page-m3a .checklist { display: flex; flex-direction: column; gap: 0; border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m3a .chk-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f0f0ec; background: var(--white); cursor: pointer; transition: background 0.15s; user-select: none; }
  
#page-m3a .chk-item:last-child { border-bottom: none; }
  
#page-m3a .chk-item:hover { background: var(--bg); }
  
#page-m3a .chk-item.checked { background: var(--teal-light); }
  
#page-m3a .chk-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d0d0ca; background: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: all 0.2s; }
  
#page-m3a .chk-item.checked .chk-box { background: var(--teal); border-color: var(--teal); }
  
#page-m3a .chk-check { font-size: 11px; color: white; display: none; }
  
#page-m3a .chk-item.checked .chk-check { display: block; }
  
#page-m3a .chk-label { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 2px; }
  
#page-m3a .chk-item.checked .chk-label { color: var(--teal-dark); }
  
#page-m3a .chk-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
  
#page-m3a .chk-item.checked .chk-sub { color: #5DCAA5; }

  /* QUIZ */
  
#page-m3a .quiz-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-top: 1rem; }
  
#page-m3a .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  
#page-m3a .quiz-counter { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  
#page-m3a .quiz-score-badge { font-size: 12px; font-weight: 500; background: var(--coral-light); color: var(--coral-dark); padding: 3px 10px; border-radius: 99px; }
  
#page-m3a .qbar-wrap { height: 3px; background: #eeeeea; border-radius: 2px; margin-bottom: 1.5rem; }
  
#page-m3a .qbar-fill { height: 100%; background: var(--coral); border-radius: 2px; transition: width 0.4s; }
  
#page-m3a .q-text-main { font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 1.25rem; color: var(--text); }
  
#page-m3a .q-options { display: flex; flex-direction: column; gap: 8px; }
  
#page-m3a .q-opt { padding: 11px 15px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; transition: all 0.15s; line-height: 1.45; }
  
#page-m3a .q-opt:hover:not(:disabled) { border-color: var(--coral); color: var(--coral-dark); background: var(--coral-light); }
  
#page-m3a .q-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m3a .q-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: var(--coral-dark); }
  
#page-m3a .q-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m3a .q-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.6; display: none; }
  
#page-m3a .q-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m3a .q-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m3a .q-feedback.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m3a .q-next { margin-top: 1rem; padding: 9px 22px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--coral-dark); color: white; border: none; border-radius: 99px; cursor: pointer; display: none; transition: opacity 0.2s; }
  
#page-m3a .q-next:hover { opacity: 0.85; }
  
#page-m3a .q-next.show { display: inline-block; animation: fadeIn 0.3s ease; }
  
#page-m3a .score-final { text-align: center; padding: 1rem 0; display: none; }
  
#page-m3a .score-final.show { display: block; animation: fadeIn 0.4s ease; }
  
#page-m3a .score-emoji { font-size: 52px; margin-bottom: 0.75rem; }
  
#page-m3a .score-big { font-family: 'Syne', sans-serif; font-size: 48px; font-weight: 800; color: var(--coral-dark); line-height: 1; margin-bottom: 0.4rem; }
  
#page-m3a .score-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
  
#page-m3a .score-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m3a .score-pill { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 99px; }
  
#page-m3a .score-pill.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m3a .score-pill.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m3a .score-msg { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 380px; margin: 0 auto 1.5rem; }
  
#page-m3a .btn-replay { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; border: 1.5px solid var(--coral); border-radius: 99px; background: transparent; color: var(--coral-dark); cursor: pointer; margin-right: 8px; transition: all 0.15s; }
  
#page-m3a .btn-replay:hover { background: var(--coral-light); }
  
#page-m3a .btn-next-mod { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--coral-dark); border: none; border-radius: 99px; color: white; cursor: pointer; transition: opacity 0.15s; }
  
#page-m3a .btn-next-mod:hover { opacity: 0.85; }

  
#page-m3a .footer-nav { background: var(--white); border-top: 1px solid #e8e8e2; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; bottom: 0; }
  
#page-m3a .nav-info { font-size: 12px; color: var(--text-muted); }
  
#page-m3a .nav-dots { display: flex; gap: 6px; }
  
#page-m3a .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d8d2; transition: all 0.3s; }
  
#page-m3a .nav-dot.done { background: var(--coral); opacity: 0.4; }
  
#page-m3a .nav-dot.active { background: var(--coral-dark); transform: scale(1.2); }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Module m3b ──*/

  :root {
    --blue: #1A6EBF; --blue-light: #E4F0FB; --blue-dark: #0C3D6E;
    --teal: #1D9E75; --teal-light: #E1F5EE; --teal-dark: #085041;
    --coral: #D85A30; --coral-light: #FAECE7; --coral-dark: #712B13;
    --amber: #BA7517; --amber-light: #FAEEDA; --amber-dark: #633806;
    --purple: #534AB7; --purple-light: #EEEDFE; --purple-dark: #3C3489;
    --gray: #5F5E5A; --gray-light: #F1EFE8;
    --text: #1a1a18; --text-muted: #6b6b67; --bg: #fafaf7; --white: #ffffff;
    --radius: 16px; --radius-sm: 10px;
  }
  
#page-m3b * { box-sizing: border-box; margin: 0; padding: 0; }
  
#page-m3b body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }

  
#page-m3b .progress-wrap { background: #e8e8e4; height: 5px; position: sticky; top: 0; z-index: 100; }
  
#page-m3b .progress-fill { height: 100%; width: 0%; background: var(--blue); transition: width 0.5s ease; }

  
#page-m3b .hero { background: var(--blue-dark); color: white; padding: 3rem 2rem 4rem; position: relative; overflow: hidden; }
  
#page-m3b .hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); }
  
#page-m3b .hero::after { content: ''; position: absolute; bottom: -50px; left: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.04); }
  
#page-m3b .hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
  
#page-m3b .module-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 5px 14px; border-radius: 99px; margin-bottom: 0.5rem; }
  
#page-m3b .parcours-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(160,200,240,0.3); color: #A0C8F0; padding: 4px 12px; border-radius: 99px; margin-left: 8px; }
  
#page-m3b .hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(26px, 5vw, 40px); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; margin-top: 0.8rem; }
  
#page-m3b .hero h1 span { color: #7CB8EE; }
  
#page-m3b .hero-meta { display: flex; gap: 1.5rem; font-size: 13px; color: rgba(255,255,255,0.65); flex-wrap: wrap; }

  
#page-m3b .main { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

  
#page-m3b .intro-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 2.5rem; display: flex; gap: 1.25rem; align-items: flex-start; }
  
#page-m3b .intro-icon { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
  
#page-m3b .intro-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
  
#page-m3b .intro-card p + p { margin-top: 8px; }
  
#page-m3b .intro-card strong { color: var(--text); font-weight: 500; }

  
#page-m3b .section-block { margin-bottom: 3rem; animation: fadeIn 0.5s ease both; }
  
#page-m3b .section-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 8px; }
  
#page-m3b .section-label::after { content: ''; flex: 1; height: 1px; background: var(--blue-light); }
  
#page-m3b .section-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.25; }

  
#page-m3b .alert { border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; margin-top: 1.25rem; }
  
#page-m3b .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  
#page-m3b .alert p { font-size: 13px; line-height: 1.6; }
  
#page-m3b .alert p strong { font-weight: 500; }
  
#page-m3b .alert.amber { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m3b .alert.amber p { color: #4A2800; }
  
#page-m3b .alert.teal { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m3b .alert.teal p { color: var(--teal-dark); }
  
#page-m3b .alert.blue { background: var(--blue-light); border-left: 3px solid var(--blue); }
  
#page-m3b .alert.blue p { color: var(--blue-dark); }
  
#page-m3b .alert.coral { background: var(--coral-light); border-left: 3px solid var(--coral); }
  
#page-m3b .alert.coral p { color: var(--coral-dark); }

  /* ── STEPPER ÉMISSION ── */
  
#page-m3b .stepper { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; }
  
#page-m3b .step-item { display: flex; gap: 0; }
  
#page-m3b .step-left { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; }
  
#page-m3b .step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 800; flex-shrink: 0; }
  
#page-m3b .step-line { width: 2px; flex: 1; min-height: 16px; margin: 2px 0; }
  
#page-m3b .step-item:last-child .step-line { display: none; }
  
#page-m3b .step-body { flex: 1; padding: 0 0 1.25rem 1rem; }
  
#page-m3b .step-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); padding: 1rem 1.25rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
  
#page-m3b .step-card:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(26,110,191,0.08); }
  
#page-m3b .step-card.active { border-color: var(--blue); background: var(--blue-light); }
  
#page-m3b .step-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
  
#page-m3b .step-subtitle { font-size: 12px; color: var(--text-muted); }
  
#page-m3b .step-detail { display: none; margin-top: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.65; padding-top: 10px; border-top: 1px solid #e8e8e2; }
  
#page-m3b .step-card.active .step-detail { display: block; }
  
#page-m3b .step-detail strong { color: var(--text); font-weight: 500; }
  
#page-m3b .step-detail .tip { display: inline-block; margin-top: 8px; background: var(--blue-light); color: var(--blue-dark); font-size: 12px; padding: 4px 10px; border-radius: 6px; }

  /* Couleurs par étape */
  
#page-m3b .step-item:nth-child(1) .step-num { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m3b .step-item:nth-child(1) .step-line { background: linear-gradient(to bottom, var(--blue), #7CB8EE); }
  
#page-m3b .step-item:nth-child(2) .step-num { background: var(--purple-light); color: var(--purple-dark); }
  
#page-m3b .step-item:nth-child(2) .step-line { background: linear-gradient(to bottom, #7CB8EE, var(--teal)); }
  
#page-m3b .step-item:nth-child(3) .step-num { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m3b .step-item:nth-child(3) .step-line { background: linear-gradient(to bottom, var(--teal), var(--amber)); }
  
#page-m3b .step-item:nth-child(4) .step-num { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m3b .step-item:nth-child(4) .step-line { background: linear-gradient(to bottom, var(--amber), var(--teal)); }
  
#page-m3b .step-item:nth-child(5) .step-num { background: var(--teal-light); color: var(--teal-dark); }

  /* ── STATUTS FACTURE ── */
  
#page-m3b .statuts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }
  @media (max-width: 480px) { 
#page-m3b .statuts-grid { grid-template-columns: 1fr; } }
  
#page-m3b .statut-card { border-radius: var(--radius-sm); padding: 1rem 1.25rem; border: 1px solid transparent; cursor: pointer; transition: all 0.2s; }
  
#page-m3b .statut-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  
#page-m3b .statut-card.depose { background: var(--blue-light); border-color: rgba(26,110,191,0.2); }
  
#page-m3b .statut-card.transmise { background: var(--purple-light); border-color: rgba(83,74,183,0.2); }
  
#page-m3b .statut-card.acceptee { background: var(--teal-light); border-color: rgba(29,158,117,0.2); }
  
#page-m3b .statut-card.rejetee { background: var(--coral-light); border-color: rgba(216,90,48,0.2); }
  
#page-m3b .statut-card.paiement { background: var(--amber-light); border-color: rgba(186,117,23,0.2); }
  
#page-m3b .statut-card.payee { background: #F0F9F0; border-color: rgba(29,158,117,0.3); }
  
#page-m3b .statut-icon { font-size: 20px; margin-bottom: 6px; }
  
#page-m3b .statut-name { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  
#page-m3b .statut-card.depose .statut-name { color: var(--blue-dark); }
  
#page-m3b .statut-card.transmise .statut-name { color: var(--purple-dark); }
  
#page-m3b .statut-card.acceptee .statut-name { color: var(--teal-dark); }
  
#page-m3b .statut-card.rejetee .statut-name { color: var(--coral-dark); }
  
#page-m3b .statut-card.paiement .statut-name { color: var(--amber-dark); }
  
#page-m3b .statut-card.payee .statut-name { color: var(--teal-dark); }
  
#page-m3b .statut-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
  
#page-m3b .statut-action { font-size: 11px; font-weight: 500; margin-top: 6px; }
  
#page-m3b .statut-card.depose .statut-action { color: var(--blue-dark); }
  
#page-m3b .statut-card.transmise .statut-action { color: var(--purple-dark); }
  
#page-m3b .statut-card.acceptee .statut-action { color: var(--teal-dark); }
  
#page-m3b .statut-card.rejetee .statut-action { color: var(--coral-dark); }
  
#page-m3b .statut-card.paiement .statut-action { color: var(--amber-dark); }
  
#page-m3b .statut-card.payee .statut-action { color: var(--teal-dark); }

  /* ── SIMULATION INTERFACE ── */
  
#page-m3b .simu-interface { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m3b .simu-topbar { background: #2A3548; color: white; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
  
#page-m3b .simu-dots { display: flex; gap: 5px; }
  
#page-m3b .simu-dot { width: 10px; height: 10px; border-radius: 50%; }
  
#page-m3b .simu-dot.red { background: #FF5F56; }
  
#page-m3b .simu-dot.yellow { background: #FFBD2E; }
  
#page-m3b .simu-dot.green { background: #27C93F; }
  
#page-m3b .simu-app-name { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }
  
#page-m3b .simu-body { padding: 1.25rem; }
  
#page-m3b .simu-steps-header { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 1rem; }
  
#page-m3b .simu-progress-steps { display: flex; gap: 0; margin-bottom: 1.5rem; overflow-x: auto; }
  
#page-m3b .simu-step { flex: 1; min-width: 80px; text-align: center; position: relative; }
  
#page-m3b .simu-step::after { content: ''; position: absolute; top: 12px; left: 50%; width: 100%; height: 2px; background: #e8e8e2; z-index: 0; }
  
#page-m3b .simu-step:last-child::after { display: none; }
  
#page-m3b .simu-step-dot { width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; position: relative; z-index: 1; transition: all 0.3s; }
  
#page-m3b .simu-step-dot.todo { background: #e8e8e2; color: var(--text-muted); }
  
#page-m3b .simu-step-dot.done { background: var(--teal); color: white; }
  
#page-m3b .simu-step-dot.active { background: var(--blue); color: white; box-shadow: 0 0 0 3px rgba(26,110,191,0.2); }
  
#page-m3b .simu-step-label { font-size: 10px; color: var(--text-muted); line-height: 1.3; }
  
#page-m3b .simu-step.active-step .simu-step-label { color: var(--blue-dark); font-weight: 500; }
  
#page-m3b .simu-step.done-step .simu-step-label { color: var(--teal-dark); }
  
#page-m3b .simu-content-area { background: var(--bg); border-radius: var(--radius-sm); padding: 1.25rem; margin-bottom: 1rem; min-height: 120px; animation: fadeIn 0.3s ease; }
  
#page-m3b .simu-field { margin-bottom: 12px; }
  
#page-m3b .simu-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
  
#page-m3b .simu-field-val { font-size: 14px; color: var(--text); padding: 8px 12px; background: var(--white); border: 1px solid #e0e0da; border-radius: 6px; }
  
#page-m3b .simu-field-val.highlight { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: 500; }
  
#page-m3b .simu-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  
#page-m3b .simu-nav { display: flex; justify-content: space-between; align-items: center; }
  
#page-m3b .simu-btn { padding: 8px 18px; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; border-radius: 99px; border: none; cursor: pointer; transition: opacity 0.15s; }
  
#page-m3b .simu-btn.prev { background: var(--gray-light); color: var(--gray); }
  
#page-m3b .simu-btn.prev:hover { opacity: 0.75; }
  
#page-m3b .simu-btn.next { background: var(--blue-dark); color: white; }
  
#page-m3b .simu-btn.next:hover { opacity: 0.85; }
  
#page-m3b .simu-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  
#page-m3b .simu-success { text-align: center; padding: 1.5rem; }
  
#page-m3b .simu-success-icon { font-size: 40px; margin-bottom: 10px; }
  
#page-m3b .simu-success-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--teal-dark); margin-bottom: 6px; }
  
#page-m3b .simu-success-sub { font-size: 13px; color: var(--text-muted); }
  
#page-m3b .simu-restart { margin-top: 12px; font-size: 12px; color: var(--blue); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: 'DM Sans', sans-serif; }

  /* ── CAS ANOMALIES ── */
  
#page-m3b .anomalie-tabs { display: flex; gap: 8px; margin-bottom: 1.25rem; flex-wrap: wrap; }
  
#page-m3b .anom-tab { padding: 7px 16px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; border: 1.5px solid #e0e0da; border-radius: 99px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
  
#page-m3b .anom-tab:hover { border-color: var(--blue); color: var(--blue-dark); }
  
#page-m3b .anom-tab.active { background: var(--blue-dark); border-color: var(--blue-dark); color: white; }
  
#page-m3b .anomalie-case { display: none; }
  
#page-m3b .anomalie-case.active { display: block; animation: fadeIn 0.3s ease; }
  
#page-m3b .anom-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m3b .anom-head { padding: 1rem 1.25rem; border-bottom: 1px solid #f0f0ec; display: flex; align-items: center; gap: 10px; }
  
#page-m3b .anom-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  
#page-m3b .anom-status-dot.red { background: var(--coral); }
  
#page-m3b .anom-status-dot.orange { background: var(--amber); }
  
#page-m3b .anom-status-dot.blue { background: var(--blue); }
  
#page-m3b .anom-head-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; flex: 1; }
  
#page-m3b .anom-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; }
  
#page-m3b .badge-rejet { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m3b .badge-retard { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m3b .badge-litige { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m3b .anom-body { padding: 1.25rem; }
  
#page-m3b .anom-situation { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; padding: 10px 14px; background: var(--bg); border-radius: var(--radius-sm); }
  
#page-m3b .anom-steps-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 10px; }
  
#page-m3b .anom-steps { display: flex; flex-direction: column; gap: 8px; }
  
#page-m3b .anom-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
  
#page-m3b .anom-step-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
  
#page-m3b .rejet .anom-step-num { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m3b .retard .anom-step-num { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m3b .litige .anom-step-num { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m3b .anom-step strong { color: var(--text); font-weight: 500; }
  
#page-m3b .anom-tip { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; margin-top: 1rem; padding: 8px 12px; border-radius: 6px; }
  
#page-m3b .rejet .anom-tip { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m3b .retard .anom-tip { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m3b .litige .anom-tip { background: var(--blue-light); color: var(--blue-dark); }

  /* ── FAQ INTERACTIVE ── */
  
#page-m3b .faq-list { display: flex; flex-direction: column; gap: 0; border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m3b .faq-item { border-bottom: 1px solid #f0f0ec; }
  
#page-m3b .faq-item:last-child { border-bottom: none; }
  
#page-m3b .faq-head { display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem; cursor: pointer; background: var(--white); transition: background 0.15s; user-select: none; }
  
#page-m3b .faq-head:hover { background: var(--bg); }
  
#page-m3b .faq-q { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; line-height: 1.4; }
  
#page-m3b .faq-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.3s; flex-shrink: 0; }
  
#page-m3b .faq-item.open .faq-chevron { transform: rotate(180deg); }
  
#page-m3b .faq-body { display: none; padding: 0 1.25rem 1rem 1.25rem; background: var(--white); }
  
#page-m3b .faq-item.open .faq-body { display: block; animation: fadeIn 0.2s ease; }
  
#page-m3b .faq-body p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
  
#page-m3b .faq-body p strong { color: var(--text); font-weight: 500; }
  
#page-m3b .faq-body p + p { margin-top: 8px; }

  /* ── FICHE RÉFLEXE ── */
  
#page-m3b .fiche-wrap { background: var(--white); border: 1.5px solid var(--blue); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m3b .fiche-head { background: var(--blue-dark); color: white; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 10px; }
  
#page-m3b .fiche-head-icon { font-size: 20px; }
  
#page-m3b .fiche-head-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; }
  
#page-m3b .fiche-head-sub { font-size: 12px; color: rgba(255,255,255,0.65); }
  
#page-m3b .fiche-body { padding: 1.25rem; }
  
#page-m3b .fiche-col-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }
  
#page-m3b .fiche-col-title.blue { color: var(--blue-dark); }
  
#page-m3b .fiche-col-title.teal { color: var(--teal-dark); }
  
#page-m3b .fiche-col-title.coral { color: var(--coral-dark); }
  
#page-m3b .fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media(max-width:480px) { 
#page-m3b .fiche-grid { grid-template-columns: 1fr; } }
  
#page-m3b .fiche-section { margin-bottom: 0; }
  
#page-m3b .fiche-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 7px; line-height: 1.45; }
  
#page-m3b .fiche-bullet { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  
#page-m3b .fiche-bullet.blue { background: var(--blue); }
  
#page-m3b .fiche-bullet.teal { background: var(--teal); }
  
#page-m3b .fiche-bullet.coral { background: var(--coral); }
  
#page-m3b .fiche-item strong { color: var(--text); font-weight: 500; }
  
#page-m3b .fiche-divider { height: 1px; background: #f0f0ec; margin: 1rem 0; }
  
#page-m3b .dl-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 1rem; padding: 10px 20px; border: 1.5px solid var(--blue); border-radius: 99px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--blue-dark); background: transparent; cursor: pointer; transition: background 0.15s; }
  
#page-m3b .dl-btn:hover { background: var(--blue-light); }

  /* ── CHECKLIST ── */
  
#page-m3b .chk-counter { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
  
#page-m3b .chk-progress-bar { height: 4px; background: #e8e8e2; border-radius: 2px; margin-bottom: 12px; }
  
#page-m3b .chk-progress-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width 0.4s; }
  
#page-m3b .checklist { display: flex; flex-direction: column; gap: 0; border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m3b .chk-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f0f0ec; background: var(--white); cursor: pointer; transition: background 0.15s; user-select: none; }
  
#page-m3b .chk-item:last-child { border-bottom: none; }
  
#page-m3b .chk-item:hover { background: var(--bg); }
  
#page-m3b .chk-item.checked { background: var(--teal-light); }
  
#page-m3b .chk-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d0d0ca; background: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: all 0.2s; }
  
#page-m3b .chk-item.checked .chk-box { background: var(--teal); border-color: var(--teal); }
  
#page-m3b .chk-check { font-size: 11px; color: white; display: none; }
  
#page-m3b .chk-item.checked .chk-check { display: block; }
  
#page-m3b .chk-label { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 2px; }
  
#page-m3b .chk-item.checked .chk-label { color: var(--teal-dark); }
  
#page-m3b .chk-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
  
#page-m3b .chk-item.checked .chk-sub { color: #5DCAA5; }

  /* ── QUIZ ── */
  
#page-m3b .quiz-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-top: 1rem; }
  
#page-m3b .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  
#page-m3b .quiz-counter { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  
#page-m3b .quiz-score-badge { font-size: 12px; font-weight: 500; background: var(--blue-light); color: var(--blue-dark); padding: 3px 10px; border-radius: 99px; }
  
#page-m3b .qbar-wrap { height: 3px; background: #eeeeea; border-radius: 2px; margin-bottom: 1.5rem; }
  
#page-m3b .qbar-fill { height: 100%; background: var(--blue); border-radius: 2px; transition: width 0.4s; }
  
#page-m3b .q-text-main { font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 1.25rem; color: var(--text); }
  
#page-m3b .q-options { display: flex; flex-direction: column; gap: 8px; }
  
#page-m3b .q-opt { padding: 11px 15px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; transition: all 0.15s; line-height: 1.45; }
  
#page-m3b .q-opt:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-light); }
  
#page-m3b .q-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m3b .q-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: var(--coral-dark); }
  
#page-m3b .q-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m3b .q-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.6; display: none; }
  
#page-m3b .q-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m3b .q-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m3b .q-feedback.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m3b .q-next { margin-top: 1rem; padding: 9px 22px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--blue-dark); color: white; border: none; border-radius: 99px; cursor: pointer; display: none; transition: opacity 0.2s; }
  
#page-m3b .q-next:hover { opacity: 0.85; }
  
#page-m3b .q-next.show { display: inline-block; animation: fadeIn 0.3s ease; }
  
#page-m3b .score-final { text-align: center; padding: 1rem 0; display: none; }
  
#page-m3b .score-final.show { display: block; animation: fadeIn 0.4s ease; }
  
#page-m3b .score-emoji { font-size: 52px; margin-bottom: 0.75rem; }
  
#page-m3b .score-big { font-family: 'Syne', sans-serif; font-size: 48px; font-weight: 800; color: var(--blue-dark); line-height: 1; margin-bottom: 0.4rem; }
  
#page-m3b .score-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
  
#page-m3b .score-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m3b .score-pill { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 99px; }
  
#page-m3b .score-pill.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m3b .score-pill.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m3b .score-msg { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 380px; margin: 0 auto 1.5rem; }
  
#page-m3b .btn-replay { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; border: 1.5px solid var(--blue); border-radius: 99px; background: transparent; color: var(--blue-dark); cursor: pointer; margin-right: 8px; transition: all 0.15s; }
  
#page-m3b .btn-replay:hover { background: var(--blue-light); }
  
#page-m3b .btn-next-mod { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--blue-dark); border: none; border-radius: 99px; color: white; cursor: pointer; transition: opacity 0.15s; }
  
#page-m3b .btn-next-mod:hover { opacity: 0.85; }

  
#page-m3b .footer-nav { background: var(--white); border-top: 1px solid #e8e8e2; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; bottom: 0; }
  
#page-m3b .nav-info { font-size: 12px; color: var(--text-muted); }
  
#page-m3b .nav-dots { display: flex; gap: 6px; }
  
#page-m3b .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d8d2; transition: all 0.3s; }
  
#page-m3b .nav-dot.done { background: var(--blue); opacity: 0.4; }
  
#page-m3b .nav-dot.active { background: var(--blue-dark); transform: scale(1.2); }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  
#page-m3b .section-block:nth-child(2) { animation-delay: 0.05s; }
  
#page-m3b .section-block:nth-child(3) { animation-delay: 0.1s; }
  
#page-m3b .section-block:nth-child(4) { animation-delay: 0.15s; }
  
#page-m3b .section-block:nth-child(5) { animation-delay: 0.2s; }
  
#page-m3b .section-block:nth-child(6) { animation-delay: 0.25s; }
  
#page-m3b .section-block:nth-child(7) { animation-delay: 0.3s; }

/* ── Module m4a ──*/

  :root {
    --green: #2E7D4F; --green-light: #E8F5EE; --green-dark: #1A4A2E;
    --coral: #D85A30; --coral-light: #FAECE7; --coral-dark: #712B13;
    --teal: #1D9E75; --teal-light: #E1F5EE; --teal-dark: #085041;
    --amber: #BA7517; --amber-light: #FAEEDA; --amber-dark: #633806;
    --purple: #534AB7; --purple-light: #EEEDFE; --purple-dark: #3C3489;
    --blue: #1A6EBF; --blue-light: #E4F0FB; --blue-dark: #0C3D6E;
    --gray: #5F5E5A; --gray-light: #F1EFE8;
    --text: #1a1a18; --text-muted: #6b6b67; --bg: #fafaf7; --white: #ffffff;
    --radius: 16px; --radius-sm: 10px;
  }
  
#page-m4a * { box-sizing: border-box; margin: 0; padding: 0; }
  
#page-m4a body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }

  
#page-m4a .progress-wrap { background: #e8e8e4; height: 5px; position: sticky; top: 0; z-index: 100; }
  
#page-m4a .progress-fill { height: 100%; width: 0%; background: var(--green); transition: width 0.5s ease; }

  
#page-m4a .hero { background: var(--green-dark); color: white; padding: 3rem 2rem 4rem; position: relative; overflow: hidden; }
  
#page-m4a .hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); }
  
#page-m4a .hero::after { content: ''; position: absolute; bottom: -50px; left: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.04); }
  
#page-m4a .hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
  
#page-m4a .module-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 5px 14px; border-radius: 99px; margin-bottom: 0.5rem; }
  
#page-m4a .parcours-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(160,220,185,0.3); color: #A0DCB9; padding: 4px 12px; border-radius: 99px; margin-left: 8px; }
  
#page-m4a .hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(26px, 5vw, 40px); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; margin-top: 0.8rem; }
  
#page-m4a .hero h1 span { color: #7DCCA0; }
  
#page-m4a .hero-meta { display: flex; gap: 1.5rem; font-size: 13px; color: rgba(255,255,255,0.65); flex-wrap: wrap; }

  
#page-m4a .main { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

  
#page-m4a .intro-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 2.5rem; display: flex; gap: 1.25rem; align-items: flex-start; }
  
#page-m4a .intro-icon { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
  
#page-m4a .intro-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
  
#page-m4a .intro-card p + p { margin-top: 8px; }
  
#page-m4a .intro-card strong { color: var(--text); font-weight: 500; }

  
#page-m4a .section-block { margin-bottom: 3rem; animation: fadeIn 0.5s ease both; }
  
#page-m4a .section-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 8px; }
  
#page-m4a .section-label::after { content: ''; flex: 1; height: 1px; background: var(--green-light); }
  
#page-m4a .section-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.25; }

  
#page-m4a .alert { border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; margin-top: 1.25rem; }
  
#page-m4a .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  
#page-m4a .alert p { font-size: 13px; line-height: 1.6; }
  
#page-m4a .alert p strong { font-weight: 500; }
  
#page-m4a .alert.amber { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m4a .alert.amber p { color: #4A2800; }
  
#page-m4a .alert.teal { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m4a .alert.teal p { color: var(--teal-dark); }
  
#page-m4a .alert.green { background: var(--green-light); border-left: 3px solid var(--green); }
  
#page-m4a .alert.green p { color: var(--green-dark); }
  
#page-m4a .alert.coral { background: var(--coral-light); border-left: 3px solid var(--coral); }
  
#page-m4a .alert.coral p { color: var(--coral-dark); }

  /* ── ROADMAP MIGRATION ── */
  
#page-m4a .roadmap { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; }
  
#page-m4a .rm-item { display: flex; gap: 0; }
  
#page-m4a .rm-left { display: flex; flex-direction: column; align-items: center; width: 44px; flex-shrink: 0; }
  
#page-m4a .rm-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  
#page-m4a .rm-line { width: 2px; flex: 1; min-height: 12px; margin: 3px 0; }
  
#page-m4a .rm-item:last-child .rm-line { display: none; }
  
#page-m4a .rm-body { flex: 1; padding: 0 0 1.25rem 1rem; }
  
#page-m4a .rm-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); padding: 1rem 1.25rem; }
  
#page-m4a .rm-week { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
  
#page-m4a .rm-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
  
#page-m4a .rm-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
  
#page-m4a .rm-desc strong { color: var(--text); font-weight: 500; }
  
#page-m4a .rm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  
#page-m4a .rm-tag { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 99px; }

  
#page-m4a .rm-item:nth-child(1) .rm-icon { background: var(--blue-light); }
  
#page-m4a .rm-item:nth-child(1) .rm-line { background: linear-gradient(to bottom, var(--blue), var(--purple)); }
  
#page-m4a .rm-item:nth-child(1) .rm-week { color: var(--blue-dark); }
  
#page-m4a .rm-item:nth-child(2) .rm-icon { background: var(--purple-light); }
  
#page-m4a .rm-item:nth-child(2) .rm-line { background: linear-gradient(to bottom, var(--purple), var(--amber)); }
  
#page-m4a .rm-item:nth-child(2) .rm-week { color: var(--purple-dark); }
  
#page-m4a .rm-item:nth-child(3) .rm-icon { background: var(--amber-light); }
  
#page-m4a .rm-item:nth-child(3) .rm-line { background: linear-gradient(to bottom, var(--amber), var(--teal)); }
  
#page-m4a .rm-item:nth-child(3) .rm-week { color: var(--amber-dark); }
  
#page-m4a .rm-item:nth-child(4) .rm-icon { background: var(--teal-light); }
  
#page-m4a .rm-item:nth-child(4) .rm-line { background: linear-gradient(to bottom, var(--teal), var(--green)); }
  
#page-m4a .rm-item:nth-child(4) .rm-week { color: var(--teal-dark); }
  
#page-m4a .rm-item:nth-child(5) .rm-icon { background: var(--green-light); }
  
#page-m4a .rm-item:nth-child(5) .rm-week { color: var(--green-dark); }

  
#page-m4a .tag-action { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4a .tag-info { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m4a .tag-check { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4a .tag-key { background: var(--amber-light); color: var(--amber-dark); }

  /* ── PARAMETRAGE LOGICIEL ── */
  
#page-m4a .param-accordion { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.5rem; }
  
#page-m4a .param-item { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m4a .param-head { display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem; cursor: pointer; transition: background 0.15s; user-select: none; }
  
#page-m4a .param-head:hover { background: var(--bg); }
  
#page-m4a .param-item.open .param-head { background: var(--green-light); }
  
#page-m4a .param-icon { font-size: 20px; flex-shrink: 0; }
  
#page-m4a .param-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; flex: 1; color: var(--text); }
  
#page-m4a .param-item.open .param-title { color: var(--green-dark); }
  
#page-m4a .param-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
  
#page-m4a .badge-obligatoire { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4a .badge-recommande { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4a .badge-optionnel { background: var(--gray-light); color: var(--gray); }
  
#page-m4a .param-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.3s; flex-shrink: 0; }
  
#page-m4a .param-item.open .param-chevron { transform: rotate(180deg); }
  
#page-m4a .param-body { display: none; padding: 0 1.25rem 1.25rem; }
  
#page-m4a .param-item.open .param-body { display: block; animation: fadeIn 0.2s ease; }
  
#page-m4a .param-body p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
  
#page-m4a .param-body p + p { margin-top: 8px; }
  
#page-m4a .param-body strong { color: var(--text); font-weight: 500; }
  
#page-m4a .param-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  
#page-m4a .param-field { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); border-radius: 6px; font-size: 12px; }
  
#page-m4a .param-field-label { color: var(--text-muted); flex: 1; }
  
#page-m4a .param-field-val { font-weight: 500; color: var(--text); font-family: 'DM Sans', sans-serif; }
  
#page-m4a .param-field-val.required { color: var(--coral-dark); }
  
#page-m4a .param-field-val.ok { color: var(--teal-dark); }

  /* ── SIMULATEUR PREMIÈRE FACTURE ── */
  
#page-m4a .pfacture-wrap { background: var(--white); border: 1.5px solid var(--green); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m4a .pfacture-head { background: var(--green-dark); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 10px; }
  
#page-m4a .pfacture-head-icon { font-size: 20px; }
  
#page-m4a .pfacture-head-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: white; }
  
#page-m4a .pfacture-head-sub { font-size: 12px; color: rgba(255,255,255,0.65); }
  
#page-m4a .pfacture-body { padding: 1.5rem; }

  /* Checklist interactive à cocher */
  
#page-m4a .launch-steps { display: flex; flex-direction: column; gap: 0; }
  
#page-m4a .launch-step { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid #f0f0ec; cursor: pointer; user-select: none; transition: all 0.15s; }
  
#page-m4a .launch-step:last-child { border-bottom: none; }
  
#page-m4a .launch-step.done { opacity: 0.75; }
  
#page-m4a .ls-box { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d0d0ca; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 11px; color: white; flex-shrink: 0; margin-top: 1px; transition: all 0.25s; }
  
#page-m4a .launch-step.done .ls-box { background: var(--green); border-color: var(--green); }
  
#page-m4a .ls-num { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; color: #d0d0ca; }
  
#page-m4a .launch-step.done .ls-num { display: none; }
  
#page-m4a .ls-check { display: none; }
  
#page-m4a .launch-step.done .ls-check { display: inline; }
  
#page-m4a .ls-content { flex: 1; }
  
#page-m4a .ls-title { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 3px; }
  
#page-m4a .launch-step.done .ls-title { text-decoration: line-through; color: var(--text-muted); }
  
#page-m4a .ls-detail { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
  
#page-m4a .ls-tag { font-size: 10px; font-weight: 700; font-family: 'Syne', sans-serif; padding: 2px 8px; border-radius: 99px; white-space: nowrap; align-self: flex-start; margin-top: 2px; flex-shrink: 0; }
  
#page-m4a .ls-tag.logiciel { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m4a .ls-tag.plateforme { background: var(--purple-light); color: var(--purple-dark); }
  
#page-m4a .ls-tag.client { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m4a .ls-tag.interne { background: var(--green-light); color: var(--green-dark); }
  
#page-m4a .launch-progress { margin-top: 1.25rem; }
  
#page-m4a .lp-bar { height: 5px; background: #e8e8e2; border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
  
#page-m4a .lp-fill { height: 100%; background: var(--green); border-radius: 99px; transition: width 0.4s; }
  
#page-m4a .lp-label { font-size: 12px; color: var(--text-muted); }
  
#page-m4a .lp-label span { font-weight: 600; color: var(--green-dark); }
  
#page-m4a .launch-success { display: none; text-align: center; padding: 1.5rem 1rem; animation: fadeIn 0.4s ease; }
  
#page-m4a .launch-success.show { display: block; }
  
#page-m4a .ls-success-icon { font-size: 44px; margin-bottom: 10px; }
  
#page-m4a .ls-success-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
  
#page-m4a .ls-success-sub { font-size: 13px; color: var(--text-muted); }
  
#page-m4a .ls-restart { margin-top: 12px; font-size: 12px; color: var(--green); background: none; border: none; cursor: pointer; text-decoration: underline; font-family: 'DM Sans', sans-serif; }

  /* ── COMMUNICATION ÉCOSYSTÈME ── */
  
#page-m4a .comm-tabs { display: flex; gap: 8px; margin-bottom: 1.25rem; flex-wrap: wrap; }
  
#page-m4a .comm-tab { padding: 7px 16px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; border: 1.5px solid #e0e0da; border-radius: 99px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
  
#page-m4a .comm-tab:hover { border-color: var(--green); color: var(--green-dark); }
  
#page-m4a .comm-tab.active { background: var(--green-dark); border-color: var(--green-dark); color: white; }
  
#page-m4a .comm-case { display: none; }
  
#page-m4a .comm-case.active { display: block; animation: fadeIn 0.3s ease; }
  
#page-m4a .comm-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m4a .comm-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid #f0f0ec; display: flex; align-items: center; gap: 10px; }
  
#page-m4a .comm-card-icon { font-size: 18px; }
  
#page-m4a .comm-card-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
  
#page-m4a .comm-card-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; }
  
#page-m4a .badge-email { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m4a .badge-tel { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m4a .badge-interne { background: var(--green-light); color: var(--green-dark); }
  
#page-m4a .comm-card-body { padding: 1.25rem; }
  
#page-m4a .comm-context { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; padding: 10px 14px; background: var(--bg); border-radius: var(--radius-sm); }
  
#page-m4a .msg-preview { background: var(--white); border: 1px solid #e0e0da; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m4a .msg-header { background: var(--bg); padding: 10px 14px; border-bottom: 1px solid #e8e8e2; }
  
#page-m4a .msg-from { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
  
#page-m4a .msg-subject { font-size: 13px; font-weight: 500; color: var(--text); }
  
#page-m4a .msg-body { padding: 14px; font-size: 13px; color: var(--text-muted); line-height: 1.7; white-space: pre-line; }
  
#page-m4a .msg-body strong { color: var(--text); font-weight: 500; }
  
#page-m4a .copy-msg-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 16px; border: 1.5px solid var(--green); border-radius: 99px; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--green-dark); background: transparent; cursor: pointer; transition: background 0.15s; }
  
#page-m4a .copy-msg-btn:hover { background: var(--green-light); }
  
#page-m4a .copy-msg-btn.copied { background: var(--green-light); }

  /* ── ARCHIVAGE VISUEL ── */
  
#page-m4a .archive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }
  @media(max-width:480px) { 
#page-m4a .archive-grid { grid-template-columns: 1fr; } }
  
#page-m4a .archive-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); padding: 1.25rem; }
  
#page-m4a .archive-card.before { border-left: 3px solid #d0d0ca; }
  
#page-m4a .archive-card.after { border-left: 3px solid var(--green); }
  
#page-m4a .archive-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  
#page-m4a .archive-card-icon { font-size: 20px; }
  
#page-m4a .archive-card-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  
#page-m4a .archive-card.before .archive-card-title { color: var(--gray); }
  
#page-m4a .archive-card.after .archive-card-title { color: var(--green-dark); }
  
#page-m4a .archive-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 7px; line-height: 1.4; }
  
#page-m4a .archive-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  
#page-m4a .before .archive-dot { background: #c4c4be; }
  
#page-m4a .after .archive-dot { background: var(--green); }

  /* ── FICHE DIRIGEANT ── */
  
#page-m4a .fiche-wrap { background: var(--white); border: 1.5px solid var(--green); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m4a .fiche-head { background: var(--green-dark); color: white; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 10px; }
  
#page-m4a .fiche-head-icon { font-size: 20px; }
  
#page-m4a .fiche-head-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; }
  
#page-m4a .fiche-head-sub { font-size: 12px; color: rgba(255,255,255,0.65); }
  
#page-m4a .fiche-body { padding: 1.25rem; }
  
#page-m4a .fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media(max-width:480px) { 
#page-m4a .fiche-grid { grid-template-columns: 1fr; } }
  
#page-m4a .fiche-col-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }
  
#page-m4a .fiche-col-title.green { color: var(--green-dark); }
  
#page-m4a .fiche-col-title.amber { color: var(--amber-dark); }
  
#page-m4a .fiche-col-title.blue { color: var(--blue-dark); }
  
#page-m4a .fiche-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 7px; line-height: 1.45; }
  
#page-m4a .fiche-bullet { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  
#page-m4a .fiche-bullet.green { background: var(--green); }
  
#page-m4a .fiche-bullet.amber { background: var(--amber); }
  
#page-m4a .fiche-bullet.blue { background: var(--blue); }
  
#page-m4a .fiche-item strong { color: var(--text); font-weight: 500; }
  
#page-m4a .fiche-divider { height: 1px; background: #f0f0ec; margin: 1rem 0; }
  
#page-m4a .dl-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 1rem; padding: 10px 20px; border: 1.5px solid var(--green); border-radius: 99px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--green-dark); background: transparent; cursor: pointer; transition: background 0.15s; }
  
#page-m4a .dl-btn:hover { background: var(--green-light); }

  /* CHECKLIST */
  
#page-m4a .chk-counter { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
  
#page-m4a .chk-progress-bar { height: 4px; background: #e8e8e2; border-radius: 2px; margin-bottom: 12px; }
  
#page-m4a .chk-progress-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.4s; }
  
#page-m4a .checklist { display: flex; flex-direction: column; gap: 0; border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m4a .chk-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f0f0ec; background: var(--white); cursor: pointer; transition: background 0.15s; user-select: none; }
  
#page-m4a .chk-item:last-child { border-bottom: none; }
  
#page-m4a .chk-item:hover { background: var(--bg); }
  
#page-m4a .chk-item.checked { background: var(--green-light); }
  
#page-m4a .chk-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d0d0ca; background: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: all 0.2s; }
  
#page-m4a .chk-item.checked .chk-box { background: var(--green); border-color: var(--green); }
  
#page-m4a .chk-check { font-size: 11px; color: white; display: none; }
  
#page-m4a .chk-item.checked .chk-check { display: block; }
  
#page-m4a .chk-label { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 2px; }
  
#page-m4a .chk-item.checked .chk-label { color: var(--green-dark); }
  
#page-m4a .chk-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
  
#page-m4a .chk-item.checked .chk-sub { color: #5DB883; }

  /* QUIZ */
  
#page-m4a .quiz-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-top: 1rem; }
  
#page-m4a .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  
#page-m4a .quiz-counter { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  
#page-m4a .quiz-score-badge { font-size: 12px; font-weight: 500; background: var(--green-light); color: var(--green-dark); padding: 3px 10px; border-radius: 99px; }
  
#page-m4a .qbar-wrap { height: 3px; background: #eeeeea; border-radius: 2px; margin-bottom: 1.5rem; }
  
#page-m4a .qbar-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.4s; }
  
#page-m4a .q-text-main { font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 1.25rem; color: var(--text); }
  
#page-m4a .q-options { display: flex; flex-direction: column; gap: 8px; }
  
#page-m4a .q-opt { padding: 11px 15px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; transition: all 0.15s; line-height: 1.45; }
  
#page-m4a .q-opt:hover:not(:disabled) { border-color: var(--green); color: var(--green-dark); background: var(--green-light); }
  
#page-m4a .q-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m4a .q-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: var(--coral-dark); }
  
#page-m4a .q-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m4a .q-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.6; display: none; }
  
#page-m4a .q-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m4a .q-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4a .q-feedback.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4a .q-next { margin-top: 1rem; padding: 9px 22px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--green-dark); color: white; border: none; border-radius: 99px; cursor: pointer; display: none; transition: opacity 0.2s; }
  
#page-m4a .q-next:hover { opacity: 0.85; }
  
#page-m4a .q-next.show { display: inline-block; animation: fadeIn 0.3s ease; }
  
#page-m4a .score-final { text-align: center; padding: 1rem 0; display: none; }
  
#page-m4a .score-final.show { display: block; animation: fadeIn 0.4s ease; }
  
#page-m4a .score-emoji { font-size: 52px; margin-bottom: 0.75rem; }
  
#page-m4a .score-big { font-family: 'Syne', sans-serif; font-size: 48px; font-weight: 800; color: var(--green-dark); line-height: 1; margin-bottom: 0.4rem; }
  
#page-m4a .score-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
  
#page-m4a .score-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m4a .score-pill { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 99px; }
  
#page-m4a .score-pill.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4a .score-pill.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4a .score-msg { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 380px; margin: 0 auto 1.5rem; }
  
#page-m4a .btn-replay { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; border: 1.5px solid var(--green); border-radius: 99px; background: transparent; color: var(--green-dark); cursor: pointer; margin-right: 8px; transition: all 0.15s; }
  
#page-m4a .btn-replay:hover { background: var(--green-light); }
  
#page-m4a .btn-next-mod { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--green-dark); border: none; border-radius: 99px; color: white; cursor: pointer; transition: opacity 0.15s; }
  
#page-m4a .btn-next-mod:hover { opacity: 0.85; }

  
#page-m4a .footer-nav { background: var(--white); border-top: 1px solid #e8e8e2; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; bottom: 0; }
  
#page-m4a .nav-info { font-size: 12px; color: var(--text-muted); }
  
#page-m4a .nav-dots { display: flex; gap: 6px; }
  
#page-m4a .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d8d2; transition: all 0.3s; }
  
#page-m4a .nav-dot.done { background: var(--green); opacity: 0.4; }
  
#page-m4a .nav-dot.active { background: var(--green-dark); transform: scale(1.2); }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Module m4b ──*/

  :root {
    --indigo: #4338CA; --indigo-light: #EEF2FF; --indigo-dark: #2D2A8A;
    --teal: #1D9E75; --teal-light: #E1F5EE; --teal-dark: #085041;
    --coral: #D85A30; --coral-light: #FAECE7; --coral-dark: #712B13;
    --amber: #BA7517; --amber-light: #FAEEDA; --amber-dark: #633806;
    --blue: #1A6EBF; --blue-light: #E4F0FB; --blue-dark: #0C3D6E;
    --green: #2E7D4F; --green-light: #E8F5EE; --green-dark: #1A4A2E;
    --gray: #5F5E5A; --gray-light: #F1EFE8;
    --text: #1a1a18; --text-muted: #6b6b67; --bg: #fafaf7; --white: #ffffff;
    --radius: 16px; --radius-sm: 10px;
  }
  
#page-m4b * { box-sizing: border-box; margin: 0; padding: 0; }
  
#page-m4b body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }

  
#page-m4b .progress-wrap { background: #e8e8e4; height: 5px; position: sticky; top: 0; z-index: 100; }
  
#page-m4b .progress-fill { height: 100%; width: 0%; background: var(--indigo); transition: width 0.5s ease; }

  
#page-m4b .hero { background: var(--indigo-dark); color: white; padding: 3rem 2rem 4rem; position: relative; overflow: hidden; }
  
#page-m4b .hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); }
  
#page-m4b .hero::after { content: ''; position: absolute; bottom: -50px; left: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.04); }
  
#page-m4b .hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
  
#page-m4b .module-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 5px 14px; border-radius: 99px; margin-bottom: 0.5rem; }
  
#page-m4b .parcours-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(180,175,240,0.3); color: #C4C0F5; padding: 4px 12px; border-radius: 99px; margin-left: 8px; }
  
#page-m4b .hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(26px, 5vw, 40px); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; margin-top: 0.8rem; }
  
#page-m4b .hero h1 span { color: #A5B4FC; }
  
#page-m4b .hero-meta { display: flex; gap: 1.5rem; font-size: 13px; color: rgba(255,255,255,0.65); flex-wrap: wrap; }

  
#page-m4b .main { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

  
#page-m4b .intro-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 2.5rem; display: flex; gap: 1.25rem; align-items: flex-start; }
  
#page-m4b .intro-icon { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
  
#page-m4b .intro-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
  
#page-m4b .intro-card p + p { margin-top: 8px; }
  
#page-m4b .intro-card strong { color: var(--text); font-weight: 500; }

  
#page-m4b .section-block { margin-bottom: 3rem; animation: fadeIn 0.5s ease both; }
  
#page-m4b .section-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 8px; }
  
#page-m4b .section-label::after { content: ''; flex: 1; height: 1px; background: var(--indigo-light); }
  
#page-m4b .section-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.25; }

  
#page-m4b .alert { border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; margin-top: 1.25rem; }
  
#page-m4b .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  
#page-m4b .alert p { font-size: 13px; line-height: 1.6; }
  
#page-m4b .alert p strong { font-weight: 500; }
  
#page-m4b .alert.amber { background: var(--amber-light); border-left: 3px solid var(--amber); }
  
#page-m4b .alert.amber p { color: #4A2800; }
  
#page-m4b .alert.teal { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m4b .alert.teal p { color: var(--teal-dark); }
  
#page-m4b .alert.indigo { background: var(--indigo-light); border-left: 3px solid var(--indigo); }
  
#page-m4b .alert.indigo p { color: var(--indigo-dark); }
  
#page-m4b .alert.coral { background: var(--coral-light); border-left: 3px solid var(--coral); }
  
#page-m4b .alert.coral p { color: var(--coral-dark); }

  /* ── PARTIE 1 : TABLEAU DE BORD INTERACTIF ── */
  
#page-m4b .dashboard { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m4b .dash-topbar { background: #1E1B4B; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
  
#page-m4b .dash-dots { display: flex; gap: 5px; }
  
#page-m4b .dash-dot { width: 10px; height: 10px; border-radius: 50%; }
  
#page-m4b .dash-dot.red { background: #FF5F56; }
  
#page-m4b .dash-dot.yellow { background: #FFBD2E; }
  
#page-m4b .dash-dot.green { background: #27C93F; }
  
#page-m4b .dash-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }
  
#page-m4b .dash-body { padding: 1.25rem; }
  
#page-m4b .dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1.25rem; }
  @media(max-width:500px) { 
#page-m4b .dash-kpi-row { grid-template-columns: repeat(2,1fr); } }
  
#page-m4b .kpi-card { border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: transform 0.15s; }
  
#page-m4b .kpi-card:hover { transform: translateY(-2px); }
  
#page-m4b .kpi-card.blue { background: var(--blue-light); }
  
#page-m4b .kpi-card.teal { background: var(--teal-light); }
  
#page-m4b .kpi-card.amber { background: var(--amber-light); }
  
#page-m4b .kpi-card.coral { background: var(--coral-light); }
  
#page-m4b .kpi-num { font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
  
#page-m4b .kpi-card.blue .kpi-num { color: var(--blue-dark); }
  
#page-m4b .kpi-card.teal .kpi-num { color: var(--teal-dark); }
  
#page-m4b .kpi-card.amber .kpi-num { color: var(--amber-dark); }
  
#page-m4b .kpi-card.coral .kpi-num { color: var(--coral-dark); }
  
#page-m4b .kpi-label { font-size: 11px; font-weight: 500; }
  
#page-m4b .kpi-card.blue .kpi-label { color: var(--blue-dark); }
  
#page-m4b .kpi-card.teal .kpi-label { color: var(--teal-dark); }
  
#page-m4b .kpi-card.amber .kpi-label { color: var(--amber-dark); }
  
#page-m4b .kpi-card.coral .kpi-label { color: var(--coral-dark); }
  
#page-m4b .dash-section-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 8px; }
  
#page-m4b .dash-list { display: flex; flex-direction: column; gap: 6px; }
  
#page-m4b .dash-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg); border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: background 0.15s; }
  
#page-m4b .dash-row:hover { background: #eeeee8; }
  
#page-m4b .dash-row-num { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--indigo); min-width: 110px; }
  
#page-m4b .dash-row-client { flex: 1; color: var(--text-muted); }
  
#page-m4b .dash-row-amount { font-weight: 500; color: var(--text); min-width: 80px; text-align: right; }
  
#page-m4b .dash-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
  
#page-m4b .s-transmise { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m4b .s-acceptee { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4b .s-rejetee { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4b .s-paiement { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m4b .dash-detail { display: none; padding: 10px 12px; background: var(--indigo-light); border-radius: var(--radius-sm); font-size: 13px; color: var(--indigo-dark); line-height: 1.6; margin-top: -2px; animation: fadeIn 0.2s ease; }
  
#page-m4b .dash-detail.show { display: block; }
  
#page-m4b .dash-detail strong { font-weight: 500; }

  /* ── PARTIE 2 : RÉCONCILIATION ── */
  
#page-m4b .recon-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
  
#page-m4b .recon-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 1.25rem; }
  
#page-m4b .recon-steps { display: flex; gap: 0; margin-bottom: 1.25rem; overflow-x: auto; padding-bottom: 4px; }
  
#page-m4b .recon-step { flex: 1; min-width: 90px; text-align: center; position: relative; }
  
#page-m4b .recon-step::after { content: '→'; position: absolute; top: 13px; right: -8px; font-size: 14px; color: var(--text-muted); z-index: 1; }
  
#page-m4b .recon-step:last-child::after { display: none; }
  
#page-m4b .recon-bubble { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  
#page-m4b .recon-bubble.b1 { background: var(--blue-light); }
  
#page-m4b .recon-bubble.b2 { background: var(--indigo-light); }
  
#page-m4b .recon-bubble.b3 { background: var(--amber-light); }
  
#page-m4b .recon-bubble.b4 { background: var(--teal-light); }
  
#page-m4b .recon-bubble.b5 { background: var(--green-light); }
  
#page-m4b .recon-step-label { font-size: 10px; color: var(--text-muted); line-height: 1.3; }
  
#page-m4b .recon-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  
#page-m4b .recon-table th { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; text-align: left; background: var(--bg); color: var(--text-muted); border-bottom: 1px solid #e8e8e2; }
  
#page-m4b .recon-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0ec; vertical-align: middle; color: var(--text-muted); }
  
#page-m4b .recon-table tr:last-child td { border-bottom: none; }
  
#page-m4b .recon-table td:first-child { font-weight: 500; color: var(--text); }
  
#page-m4b .match-ok { color: var(--teal-dark); font-weight: 500; }
  
#page-m4b .match-warn { color: var(--amber-dark); font-weight: 500; }
  
#page-m4b .match-ko { color: var(--coral-dark); font-weight: 500; }
  
#page-m4b .match-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
  
#page-m4b .tag-match { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4b .tag-ecart { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m4b .tag-missing { background: var(--coral-light); color: var(--coral-dark); }

  /* ── PARTIE 3 : CAS AVANCÉS ── */
  
#page-m4b .cas-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }
  
#page-m4b .cas-item { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m4b .cas-head { display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem; cursor: pointer; transition: background 0.15s; user-select: none; }
  
#page-m4b .cas-head:hover { background: var(--bg); }
  
#page-m4b .cas-item.open .cas-head { background: var(--indigo-light); }
  
#page-m4b .cas-icon { font-size: 20px; flex-shrink: 0; }
  
#page-m4b .cas-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; flex: 1; color: var(--text); }
  
#page-m4b .cas-item.open .cas-title { color: var(--indigo-dark); }
  
#page-m4b .cas-freq { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
  
#page-m4b .freq-courant { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4b .freq-rare { background: var(--gray-light); color: var(--gray); }
  
#page-m4b .freq-urgent { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4b .cas-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.3s; flex-shrink: 0; }
  
#page-m4b .cas-item.open .cas-chevron { transform: rotate(180deg); }
  
#page-m4b .cas-body { display: none; padding: 0 1.25rem 1.25rem; }
  
#page-m4b .cas-item.open .cas-body { display: block; animation: fadeIn 0.2s ease; }
  
#page-m4b .cas-situation { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 1rem; padding: 10px 14px; background: var(--bg); border-radius: var(--radius-sm); }
  
#page-m4b .cas-procedure { display: flex; flex-direction: column; gap: 7px; }
  
#page-m4b .cas-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
  
#page-m4b .cas-num { width: 20px; height: 20px; border-radius: 50%; background: var(--indigo-light); color: var(--indigo-dark); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
  
#page-m4b .cas-step strong { color: var(--text); font-weight: 500; }
  
#page-m4b .cas-tip { font-size: 12px; margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: var(--indigo-light); color: var(--indigo-dark); }

  /* ── PARTIE 4 : ROUTINE MENSUELLE ── */
  
#page-m4b .routine-wrap { background: var(--white); border: 1.5px solid var(--indigo); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m4b .routine-head { background: var(--indigo-dark); color: white; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 10px; }
  
#page-m4b .routine-head-icon { font-size: 20px; }
  
#page-m4b .routine-head-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; }
  
#page-m4b .routine-head-sub { font-size: 12px; color: rgba(255,255,255,0.65); }
  
#page-m4b .routine-body { padding: 1.25rem; }
  
#page-m4b .routine-week { margin-bottom: 1.25rem; }
  
#page-m4b .routine-week:last-child { margin-bottom: 0; }
  
#page-m4b .rw-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  
#page-m4b .rw-badge { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 99px; }
  
#page-m4b .rw-badge.debut { background: var(--blue-light); color: var(--blue-dark); }
  
#page-m4b .rw-badge.milieu { background: var(--indigo-light); color: var(--indigo-dark); }
  
#page-m4b .rw-badge.fin { background: var(--amber-light); color: var(--amber-dark); }
  
#page-m4b .rw-badge.mensuel { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4b .rw-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
  
#page-m4b .rw-tasks { display: flex; flex-direction: column; gap: 0; border: 1px solid #f0f0ec; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m4b .rw-task { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f0f0ec; font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; transition: background 0.15s; }
  
#page-m4b .rw-task:last-child { border-bottom: none; }
  
#page-m4b .rw-task:hover { background: var(--bg); }
  
#page-m4b .rw-task.done { background: var(--teal-light); }
  
#page-m4b .rw-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #d0d0ca; background: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-size: 9px; color: white; transition: all 0.2s; }
  
#page-m4b .rw-task.done .rw-box { background: var(--teal); border-color: var(--teal); }
  
#page-m4b .rw-chk { display: none; }
  
#page-m4b .rw-task.done .rw-chk { display: inline; }
  
#page-m4b .rw-task.done .rw-text { color: var(--teal-dark); }
  
#page-m4b .routine-divider { height: 1px; background: #f0f0ec; margin: 1rem 0; }
  
#page-m4b .routine-counter { font-size: 12px; color: var(--text-muted); margin-top: 1rem; text-align: center; }
  
#page-m4b .routine-counter span { font-weight: 600; color: var(--indigo-dark); }

  /* ── PARTIE 5 : TRAÇABILITÉ ── */
  
#page-m4b .trace-timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; }
  
#page-m4b .trace-item { display: flex; gap: 0; }
  
#page-m4b .trace-left { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; }
  
#page-m4b .trace-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
  
#page-m4b .trace-line { width: 2px; flex: 1; min-height: 8px; margin: 2px 0; opacity: 0.3; }
  
#page-m4b .trace-item:last-child .trace-line { display: none; }
  
#page-m4b .trace-body { flex: 1; padding: 0 0 12px 12px; }
  
#page-m4b .trace-time { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2px; }
  
#page-m4b .trace-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); padding: 10px 14px; }
  
#page-m4b .trace-action { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
  
#page-m4b .trace-detail { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
  
#page-m4b .trace-who { font-size: 11px; font-weight: 500; margin-top: 5px; }

  
#page-m4b .ti-1 .trace-dot { background: var(--blue); }
  
#page-m4b .ti-1 .trace-line { background: var(--blue); }
  
#page-m4b .ti-2 .trace-dot { background: var(--indigo); }
  
#page-m4b .ti-2 .trace-line { background: var(--indigo); }
  
#page-m4b .ti-3 .trace-dot { background: var(--amber); }
  
#page-m4b .ti-3 .trace-line { background: var(--amber); }
  
#page-m4b .ti-4 .trace-dot { background: var(--coral); }
  
#page-m4b .ti-4 .trace-line { background: var(--coral); }
  
#page-m4b .ti-5 .trace-dot { background: var(--teal); }
  
#page-m4b .ti-5 .trace-line { background: var(--teal); }
  
#page-m4b .ti-6 .trace-dot { background: var(--green); }

  
#page-m4b .trace-who.blue { color: var(--blue-dark); background: var(--blue-light); padding: 1px 7px; border-radius: 99px; display: inline-block; }
  
#page-m4b .trace-who.indigo { color: var(--indigo-dark); background: var(--indigo-light); padding: 1px 7px; border-radius: 99px; display: inline-block; }
  
#page-m4b .trace-who.amber { color: var(--amber-dark); background: var(--amber-light); padding: 1px 7px; border-radius: 99px; display: inline-block; }
  
#page-m4b .trace-who.coral { color: var(--coral-dark); background: var(--coral-light); padding: 1px 7px; border-radius: 99px; display: inline-block; }
  
#page-m4b .trace-who.teal { color: var(--teal-dark); background: var(--teal-light); padding: 1px 7px; border-radius: 99px; display: inline-block; }
  
#page-m4b .trace-who.green { color: var(--green-dark); background: var(--green-light); padding: 1px 7px; border-radius: 99px; display: inline-block; }

  /* ── FICHE MÉMO ── */
  
#page-m4b .memo-wrap { background: var(--white); border: 1.5px solid var(--indigo); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m4b .memo-head { background: var(--indigo-dark); color: white; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 10px; }
  
#page-m4b .memo-head-icon { font-size: 20px; }
  
#page-m4b .memo-head-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; }
  
#page-m4b .memo-head-sub { font-size: 12px; color: rgba(255,255,255,0.65); }
  
#page-m4b .memo-body { padding: 1.25rem; }
  
#page-m4b .memo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
  @media(max-width:480px) { 
#page-m4b .memo-grid { grid-template-columns: 1fr; } }
  
#page-m4b .memo-section-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }
  
#page-m4b .memo-section-title.indigo { color: var(--indigo-dark); }
  
#page-m4b .memo-section-title.teal { color: var(--teal-dark); }
  
#page-m4b .memo-section-title.coral { color: var(--coral-dark); }
  
#page-m4b .memo-section-title.amber { color: var(--amber-dark); }
  
#page-m4b .memo-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 7px; line-height: 1.45; }
  
#page-m4b .memo-bullet { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  
#page-m4b .memo-bullet.indigo { background: var(--indigo); }
  
#page-m4b .memo-bullet.teal { background: var(--teal); }
  
#page-m4b .memo-bullet.coral { background: var(--coral); }
  
#page-m4b .memo-bullet.amber { background: var(--amber); }
  
#page-m4b .memo-item strong { color: var(--text); font-weight: 500; }
  
#page-m4b .memo-divider { height: 1px; background: #f0f0ec; margin: 0.75rem 0; }
  
#page-m4b .dl-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 1rem; padding: 10px 20px; border: 1.5px solid var(--indigo); border-radius: 99px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--indigo-dark); background: transparent; cursor: pointer; transition: background 0.15s; }
  
#page-m4b .dl-btn:hover { background: var(--indigo-light); }

  /* CHECKLIST */
  
#page-m4b .chk-counter { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
  
#page-m4b .chk-progress-bar { height: 4px; background: #e8e8e2; border-radius: 2px; margin-bottom: 12px; }
  
#page-m4b .chk-progress-fill { height: 100%; background: var(--indigo); border-radius: 2px; transition: width 0.4s; }
  
#page-m4b .checklist { display: flex; flex-direction: column; gap: 0; border: 1px solid #e8e8e2; border-radius: var(--radius-sm); overflow: hidden; }
  
#page-m4b .chk-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f0f0ec; background: var(--white); cursor: pointer; transition: background 0.15s; user-select: none; }
  
#page-m4b .chk-item:last-child { border-bottom: none; }
  
#page-m4b .chk-item:hover { background: var(--bg); }
  
#page-m4b .chk-item.checked { background: var(--teal-light); }
  
#page-m4b .chk-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d0d0ca; background: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: all 0.2s; }
  
#page-m4b .chk-item.checked .chk-box { background: var(--teal); border-color: var(--teal); }
  
#page-m4b .chk-check { font-size: 11px; color: white; display: none; }
  
#page-m4b .chk-item.checked .chk-check { display: block; }
  
#page-m4b .chk-label { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 2px; }
  
#page-m4b .chk-item.checked .chk-label { color: var(--teal-dark); }
  
#page-m4b .chk-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
  
#page-m4b .chk-item.checked .chk-sub { color: #5DCAA5; }

  /* QUIZ */
  
#page-m4b .quiz-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-top: 1rem; }
  
#page-m4b .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  
#page-m4b .quiz-counter { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  
#page-m4b .quiz-score-badge { font-size: 12px; font-weight: 500; background: var(--indigo-light); color: var(--indigo-dark); padding: 3px 10px; border-radius: 99px; }
  
#page-m4b .qbar-wrap { height: 3px; background: #eeeeea; border-radius: 2px; margin-bottom: 1.5rem; }
  
#page-m4b .qbar-fill { height: 100%; background: var(--indigo); border-radius: 2px; transition: width 0.4s; }
  
#page-m4b .q-text-main { font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 1.25rem; color: var(--text); }
  
#page-m4b .q-options { display: flex; flex-direction: column; gap: 8px; }
  
#page-m4b .q-opt { padding: 11px 15px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; transition: all 0.15s; line-height: 1.45; }
  
#page-m4b .q-opt:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo-dark); background: var(--indigo-light); }
  
#page-m4b .q-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m4b .q-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: var(--coral-dark); }
  
#page-m4b .q-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m4b .q-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.6; display: none; }
  
#page-m4b .q-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m4b .q-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4b .q-feedback.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4b .q-next { margin-top: 1rem; padding: 9px 22px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--indigo-dark); color: white; border: none; border-radius: 99px; cursor: pointer; display: none; transition: opacity 0.2s; }
  
#page-m4b .q-next:hover { opacity: 0.85; }
  
#page-m4b .q-next.show { display: inline-block; animation: fadeIn 0.3s ease; }
  
#page-m4b .score-final { text-align: center; padding: 1rem 0; display: none; }
  
#page-m4b .score-final.show { display: block; animation: fadeIn 0.4s ease; }
  
#page-m4b .score-emoji { font-size: 52px; margin-bottom: 0.75rem; }
  
#page-m4b .score-big { font-family: 'Syne', sans-serif; font-size: 48px; font-weight: 800; color: var(--indigo-dark); line-height: 1; margin-bottom: 0.4rem; }
  
#page-m4b .score-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
  
#page-m4b .score-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m4b .score-pill { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 99px; }
  
#page-m4b .score-pill.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m4b .score-pill.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m4b .score-msg { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 380px; margin: 0 auto 1.5rem; }
  
#page-m4b .btn-replay { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; border: 1.5px solid var(--indigo); border-radius: 99px; background: transparent; color: var(--indigo-dark); cursor: pointer; margin-right: 8px; transition: all 0.15s; }
  
#page-m4b .btn-replay:hover { background: var(--indigo-light); }
  
#page-m4b .btn-next-mod { padding: 10px 26px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--indigo-dark); border: none; border-radius: 99px; color: white; cursor: pointer; transition: opacity 0.15s; }
  
#page-m4b .btn-next-mod:hover { opacity: 0.85; }

  
#page-m4b .footer-nav { background: var(--white); border-top: 1px solid #e8e8e2; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; bottom: 0; }
  
#page-m4b .nav-info { font-size: 12px; color: var(--text-muted); }
  
#page-m4b .nav-dots { display: flex; gap: 6px; }
  
#page-m4b .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d8d2; transition: all 0.3s; }
  
#page-m4b .nav-dot.done { background: var(--indigo); opacity: 0.4; }
  
#page-m4b .nav-dot.active { background: var(--indigo-dark); transform: scale(1.2); }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Module m5 ──*/

  :root {
    --gold: #B8860B; --gold-light: #FDF8E1; --gold-dark: #7A5900;
    --teal: #1D9E75; --teal-light: #E1F5EE; --teal-dark: #085041;
    --coral: #D85A30; --coral-light: #FAECE7; --coral-dark: #712B13;
    --amber: #BA7517; --amber-light: #FAEEDA; --amber-dark: #633806;
    --purple: #534AB7; --purple-light: #EEEDFE; --purple-dark: #3C3489;
    --blue: #1A6EBF; --blue-light: #E4F0FB; --blue-dark: #0C3D6E;
    --indigo: #4338CA; --indigo-light: #EEF2FF; --indigo-dark: #2D2A8A;
    --green: #2E7D4F; --green-light: #E8F5EE; --green-dark: #1A4A2E;
    --gray: #5F5E5A; --gray-light: #F1EFE8;
    --text: #1a1a18; --text-muted: #6b6b67; --bg: #fafaf7; --white: #ffffff;
    --radius: 16px; --radius-sm: 10px;
  }
  
#page-m5 * { box-sizing: border-box; margin: 0; padding: 0; }
  
#page-m5 body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }

  
#page-m5 .progress-wrap { background: #e8e8e4; height: 5px; position: sticky; top: 0; z-index: 100; }
  
#page-m5 .progress-fill { height: 100%; width: 0%; background: var(--gold); transition: width 0.6s ease; }

  /* HERO */
  
#page-m5 .hero { background: linear-gradient(135deg, #1A1A3E 0%, #2D2A8A 50%, #1A4A2E 100%); color: white; padding: 3rem 2rem 5rem; position: relative; overflow: hidden; }
  
#page-m5 .hero::before { content: ''; position: absolute; top: -60px; right: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,0.04); }
  
#page-m5 .hero::after { content: ''; position: absolute; bottom: -40px; left: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.03); }
  
#page-m5 .hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
  
#page-m5 .module-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 5px 14px; border-radius: 99px; margin-bottom: 0.5rem; }
  
#page-m5 .commun-tag { display: inline-block; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,215,100,0.25); color: #FFD764; padding: 4px 12px; border-radius: 99px; margin-left: 8px; }
  
#page-m5 .hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(28px, 5vw, 42px); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; margin-top: 0.8rem; }
  
#page-m5 .hero h1 span { color: #FFD764; }
  
#page-m5 .hero-meta { display: flex; gap: 1.5rem; font-size: 13px; color: rgba(255,255,255,0.65); flex-wrap: wrap; }
  
#page-m5 .hero-parcours { display: flex; gap: 10px; margin-top: 1.25rem; flex-wrap: wrap; }
  
#page-m5 .hero-parcours-badge { font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); }

  
#page-m5 .main { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

  
#page-m5 .intro-card { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; margin-bottom: 2.5rem; display: flex; gap: 1.25rem; align-items: flex-start; }
  
#page-m5 .intro-icon { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
  
#page-m5 .intro-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
  
#page-m5 .intro-card p + p { margin-top: 8px; }
  
#page-m5 .intro-card strong { color: var(--text); font-weight: 500; }

  
#page-m5 .section-block { margin-bottom: 3rem; animation: fadeIn 0.5s ease both; }
  
#page-m5 .section-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 8px; }
  
#page-m5 .section-label::after { content: ''; flex: 1; height: 1px; background: var(--gold-light); }
  
#page-m5 .section-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.25; }

  /* RÉCAP PARCOURS */
  
#page-m5 .recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }
  @media(max-width:480px) { 
#page-m5 .recap-grid { grid-template-columns: 1fr; } }
  
#page-m5 .recap-card { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid #e8e8e2; }
  
#page-m5 .recap-head { padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
  
#page-m5 .recap-head.dirigeant { background: #712B13; }
  
#page-m5 .recap-head.secretaire { background: var(--indigo-dark); }
  
#page-m5 .recap-head-icon { font-size: 16px; }
  
#page-m5 .recap-head-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: white; }
  
#page-m5 .recap-body { background: var(--white); padding: 10px 14px; }
  
#page-m5 .recap-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.4; }
  
#page-m5 .recap-item:last-child { margin-bottom: 0; }
  
#page-m5 .recap-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  
#page-m5 .dirigeant .recap-dot { background: var(--coral); }
  
#page-m5 .secretaire .recap-dot { background: var(--indigo); }

  /* MISE EN SITUATION */
  
#page-m5 .mise-situation { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
  
#page-m5 .ms-topbar { background: #1E1B4B; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
  
#page-m5 .ms-dots { display: flex; gap: 5px; }
  
#page-m5 .ms-dot { width: 10px; height: 10px; border-radius: 50%; }
  
#page-m5 .ms-dot.red { background: #FF5F56; }
  
#page-m5 .ms-dot.yellow { background: #FFBD2E; }
  
#page-m5 .ms-dot.green { background: #27C93F; }
  
#page-m5 .ms-app-name { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }
  
#page-m5 .ms-body { padding: 1.5rem; }
  
#page-m5 .ms-scenario-label { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
  
#page-m5 .ms-scenario-title { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
  
#page-m5 .ms-context { font-size: 13px; color: var(--text-muted); line-height: 1.7; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 1.25rem; }
  
#page-m5 .ms-question { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 1rem; }
  
#page-m5 .ms-opts { display: flex; flex-direction: column; gap: 8px; }
  
#page-m5 .ms-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-muted); line-height: 1.45; background: transparent; text-align: left; }
  
#page-m5 .ms-opt:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-light); color: var(--gold-dark); }
  
#page-m5 .ms-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m5 .ms-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: var(--coral-dark); }
  
#page-m5 .ms-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m5 .ms-opt-letter { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  
#page-m5 .ms-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.6; display: none; }
  
#page-m5 .ms-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m5 .ms-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m5 .ms-feedback.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m5 .ms-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
  
#page-m5 .ms-counter { font-size: 12px; color: var(--text-muted); }
  
#page-m5 .ms-next { padding: 8px 20px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--indigo-dark); color: white; border: none; border-radius: 99px; cursor: pointer; transition: opacity 0.2s; display: none; }
  
#page-m5 .ms-next:hover { opacity: 0.85; }
  
#page-m5 .ms-next.show { display: inline-block; animation: fadeIn 0.3s ease; }
  
#page-m5 .ms-complete { text-align: center; padding: 1.5rem 0; display: none; animation: fadeIn 0.4s ease; }
  
#page-m5 .ms-complete.show { display: block; }
  
#page-m5 .ms-complete-icon { font-size: 44px; margin-bottom: 10px; }
  
#page-m5 .ms-complete-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--teal-dark); margin-bottom: 6px; }
  
#page-m5 .ms-complete-score { font-family: 'Syne', sans-serif; font-size: 32px; font-weight: 800; color: var(--indigo-dark); margin-bottom: 8px; }
  
#page-m5 .ms-complete-sub { font-size: 13px; color: var(--text-muted); }
  
#page-m5 .ms-restart { margin-top: 12px; font-size: 12px; color: var(--indigo); background: none; border: none; cursor: pointer; text-decoration: underline; font-family: 'DM Sans', sans-serif; }

  /* QCM FINAL */
  
#page-m5 .qcm-wrap { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius); padding: 1.75rem; }
  
#page-m5 .qcm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  
#page-m5 .qcm-counter { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  
#page-m5 .qcm-score { font-size: 12px; font-weight: 500; background: var(--gold-light); color: var(--gold-dark); padding: 3px 10px; border-radius: 99px; }
  
#page-m5 .qcm-domain { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  
#page-m5 .qbar-wrap { height: 3px; background: #eeeeea; border-radius: 2px; margin-bottom: 1.5rem; }
  
#page-m5 .qbar-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 0.4s; }
  
#page-m5 .q-text-main { font-size: 15px; font-weight: 500; line-height: 1.55; margin-bottom: 1.25rem; color: var(--text); }
  
#page-m5 .q-options { display: flex; flex-direction: column; gap: 8px; }
  
#page-m5 .q-opt { padding: 11px 15px; border: 1.5px solid #e0e0da; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); background: transparent; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; transition: all 0.15s; line-height: 1.45; }
  
#page-m5 .q-opt:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-light); }
  
#page-m5 .q-opt.correct { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 500; }
  
#page-m5 .q-opt.wrong { background: var(--coral-light); border-color: var(--coral); color: var(--coral-dark); }
  
#page-m5 .q-opt.reveal { background: rgba(29,158,117,0.06); border-color: var(--teal); color: var(--teal-dark); opacity: 0.6; }
  
#page-m5 .q-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.6; display: none; }
  
#page-m5 .q-feedback.show { display: block; animation: fadeIn 0.25s ease; }
  
#page-m5 .q-feedback.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m5 .q-feedback.ko { background: var(--coral-light); color: var(--coral-dark); }
  
#page-m5 .q-next { margin-top: 1rem; padding: 9px 22px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--gold-dark); color: white; border: none; border-radius: 99px; cursor: pointer; display: none; transition: opacity 0.2s; }
  
#page-m5 .q-next:hover { opacity: 0.85; }
  
#page-m5 .q-next.show { display: inline-block; animation: fadeIn 0.3s ease; }

  /* RÉSULTATS */
  
#page-m5 .results-screen { display: none; animation: fadeIn 0.5s ease; }
  
#page-m5 .results-screen.show { display: block; }
  
#page-m5 .results-hero { text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, var(--indigo-light) 0%, var(--gold-light) 100%); border-radius: var(--radius); margin-bottom: 1.5rem; }
  
#page-m5 .results-emoji { font-size: 60px; margin-bottom: 0.75rem; }
  
#page-m5 .results-score { font-family: 'Syne', sans-serif; font-size: 56px; font-weight: 800; color: var(--indigo-dark); line-height: 1; margin-bottom: 4px; }
  
#page-m5 .results-pct { font-size: 18px; color: var(--text-muted); margin-bottom: 0.5rem; }
  
#page-m5 .results-title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  
#page-m5 .results-sub { font-size: 14px; color: var(--text-muted); max-width: 380px; margin: 0 auto; }
  
#page-m5 .domain-scores { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }
  
#page-m5 .domain-row { background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius-sm); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
  
#page-m5 .domain-name { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; }
  
#page-m5 .domain-bar-wrap { flex: 2; height: 6px; background: #e8e8e2; border-radius: 99px; overflow: hidden; }
  
#page-m5 .domain-bar-fill { height: 100%; border-radius: 99px; transition: width 1s ease; }
  
#page-m5 .domain-score-label { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; min-width: 36px; text-align: right; }
  
#page-m5 .pills-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m5 .q-pill { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; }
  
#page-m5 .q-pill.ok { background: var(--teal-light); color: var(--teal-dark); }
  
#page-m5 .q-pill.ko { background: var(--coral-light); color: var(--coral-dark); }

  /* ATTESTATION */
  
#page-m5 .attestation-wrap { margin-bottom: 1.5rem; }
  
#page-m5 .attestation-card { background: white; border: 2px solid var(--gold); border-radius: var(--radius); padding: 2rem; text-align: center; position: relative; overflow: hidden; }
  
#page-m5 .attestation-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to right, var(--indigo), var(--gold), var(--green)); }
  
#page-m5 .att-logo { font-size: 36px; margin-bottom: 8px; }
  
#page-m5 .att-org { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem; }
  
#page-m5 .att-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
  
#page-m5 .att-name { font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 10px; font-style: italic; min-height: 36px; }
  
#page-m5 .att-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 420px; margin: 0 auto 1.25rem; }
  
#page-m5 .att-score-line { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-light); border: 1px solid rgba(184,134,11,0.3); border-radius: 99px; padding: 6px 18px; margin-bottom: 1.25rem; }
  
#page-m5 .att-score-num { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: var(--gold-dark); }
  
#page-m5 .att-score-label { font-size: 12px; color: var(--gold-dark); font-weight: 500; }
  
#page-m5 .att-modules { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  
#page-m5 .att-module-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; background: var(--indigo-light); color: var(--indigo-dark); }
  
#page-m5 .att-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; border-top: 1px solid #f0f0ec; }
  
#page-m5 .att-date { font-size: 12px; color: var(--text-muted); }
  
#page-m5 .att-ref { font-size: 11px; color: #c0c0ba; font-family: 'DM Sans', sans-serif; }
  
#page-m5 .att-name-input { border: none; border-bottom: 2px solid var(--gold); background: transparent; font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 800; color: var(--text); text-align: center; width: 100%; font-style: italic; margin-bottom: 10px; outline: none; padding: 4px 0; }
  
#page-m5 .att-name-input::placeholder { color: #d0d0ca; font-style: italic; }
  
#page-m5 .att-name-input:focus { border-bottom-color: var(--indigo); }
  
#page-m5 .att-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 1.25rem; font-style: italic; }

  /* BOUTONS */
  
#page-m5 .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
  
#page-m5 .btn-primary { padding: 11px 28px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; background: var(--indigo-dark); color: white; border: none; border-radius: 99px; cursor: pointer; transition: opacity 0.15s; }
  
#page-m5 .btn-primary:hover { opacity: 0.85; }
  
#page-m5 .btn-secondary { padding: 11px 28px; font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; border: 1.5px solid var(--gold); border-radius: 99px; background: transparent; color: var(--gold-dark); cursor: pointer; transition: background 0.15s; }
  
#page-m5 .btn-secondary:hover { background: var(--gold-light); }

  /* FOOTER NAV */
  
#page-m5 .footer-nav { background: var(--white); border-top: 1px solid #e8e8e2; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; bottom: 0; }
  
#page-m5 .nav-info { font-size: 12px; color: var(--text-muted); }
  
#page-m5 .nav-dots { display: flex; gap: 6px; }
  
#page-m5 .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d8d2; transition: all 0.3s; }
  
#page-m5 .nav-dot.done { background: var(--gold); opacity: 0.4; }
  
#page-m5 .nav-dot.active { background: var(--gold-dark); transform: scale(1.2); }

  /* ALERT */
  
#page-m5 .alert { border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; margin-top: 1.25rem; }
  
#page-m5 .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  
#page-m5 .alert p { font-size: 13px; line-height: 1.6; }
  
#page-m5 .alert p strong { font-weight: 500; }
  
#page-m5 .alert.gold { background: var(--gold-light); border-left: 3px solid var(--gold); }
  
#page-m5 .alert.gold p { color: var(--gold-dark); }
  
#page-m5 .alert.teal { background: var(--teal-light); border-left: 3px solid var(--teal); }
  
#page-m5 .alert.teal p { color: var(--teal-dark); }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes barGrow { from { width: 0 } }

/* ── Accueil / Dashboard ──*/

  :root {
    --text: #1a1a18; --text-muted: #6b6b67; --bg: #fafaf7; --white: #ffffff;
    --teal: #1D9E75; --teal-light: #E1F5EE; --teal-dark: #085041;
    --coral-dark: #712B13;
    --indigo-dark: #2D2A8A;
    --green-dark: #1A4A2E;
    --gold: #B8860B; --gold-light: #FDF8E1; --gold-dark: #7A5900;
    --gray-light: #F1EFE8;
    --radius: 16px; --radius-sm: 10px;
  }
  
#page-dashboard * { box-sizing: border-box; margin: 0; padding: 0; }
  
#page-dashboard body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

  /* ── HERO ── */
  
#page-dashboard .hero {
    background: linear-gradient(140deg, #0C0C2A 0%, #1A4A2E 55%, #2D2A8A 100%);
    color: white; padding: 4rem 2rem 6rem; position: relative; overflow: hidden;
  }
  
#page-dashboard .hero::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,0.04); }
  
#page-dashboard .hero::after { content:''; position:absolute; bottom:-80px; left:-60px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,0.03); }
  
#page-dashboard .hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index:1; }
  
#page-dashboard .hero-kicker { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:1rem; }
  
#page-dashboard .hero h1 { font-family:'Syne',sans-serif; font-size:clamp(32px,6vw,54px); font-weight:800; line-height:1.1; margin-bottom:1rem; }
  
#page-dashboard .hero h1 span { color:#FFD764; }
  
#page-dashboard .hero-desc { font-size:16px; color:rgba(255,255,255,0.7); line-height:1.7; max-width:560px; margin-bottom:2rem; }
  
#page-dashboard .hero-stats { display:flex; gap:2rem; flex-wrap:wrap; }
  
#page-dashboard .hero-stat { }
  
#page-dashboard .hero-stat-num { font-family:'Syne',sans-serif; font-size:28px; font-weight:800; color:white; line-height:1; }
  
#page-dashboard .hero-stat-label { font-size:12px; color:rgba(255,255,255,0.5); margin-top:3px; }

  /* ── SÉLECTEUR PARCOURS ── */
  
#page-dashboard .parcours-selector { max-width:760px; margin:-2.5rem auto 0; padding:0 1.5rem; position:relative; z-index:10; }
  
#page-dashboard .parcours-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media(max-width:520px) { 
#page-dashboard .parcours-grid { grid-template-columns:1fr; } }
  
#page-dashboard .parcours-card {
    border-radius: var(--radius); padding: 1.5rem; cursor:pointer;
    transition: transform 0.2s, box-shadow 0.2s; border: 2px solid transparent;
    position: relative; overflow: hidden;
  }
  
#page-dashboard .parcours-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
  
#page-dashboard .parcours-card.active { border-color: currentColor; }
  
#page-dashboard .parcours-card.dirigeant { background: linear-gradient(135deg,#0C1E4A,#162D6A); color: white; }
  
#page-dashboard .parcours-card.secretaire { background: linear-gradient(135deg,#C8962A,#8B6000); color: white; }
  
#page-dashboard .parcours-card::after { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,0.07); }
  
#page-dashboard .pc-icon { font-size:28px; margin-bottom:10px; }
  
#page-dashboard .pc-title { font-family:'Syne',sans-serif; font-size:16px; font-weight:800; margin-bottom:4px; }
  
#page-dashboard .pc-sub { font-size:12px; opacity:0.75; line-height:1.4; margin-bottom:1rem; }
  
#page-dashboard .pc-cta { display:inline-flex; align-items:center; gap:6px; font-family:'Syne',sans-serif; font-size:12px; font-weight:700; background:rgba(255,255,255,0.15); padding:6px 14px; border-radius:99px; transition:background 0.15s; }
  
#page-dashboard .parcours-card:hover .pc-cta { background:rgba(255,255,255,0.25); }
  
#page-dashboard .pc-badge { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; font-family:'Syne',sans-serif; letter-spacing:0.06em; text-transform:uppercase; background:rgba(255,255,255,0.2); padding:3px 9px; border-radius:99px; }

  /* ── MAIN ── */
  
#page-dashboard .main { max-width:760px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }

  /* ── SECTION HEADER ── */
  
#page-dashboard .sec-header { display:flex; align-items:center; gap:10px; margin-bottom:1.25rem; }
  
#page-dashboard .sec-label { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
  
#page-dashboard .sec-label.commun { color: var(--teal); }
  
#page-dashboard .sec-label.dirigeant { color: #0C1E4A; }
  
#page-dashboard .sec-label.secretaire { color: #8B6000; }
  
#page-dashboard .sec-label.final { color: var(--gold-dark); }
  
#page-dashboard .sec-line { flex:1; height:1px; }
  
#page-dashboard .sec-line.commun { background: var(--teal-light); }
  
#page-dashboard .sec-line.dirigeant { background: #C8D8F0; }
  
#page-dashboard .sec-line.secretaire { background: #F5E4B0; }
  
#page-dashboard .sec-line.final { background: var(--gold-light); }

  /* ── MODULE CARDS ── */
  
#page-dashboard .modules-section { margin-bottom: 2.5rem; }
  
#page-dashboard .modules-grid { display:flex; flex-direction:column; gap:10px; }

  
#page-dashboard .module-card {
    background: var(--white); border: 1px solid #e8e8e2; border-radius: var(--radius);
    display:flex; align-items:stretch; overflow:hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    text-decoration:none; color:inherit; cursor:pointer;
  }
  
#page-dashboard .module-card:hover { transform:translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
  
#page-dashboard .module-card.locked { opacity:0.5; cursor:not-allowed; pointer-events:none; }

  
#page-dashboard .mc-stripe { width:5px; flex-shrink:0; }
  
#page-dashboard .mc-stripe.commun { background: var(--teal); }
  
#page-dashboard .mc-stripe.dirigeant { background: #0C1E4A; }
  
#page-dashboard .mc-stripe.secretaire { background: #C8962A; }
  
#page-dashboard .mc-stripe.final { background: var(--gold); }
  
#page-dashboard .mc-stripe.green { background: var(--green-dark); }
  
#page-dashboard .mc-stripe.indigo { background: #0C1E4A; }

  
#page-dashboard .mc-body { flex:1; padding:1.1rem 1.25rem; display:flex; align-items:center; gap:1rem; }
  
#page-dashboard .mc-num { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; color:var(--text-muted); min-width:60px; }
  
#page-dashboard .mc-icon { font-size:22px; flex-shrink:0; }
  
#page-dashboard .mc-info { flex:1; }
  
#page-dashboard .mc-title { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--text); margin-bottom:3px; line-height:1.3; }
  
#page-dashboard .mc-desc { font-size:12px; color:var(--text-muted); line-height:1.5; }
  
#page-dashboard .mc-meta { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
  
#page-dashboard .mc-duration { font-size:11px; color:var(--text-muted); white-space:nowrap; }
  
#page-dashboard .mc-status { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
  
#page-dashboard .mc-status.todo { background:var(--gray-light); color:var(--text-muted); }
  
#page-dashboard .mc-status.done { background:var(--teal-light); color:var(--teal-dark); }
  
#page-dashboard .mc-status.active { background:var(--teal); color:white; }
  
#page-dashboard .mc-arrow { font-size:14px; color:var(--text-muted); flex-shrink:0; }

  
#page-dashboard .module-card:hover .mc-arrow { color:var(--text); }
  
#page-dashboard .module-card:hover .mc-title { color: var(--teal-dark); }

  /* ── PROGRESSION GLOBALE ── */
  
#page-dashboard .progress-card { background:var(--white); border:1px solid #e8e8e2; border-radius:var(--radius); padding:1.5rem; margin-bottom:2.5rem; }
  
#page-dashboard .prog-title { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; margin-bottom:1.25rem; }
  
#page-dashboard .prog-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  
#page-dashboard .prog-row:last-child { margin-bottom:0; }
  
#page-dashboard .prog-label { font-size:12px; color:var(--text-muted); min-width:140px; flex-shrink:0; }
  
#page-dashboard .prog-bar-wrap { flex:1; height:6px; background:#e8e8e2; border-radius:99px; overflow:hidden; }
  
#page-dashboard .prog-bar-fill { height:100%; border-radius:99px; transition:width 1s ease; }
  
#page-dashboard .prog-bar-fill.commun { background:var(--teal); }
  
#page-dashboard .prog-bar-fill.dirigeant { background:linear-gradient(to right,#162D6A,#0C1E4A); }
  
#page-dashboard .prog-bar-fill.secretaire { background:linear-gradient(to right,#E8B040,#C8962A); }
  
#page-dashboard .prog-bar-fill.global { background: linear-gradient(to right,var(--teal),#0C1E4A); }
  
#page-dashboard .prog-pct { font-family:'Syne',sans-serif; font-size:12px; font-weight:700; min-width:34px; text-align:right; color:var(--text); }

  

  /* ── FOOTER ── */
  
#page-dashboard .footer { background:var(--white); border-top:1px solid #e8e8e2; padding:1.5rem 2rem; text-align:center; }
  
#page-dashboard .footer-text { font-size:12px; color:var(--text-muted); }

  /* ── MODAL (detail module) ── */
  
#page-dashboard .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000; display:none; align-items:center; justify-content:center; padding:1rem; }
  
#page-dashboard .modal-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
  
#page-dashboard .modal { background:var(--white); border-radius:var(--radius); max-width:480px; width:100%; padding:2rem; position:relative; animation:slideUp 0.25s ease; }
  
#page-dashboard .modal-close { position:absolute; top:14px; right:14px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted); line-height:1; }
  
#page-dashboard .modal-close:hover { color:var(--text); }
  
#page-dashboard .modal-icon { font-size:36px; margin-bottom:10px; }
  
#page-dashboard .modal-num { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
  
#page-dashboard .modal-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; margin-bottom:8px; }
  
#page-dashboard .modal-desc { font-size:14px; color:var(--text-muted); line-height:1.7; margin-bottom:1.25rem; }
  
#page-dashboard .modal-points-title { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:8px; }
  
#page-dashboard .modal-points { display:flex; flex-direction:column; gap:6px; margin-bottom:1.5rem; }
  
#page-dashboard .modal-point { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text-muted); line-height:1.45; }
  
#page-dashboard .modal-point-dot { width:5px; height:5px; border-radius:50%; background:var(--teal); flex-shrink:0; margin-top:5px; }
  
#page-dashboard .modal-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.5rem; }
  
#page-dashboard .modal-tag { font-size:11px; font-weight:500; padding:3px 10px; border-radius:99px; }
  
#page-dashboard .modal-btn { display:block; width:100%; padding:12px; font-family:'Syne',sans-serif; font-size:14px; font-weight:700; background:var(--teal-dark); color:white; border:none; border-radius:99px; cursor:pointer; transition:opacity 0.15s; text-align:center; }
  
#page-dashboard .modal-btn:hover { opacity:0.85; }

  @keyframes fadeIn  { from{opacity:0} to{opacity:1} }
  @keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   MODULE 4B — CSS MOBILE DÉFINITIF (après tous les modules)
   ============================================================ */
@media (max-width: 768px) {

  /* ── Conteneur principal ── */
  #page-m4b .hero  { padding: 1.75rem 1rem 2.5rem !important; }
  #page-m4b .hero h1 { font-size: clamp(19px,5.5vw,30px) !important; }
  #page-m4b .main  { padding: 1rem 0.875rem 3rem !important; max-width:100% !important; overflow-x:hidden !important; }

  /* ── DASHBOARD — débloquer overflow, reflow des lignes ── */
  #page-m4b .dashboard {
    overflow: visible !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  #page-m4b .dash-body  { padding: 10px !important; overflow-x: hidden !important; }
  #page-m4b .dash-topbar {
    padding: 7px 10px !important; font-size: 11px !important;
    flex-wrap: wrap !important; gap: 5px !important;
  }

  /* KPI : 2 colonnes */
  #page-m4b .dash-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important; margin-bottom: 10px !important;
  }
  #page-m4b .kpi-card   { padding: 9px 7px !important; }
  #page-m4b .kpi-num    { font-size: 19px !important; }
  #page-m4b .kpi-label  { font-size: 10px !important; }

  /* Liste factures : pas de min-width, flex-wrap */
  #page-m4b .dash-list  { display: flex !important; flex-direction: column !important; gap: 6px !important; overflow: visible !important; }
  #page-m4b .dash-row   {
    min-width: 0 !important; flex-wrap: wrap !important;
    font-size: 12px !important; gap: 6px !important; padding: 8px 10px !important;
  }
  #page-m4b .dash-row-num    { min-width: 0 !important; font-size: 11px !important; width: 100% !important; }
  #page-m4b .dash-row-client { min-width: 0 !important; flex: 1 !important; font-size: 11px !important; }
  #page-m4b .dash-row-amount { min-width: 0 !important; font-size: 11px !important; text-align: left !important; }
  #page-m4b .dash-status     { font-size: 10px !important; padding: 2px 6px !important; }
  #page-m4b .dash-section-title { font-size: 12px !important; }

  /* ── RÉCONCILIATION ── */
  #page-m4b .recon-wrap   { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  #page-m4b .recon-title  { font-size: 13px !important; padding: 10px 12px !important; }
  #page-m4b .recon-steps  {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    padding: 10px 12px 14px !important; gap: 0 !important;
    scrollbar-width: thin !important;
  }
  #page-m4b .recon-step   {
    flex: 0 0 auto !important; min-width: 68px !important;
    max-width: 80px !important; text-align: center !important;
  }
  #page-m4b .recon-step::after { font-size: 11px !important; right: -6px !important; }
  #page-m4b .recon-bubble { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  #page-m4b .recon-step-label { font-size: 9px !important; line-height: 1.3 !important; }

  /* Tableau de réconciliation */
  #page-m4b .recon-wrap table,
  #page-m4b table.recon-table {
    display: block !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-width: 300px !important; font-size: 11px !important; width: 100% !important;
  }
  #page-m4b .recon-wrap td,
  #page-m4b .recon-wrap th { padding: 6px 8px !important; font-size: 11px !important; }

  /* ── CAS AVANCÉS ── */
  #page-m4b .cas-grid    { gap: 8px !important; }
  #page-m4b .cas-item    { overflow: visible !important; }
  #page-m4b .cas-head    { padding: 10px 12px !important; gap: 8px !important; flex-wrap: wrap !important; }
  #page-m4b .cas-icon    { font-size: 18px !important; }
  #page-m4b .cas-title   { font-size: 13px !important; }
  #page-m4b .cas-freq    { font-size: 10px !important; }
  #page-m4b .cas-body    { padding: 10px 12px !important; }
  #page-m4b .cas-situation { font-size: 12px !important; margin-bottom: 8px !important; }
  #page-m4b .cas-step    { font-size: 12px !important; gap: 8px !important; }
  #page-m4b .cas-num     { width: 18px !important; height: 18px !important; font-size: 10px !important; flex-shrink: 0 !important; }
  #page-m4b .cas-tip     { font-size: 11px !important; padding: 7px 10px !important; }

  /* ── ROUTINE CHECKLIST ── */
  #page-m4b .routine-wrap  { overflow: visible !important; }
  #page-m4b .routine-head  { padding: 12px !important; gap: 8px !important; }
  #page-m4b .routine-head-title { font-size: 14px !important; }
  #page-m4b .routine-head-sub   { font-size: 11px !important; }
  #page-m4b .routine-body  { padding: 12px !important; }
  #page-m4b .rw-header { padding: 8px 10px !important; flex-wrap: wrap !important; gap: 6px !important; }
  #page-m4b .rw-title  { font-size: 13px !important; }
  #page-m4b .rw-badge  { font-size: 10px !important; padding: 2px 7px !important; }
  #page-m4b .rw-tasks  { overflow: visible !important; }
  #page-m4b .rw-task   { padding: 8px 10px !important; font-size: 12px !important; gap: 8px !important; }
  #page-m4b .rw-text   { font-size: 12px !important; word-break: break-word !important; line-height: 1.4 !important; }
  #page-m4b .routine-divider { margin: 10px 0 !important; }

  /* ── TRAÇABILITÉ ── */
  #page-m4b .trace-timeline { padding: 10px !important; }
  #page-m4b .trace-item  { gap: 8px !important; }
  #page-m4b .trace-left  { width: 32px !important; flex-shrink: 0 !important; }
  #page-m4b .trace-dot   { width: 12px !important; height: 12px !important; }
  #page-m4b .trace-body  { flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important; padding: 0 0 12px 8px !important; }
  #page-m4b .trace-card  { padding: 8px 10px !important; }
  #page-m4b .trace-time  { font-size: 10px !important; }
  #page-m4b .trace-action  { font-size: 12px !important; word-break: break-word !important; }
  #page-m4b .trace-detail  { font-size: 11px !important; word-break: break-word !important; }
  #page-m4b .trace-who    { font-size: 10px !important; }

  /* ── MÉMO AVANCÉ ── */
  #page-m4b .memo-wrap  { overflow: visible !important; }
  #page-m4b .memo-head  { padding: 12px !important; gap: 8px !important; flex-wrap: wrap !important; }
  #page-m4b .memo-head-title { font-size: 14px !important; }
  #page-m4b .memo-head-sub   { font-size: 11px !important; }
  #page-m4b .memo-body  { padding: 12px !important; }
  #page-m4b .memo-grid  { grid-template-columns: 1fr !important; gap: 8px !important; }
  #page-m4b .memo-section-title { font-size: 12px !important; }
  #page-m4b .memo-item  { font-size: 12px !important; }
  #page-m4b .dl-btn     { display: block !important; width: 100% !important; text-align: center !important; }

  /* ── CHECKLIST ── */
  #page-m4b .chk-item  { padding: 9px 10px !important; gap: 10px !important; }
  #page-m4b .chk-label { font-size: 13px !important; }
  #page-m4b .chk-sub   { font-size: 11px !important; }

  /* ── QUIZ ── */
  #page-m4b .quiz-wrap  { padding: 16px 12px !important; }
  #page-m4b .q-options  { display: flex !important; flex-direction: column !important; gap: 7px !important; }
  #page-m4b .q-opt      { font-size: 13px !important; padding: 10px 12px !important; text-align: left !important; }

  /* ── FOOTER NAV ── */
  #page-m4b .footer-nav {
    flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important;
  }
  #page-m4b .btn-replay, #page-m4b .btn-next-mod {
    width: 100% !important; text-align: center !important; justify-content: center !important;
  }
  #page-m4b .nav-info   { flex-wrap: wrap !important; font-size: 11px !important; gap: 4px !important; }
  #page-m4b .nav-dots   { flex-wrap: wrap !important; }
}

@media (max-width: 400px) {
  #page-m4b .kpi-num   { font-size: 17px !important; }
  #page-m4b .recon-step { min-width: 60px !important; }
}