/* ===================================================
   Cafetiers Suisses — Design System v2
   Premium SaaS · Dark navy + Gold + White cards
   =================================================== */

:root {
  /* Backgrounds */
  --bg-dark:    #06111f;
  --bg-dark-2:  #0b1b2f;
  --bg-dark-3:  #10243c;
  --bg-soft:    #f8fafc;
  --bg-soft-2:  #f1f5f9;
  --card:       #ffffff;

  /* Text */
  --text-main:  #0f172a;
  --text-muted: #64748b;
  --text-dim:   #94a3b8;
  --text-light: #ffffff;
  --text-on-dark-muted: rgba(255,255,255,0.72);

  /* Accents */
  --gold:       #f4b63f;
  --gold-2:     #d89b22;
  --gold-soft:  #fff4d8;
  --gold-glow:  rgba(244,182,63,0.18);

  /* Status */
  --success:    #22c55e;
  --success-soft: #ecfdf5;
  --danger:     #ef4444;
  --danger-soft: #fef2f2;
  --warning:    #f59e0b;
  --info:       #3b82f6;

  /* Borders */
  --border:     #e5e7eb;
  --border-2:   #cbd5e1;
  --border-dark: rgba(255,255,255,0.1);

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-soft:  0 8px 24px rgba(15,23,42,0.06);
  --sh-card:  0 12px 35px rgba(15,23,42,0.08);
  --sh-lift:  0 20px 50px rgba(15,23,42,0.12);
  --sh-dark:  0 20px 60px rgba(0,0,0,0.32);
  --sh-gold:  0 12px 30px rgba(244,182,63,0.28);

  /* Layout */
  --container: 1200px;
  --transition: 0.22s ease;

  --font-main: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Legacy aliases (kept for compatibility with existing inline styles & pages) */
  --bg-deep: var(--bg-dark);
  --bg-mid:  var(--bg-dark-2);
  --bg-card: var(--card);
  --bg-card-h: rgba(244,182,63,0.08);
  --accent:  var(--gold);
  --accent2: var(--gold-2);
  --text:    var(--text-main);
  --green:   var(--success);
  --cold:    #3b82f6;
  --warm:    var(--warning);
  --border-h: rgba(244,182,63,0.5);
  --radius:    var(--r-md);
  --radius-sm: var(--r-sm);
}

/* ===================================================
   RESET & BASE
   =================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--bg-soft);
  color: var(--text-main);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-main);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.15;
}

p { margin: 0; color: var(--text-muted); }

button { font-family: inherit; cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

/* ===================================================
   LAYOUT
   =================================================== */
.container {
  width: min(100% - 40px, var(--container));
  margin: 0 auto;
}

section {
  padding: 90px 0;
  position: relative;
}

section.section-light { background: var(--bg-soft); }
section.section-white { background: #fff; }
section.section-dark  { background: var(--bg-dark); color: #fff; }
section.section-dark p { color: var(--text-on-dark-muted); }
section.section-dark h2 { color: #fff; }

.section-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-header .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--gold-glow);
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-header h2 {
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 14px;
}
.section-header p {
  font-size: 16px;
  line-height: 1.7;
}
section.section-dark .section-header p { color: rgba(255,255,255,0.78); }

/* ===================================================
   REVEAL (scroll-triggered)
   =================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.20s; }
.reveal-delay-4 { transition-delay: 0.28s; }
.reveal-delay-5 { transition-delay: 0.36s; }

/* ===================================================
   BUTTONS
   =================================================== */
.btn-primary,
.btn-secondary,
.btn-exam,
.btn-fiches,
.btn-dark,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  padding: 14px 24px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #ffd97a 0%, var(--gold) 50%, var(--gold-2) 100%);
  color: #08111f;
  box-shadow:
    0 10px 30px rgba(244,182,63,0.45),
    inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s ease;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 50px rgba(244,182,63,0.55),
    0 0 30px rgba(244,182,63,0.35),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:active { transform: translateY(-1px); }

.btn-secondary {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(244,182,63,0.5);
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.btn-exam {
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.4);
}
.btn-exam:hover {
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.7);
  color: #bfdbfe;
  transform: translateY(-2px);
}

.btn-fiches {
  background: rgba(34,197,94,0.12);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.4);
}
.btn-fiches:hover {
  background: rgba(34,197,94,0.22);
  border-color: rgba(34,197,94,0.7);
  color: #bbf7d0;
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--bg-dark);
  color: #fff;
}
.btn-dark:hover { background: var(--bg-dark-2); transform: translateY(-2px); }

.btn-outline {
  background: #fff;
  color: var(--text-main);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-2); }

/* ===================================================
   NAVBAR
   =================================================== */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(6,17,31,0);
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background: rgba(6,17,31,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(244,182,63,0.18);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: #fff;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.nav-logo > span { font-size: 14px; font-weight: 800; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
  font-weight: 600;
}
.nav-links a {
  color: rgba(255,255,255,0.78);
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--gold); }

.nav-cta {
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f !important;
  border-radius: var(--r-pill);
  font-weight: 800 !important;
  font-size: 13px !important;
  box-shadow: 0 6px 18px rgba(244,182,63,0.3);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(244,182,63,0.4); color: #08111f !important; }

.nav-game,
.nav-fiches,
.nav-exam,
.nav-hero {
  padding: 7px 14px !important;
  border-radius: var(--r-pill);
  border: 1px solid;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: var(--transition);
}
.nav-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(220,38,38,0.10);
  border: 1px solid rgba(220,38,38,0.30);
  color: #FCA5A5 !important;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 8px;
  transition: 0.18s;
}
.nav-admin:hover { background: rgba(220,38,38,0.20); border-color: rgba(220,38,38,0.55); color: #FECACA !important; }
.nav-game   { background: rgba(244,182,63,0.10) !important; border-color: rgba(244,182,63,0.32) !important; color: var(--gold) !important; }
.nav-game:hover   { background: rgba(244,182,63,0.20) !important; border-color: rgba(244,182,63,0.55) !important; color: var(--gold) !important; }
.nav-fiches { background: rgba(34,197,94,0.10) !important; border-color: rgba(34,197,94,0.32) !important; color: #86efac !important; }
.nav-fiches:hover { background: rgba(34,197,94,0.20) !important; border-color: rgba(34,197,94,0.55) !important; color: #bbf7d0 !important; }
.nav-exam   { background: rgba(59,130,246,0.10) !important; border-color: rgba(59,130,246,0.32) !important; color: #93c5fd !important; }
.nav-exam:hover   { background: rgba(59,130,246,0.20) !important; border-color: rgba(59,130,246,0.55) !important; color: #bfdbfe !important; }
.nav-hero   { background: rgba(217,70,239,0.10) !important; border-color: rgba(217,70,239,0.32) !important; color: #d8b4fe !important; }
.nav-hero:hover   { background: rgba(217,70,239,0.20) !important; border-color: rgba(217,70,239,0.55) !important; color: #e9d5ff !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}

/* ===================================================
   HERO
   =================================================== */
#hero {
  position: relative;
  background:
    radial-gradient(1400px 700px at 85% 12%, rgba(244,182,63,0.22), transparent 55%),
    radial-gradient(1000px 600px at 5% 95%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(800px 400px at 50% 100%, rgba(244,182,63,0.06), transparent 70%),
    linear-gradient(180deg, #020617 0%, #06111f 50%, #0b1b2f 100%);
  color: #fff;
  padding: 150px 0 130px;
  overflow: hidden;
  isolation: isolate;
}
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 20%, rgba(244,182,63,0.5), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 80% 30%, rgba(244,182,63,0.4), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.3), transparent);
  background-size: 100% 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}
#hero::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(244,182,63,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  filter: blur(40px);
}

.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-particles .particle {
  position: absolute;
  bottom: -50px;
  opacity: 0;
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  10%  { opacity: 0.18; }
  90%  { opacity: 0.18; }
  100% { opacity: 0; transform: translateY(-110vh) rotate(360deg); }
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, var(--container));
  margin: 0 auto;
  max-width: 1100px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: linear-gradient(135deg, rgba(244,182,63,0.18), rgba(244,182,63,0.08));
  border: 1px solid rgba(244,182,63,0.4);
  border-radius: var(--r-pill);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(244,182,63,0.18);
}

.hero-title {
  font-size: clamp(44px, 6.5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-bottom: 24px;
  font-weight: 900;
  max-width: 620px;
  color: #ffffff;
  position: relative;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.gradient-text {
  display: inline-block;
  background: linear-gradient(135deg, #ffd97a 0%, var(--gold) 40%, #ffe6a8 70%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
  filter: drop-shadow(0 4px 24px rgba(244,182,63,0.45));
  position: relative;
}
.gradient-text::after {
  content: '';
  position: absolute;
  inset: -10% -8%;
  background: radial-gradient(ellipse, rgba(244,182,63,0.18) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
  filter: blur(20px);
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
  margin-bottom: 30px;
  font-weight: 400;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 760px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat strong {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-stat span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 36px;
  margin: 8px auto 0;
  background: linear-gradient(180deg, rgba(244,182,63,0.6), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ===================================================
   HERO GRID + FLOATING CARD + IMAGE
   =================================================== */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

.hero-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 30px 0 36px;
}
.hero-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.88);
  font-size: 15px;
  font-weight: 500;
}
.hero-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f;
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(244,182,63,0.32);
}

.hero-right {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  position: relative;
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 5 / 6;
}

.hero-img-frame {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(244,182,63,0.18),
    0 0 60px rgba(244,182,63,0.08);
  isolation: isolate;
}
.hero-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-img-frame:hover img { transform: scale(1.08); }
.hero-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.18) 50%, transparent 100%),
    linear-gradient(180deg, transparent 50%, rgba(2,6,23,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Floating progress card on top of image */
.hero-card-floating {
  position: absolute;
  bottom: -28px;
  left: -32px;
  z-index: 5;
  width: 280px;
  max-width: 88%;
  animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Floating decoration pills (top of image) */
.hero-badge-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(11, 27, 47, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(244,182,63,0.3);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  z-index: 4;
  white-space: nowrap;
}
.hero-badge-pill strong {
  color: var(--gold);
  font-weight: 800;
  margin-right: 6px;
}
.hbp-icon { font-size: 16px; }
.hbp-1 {
  top: 24px;
  right: -28px;
  animation: floatPill1 5s ease-in-out infinite;
}
.hbp-2 {
  top: 44%;
  right: -52px;
  animation: floatPill2 6s ease-in-out infinite 0.8s;
}
@keyframes floatPill1 {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes floatPill2 {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(8px) rotate(1deg); }
}
.hero-card {
  width: 100%;
  max-width: 320px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11,27,47,0.92), rgba(2,6,23,0.96));
  border: 1px solid rgba(244,182,63,0.32);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(244,182,63,0.22), transparent 70%);
  pointer-events: none;
}
.hero-card-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 18px;
  text-transform: uppercase;
  position: relative;
}
.hero-card .progress-ring {
  background: conic-gradient(
    var(--gold) 0 var(--pct, 0%),
    rgba(255,255,255,0.08) var(--pct, 0%) 100%
  );
  margin: 0 auto 16px;
  transition: background 0.6s ease;
  width: 138px;
  height: 138px;
  position: relative;
}
.hero-card .progress-ring > span {
  background: var(--bg-dark);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  width: 102px;
  height: 102px;
  letter-spacing: -0.02em;
}
.hero-card-rating {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.hero-card-msg {
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin-bottom: 22px;
}
.hero-card-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 -8px 20px;
}
.hero-card-next-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.hero-card-next {
  font-size: 13.5px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.4;
}
.hero-card-cta {
  display: block;
  padding: 11px 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(244,182,63,0.32);
  transition: var(--transition);
}
.hero-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(244,182,63,0.42);
  color: #08111f;
}

/* Stats bar overlapping bottom of hero */
.hero-statsbar-wrap {
  position: relative;
  margin-top: 100px;
  margin-bottom: -64px;
  z-index: 5;
}
.stats-bar {
  background: #fff;
  border-radius: 24px;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
}
.stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(244,182,63,0.4), transparent 50%, rgba(244,182,63,0.2));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  pointer-events: none;
}
.stats-bar .stat-item + .stat-item {
  border-left: 1px solid var(--border);
  padding-left: 0;
}
.stat-item {
  padding: 0 24px;
}
.stat-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(244,182,63,0.12), rgba(244,182,63,0.04));
  border: 1px solid rgba(244,182,63,0.2);
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(244,182,63,0.1);
}
.stat-item:nth-child(2) .stat-icon { background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04)); border-color: rgba(34,197,94,0.2); box-shadow: 0 4px 12px rgba(34,197,94,0.08); }
.stat-item:nth-child(3) .stat-icon { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04)); border-color: rgba(59,130,246,0.2); box-shadow: 0 4px 12px rgba(59,130,246,0.08); }
.stat-item:nth-child(4) .stat-icon { background: linear-gradient(135deg, rgba(217,70,239,0.12), rgba(217,70,239,0.04)); border-color: rgba(217,70,239,0.2); box-shadow: 0 4px 12px rgba(217,70,239,0.08); }
.stat-item strong {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0f172a, #475569);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.stat-item strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-item span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Hide old hero-stats (replaced by stats-bar) */
#hero .hero-stats { display: none; }

/* ===================================================
   GLASS / WHITE CARDS
   =================================================== */
.glass-card,
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: var(--sh-card);
  transition: var(--transition);
}
.glass-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lift);
  border-color: rgba(244,182,63,0.4);
}

.dark-card {
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-dark);
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* ===================================================
   INTRO (4 règles d'or)
   =================================================== */
#intro { background: var(--bg-soft); }

.intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.intro-card {
  text-align: left;
  padding: 28px;
}
.intro-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: 16px;
  background: var(--gold-soft);
}
.intro-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.intro-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ===================================================
   DANGERS (flip cards)
   =================================================== */
#dangers { background: #fff; }

.dangers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  perspective: 1500px;
}

.flip-card {
  height: 280px;
  cursor: pointer;
  position: relative;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  padding: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--border);
}
.flip-front {
  background: #fff;
  align-items: center;
  text-align: center;
  box-shadow: var(--sh-card);
}
.flip-back {
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
  color: #fff;
  transform: rotateY(180deg);
  border-color: rgba(244,182,63,0.3);
  box-shadow: var(--sh-dark);
  justify-content: flex-start;
}

.flip-icon {
  font-size: 56px;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 12px rgba(244,182,63,0.25));
}
.flip-front h3 { font-size: 16px; margin-bottom: 4px; }
.flip-back  h3 { font-size: 18px; color: var(--gold); margin-bottom: 14px; }

.flip-back ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flip-back ul li {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  padding-left: 14px;
  position: relative;
}
.flip-back ul li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.flip-hint {
  margin-top: auto;
  padding-top: 12px;
  font-size: 11px;
  color: var(--gold-2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===================================================
   TEMPÉRATURES
   =================================================== */
#temperatures { background: var(--bg-soft); }

.temp-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
  align-items: start;
}

.temp-scale {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.temp-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.temp-zone:last-child { border-bottom: 0; }
.zone-label { font-size: 13.5px; font-weight: 600; color: var(--text-main); }
.zone-temp { font-size: 14px; font-weight: 800; }

.zone-steril   { background: linear-gradient(90deg, rgba(168,85,247,0.08), transparent); }
.zone-destroy  { background: linear-gradient(90deg, rgba(239,68,68,0.08), transparent); }
.zone-hot      { background: linear-gradient(90deg, rgba(244,182,63,0.10), transparent); }
.zone-danger   { background: linear-gradient(90deg, rgba(239,68,68,0.18), rgba(239,68,68,0.05)); }
.zone-cold     { background: linear-gradient(90deg, rgba(59,130,246,0.10), transparent); }
.zone-freeze   { background: linear-gradient(90deg, rgba(59,130,246,0.18), transparent); }

.temp-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: var(--transition);
}
.product-row:hover {
  border-color: var(--gold);
  transform: translateX(2px);
  box-shadow: var(--sh-soft);
}
.product-icon { font-size: 22px; }
.product-info strong { display: block; font-size: 14px; color: var(--text-main); }
.product-info span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.product-temp { font-size: 14px; font-weight: 800; }

/* ===================================================
   BACTÉRIES
   =================================================== */
#bacteries { background: #fff; }

.bacteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.bacteria-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--sh-card);
  transition: var(--transition);
}
.bacteria-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lift);
  border-color: rgba(244,182,63,0.4);
}
.bacteria-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.bacteria-icon { font-size: 24px; }
.bacteria-card h3 { flex: 1; font-size: 16px; }
.bacteria-tag {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag-high { background: rgba(239,68,68,0.12); color: var(--danger); }
.tag-medium { background: rgba(245,158,11,0.12); color: var(--warning); }

.bacteria-source {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
}
.bacteria-source strong { color: var(--text-main); }
.bacteria-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

/* ===================================================
   HACCP
   =================================================== */
#haccp { background: var(--bg-soft); }

.haccp-wrapper {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}

.haccp-steps h3 {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 20px;
}
.haccp-step {
  display: flex;
  gap: 18px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  box-shadow: var(--sh-soft);
  transition: var(--transition);
}
.haccp-step:hover {
  transform: translateX(4px);
  border-color: var(--gold);
  box-shadow: var(--sh-card);
}
.step-number {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex-shrink: 0;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(244,182,63,0.3);
}
.step-content h3 { font-size: 15px; margin-bottom: 6px; color: var(--text-main); }
.step-content p { font-size: 13px; line-height: 1.6; color: var(--text-muted); }

.haccp-docs {
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
  color: #fff;
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid rgba(244,182,63,0.18);
  box-shadow: var(--sh-dark);
}
.docs-title {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.doc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.doc-item:last-of-type { border-bottom: 0; }
.doc-icon { font-size: 18px; }
.doc-name { color: rgba(255,255,255,0.85); }
.doc-badge {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(244,182,63,0.15);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ===================================================
   NETTOYAGE TRACTS
   =================================================== */
#nettoyage { background: #fff; }

.tracts-acronym {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.tract-letter {
  flex: 1 1 140px;
  min-width: 130px;
  padding: 22px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--sh-soft);
}
.tract-letter:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--sh-card);
}
.tract-big {
  font-size: 44px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.tract-word {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}
.tract-desc {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===================================================
   ALLERGÈNES
   =================================================== */
#allergenes { background: var(--bg-soft); }

.allergen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.allergen-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 20px 16px;
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--sh-soft);
}
.allergen-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--sh-card);
}
.allergen-icon { font-size: 30px; margin-bottom: 10px; }
.allergen-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
.allergen-num {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--gold-2);
  background: var(--gold-soft);
  padding: 2px 7px;
  border-radius: var(--r-pill);
}

.allergen-note {
  margin: 32px auto 0;
  max-width: 680px;
  padding: 18px 24px;
  background: var(--gold-soft);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.6;
}

/* ===================================================
   MÉMO
   =================================================== */
#memo { background: #fff; }

.memo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.memo-card {
  padding: 26px;
}
.memo-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.memo-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gold-soft);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.memo-card-header h3 { font-size: 15px; }
.memo-rules { display: flex; flex-direction: column; gap: 10px; }
.memo-rules li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.memo-rules li strong { color: var(--text-main); }
.rule-marker {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: #08111f;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ===================================================
   LÉGISLATION (pyramide + ordonnances)
   =================================================== */
#legislation { background: var(--bg-soft); }

.legal-pyramid {
  max-width: 720px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pyramid-level { display: flex; justify-content: center; }
.pyramid-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-soft);
  transition: var(--transition);
}
.pyramid-block:hover { transform: translateX(4px); border-color: var(--gold); }
.level-1 .pyramid-block { width: 50%; border-color: rgba(239,68,68,0.4); }
.level-2 .pyramid-block { width: 63%; border-color: rgba(244,182,63,0.5); }
.level-3 .pyramid-block { width: 76%; border-color: rgba(59,130,246,0.4); }
.level-4 .pyramid-block { width: 88%; border-color: rgba(34,197,94,0.4); }
.level-5 .pyramid-block { width: 100%; }
.pyr-icon { font-size: 22px; flex-shrink: 0; }
.pyramid-block div { display: flex; flex-direction: column; gap: 2px; }
.pyramid-block strong { font-size: 14px; color: var(--text-main); }
.pyramid-block span { font-size: 12px; color: var(--text-muted); }

.ordonnance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.ordonnance-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px;
  box-shadow: var(--sh-card);
  transition: var(--transition);
}
.ordonnance-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244,182,63,0.5);
  box-shadow: var(--sh-lift);
}
.ord-abbr {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.ordonnance-card h3 { font-size: 15px; margin-bottom: 8px; }
.ordonnance-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.ord-key {
  margin-top: 14px;
  padding: 8px 12px;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px;
  color: var(--gold-2);
  font-weight: 700;
}

/* ===================================================
   TROMPERIE
   =================================================== */
#tromperie { background: #fff; }

.verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.verdict-card {
  padding: 22px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
  border: 1px solid;
}
.verdict-false { background: var(--danger-soft); border-color: rgba(239,68,68,0.25); }
.verdict-true  { background: var(--success-soft); border-color: rgba(34,197,94,0.3); }
.verdict-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 14px;
}
.verdict-false .verdict-icon { background: var(--danger); color: #fff; }
.verdict-true  .verdict-icon { background: var(--success); color: #fff; }
.verdict-card h3 { font-size: 15px; margin-bottom: 8px; }
.verdict-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.verdict-label {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.label-false { background: var(--danger); color: #fff; }
.label-true  { background: var(--success); color: #fff; }

.tromperie-note {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.tromperie-note > strong { display: block; font-size: 15px; margin-bottom: 16px; color: var(--text-main); }
.dlc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dlc-item { display: flex; flex-direction: column; gap: 6px; }
.dlc-type {
  display: inline-block;
  padding: 4px 12px;
  background: var(--danger);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: 12px;
  width: fit-content;
}
.dlc-type-ddm { background: var(--gold) !important; color: #08111f !important; }
.dlc-name { font-weight: 700; font-size: 13px; color: var(--text-main); }
.dlc-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; }

/* ===================================================
   RETRAIT & RAPPEL
   =================================================== */
#retrait { background: var(--bg-soft); }

.retrait-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto 36px;
}
.retrait-step {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
  transition: var(--transition);
}
.retrait-step:hover { transform: translateX(4px); border-color: var(--gold); box-shadow: var(--sh-card); }
.rs-number {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(244,182,63,0.3);
}
.rs-content h3 { font-size: 14.5px; margin-bottom: 4px; }
.rs-content p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.retrait-cas {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
  color: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-dark);
  border: 1px solid rgba(244,182,63,0.18);
}
.cas-header {
  padding: 16px 24px;
  background: rgba(244,182,63,0.12);
  border-bottom: 1px solid rgba(244,182,63,0.25);
  font-weight: 700;
  color: var(--gold);
  font-size: 14px;
}
.cas-scenario {
  padding: 20px 24px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cas-scenario strong { color: #fff; }
.cas-actions { padding: 18px 24px; display: flex; flex-direction: column; gap: 10px; }
.cas-action {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  padding: 8px 0;
}
.correct-action { color: rgba(255,255,255,0.85); }
.wrong-action { color: rgba(254,202,202,0.85); }
.ca-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  margin-top: 1px;
}
.correct-action .ca-icon { background: rgba(34,197,94,0.2); color: var(--success); }
.wrong-action .ca-icon { background: rgba(239,68,68,0.2); color: var(--danger); }

/* ===================================================
   CONTRÔLES OFFICIELS
   =================================================== */
#controles { background: #fff; }

.controles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}
.controle-area {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--sh-soft);
  transition: var(--transition);
}
.controle-area:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--sh-card);
}
.ca-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}
.ca-list { display: flex; flex-direction: column; gap: 8px; }
.ca-list li {
  font-size: 12.5px;
  color: var(--text-muted);
  padding-left: 20px;
  position: relative;
  line-height: 1.55;
}
.ca-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 900;
  font-size: 12px;
}

.controles-sanctions {
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid var(--border);
}
.sanction-title {
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 20px;
  color: var(--text-main);
}
.sanctions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.sanction-item {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid;
}
.sanction-item strong { font-size: 13px; }
.sanction-item span { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.sanction-yellow  { border-color: rgba(245,200,0,0.4); }
.sanction-yellow  strong { color: #b45309; }
.sanction-orange  { border-color: rgba(245,158,11,0.4); }
.sanction-orange  strong { color: var(--warning); }
.sanction-red     { border-color: rgba(239,68,68,0.4); }
.sanction-red     strong { color: var(--danger); }
.sanction-darkred { background: var(--danger-soft); border-color: rgba(239,68,68,0.5); }
.sanction-darkred strong { color: #b91c1c; }

/* ===================================================
   QUIZ
   =================================================== */
#quiz { background: var(--bg-soft); }

.quiz-wrapper {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--sh-card);
}

.quiz-progress-bar-outer {
  height: 6px;
  background: var(--bg-soft-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 20px;
}
.quiz-progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius: inherit;
  transition: width 0.4s ease;
}

.quiz-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-weight: 600;
}
.quiz-counter strong { color: var(--gold-2); font-size: 16px; font-weight: 900; }
.quiz-score-live span { color: var(--text-main); font-weight: 800; }

.question-card {
  padding: 24px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  margin-bottom: 22px;
  border: 1px solid var(--border);
}
.question-category {
  display: inline-block;
  padding: 4px 12px;
  background: var(--gold-soft);
  color: var(--gold-2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.question-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-main);
  font-family: inherit;
}
.option-btn:not(:disabled):hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: translateX(2px);
}
.option-btn:disabled { cursor: default; }
.option-btn.correct {
  border-color: var(--success);
  background: var(--success-soft);
  color: #166534;
}
.option-btn.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: #991b1b;
}
.option-letter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-soft-2);
  color: var(--text-main);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.option-btn.correct .option-letter { background: var(--success); color: #fff; }
.option-btn.wrong .option-letter { background: var(--danger); color: #fff; }

.feedback-box {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.55;
  border-left: 4px solid;
}
.feedback-box.show { display: block; }
.feedback-correct {
  background: var(--success-soft);
  border-left-color: var(--success);
  color: #166534;
}
.feedback-wrong {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: #991b1b;
}
.feedback-box strong { display: block; margin-bottom: 4px; }

.quiz-nav {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}
.btn-next {
  display: none;
  padding: 12px 26px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--sh-gold);
  transition: var(--transition);
}
.btn-next.show { display: inline-flex; }
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(244,182,63,0.4); }

.quiz-results {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.quiz-results.show { display: block; }

.score-circle {
  --score-color: var(--gold);
  --score-pct: 0%;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background:
    conic-gradient(var(--score-color) 0 var(--score-pct), var(--bg-soft-2) var(--score-pct) 100%);
  display: grid;
  place-items: center;
  position: relative;
}
.score-circle::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}
.score-number {
  position: relative;
  font-size: 44px;
  font-weight: 900;
  color: var(--score-color);
  z-index: 1;
}
.score-label {
  position: relative;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  z-index: 1;
  margin-top: -4px;
}

.badge-display { font-size: 50px; margin-bottom: 12px; }
.badge-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 10px;
}
.badge-message {
  max-width: 480px;
  margin: 0 auto 22px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
}

.btn-restart {
  padding: 13px 28px;
  background: var(--bg-dark);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.btn-restart:hover { background: var(--bg-dark-2); transform: translateY(-2px); }

/* ===================================================
   FOOTER (rich, shared)
   =================================================== */
footer {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: rgba(255,255,255,0.65);
  padding: 60px 0 30px;
  font-size: 13px;
  border-top: 1px solid rgba(244,182,63,0.18);
}
footer a {
  color: rgba(255,255,255,0.78);
  transition: color var(--transition);
}
footer a:hover { color: var(--gold); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 12.5px; line-height: 1.65; max-width: 320px; }
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: #fff;
  font-size: 16px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 800;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.footer-col li a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
}
.footer-disclaimer {
  background: rgba(244,182,63,0.06);
  border: 1px solid rgba(244,182,63,0.18);
  padding: 12px 16px;
  border-radius: 10px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  font-size: 12px;
}
.footer-disclaimer a { color: var(--gold); text-decoration: underline; }
.footer-copy a { color: var(--gold); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ===================================================
   PAGE HERO (sub-pages : programme, sources, marche, cas)
   =================================================== */
.page-light { background: var(--bg-soft); }
.page-hero {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: #fff;
  padding: 130px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 80% 30%, rgba(244,182,63,0.16), transparent 60%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.03em;
  color: #fff;
  margin: 18px 0 16px;
  line-height: 1.1;
}
.page-hero p {
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.65;
}
.page-hero-meta {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.page-hero-meta strong { color: var(--gold); font-weight: 800; margin-right: 4px; }
.page-hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(244,182,63,0.14);
  border: 1px solid rgba(244,182,63,0.3);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===================================================
   MODULES GRID (programme.html + dashboard)
   =================================================== */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px;
}
.module-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--sh-card);
  transition: var(--transition);
  position: relative;
}
.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lift);
  border-color: rgba(244,182,63,0.5);
}
.mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 26px;
}
.mc-status {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
}
.mcs-ready { background: rgba(34,197,94,0.12); color: #16a34a; }
.mcs-in-progress { background: rgba(245,158,11,0.12); color: #d97706; }
.mcs-skeleton { background: rgba(100,116,139,0.12); color: var(--text-muted); }

.module-card h3 {
  font-size: 17px;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.mc-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.mc-topics {
  display: flex; flex-direction: column; gap: 6px;
  margin: 4px 0 6px;
}
.mc-topics li {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.mc-topics li::before {
  content: '·';
  position: absolute; left: 0; top: -2px;
  color: var(--gold);
  font-weight: 900;
  font-size: 16px;
}
.mc-topics .mc-more {
  color: var(--gold-2);
  font-weight: 700;
  font-size: 11.5px;
}
.mc-topics .mc-more::before { content: '+'; color: var(--gold-2); }
.mc-stats {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.mc-stats strong {
  color: var(--text-main);
  font-weight: 800;
  font-size: 14px;
  margin-right: 4px;
}
.mc-refs {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.55;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: 8px;
}
.mc-refs a {
  color: var(--gold-2);
  font-weight: 600;
  text-decoration: none;
}
.mc-refs a:hover { text-decoration: underline; }
.mc-refs strong { color: var(--text-main); margin-right: 4px; font-size: 11px; }
.mc-actions { margin-top: auto; }
.mc-btn { width: 100%; }
.mc-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ===================================================
   SOURCES (page sources, programme)
   =================================================== */
.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.source-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: var(--transition);
  box-shadow: var(--sh-soft);
}
.source-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--sh-card);
}
.src-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--gold-soft);
  color: var(--gold-2);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.source-card h3 { font-size: 14.5px; margin-bottom: 6px; color: var(--text-main); }
.source-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

/* Legal page blocks */
.legal-block {
  max-width: 820px;
  margin: 0 auto 36px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  box-shadow: var(--sh-soft);
}
.legal-block h2 {
  font-size: 22px;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.legal-block p { color: var(--text-main); font-size: 14.5px; line-height: 1.7; }
.legal-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.legal-list li {
  font-size: 14px;
  color: var(--text-main);
  padding: 8px 0;
  line-height: 1.5;
}
.legal-list li:not(:last-child) { border-bottom: 1px solid var(--border); }

.src-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 16px;
}
.src-item {
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  font-size: 13px;
  align-items: center;
}
.src-item strong { color: var(--text-main); font-size: 14px; }
.src-item a {
  color: var(--gold-2); font-weight: 700;
  text-decoration: none; font-size: 12px;
  padding: 4px 10px; background: var(--gold-soft); border-radius: 8px;
}
.src-item a:hover { background: var(--gold); color: #08111f; }
.src-item span {
  grid-column: 1 / -1;
  color: var(--text-muted); font-size: 12.5px;
  line-height: 1.55; margin-top: 4px;
}
.legal-final {
  border-color: rgba(244,182,63,0.4);
  background: linear-gradient(135deg, var(--gold-soft) 0%, #fff 100%);
}
.legal-disclaimer-strong {
  font-weight: 600;
  color: var(--text-main);
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.disclaimer-box {
  max-width: 820px;
  margin: 32px auto 0;
  padding: 18px 24px;
  background: var(--gold-soft);
  border: 1px solid rgba(244,182,63,0.4);
  border-radius: var(--r-md);
}
.disclaimer-box strong { display: block; color: var(--gold-2); margin-bottom: 6px; font-size: 14px; }
.disclaimer-box p { font-size: 13px; color: var(--text-main); line-height: 1.6; }
.disclaimer-box strong + p strong { background: rgba(244,182,63,0.3); padding: 0 4px; border-radius: 3px; }

/* ===================================================
   GLOBAL DISCLAIMER BANNER (top of pages)
   =================================================== */
.disclaimer-banner {
  background: rgba(244,182,63,0.08);
  border-bottom: 1px solid rgba(244,182,63,0.2);
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 99;
}
.disclaimer-banner a {
  color: var(--gold);
  text-decoration: underline;
  font-weight: 700;
}

/* ===================================================
   COMMENT ÇA MARCHE
   =================================================== */
.how-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.how-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 28px 32px;
  text-align: center;
  position: relative;
  box-shadow: var(--sh-soft);
  transition: var(--transition);
}
.how-step:hover {
  transform: translateY(-4px);
  border-color: rgba(244,182,63,0.5);
  box-shadow: var(--sh-card);
}
.how-num {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #08111f;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(244,182,63,0.32);
  border: 3px solid #fff;
}
.how-icon {
  font-size: 38px;
  margin: 12px 0 16px;
  filter: drop-shadow(0 6px 12px rgba(244,182,63,0.18));
}
.how-step h3 { font-size: 18px; margin-bottom: 10px; color: var(--text-main); }
.how-step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }

.how-arrow {
  font-size: 28px;
  font-weight: 300;
  color: var(--gold);
  text-align: center;
}

/* ===================================================
   FORMATION COMPLÈTE (dark CTA section)
   =================================================== */
.section-formation {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-formation::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 90% 50%, rgba(244,182,63,0.10), transparent 60%);
  pointer-events: none;
}
.formation-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.formation-left h2 {
  color: #fff;
  font-size: clamp(28px, 3.8vw, 42px);
  letter-spacing: -0.03em;
  margin: 16px 0 24px;
  line-height: 1.15;
}
.label-on-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(244,182,63,0.14);
  border: 1px solid rgba(244,182,63,0.32);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.formation-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
}
.formation-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.86);
}
.formation-list li::before {
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #08111f;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
}
.formation-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-outline-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.btn-outline-on-dark:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.4);
}

/* Formation mock stack (image + floating tablet) */
.formation-mock-stack {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
}
.formation-img-frame {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(244,182,63,0.18);
}
.formation-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.exam-mock-floating {
  position: absolute;
  bottom: -24px;
  right: -28px;
  z-index: 5;
  max-width: 360px;
  width: 92%;
}

/* Tablet mockup */
.exam-mock {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 24px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(244,182,63,0.18);
  max-width: 460px;
  margin: 0 auto;
}
.exam-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.emh-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
}
.emh-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.exam-mock-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
}
.exam-mock-ring { display: grid; place-items: center; padding: 12px 0 18px; }
.exam-ring {
  width: 140px;
  height: 140px;
  background: conic-gradient(var(--success) 0 var(--pct, 84%), var(--bg-soft-2) var(--pct, 84%) 100%) !important;
}
.exam-ring > span {
  background: #fff !important;
  color: var(--success) !important;
  font-size: 32px;
}
.exam-mock-msg {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.exam-mock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.exam-mock-actions .btn-primary { padding: 12px 16px; font-size: 13px; }

/* ===================================================
   PROGRESS RING (réutilisable)
   =================================================== */
.progress-ring {
  --pct: 70%;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0 var(--pct), rgba(255,255,255,0.13) var(--pct) 100%);
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.progress-ring > span {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
}

/* ===================================================
   ACHIEVEMENT BADGES
   =================================================== */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.achievement {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-soft), #fff);
  border: 1px solid rgba(244,182,63,0.4);
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--gold-2);
  box-shadow: 0 8px 22px rgba(244,182,63,0.16);
}

/* ===================================================
   PRICING (reusable)
   =================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.price-card {
  position: relative;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  transition: var(--transition);
}
.price-card.popular {
  border-color: var(--gold);
  transform: translateY(-8px);
  box-shadow: var(--sh-lift);
}
.price-card .price {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text-main);
}
.price-card ul { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.price-card li { font-size: 13px; color: var(--text-muted); }
.price-card li::before { content: '✓'; color: var(--success); font-weight: 900; margin-right: 8px; }

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 980px) {
  section { padding: 64px 0; }
  .temp-layout,
  .haccp-wrapper { grid-template-columns: 1fr; gap: 24px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .hero-right { justify-content: center; }
  .hero-visual { max-width: 420px; aspect-ratio: 4/5; }
  .hero-card-floating { bottom: -20px; left: -16px; }
  .hbp-1 { right: -8px; top: 16px; }
  .hbp-2 { right: -16px; top: 42%; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 18px 8px; }
  .stat-item { padding: 16px 18px; }
  .stats-bar .stat-item + .stat-item { border-left: 0; }
  .stats-bar .stat-item:nth-child(2),
  .stats-bar .stat-item:nth-child(4) { border-left: 1px solid var(--border) !important; }
  .stats-bar .stat-item:nth-child(3),
  .stats-bar .stat-item:nth-child(4) { border-top: 1px solid var(--border); }
  .hero-statsbar-wrap { margin-top: 56px; margin-bottom: -48px; }
  #hero { padding: 120px 0 90px; }
  .how-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-arrow { transform: rotate(90deg); }
  .formation-wrap { grid-template-columns: 1fr; gap: 36px; }
  .formation-mock-stack { max-width: 420px; }
  .exam-mock-floating { right: -16px; bottom: -20px; }
}

@media (max-width: 768px) {
  #navbar { padding: 12px 16px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons > * { width: 100%; justify-content: center; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero-title { font-size: clamp(36px, 9vw, 56px) !important; }
  .hero-visual { max-width: 360px; }
  .stat-icon { width: 40px; height: 40px; font-size: 18px; }
  .stat-item strong { font-size: 22px; }

  .dlc-grid { grid-template-columns: 1fr; }
  .retrait-step { flex-direction: column; gap: 10px; }
  .quiz-wrapper { padding: 22px; }
  .question-text { font-size: 15px; }
  .option-btn { padding: 14px 14px; }

  .hbp-1, .hbp-2 { display: none; }
}

@media (max-width: 480px) {
  .intro-grid { grid-template-columns: 1fr; }
  .allergen-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .flip-card { height: 250px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stat strong { font-size: 28px; }
  .sanctions-row { grid-template-columns: 1fr; }
  .verdict-grid { grid-template-columns: 1fr; }
}

/* ===================================================
   UTILS
   =================================================== */
kbd {
  display: inline-block;
  padding: 2px 7px;
  background: var(--bg-soft-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
}

/* ===================================================
   MODES GRID — homepage feature cards
   =================================================== */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
}
.mode-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--sh-card);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.mode-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lift);
  border-color: var(--gold);
}
.mode-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,182,63,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.mode-emoji {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 8px rgba(244,182,63,0.18));
}
.mode-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.mode-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}
.mode-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-2);
  margin-top: auto;
}
.mode-card-featured {
  background: linear-gradient(135deg, var(--gold-soft), #fff);
  border-color: var(--gold);
}
.mode-card-featured .mode-cta { color: #92400e; }
.mode-card-special {
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
  color: #fff;
  border-color: rgba(244,182,63,0.4);
}
.mode-card-special h3 { color: #fff; }
.mode-card-special p { color: rgba(255,255,255,0.78); }
.mode-card-special .mode-cta { color: var(--gold); }
.mode-card-special::before {
  background: radial-gradient(circle, rgba(244,182,63,0.25) 0%, transparent 70%);
}

/* ===================================================
   PLATFORM v3 — Shared nav + Modules + Diagnostic
   =================================================== */

:root {
  /* Module accent palette */
  --m1: #3b82f6; --m1-soft: #dbeafe;
  --m2: #f4b63f; --m2-soft: #fff4d8;
  --m3: #ef4444; --m3-soft: #fee2e2;
  --m4: #0ea5e9; --m4-soft: #e0f2fe;
  --m5: #8b5cf6; --m5-soft: #ede9fe;
  /* Warm beige for course bodies */
  --warm-bg:    #faf7f2;
  --warm-card:  #fffdf9;
  --warm-line:  #e8dfd1;
  --coffee:     #6f4e37;
}

/* ─── Shared site-nav ───────────────────────── */
#site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(6,17,31,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(244,182,63,0.18);
}
#site-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100% - 40px, 1280px);
  margin: 0 auto;
  padding: 16px 0;
}
#site-nav .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
}
#site-nav .nav-brand-icon { font-size: 22px; }
#site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
#site-nav .nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  transition: var(--transition);
}
#site-nav .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
#site-nav .nav-links a.active { color: var(--gold); background: rgba(244,182,63,0.1); }
#site-nav .nav-links a.nav-exam {
  color: #fff;
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.35);
}
#site-nav .nav-links a.nav-exam:hover { background: rgba(239,68,68,0.28); }
#site-nav .nav-links a.nav-cta {
  color: var(--bg-dark);
  background: var(--gold);
  font-weight: 800;
  padding: 10px 18px;
}
#site-nav .nav-links a.nav-cta:hover {
  background: var(--gold-2);
  transform: translateY(-1px);
  box-shadow: var(--sh-gold);
}
#site-nav .nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-sm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
#site-nav .nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  transition: var(--transition);
}
#site-nav .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#site-nav .nav-toggle.open span:nth-child(2) { opacity: 0; }
#site-nav .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  #site-nav .nav-toggle { display: flex; }
  #site-nav .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-dark);
    border-top: 1px solid rgba(244,182,63,0.18);
    padding: 16px 20px;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
  }
  #site-nav .nav-links.open { max-height: 80vh; padding-top: 16px; padding-bottom: 16px; }
  #site-nav .nav-links a { padding: 14px 16px; font-size: 15px; }
  #site-nav .nav-links a.nav-cta { margin-top: 8px; justify-content: center; }
}

/* ─── Modules catalog (modules.html) ──────── */
.modules-page { padding: 60px 0 100px; background: var(--bg-soft); }
.modules-hero {
  text-align: center;
  padding: 60px 0 50px;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: #fff;
  border-bottom: 1px solid rgba(244,182,63,0.2);
}
.modules-hero .label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(244,182,63,0.15);
  border: 1px solid rgba(244,182,63,0.35);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.modules-hero h1 {
  font-size: clamp(32px, 5vw, 50px);
  color: #fff;
  margin: 0 auto 16px;
  max-width: 900px;
}
.modules-hero h1 span { color: var(--gold); }
.modules-hero p {
  color: rgba(255,255,255,0.76);
  font-size: 17px;
  max-width: 700px;
  margin: 0 auto;
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
.module-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  border: 1px solid var(--border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.module-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lift);
  border-color: var(--accent-color, var(--gold));
}
.module-card-head {
  padding: 26px 26px 16px;
  background: linear-gradient(135deg, var(--accent-soft, var(--gold-soft)) 0%, #fff 100%);
  border-bottom: 1px solid var(--border);
}
.module-card-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-color, var(--gold-2));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.module-card-num-pill {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-color, var(--gold));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 900;
}
.module-card h3 {
  font-size: 22px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.module-card-icon {
  font-size: 32px;
  margin-bottom: 6px;
  display: inline-block;
}
.module-card-body { padding: 22px 26px; flex: 1; display: flex; flex-direction: column; }
.module-card-summary {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.module-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.module-card-stat {
  text-align: center;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 6px;
}
.module-card-stat strong { display: block; font-size: 18px; color: var(--text-main); font-weight: 800; }
.module-card-stat span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.module-card-progress {
  margin-bottom: 16px;
}
.module-card-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-soft-2);
  overflow: hidden;
  margin-top: 6px;
}
.module-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-color, var(--gold)) 0%, var(--accent-color-2, var(--gold-2)) 100%);
  transition: width 0.6s ease;
}
.module-card-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.module-card-progress-meta strong { color: var(--text-main); font-size: 13px; }
.module-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-not_started { background: var(--bg-soft-2); color: var(--text-muted); }
.status-in_progress { background: var(--m4-soft); color: var(--m4); }
.status-good { background: #ecfdf5; color: var(--success); }
.status-mastered { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; }

.module-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--accent-color, var(--gold));
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: 14px;
  transition: var(--transition);
}
.module-card-cta:hover {
  background: var(--accent-color-2, var(--gold-2));
  transform: translateX(2px);
}

/* per-module color theming */
.module-card-1 { --accent-color: var(--m1); --accent-soft: var(--m1-soft); --accent-color-2: #2563eb; }
.module-card-2 { --accent-color: var(--m2); --accent-soft: var(--m2-soft); --accent-color-2: var(--gold-2); }
.module-card-3 { --accent-color: var(--m3); --accent-soft: var(--m3-soft); --accent-color-2: #dc2626; }
.module-card-4 { --accent-color: var(--m4); --accent-soft: var(--m4-soft); --accent-color-2: #0284c7; }
.module-card-5 { --accent-color: var(--m5); --accent-soft: var(--m5-soft); --accent-color-2: #7c3aed; }

/* ─── Module page hero (module-N.html) ───── */
.module-hero {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 60%, var(--bg-dark-3) 100%);
  color: #fff;
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}
.module-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, var(--accent-glow, rgba(244,182,63,0.15)) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(244,182,63,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.module-hero-inner { position: relative; z-index: 2; }
.module-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
  transition: var(--transition);
}
.module-hero-back:hover { color: var(--gold); }
.module-hero-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(244,182,63,0.15);
  border: 1px solid rgba(244,182,63,0.35);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.module-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  color: #fff;
  margin-bottom: 16px;
  max-width: 900px;
}
.module-hero p.module-hero-summary {
  color: rgba(255,255,255,0.78);
  font-size: 18px;
  line-height: 1.5;
  max-width: 760px;
  margin-bottom: 28px;
}
.module-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 38px;
  margin-bottom: 28px;
}
.module-hero-stat strong {
  display: block;
  color: var(--gold);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.module-hero-stat span {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.module-hero-progress {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 18px 22px;
  max-width: 460px;
}
.module-hero-progress-label {
  display: flex; justify-content: space-between;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-weight: 600;
}
.module-hero-progress-label strong { color: var(--gold); font-size: 16px; }
.module-hero-progress-bar {
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.module-hero-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transition: width 0.6s ease;
}

/* ─── Module steps (parcours étape par étape) ─── */
.section-warm { background: var(--warm-bg); padding: 80px 0; }
.module-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 50px;
}
.module-step {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
}
.module-step:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.module-step.done {
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 70%);
  border-color: var(--success);
}
.module-step.current {
  border-color: var(--gold);
  box-shadow: var(--sh-gold);
}
.module-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.module-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft-2);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 14px;
}
.module-step.done .module-step-num { background: var(--success); color: #fff; }
.module-step.current .module-step-num { background: var(--gold); color: var(--bg-dark); }
.module-step-state {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-soft-2);
  color: var(--text-muted);
}
.module-step.done .module-step-state { background: var(--success); color: #fff; }
.module-step.current .module-step-state { background: var(--gold); color: var(--bg-dark); }
.module-step h3 {
  font-size: 17px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.module-step p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.module-step .module-step-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.module-step a.module-step-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-dark);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  transition: var(--transition);
}
.module-step a.module-step-cta:hover { background: var(--gold); color: var(--bg-dark); }

/* ─── Module content blocks ─── */
.content-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.content-block {
  background: var(--warm-card);
  border: 1px solid var(--warm-line);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  transition: var(--transition);
}
.content-block:hover { transform: translateY(-2px); box-shadow: var(--sh-soft); }
.content-block-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold-2);
  margin-bottom: 12px;
}
.content-block-tag.tag-objectif { background: var(--m1-soft); color: var(--m1); }
.content-block-tag.tag-savoir { background: var(--gold-soft); color: var(--gold-2); }
.content-block-tag.tag-erreur { background: var(--danger-soft); color: var(--danger); }
.content-block-tag.tag-exemple { background: #ecfdf5; color: var(--success); }
.content-block-tag.tag-resume { background: var(--m4-soft); color: var(--m4); }
.content-block h3 { font-size: 18px; margin-bottom: 10px; letter-spacing: -0.01em; }
.content-block p { color: var(--text-main); font-size: 14.5px; line-height: 1.6; }
.content-block ul {
  margin-top: 8px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.content-block ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-main);
}
.content-block ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 800;
}
.content-block.danger ul li::before { content: '✗'; color: var(--danger); }
.content-block.warning ul li::before { content: '⚠'; color: var(--warning); }

/* ─── Test module section ─── */
.test-section {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 50px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.test-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(244,182,63,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.test-section-inner { position: relative; z-index: 2; }
.test-section h2 { color: #fff; font-size: 32px; margin-bottom: 12px; }
.test-section p { color: rgba(255,255,255,0.78); font-size: 16px; max-width: 600px; margin: 0 auto 24px; }
.test-section .test-meta {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  margin-bottom: 24px;
}
.test-section .test-meta strong { color: var(--gold); }
.test-section .btn-test {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--gold);
  color: var(--bg-dark);
  border-radius: var(--r-pill);
  font-weight: 900;
  font-size: 15px;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}
.test-section .btn-test:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-gold);
}

/* ─── Recommendation card (homepage) ─── */
.reco-card {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244,182,63,0.25);
}
.reco-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 50%, rgba(244,182,63,0.15) 0%, transparent 55%);
  pointer-events: none;
}
.reco-card-inner { position: relative; z-index: 2; }
.reco-card-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 8px;
}
.reco-card h3 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.reco-card p { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.55; max-width: 520px; }
.reco-card-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--gold);
  color: var(--bg-dark);
  border-radius: var(--r-pill);
  font-weight: 900;
  font-size: 14px;
  transition: var(--transition);
  white-space: nowrap;
}
.reco-card-cta:hover { background: #fff; transform: translateX(4px); }

@media (max-width: 760px) {
  .reco-card { grid-template-columns: 1fr; padding: 30px 24px; }
  .reco-card-cta { justify-self: start; }
}

/* ─── Compact stats bar (per module on home) ─── */
.home-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 30px 0;
}
.home-progress-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  position: relative;
}
.home-progress-item-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--accent-color, var(--text-muted));
  margin-bottom: 6px;
}
.home-progress-item h4 { font-size: 15px; margin-bottom: 10px; }
.home-progress-item-bar {
  height: 6px;
  background: var(--bg-soft-2);
  border-radius: 999px;
  overflow: hidden;
}
.home-progress-item-fill {
  height: 100%;
  background: var(--accent-color, var(--gold));
  transition: width 0.6s ease;
}
.home-progress-item-meta {
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}
.home-progress-item-1 { --accent-color: var(--m1); }
.home-progress-item-2 { --accent-color: var(--m2); }
.home-progress-item-3 { --accent-color: var(--m3); }
.home-progress-item-4 { --accent-color: var(--m4); }
.home-progress-item-5 { --accent-color: var(--m5); }

/* ─── Methodes block ─── */
.methodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.methode {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}
.methode:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--sh-card);
}
.methode-icon { font-size: 28px; }
.methode h4 { font-size: 15px; }
.methode p { font-size: 13px; line-height: 1.5; }


/* ─── Inline module quiz (used in module-N.html pages) ─── */
.quiz-list { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; }
.quiz-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 24px;
  box-shadow: var(--sh-soft);
}
.quiz-num {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.quiz-q {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 14px;
  line-height: 1.4;
}
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.quiz-opt:hover:not([disabled]) {
  background: var(--gold-soft);
  border-color: var(--gold);
  transform: translateX(2px);
}
.quiz-opt[disabled] { cursor: default; opacity: 0.85; }
.quiz-opt[aria-selected="true"] {
  background: var(--gold-soft);
  border-color: var(--gold);
}
.quiz-opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: 12px;
  color: var(--gold-2);
  flex-shrink: 0;
}
.quiz-opt-mark {
  margin-left: auto;
  font-weight: 900;
  font-size: 18px;
  color: var(--success);
}
.quiz-opt-mark.wrong { color: var(--danger); }
.quiz-exp {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.5;
}
.quiz-done {
  margin-top: 22px;
  padding: 22px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  text-align: center;
}
.quiz-score { font-size: 18px; margin-bottom: 14px; color: var(--text-main); }
.quiz-score strong { color: var(--gold-2); font-size: 22px; font-weight: 900; }

/* Test inline area inside dark test-section */
.test-section #m1-test-area .quiz-item,
.test-section .quiz-item {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  text-align: left;
}
.test-section .quiz-item .quiz-num { color: var(--gold); }
.test-section .quiz-item .quiz-q { color: #fff; }
.test-section .quiz-opt {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
}
.test-section .quiz-opt:hover:not([disabled]) {
  background: rgba(244,182,63,0.18);
  border-color: var(--gold);
}
.test-section .quiz-opt[aria-selected="true"] {
  background: rgba(244,182,63,0.18);
  border-color: var(--gold);
}
.test-section .quiz-opt-letter {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: var(--gold);
}
.test-section .quiz-exp {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
}
.test-section .quiz-done {
  background: rgba(244,182,63,0.12);
  border-color: rgba(244,182,63,0.4);
  color: #fff;
}
.test-section .quiz-score { color: #fff; }
.test-section .quiz-score strong { color: var(--gold); }

/* Section header label */
.section-header .label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}


/* ===================================================
   PLATFORM v4 — Navy refined + Gold premium + Auth pages + Dashboard
   =================================================== */

:root {
  /* New navy/gold palette (refined from Patente Suisse mockup) */
  --navy-deep:    #071B34;
  --navy-mid:     #0B2341;
  --navy-soft:    #102A4D;
  --navy-line:    #1B3658;
  --gold-prem:    #D4A64A;
  --gold-prem-2:  #E0B45C;
  --gold-prem-3:  #B88A2E;
  --bg-app:       #F7F8FA;
  --bg-app-2:     #FAFBFC;
  --text-app:     #18212F;
  --text-soft:    #5B6472;
  --text-faint:   #8A93A1;
  --line-app:     #E5E8ED;
  --line-soft:    #EEF1F4;
  --success-app:  #15A968;
  --danger-app:   #D9534F;
  --info-app:     #2C82E6;
}

/* Override legacy tokens for new look */
.platform-v4 body, body.platform-v4 {
  background: var(--bg-app);
  color: var(--text-app);
}

/* ─── Lucide icon helper ───────────────── */
.icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 28px; height: 28px; }

/* ─── Auth pages (login / signup) ──────── */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-app);
}
.auth-page-side {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 60%, var(--navy-soft) 100%);
  color: #fff;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-page-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(212,166,74,0.18) 0%, transparent 55%),
              radial-gradient(circle at 10% 90%, rgba(212,166,74,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.auth-side-content { position: relative; z-index: 2; max-width: 460px; }
.auth-logo { display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:900; font-size:18px; margin-bottom:50px; }
.auth-logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-prem), var(--gold-prem-3));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy-deep);
  font-weight: 900;
}
.auth-side-h {
  font-size: clamp(28px, 3.5vw, 38px);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-side-h span { color: var(--gold-prem); }
.auth-side-p {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 36px;
}
.auth-side-list { display: flex; flex-direction: column; gap: 14px; }
.auth-side-list li {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}
.auth-side-list li::before {
  content: '';
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(212,166,74,0.18);
  border: 1px solid rgba(212,166,74,0.4);
  display: inline-flex;
  flex-shrink: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23D4A64A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.auth-side-foot { position: relative; z-index: 2; color: rgba(255,255,255,0.45); font-size: 12px; }
.auth-side-foot a { color: rgba(255,255,255,0.78); }

.auth-page-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 50px;
  background: var(--bg-app);
}
.auth-form-wrapper { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-form-h1 {
  font-size: 30px;
  color: var(--text-app);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.auth-form-sub { color: var(--text-soft); font-size: 15px; margin-bottom: 32px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-app);
  margin-bottom: 8px;
}
.field input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line-app);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text-app);
  background: #fff;
  font-family: inherit;
  transition: 0.2s;
}
.field input:focus {
  outline: none;
  border-color: var(--gold-prem);
  box-shadow: 0 0 0 4px rgba(212,166,74,0.15);
}
.field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: 13px; }
.field-row label { display: flex; align-items: center; gap: 8px; color: var(--text-soft); cursor: pointer; }
.field-row a { color: var(--gold-prem-3); font-weight: 600; }
.btn-auth {
  width: 100%;
  padding: 14px;
  background: var(--navy-deep);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s;
}
.btn-auth:hover { background: var(--navy-mid); transform: translateY(-1px); }
.btn-auth:disabled { opacity: 0.5; cursor: wait; }
.btn-auth-gold { background: var(--gold-prem); color: var(--navy-deep); }
.btn-auth-gold:hover { background: var(--gold-prem-2); }
.auth-divider { text-align: center; margin: 20px 0; color: var(--text-faint); font-size: 13px; }
.auth-foot { margin-top: 24px; font-size: 14px; color: var(--text-soft); text-align: center; }
.auth-foot a { color: var(--gold-prem-3); font-weight: 700; }
.auth-error {
  background: #fef2f2;
  color: var(--danger-app);
  border: 1px solid #fecaca;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.auth-error.show { display: block; }
.auth-success {
  background: #ecfdf5;
  color: var(--success-app);
  border: 1px solid #a7f3d0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.auth-success.show { display: block; }

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-page-side { padding: 40px 30px; min-height: 240px; }
  .auth-page-side .auth-side-list { display: none; }
  .auth-page-form { padding: 40px 30px; }
}

/* ─── Dashboard layout (sidebar + main) ──── */
.dash-app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background: var(--bg-app);
}
.dash-sidebar {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  color: #fff;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.dash-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.dash-sidebar-logo-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-prem), var(--gold-prem-3));
  color: var(--navy-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900;
}
.dash-sidebar-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.dash-sidebar-logo-text strong { color:#fff; font-weight:900; font-size: 15px; letter-spacing:-0.01em; }
.dash-sidebar-logo-text span { color: rgba(255,255,255,0.5); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.dash-sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dash-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s;
}
.dash-sidebar-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.dash-sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(212,166,74,0.16), rgba(212,166,74,0.04));
  color: var(--gold-prem);
  box-shadow: inset 3px 0 0 var(--gold-prem);
}
.dash-sidebar-nav a .icon { stroke: currentColor; }
.dash-sidebar-foot { padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.dash-sidebar-foot a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s;
}
.dash-sidebar-foot a:hover { color: var(--danger-app); background: rgba(217,83,79,0.1); }

.dash-main { padding: 30px 38px 60px; }
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.dash-greeting h1 {
  font-size: 26px;
  color: var(--text-app);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dash-greeting p { color: var(--text-soft); font-size: 14px; margin-top: 4px; }
.dash-topbar-right { display: flex; align-items: center; gap: 14px; }
.dash-streak {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #fff3d4, #fff8e6);
  border: 1px solid #f4d680;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
}
.dash-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-prem), var(--gold-prem-3));
  color: var(--navy-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
}

.dash-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
.dash-card {
  background: #fff;
  border: 1px solid var(--line-app);
  border-radius: 16px;
  padding: 22px;
}
.dash-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-card-h h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-app);
  letter-spacing: 0;
}
.dash-card-h .icon { color: var(--text-faint); }

/* Progression circulaire */
.dash-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dash-ring {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 12px;
}
.dash-ring svg { transform: rotate(-90deg); }
.dash-ring circle.bg { stroke: var(--line-soft); fill: none; stroke-width: 12; }
.dash-ring circle.fg { stroke: var(--gold-prem); fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.dash-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dash-ring-text strong { font-size: 32px; color: var(--text-app); font-weight: 900; line-height: 1; }
.dash-ring-text span { font-size: 11px; color: var(--text-soft); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.dash-ring-label { font-size: 13px; color: var(--text-soft); }
.dash-ring-label strong { color: var(--success-app); font-size: 14px; }

/* Niveau actuel */
.dash-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dash-level-badge {
  width: 76px; height: 76px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  color: var(--gold-prem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  box-shadow: 0 8px 22px rgba(7,27,52,0.16);
}
.dash-level-badge::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(212,166,74,0.35);
  border-radius: 14px;
}
.dash-level h4 { font-size: 18px; color: var(--text-app); font-weight: 800; margin-bottom: 4px; }
.dash-level small { color: var(--text-soft); font-size: 12px; margin-bottom: 10px; }
.dash-level-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-app);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  border: 1px solid var(--line-app);
}

/* Objectif du jour */
.dash-goal-list { display: flex; flex-direction: column; gap: 10px; }
.dash-goal {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-app);
  border: 1px solid var(--line-app);
  font-size: 14px;
  color: var(--text-app);
}
.dash-goal.done { background: #ecfdf5; border-color: #a7f3d0; color: var(--success-app); text-decoration: line-through; opacity: 0.8; }
.dash-goal-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-app);
  flex-shrink: 0;
}
.dash-goal.done .dash-goal-check {
  background: var(--success-app);
  border-color: var(--success-app);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.dash-goal-meta { margin-left: auto; font-size: 11px; color: var(--text-faint); font-weight: 700; }

.dash-cta-card {
  margin-top: 14px;
  padding: 12px;
  background: var(--navy-deep);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  display: block;
  transition: 0.2s;
}
.dash-cta-card:hover { background: var(--navy-mid); }

/* Reprendre la formation */
.dash-resume {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-app);
  border: 1px solid var(--line-app);
}
.dash-resume-img {
  width: 88px; height: 70px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-prem);
  font-size: 28px;
}
.dash-resume-info h4 { font-size: 15px; color: var(--text-app); margin-bottom: 6px; font-weight: 700; }
.dash-resume-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-bottom: 4px; max-width: 280px; }
.dash-resume-bar-fill { height: 100%; background: var(--gold-prem); transition: width 0.6s ease; }
.dash-resume-pct { font-size: 12px; color: var(--text-soft); font-weight: 600; }
.dash-resume-cta {
  padding: 10px 18px;
  background: var(--navy-deep);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: 0.2s;
}
.dash-resume-cta:hover { background: var(--gold-prem); color: var(--navy-deep); }

/* Mes badges */
.dash-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-badge-mini {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-app);
  border: 1px solid var(--line-app);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.dash-badge-mini.unlocked {
  background: linear-gradient(135deg, var(--gold-prem-2), var(--gold-prem-3));
  border-color: var(--gold-prem);
  box-shadow: 0 4px 12px rgba(212,166,74,0.25);
}
.dash-badge-mini.locked { opacity: 0.4; filter: grayscale(0.7); }
.dash-badges-link { margin-left: auto; color: var(--gold-prem-3); font-size: 13px; font-weight: 700; }

/* Examens blancs disponibles */
.dash-exam-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-app);
  border: 1px solid var(--line-app);
  border-radius: 12px;
}
.dash-exam-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  color: var(--gold-prem);
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-exam-info strong { display: block; font-size: 14px; color: var(--text-app); font-weight: 700; }
.dash-exam-info small { color: var(--text-soft); font-size: 12px; }
.dash-exam-stat { text-align: center; }
.dash-exam-stat strong { display: block; font-size: 13px; color: var(--text-app); font-weight: 700; }
.dash-exam-stat small { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.dash-exam-cta {
  padding: 9px 16px;
  background: var(--gold-prem);
  color: var(--navy-deep);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  transition: 0.2s;
}
.dash-exam-cta:hover { background: var(--gold-prem-2); }

@media (max-width: 1024px) {
  .dash-app { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; height: auto; flex-direction: row; gap: 18px; padding: 18px 24px; align-items: center; overflow-x: auto; }
  .dash-sidebar-logo { margin-bottom: 0; }
  .dash-sidebar-nav { flex-direction: row; flex: none; gap: 4px; }
  .dash-sidebar-nav a { padding: 8px 12px; font-size: 13px; }
  .dash-sidebar-nav a.active { box-shadow: inset 0 -3px 0 var(--gold-prem); }
  .dash-sidebar-foot { display: none; }
  .dash-grid-3 { grid-template-columns: 1fr; }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-main { padding: 24px 18px 40px; }
}

/* Auth-aware nav button */
#site-nav .nav-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(212,166,74,0.12);
  border: 1px solid rgba(212,166,74,0.3);
  color: var(--gold-prem);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}
#site-nav .nav-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-prem), var(--gold-prem-3));
  color: var(--navy-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
}


/* ─── nav.js public/app variants ─── */
#site-nav .nav-login {
  display: inline-flex; align-items: center; padding: 8px 14px;
  font-weight: 700; font-size: 13px; color: #fff;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  margin-right: 8px;
  transition: 0.2s;
}
#site-nav .nav-login:hover { background: rgba(255,255,255,0.12); }

/* ─── App-shell : pages legacy intégrées dans dash-main ─── */
.dash-main.app-page-content {
  padding: 0;
  background: var(--bg-app);
}
/* Les sections legacy gardent leurs paddings internes */
.dash-main.app-page-content > section,
.dash-main.app-page-content > header,
.dash-main.app-page-content > main {
  /* Pas d'override : les sections gardent leurs styles d'origine */
}
/* Ajuste les hero foncés des module-X.html pour qu'ils ne touchent pas la sidebar */
.dash-main.app-page-content .module-hero {
  margin: 0;
  padding-top: 60px;
  padding-bottom: 70px;
}
/* Les pages catalogue ont leur propre hero — on l'allège dans le shell */
.dash-main.app-page-content .modules-hero {
  padding: 50px 0 40px;
}
.dash-main.app-page-content .modules-page {
  padding: 40px 0 80px;
}
/* Hero des pages module : allège le grand padding-top inutile dans le shell */
.dash-main.app-page-content .page-hero,
.dash-main.app-page-content section[class*="hero"] {
  padding-top: 60px;
}
/* Container interne reste centré dans la zone main */
.dash-main.app-page-content .container {
  width: min(100% - 40px, 1100px);
}

/* ===================================================
   HERO v5 — Premium e-learning · bartender background
   =================================================== */
.hero-v5 {
  position: relative;
  min-height: 640px;
  background: #06111f;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-v5-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/bartender.png');
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Voile sombre global pour donner de la profondeur */
.hero-v5-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6,17,31,0.78) 0%, rgba(6,17,31,0.55) 35%, rgba(6,17,31,0.30) 60%, rgba(6,17,31,0.55) 100%);
}
/* Gradient gauche → transparent pour la lisibilité du texte */
.hero-v5::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(6,17,31,0.96) 0%, rgba(6,17,31,0.85) 28%, rgba(6,17,31,0.55) 48%, rgba(6,17,31,0.20) 65%, rgba(6,17,31,0.55) 88%, rgba(6,17,31,0.85) 100%);
  pointer-events: none;
}
/* Vignette top/bottom */
.hero-v5::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,17,31,0.4) 0%, transparent 12%, transparent 80%, rgba(6,17,31,0.5) 100%);
  pointer-events: none;
}
.hero-v5-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1280px);
  margin: 0 auto;
  padding: 10px 0 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 60px;
  align-items: center;
  min-height: 640px;
}

/* ─── Colonne gauche : texte ─── */
.hero-v5-content { max-width: 600px; }
.hero-v5-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244,182,63,0.16);
  border: 1px solid rgba(244,182,63,0.4);
  color: var(--gold-prem-2, #E0B45C);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 26px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-v5-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-prem-2, #E0B45C);
  box-shadow: 0 0 0 3px rgba(244,182,63,0.25);
}
.hero-v5-title {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 900;
  color: #fff;
  margin: 0 0 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.hero-v5-title em {
  font-style: normal;
  color: var(--gold-prem-2, #E0B45C);
  display: inline-block;
}
.hero-v5-subtitle {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin: 0 0 30px;
  max-width: 540px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-v5-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 32px;
  list-style: none;
  padding: 0;
}
.hero-v5-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.hero-v5-bullets li::before {
  content: '';
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(244,182,63,0.18);
  border: 1.5px solid rgba(244,182,63,0.5);
  flex-shrink: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E0B45C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-v5-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 36px;
}
.hero-v5-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  transition: 0.22s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.hero-v5-cta-primary {
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A) 0%, var(--gold-prem-2, #E0B45C) 100%);
  color: #06111f;
  box-shadow: 0 10px 30px rgba(212,166,74,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
}
.hero-v5-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(212,166,74,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.hero-v5-cta-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-v5-cta-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(244,182,63,0.5);
  transform: translateY(-2px);
}
.hero-v5-cta-arrow { font-size: 16px; transition: transform 0.22s ease; }
.hero-v5-cta:hover .hero-v5-cta-arrow { transform: translateX(3px); }

/* Stats sous les CTAs */
.hero-v5-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-v5-stat strong {
  display: block;
  color: var(--gold-prem-2, #E0B45C);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-v5-stat span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ─── Colonne droite : carte de réussite ─── */
.hero-v5-card-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hero-v5-card {
  width: 100%;
  max-width: 380px;
  background: rgba(15, 26, 46, 0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.hero-v5-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(244,182,63,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.hero-v5-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-prem-2, #E0B45C);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  position: relative;
}
.hero-v5-card-label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-prem-2, #E0B45C);
  box-shadow: 0 0 0 3px rgba(244,182,63,0.2), 0 0 16px rgba(244,182,63,0.5);
}
.hero-v5-ring {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 14px;
}
.hero-v5-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hero-v5-ring circle.bg { stroke: rgba(255,255,255,0.08); fill: none; stroke-width: 12; }
.hero-v5-ring circle.fg {
  stroke: url(#hero-ring-gradient);
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(244,182,63,0.5));
}
.hero-v5-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-v5-ring-text strong {
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero-v5-ring-text span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gold-prem-2, #E0B45C);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-v5-card-title {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}
.hero-v5-card-sub {
  text-align: center;
  font-size: 12.5px;
  color: rgba(255,255,255,0.66);
  line-height: 1.5;
  margin: 0 0 18px;
  padding: 0 6px;
}
.hero-v5-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-v5-mini-stat {
  text-align: center;
  padding: 6px 4px;
}
.hero-v5-mini-stat strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}
.hero-v5-mini-stat span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  line-height: 1.3;
}
.hero-v5-mini-stat svg {
  width: 14px; height: 14px;
  color: var(--gold-prem-2, #E0B45C);
  margin: 0 auto 4px;
  display: block;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .hero-v5-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px;
    padding: 70px 0 60px;
  }
  .hero-v5-card { max-width: 340px; padding: 22px; }
  .hero-v5-ring { width: 140px; height: 140px; }
  .hero-v5-ring-text strong { font-size: 38px; }
}
@media (max-width: 860px) {
  .hero-v5 { min-height: auto; }
  .hero-v5-bg {
    background-position: 65% 22%;
  }
  .hero-v5::before {
    background: linear-gradient(180deg, rgba(6,17,31,0.85) 0%, rgba(6,17,31,0.6) 40%, rgba(6,17,31,0.92) 100%);
  }
  .hero-v5-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 60px 0 50px;
    min-height: auto;
  }
  .hero-v5-content { max-width: none; }
  .hero-v5-card-wrapper {
    justify-content: center;
  }
  .hero-v5-card { max-width: 420px; }
  .hero-v5-stats { gap: 20px; }
  .hero-v5-stat strong { font-size: 22px; }
}
@media (max-width: 540px) {
  .hero-v5-bg { background-position: 70% 25%; }
  .hero-v5-inner { padding: 50px 0 40px; }
  .hero-v5-title { font-size: clamp(28px, 8vw, 38px); }
  .hero-v5-subtitle { font-size: 15px; }
  .hero-v5-cta { padding: 13px 22px; font-size: 13.5px; width: 100%; justify-content: center; }
  .hero-v5-stats { gap: 16px; }
  .hero-v5-stat strong { font-size: 19px; }
  .hero-v5-card { padding: 20px; border-radius: 18px; }
  .hero-v5-ring { width: 130px; height: 130px; }
  .hero-v5-ring-text strong { font-size: 34px; }
  .hero-v5-mini-stats { gap: 6px; }
  .hero-v5-mini-stat strong { font-size: 15px; }
  .hero-v5-mini-stat span { font-size: 9.5px; }
}

/* ─── Brand mark (icône diplôme) ─── */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
}
.brand-mark-sm { width: 22px; height: 22px; }
.brand-mark-lg { width: 36px; height: 36px; }
/* Variante badge gold (utilisée sur sidebar dashboard et pages auth) */
.brand-mark-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-deep, #06111f);
}
.brand-mark-badge svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}


/* ─── Brand mark : couleur or premium partout ─── */
.nav-brand-icon svg,
.dash-sidebar-logo-mark svg,
.auth-logo-mark svg,
.nav-logo svg,
.footer-logo .brand-mark svg,
.brand-mark svg {
  color: var(--gold-prem-2, #E0B45C);
  stroke: var(--gold-prem-2, #E0B45C);
}

/* ===================================================
   LANDING SECTIONS — après hero (stats, steps, dark feature, témoignage + CTA)
   =================================================== */

/* ─── Bande de stats ─── */
.lp-stats-bar {
  background: var(--bg-app, #F7F8FA);
  padding: 50px 0;
  border-bottom: 1px solid var(--line-soft, #EEF1F4);
}
.lp-stats-grid {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
.lp-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.lp-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(212,166,74,0.12), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.25);
  color: var(--gold-prem-2, #E0B45C);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-stat-icon svg { width: 24px; height: 24px; }
.lp-stat-info { display: flex; flex-direction: column; line-height: 1.15; }
.lp-stat-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-app, #18212F);
  letter-spacing: -0.02em;
}
.lp-stat-label {
  font-size: 12.5px;
  color: var(--text-soft, #5B6472);
  margin-top: 3px;
  font-weight: 500;
}

/* ─── Section "Comment ça marche ?" ─── */
.lp-how {
  background: #fff;
  padding: 90px 0;
  position: relative;
}
.lp-how-inner { width: min(100% - 40px, 1180px); margin: 0 auto; }
.lp-how-header { text-align: center; margin-bottom: 60px; }
.lp-how-header h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--text-app, #18212F);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.lp-how-header .lp-accent {
  display: inline-block;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-prem, #D4A64A), var(--gold-prem-2, #E0B45C));
}
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
}
/* Trait progressif entre les étapes */
.lp-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-app, #E5E8ED) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.lp-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}
.lp-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 6px 16px rgba(212,166,74,0.32);
  border: 4px solid #fff;
}
.lp-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7f3ea, #ffffff);
  border: 1px solid var(--line-app, #E5E8ED);
  color: var(--gold-prem-3, #B88A2E);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.06);
}
.lp-step-icon svg { width: 30px; height: 30px; stroke-width: 2; }
.lp-step h3 {
  font-size: 18px;
  color: var(--text-app, #18212F);
  font-weight: 800;
  margin: 0 0 8px;
}
.lp-step p {
  font-size: 14px;
  color: var(--text-soft, #5B6472);
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto;
}

/* ─── Section sombre "Une formation complète" ─── */
.lp-dark {
  background: linear-gradient(135deg, #08152a 0%, #0c1f3b 60%, #102a4d 100%);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.lp-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(212,166,74,0.16) 0%, transparent 55%),
              radial-gradient(circle at 15% 80%, rgba(212,166,74,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.lp-dark-inner {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.lp-dark h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 28px;
}
.lp-dark h2 em { font-style: normal; color: var(--gold-prem-2, #E0B45C); }
.lp-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15.5px;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
}
.lp-benefits li::before {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(34,197,94,0.16);
  border: 1.5px solid rgba(34,197,94,0.5);
  flex-shrink: 0;
  margin-top: 1px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2334d399" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mockup tablette résultat examen */
.lp-mockup {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 8px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  transform: rotate(-1deg);
  max-width: 460px;
  margin-left: auto;
}
.lp-mockup::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 20px;
  width: 40px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
}
.lp-mockup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft, #EEF1F4);
}
.lp-mockup-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-app, #18212F);
}
.lp-mockup-title small {
  display: block;
  font-size: 11px;
  color: var(--text-soft, #5B6472);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.lp-mockup-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-app, #F7F8FA);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft, #5B6472);
  font-size: 14px;
}
.lp-mockup-score {
  text-align: center;
  padding: 18px 0;
}
.lp-mockup-ring {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 12px;
}
.lp-mockup-ring svg { transform: rotate(-90deg); }
.lp-mockup-ring circle.bg { stroke: var(--line-soft, #EEF1F4); fill: none; stroke-width: 10; }
.lp-mockup-ring circle.fg { stroke: #15A968; fill: none; stroke-width: 10; stroke-linecap: round; }
.lp-mockup-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: var(--text-app, #18212F);
  letter-spacing: -0.02em;
}
.lp-mockup-msg {
  font-size: 13.5px;
  color: var(--text-soft, #5B6472);
  margin: 0 0 18px;
  font-weight: 500;
}
.lp-mockup-msg strong { color: var(--success-app, #15A968); font-weight: 800; }
.lp-mockup-actions {
  display: flex;
  gap: 10px;
}
.lp-mockup-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: 0.18s;
}
.lp-mockup-btn-primary {
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-2, #E0B45C));
  color: var(--navy-deep, #06111f);
  box-shadow: 0 6px 16px rgba(212,166,74,0.3);
}
.lp-mockup-btn-secondary {
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  border: 1px solid var(--line-app, #E5E8ED);
}
.lp-mockup-btn-primary:hover { transform: translateY(-1px); }
.lp-mockup-btn-secondary:hover { background: var(--line-soft, #EEF1F4); }

/* ─── Section bas : témoignage + CTA ─── */
.lp-bottom {
  background: var(--bg-app, #F7F8FA);
  padding: 80px 0;
}
.lp-bottom-inner {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
}
.lp-testimonial {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 35px rgba(15,23,42,0.06);
}
.lp-testimonial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.lp-testimonial-head h3 {
  font-size: 18px;
  color: var(--text-app, #18212F);
  font-weight: 800;
  margin: 0;
}
.lp-testimonial-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft, #5B6472);
}
.lp-stars { color: var(--gold-prem-2, #E0B45C); letter-spacing: 1px; font-size: 14px; }
.lp-testimonial-rating strong { color: var(--text-app, #18212F); }
.lp-testimonial-quote {
  font-size: 15.5px;
  color: var(--text-app, #18212F);
  line-height: 1.65;
  margin: 0 0 22px;
  font-style: italic;
}
.lp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-testimonial-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-image: url('images/temoignage.png');
  background-size: 130%;
  background-position: center 28%;
  background-color: transparent;
  flex-shrink: 0;
  border: 3px solid var(--gold-prem-2, #E0B45C);
  box-shadow: 0 6px 18px rgba(15,23,42,0.12);
  padding: 0;
  font: inherit;
}
@media (max-width: 540px) {
  .lp-testimonial-avatar { width: 60px; height: 60px; border-width: 2px; }
}
.lp-testimonial-author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.lp-testimonial-author-info strong {
  font-size: 14px;
  color: var(--text-app, #18212F);
  font-weight: 800;
}
.lp-testimonial-author-info span {
  font-size: 12px;
  color: var(--text-soft, #5B6472);
  margin-top: 2px;
}

.lp-cta-final {
  background: linear-gradient(135deg, #08152a 0%, #102a4d 100%);
  color: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.lp-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(212,166,74,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.lp-cta-final-inner { position: relative; z-index: 1; }
.lp-cta-final h3 {
  font-size: 24px;
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.lp-cta-final p {
  font-size: 14.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
  margin: 0 0 22px;
}
.lp-cta-final-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-2, #E0B45C));
  color: var(--navy-deep, #06111f);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  transition: 0.22s;
  box-shadow: 0 10px 24px rgba(212,166,74,0.32);
}
.lp-cta-final-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(212,166,74,0.45);
}

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .lp-steps { grid-template-columns: 1fr; gap: 36px; }
  .lp-steps::before { display: none; }
  .lp-dark-inner { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .lp-mockup { transform: none; max-width: 460px; margin: 0 auto; }
  .lp-bottom-inner { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .lp-stats-bar { padding: 36px 0; }
  .lp-stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .lp-stat { padding: 0; }
  .lp-stat-icon { width: 42px; height: 42px; }
  .lp-stat-num { font-size: 19px; }
  .lp-how { padding: 60px 0; }
  .lp-how-header { margin-bottom: 40px; }
  .lp-dark { padding: 60px 0; }
  .lp-mockup { padding: 18px; border-radius: 18px; }
  .lp-mockup-ring { width: 110px; height: 110px; }
  .lp-mockup-ring-text { font-size: 26px; }
  .lp-bottom { padding: 60px 0; }
  .lp-testimonial { padding: 24px; }
  .lp-cta-final { padding: 28px 22px; }
  .lp-cta-final h3 { font-size: 20px; }
}

/* ─── Lightbox témoignage ─── */
.lp-testimonial-avatar { cursor: zoom-in; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lp-testimonial-avatar:hover { transform: scale(1.05); box-shadow: 0 10px 26px rgba(212,166,74,0.32); }

.lp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(6,17,31,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 30px;
  cursor: zoom-out;
  animation: lpFadeIn 0.25s ease;
}
.lp-lightbox.open { display: flex; }
@keyframes lpFadeIn { from { opacity: 0; } to { opacity: 1; } }

.lp-lightbox-content {
  position: relative;
  max-width: min(90vw, 520px);
  width: 100%;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  cursor: default;
  animation: lpZoom 0.3s ease;
}
@keyframes lpZoom { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lp-lightbox-img {
  width: 100%;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  background: #1a2638;
}
.lp-lightbox-info {
  padding: 24px 28px;
  border-top: 1px solid var(--line-soft, #EEF1F4);
}
.lp-lightbox-info strong {
  display: block;
  font-size: 18px;
  color: var(--text-app, #18212F);
  font-weight: 800;
  margin-bottom: 4px;
}
.lp-lightbox-info span {
  display: block;
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  font-weight: 500;
}
.lp-lightbox-info .lp-lightbox-quote {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft, #EEF1F4);
  font-size: 14px;
  color: var(--text-app, #18212F);
  line-height: 1.6;
  font-style: italic;
}
.lp-lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--text-app, #18212F);
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: 0.18s;
  z-index: 2;
}
.lp-lightbox-close:hover {
  background: #fff;
  transform: rotate(90deg);
}

@media (max-width: 540px) {
  .lp-lightbox { padding: 16px; }
  .lp-lightbox-info { padding: 18px 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   PUBLIC INTERNAL PAGES — Programme / Tarifs / À propos (ph-* prefix)
   Cohérence avec home v5 : hero court, sections claires/sombres, cards
   ════════════════════════════════════════════════════════════════════ */

/* ─── Hero interne (court, premium) ─── */
.ph-hero {
  position: relative;
  padding: 100px 0 90px;
  background: linear-gradient(135deg, var(--navy-deep, #071B34) 0%, var(--bg-dark-2) 50%, #0E2745 100%);
  color: #fff;
  overflow: hidden;
}
.ph-hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(212,166,74,0.18) 0%, transparent 70%);
  filter: blur(50px);
  z-index: 0;
}
.ph-hero::after {
  content: "";
  position: absolute;
  bottom: -150px; left: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
}
.ph-hero-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
}
.ph-hero-inner.center { text-align: center; }
.ph-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(212,166,74,0.14);
  border: 1px solid rgba(212,166,74,0.38);
  color: var(--gold-prem-2, #E0B45C);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 22px;
}
.ph-hero-title {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 18px;
  max-width: 820px;
}
.ph-hero-inner.center .ph-hero-title { margin-left: auto; margin-right: auto; }
.ph-hero-title em {
  font-style: normal;
  color: var(--gold-prem-2, #E0B45C);
  background: linear-gradient(135deg, #E5C075 0%, var(--gold-prem, #D4A64A) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ph-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  max-width: 680px;
  margin-bottom: 30px;
}
.ph-hero-inner.center .ph-hero-sub { margin-left: auto; margin-right: auto; }
.ph-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.ph-hero-inner.center .ph-hero-pills { justify-content: center; }
.ph-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 600;
}
.ph-hero-pill svg { width: 16px; height: 16px; color: var(--gold-prem-2, #E0B45C); }
.ph-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ph-hero-inner.center .ph-hero-ctas { justify-content: center; }

/* CTA buttons réutilisables (variantes hero-v5) */
.ph-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: 0.22s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ph-cta-primary {
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  color: var(--navy-deep, #071B34);
  box-shadow: 0 14px 28px rgba(212,166,74,0.32);
}
.ph-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 38px rgba(212,166,74,0.44); }
.ph-cta-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}
.ph-cta-ghost:hover { background: rgba(255,255,255,0.14); border-color: var(--gold-prem-2, #E0B45C); }
.ph-cta-light {
  background: #fff;
  color: var(--navy-deep, #071B34);
  border-color: var(--line-app, #E5E8ED);
}
.ph-cta-light:hover { transform: translateY(-2px); border-color: var(--gold-prem, #D4A64A); }
.ph-cta-arrow { font-size: 16px; transition: transform 0.22s ease; }
.ph-cta:hover .ph-cta-arrow { transform: translateX(3px); }

/* ─── Sections claires (réutilisables) ─── */
.ph-section {
  padding: 90px 0;
  background: var(--bg-app, #F7F8FA);
}
.ph-section.alt { background: #fff; }
.ph-section-inner {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
}
.ph-section-header {
  text-align: center;
  margin-bottom: 60px;
}
.ph-section-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(212,166,74,0.14);
  color: var(--gold-prem-3, #B88A2E);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.ph-section-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-app, #18212F);
  margin-bottom: 14px;
}
.ph-section-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ph-section-sub {
  font-size: 16px;
  color: var(--text-soft, #5B6472);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ─── Card grid générique ─── */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.ph-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ph-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .ph-grid-3, .ph-grid-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.ph-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 28px 26px;
  transition: 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.ph-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-prem, #D4A64A);
  box-shadow: 0 20px 40px rgba(15,23,42,0.08);
}
.ph-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(212,166,74,0.14), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.28);
  color: var(--gold-prem-3, #B88A2E);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ph-card-icon svg { width: 26px; height: 26px; }
.ph-card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-prem-3, #B88A2E);
  margin-bottom: 8px;
}
.ph-card-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.ph-card-text {
  font-size: 14px;
  color: var(--text-soft, #5B6472);
  line-height: 1.55;
  margin-bottom: 16px;
}
.ph-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ph-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-app, #18212F);
  line-height: 1.45;
}
.ph-card-list li::before {
  content: "✓";
  color: var(--success-app, #15A968);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ph-card-stats {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 10px;
  margin-bottom: 16px;
  justify-content: space-around;
}
.ph-card-stat {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-soft, #5B6472);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  line-height: 1.3;
}
.ph-card-stat strong {
  display: block;
  font-size: 16px;
  color: var(--text-app, #18212F);
  font-weight: 900;
  margin-bottom: 2px;
}
.ph-card-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13.5px;
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  color: #fff;
  transition: 0.2s;
}
.ph-card-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(212,166,74,0.32); color: #fff; }
.ph-card-cta-ghost {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  border: 1px solid var(--line-app, #E5E8ED);
  transition: 0.2s;
}
.ph-card-cta-ghost:hover { border-color: var(--gold-prem, #D4A64A); color: var(--gold-prem-3, #B88A2E); }

/* ─── Section sombre (générique) ─── */
.ph-dark {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep, #071B34) 0%, var(--bg-dark-2) 100%);
  color: #fff;
  padding: 90px 0;
  overflow: hidden;
}
.ph-dark::before {
  content: "";
  position: absolute;
  top: -100px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(212,166,74,0.16) 0%, transparent 70%);
  filter: blur(45px);
  z-index: 0;
}
.ph-dark-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
}
.ph-dark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ph-dark h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 18px;
  color: #fff;
}
.ph-dark h2 em {
  font-style: normal;
  color: var(--gold-prem-2, #E0B45C);
}
.ph-dark p {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 22px;
}
.ph-dark-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ph-dark-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  transition: 0.2s;
}
.ph-dark-list li:hover { border-color: rgba(212,166,74,0.45); background: rgba(255,255,255,0.07); }
.ph-dark-list li::before {
  content: "✓";
  color: var(--gold-prem-2, #E0B45C);
  font-weight: 900;
  flex-shrink: 0;
}
.ph-dark-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.ph-dark-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px;
  transition: 0.22s ease;
}
.ph-dark-card:hover {
  border-color: rgba(212,166,74,0.40);
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}
.ph-dark-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,166,74,0.20), rgba(212,166,74,0.06));
  border: 1px solid rgba(212,166,74,0.32);
  color: var(--gold-prem-2, #E0B45C);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ph-dark-card-icon svg { width: 22px; height: 22px; }
.ph-dark-card h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.ph-dark-card p {
  color: rgba(255,255,255,0.65);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .ph-dark-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 540px) {
  .ph-dark-cards { grid-template-columns: 1fr; }
  .ph-dark { padding: 60px 0; }
}

/* ─── Méthode (3 étapes, similaire lp-how mais réutilisable) ─── */
.ph-method-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.ph-method-step {
  text-align: center;
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 30px 24px;
  position: relative;
  transition: 0.25s ease;
}
.ph-method-step:hover {
  transform: translateY(-4px);
  border-color: var(--gold-prem, #D4A64A);
  box-shadow: 0 16px 32px rgba(15,23,42,0.06);
}
.ph-method-num {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  color: var(--navy-deep, #071B34);
  font-weight: 900;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(212,166,74,0.35);
}
.ph-method-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,166,74,0.14), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.28);
  color: var(--gold-prem-3, #B88A2E);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 14px auto 18px;
}
.ph-method-icon svg { width: 28px; height: 28px; }
.ph-method-step h3 {
  font-size: 18px;
  color: var(--text-app, #18212F);
  font-weight: 800;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.ph-method-step p {
  font-size: 14px;
  color: var(--text-soft, #5B6472);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 880px) {
  .ph-method-steps { grid-template-columns: 1fr; gap: 36px; }
}

/* ─── Pricing ─── */
.ph-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.ph-price-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 22px;
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: 0.25s ease;
}
.ph-price-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(15,23,42,0.08); }
.ph-price-card.featured {
  border: 2px solid var(--gold-prem, #D4A64A);
  box-shadow: 0 22px 50px rgba(212,166,74,0.18);
  transform: translateY(-6px);
}
.ph-price-card.featured:hover { transform: translateY(-10px); }
.ph-price-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  color: var(--navy-deep, #071B34);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(212,166,74,0.35);
}
.ph-price-tag {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft, #5B6472);
  margin-bottom: 10px;
}
.ph-price-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-app, #18212F);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.ph-price-amount {
  font-size: 44px;
  font-weight: 900;
  color: var(--text-app, #18212F);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 4px;
}
.ph-price-amount .period {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft, #5B6472);
  letter-spacing: 0;
}
.ph-price-promise {
  font-size: 13.5px;
  color: var(--text-soft, #5B6472);
  line-height: 1.55;
  margin: 14px 0 22px;
}
.ph-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ph-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-app, #18212F);
  line-height: 1.45;
}
.ph-price-features li svg {
  width: 18px; height: 18px;
  color: var(--success-app, #15A968);
  flex-shrink: 0;
  margin-top: 1px;
}
.ph-price-features li.muted { color: var(--text-faint, #8A93A1); }
.ph-price-features li.muted svg { color: var(--text-faint, #8A93A1); }
.ph-price-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14.5px;
  transition: 0.2s;
}
.ph-price-cta-primary {
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  color: var(--navy-deep, #071B34);
  box-shadow: 0 10px 20px rgba(212,166,74,0.28);
}
.ph-price-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(212,166,74,0.4); }
.ph-price-cta-ghost {
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  border: 1px solid var(--line-app, #E5E8ED);
}
.ph-price-cta-ghost:hover { border-color: var(--gold-prem, #D4A64A); color: var(--gold-prem-3, #B88A2E); }
.ph-price-cta-disabled {
  background: var(--line-app, #E5E8ED);
  color: var(--text-faint, #8A93A1);
  cursor: not-allowed;
}

/* ─── Comparison table ─── */
.ph-compare {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 50px;
}
.ph-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ph-compare-table th,
.ph-compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line-app, #E5E8ED);
}
.ph-compare-table th {
  background: var(--bg-app, #F7F8FA);
  color: var(--text-soft, #5B6472);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ph-compare-table th:not(:first-child),
.ph-compare-table td:not(:first-child) { text-align: center; }
.ph-compare-table td { color: var(--text-app, #18212F); }
.ph-compare-table tr:last-child td { border-bottom: none; }
.ph-compare-table .yes { color: var(--success-app, #15A968); font-weight: 900; }
.ph-compare-table .no { color: var(--text-faint, #8A93A1); }
.ph-compare-table .feature { font-weight: 700; }

@media (max-width: 720px) {
  .ph-compare { overflow-x: auto; }
  .ph-compare-table { min-width: 540px; }
}

/* ─── FAQ accordion ─── */
.ph-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ph-faq-item {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 14px;
  overflow: hidden;
  transition: 0.2s;
}
.ph-faq-item[open] { border-color: var(--gold-prem, #D4A64A); box-shadow: 0 10px 22px rgba(15,23,42,0.06); }
.ph-faq-q {
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-app, #18212F);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: 0.2s;
}
.ph-faq-q::-webkit-details-marker { display: none; }
.ph-faq-q::after {
  content: "+";
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-app, #F7F8FA);
  color: var(--gold-prem-3, #B88A2E);
  font-size: 18px;
  font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: 0.2s;
}
.ph-faq-item[open] .ph-faq-q::after {
  content: "−";
  background: var(--gold-prem, #D4A64A);
  color: var(--navy-deep, #071B34);
}
.ph-faq-q:hover { background: var(--bg-app, #F7F8FA); }
.ph-faq-a {
  padding: 0 22px 20px;
  font-size: 14.5px;
  color: var(--text-soft, #5B6472);
  line-height: 1.65;
}

/* ─── CTA final (sombre, large) ─── */
.ph-cta-final {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(135deg, var(--navy-deep, #071B34) 0%, var(--bg-dark-2) 100%);
  color: #fff;
  overflow: hidden;
}
.ph-cta-final::before {
  content: "";
  position: absolute;
  top: -100px; left: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(212,166,74,0.18) 0%, transparent 70%);
  filter: blur(50px);
  z-index: 0;
}
.ph-cta-final-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 880px);
  margin: 0 auto;
  text-align: center;
}
.ph-cta-final h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: #fff;
}
.ph-cta-final p {
  color: rgba(255,255,255,0.78);
  font-size: 17px;
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto 30px;
}

/* ─── Mission / Approche (à propos) ─── */
.ph-mission {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 22px;
  padding: 44px 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}
.ph-mission-icon {
  width: 88px; height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(212,166,74,0.18), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.32);
  color: var(--gold-prem-3, #B88A2E);
  display: inline-flex; align-items: center; justify-content: center;
}
.ph-mission-icon svg { width: 42px; height: 42px; }
.ph-mission h2 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--text-app, #18212F);
  margin-bottom: 10px;
}
.ph-mission p {
  font-size: 15.5px;
  color: var(--text-soft, #5B6472);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 720px) {
  .ph-mission { grid-template-columns: 1fr; padding: 30px 26px; gap: 22px; text-align: center; }
  .ph-mission-icon { margin: 0 auto; }
}

/* ─── Mobile breakpoints communs ─── */
@media (max-width: 720px) {
  .ph-hero { padding: 70px 0 60px; }
  .ph-section { padding: 60px 0; }
  .ph-cta-final { padding: 60px 0; }
  .ph-grid-3, .ph-grid-4 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD — réutilise dash-* avec accent rouge/bleu pour distinguer
   ════════════════════════════════════════════════════════════════════ */

body.admin-mode { background: var(--bg-app, #F7F8FA); }

/* Sidebar admin : même structure que dash-sidebar mais accent admin */
.adm-app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.adm-sidebar {
  background: linear-gradient(180deg, #0B1B2F 0%, #061226 100%);
  color: #fff;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.adm-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
}
.adm-sidebar-logo-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #DC2626, #991B1B);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.adm-sidebar-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.adm-sidebar-logo-text strong { color: #fff; font-weight: 900; font-size: 15px; letter-spacing: -0.01em; }
.adm-sidebar-logo-text span {
  color: #FCA5A5;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.adm-sidebar-section {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
  padding: 0 12px;
  margin-bottom: 6px;
}
.adm-sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.adm-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 13.5px;
  font-weight: 600;
  transition: 0.18s;
}
.adm-sidebar-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.adm-sidebar-nav a.active {
  background: linear-gradient(135deg, rgba(220,38,38,0.18), rgba(220,38,38,0.08));
  color: #FCA5A5;
  font-weight: 700;
  border: 1px solid rgba(220,38,38,0.25);
}
.adm-sidebar-nav a .icon { stroke: currentColor; width: 18px; height: 18px; }
.adm-sidebar-foot {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-sidebar-foot a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  transition: 0.18s;
}
.adm-sidebar-foot a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.adm-sidebar-foot a.danger:hover { color: #FCA5A5; background: rgba(220,38,38,0.10); }
.adm-sidebar-foot a .icon { width: 18px; height: 18px; }

/* Main admin */
.adm-main { padding: 28px 36px 60px; }
.adm-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 20px;
}
.adm-topbar-left h1 {
  font-size: 26px;
  color: var(--text-app, #18212F);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.adm-topbar-left p { color: var(--text-soft, #5B6472); font-size: 14px; margin-top: 4px; }
.adm-topbar-right { display: flex; align-items: center; gap: 12px; }
.adm-back-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-app, #18212F);
  transition: 0.2s;
}
.adm-back-site:hover { border-color: var(--gold-prem, #D4A64A); color: var(--gold-prem-3, #B88A2E); }
.adm-back-site .icon { width: 16px; height: 16px; }
.adm-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(220,38,38,0.10);
  border: 1px solid rgba(220,38,38,0.30);
  color: #DC2626;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.adm-admin-pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #DC2626;
  box-shadow: 0 0 0 4px rgba(220,38,38,0.18);
}

/* Stats grid */
.adm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.adm-stat-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: 0.22s;
}
.adm-stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,23,42,0.06); }
.adm-stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adm-stat-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,166,74,0.14), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.28);
  color: var(--gold-prem-3, #B88A2E);
  display: inline-flex; align-items: center; justify-content: center;
}
.adm-stat-icon svg { width: 20px; height: 20px; }
.adm-stat-icon.blue { background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(59,130,246,0.04)); border-color: rgba(59,130,246,0.28); color: #2563EB; }
.adm-stat-icon.green { background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.04)); border-color: rgba(34,197,94,0.28); color: #15A968; }
.adm-stat-icon.purple { background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(139,92,246,0.04)); border-color: rgba(139,92,246,0.28); color: #7C3AED; }
.adm-stat-icon.red { background: linear-gradient(135deg, rgba(220,38,38,0.14), rgba(220,38,38,0.04)); border-color: rgba(220,38,38,0.28); color: #DC2626; }
.adm-stat-trend {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--success-soft, #ecfdf5);
  color: var(--success-app, #15A968);
}
.adm-stat-trend.down { background: #FEF2F2; color: #DC2626; }
.adm-stat-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-app, #18212F);
  letter-spacing: -0.02em;
  line-height: 1;
}
.adm-stat-label {
  font-size: 12.5px;
  color: var(--text-soft, #5B6472);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Admin cards / tables */
.adm-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 16px;
  padding: 24px;
}
.adm-card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 16px;
}
.adm-card-h h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  letter-spacing: -0.01em;
}
.adm-card-h .icon { color: var(--text-faint, #8A93A1); width: 18px; height: 18px; }
.adm-grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
@media (max-width: 960px) {
  .adm-grid-2 { grid-template-columns: 1fr; }
}

.adm-list { display: flex; flex-direction: column; gap: 10px; }
.adm-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text-app, #18212F);
}
.adm-list-row .pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--success-soft, #ecfdf5);
  color: var(--success-app, #15A968);
  font-weight: 800;
}
.adm-list-row .pill.warn { background: #FEF3C7; color: #B45309; }
.adm-list-row .pill.info { background: #DBEAFE; color: #2563EB; }
.adm-list-row .meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint, #8A93A1);
}

/* Quick actions */
.adm-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.adm-action {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-action:hover {
  border-color: var(--gold-prem, #D4A64A);
  background: var(--bg-app, #F7F8FA);
  transform: translateY(-2px);
}
.adm-action .icon-wrap {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212,166,74,0.14), rgba(212,166,74,0.04));
  color: var(--gold-prem-3, #B88A2E);
  display: inline-flex; align-items: center; justify-content: center;
}
.adm-action strong {
  font-size: 13.5px;
  color: var(--text-app, #18212F);
  font-weight: 800;
}
.adm-action span {
  font-size: 11.5px;
  color: var(--text-soft, #5B6472);
}

/* Empty placeholder */
.adm-empty {
  padding: 60px 30px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line-app, #E5E8ED);
  border-radius: 16px;
}
.adm-empty-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(212,166,74,0.14), rgba(212,166,74,0.04));
  border: 1px solid rgba(212,166,74,0.28);
  color: var(--gold-prem-3, #B88A2E);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.adm-empty-icon svg { width: 30px; height: 30px; }
.adm-empty h3 {
  font-size: 18px;
  color: var(--text-app, #18212F);
  font-weight: 800;
  margin-bottom: 8px;
}
.adm-empty p {
  font-size: 14px;
  color: var(--text-soft, #5B6472);
  max-width: 480px;
  margin: 0 auto 18px;
  line-height: 1.55;
}

/* Mobile admin */
@media (max-width: 880px) {
  .adm-app { grid-template-columns: 1fr; }
  .adm-sidebar { position: relative; height: auto; flex-direction: column; }
  .adm-main { padding: 20px 16px 50px; }
  .adm-topbar { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   APP UI · Design system unifié pour /app/*
   - .app-page-header : header compact (remplace les gros heros)
   - .app-card / .app-grid / .app-button : composants génériques
   - .app-stat-card : mini-stats sous le header
   - .lesson-* : composants pédagogiques pour pages de cours
   ════════════════════════════════════════════════════════════════════ */

/* Couleurs par type pédagogique (utilisables via --app-accent) */
.app-tone-cours      { --app-accent: #2563EB; --app-accent-soft: rgba(37,99,235,0.10); --app-accent-bd: rgba(37,99,235,0.28); }
.app-tone-fiches     { --app-accent: #15A968; --app-accent-soft: rgba(21,169,104,0.10); --app-accent-bd: rgba(21,169,104,0.28); }
.app-tone-cas        { --app-accent: #EA580C; --app-accent-soft: rgba(234,88,12,0.10); --app-accent-bd: rgba(234,88,12,0.28); }
.app-tone-examens    { --app-accent: #B91C1C; --app-accent-soft: rgba(185,28,28,0.10); --app-accent-bd: rgba(185,28,28,0.28); }
.app-tone-activites  { --app-accent: #7C3AED; --app-accent-soft: rgba(124,58,237,0.10); --app-accent-bd: rgba(124,58,237,0.28); }
.app-tone-stats      { --app-accent: #0891B2; --app-accent-soft: rgba(8,145,178,0.10); --app-accent-bd: rgba(8,145,178,0.28); }
.app-tone-badges     { --app-accent: #D4A64A; --app-accent-soft: rgba(212,166,74,0.10); --app-accent-bd: rgba(212,166,74,0.28); }
.app-tone-parametres { --app-accent: #475569; --app-accent-soft: rgba(71,85,105,0.10); --app-accent-bd: rgba(71,85,105,0.20); }
.app-tone-aide       { --app-accent: #6366F1; --app-accent-soft: rgba(99,102,241,0.10); --app-accent-bd: rgba(99,102,241,0.28); }
.app-tone-dashboard  { --app-accent: #D4A64A; --app-accent-soft: rgba(212,166,74,0.10); --app-accent-bd: rgba(212,166,74,0.28); }

/* Default tone fallback (or) */
.app-page-content { --app-accent: var(--gold-prem, #D4A64A); --app-accent-soft: rgba(212,166,74,0.10); --app-accent-bd: rgba(212,166,74,0.28); }

/* ─── Page header compact ─── */
.app-page-header {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 26px 30px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.app-page-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--app-accent, var(--gold-prem)), transparent 80%);
}
.app-page-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 12px;
}
.app-page-header h1 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-app, #18212F);
  margin: 0 0 8px;
}
.app-page-header p {
  font-size: 14.5px;
  color: var(--text-soft, #5B6472);
  line-height: 1.55;
  max-width: 720px;
  margin: 0;
}
.app-page-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: flex-end;
}
.app-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* ─── Mini-stats sous le header ─── */
.app-mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.app-mini-stat {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-mini-stat-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--app-accent-soft, rgba(212,166,74,0.12));
  border: 1px solid var(--app-accent-bd, rgba(212,166,74,0.28));
  color: var(--app-accent, var(--gold-prem-3, #B88A2E));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-mini-stat-icon svg { width: 18px; height: 18px; }
.app-mini-stat-text { display: flex; flex-direction: column; line-height: 1.15; }
.app-mini-stat-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-app, #18212F);
  letter-spacing: -0.01em;
}
.app-mini-stat-label {
  font-size: 11.5px;
  color: var(--text-soft, #5B6472);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ─── Cards génériques ─── */
.app-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  transition: 0.22s ease;
  display: flex;
  flex-direction: column;
}
.app-card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.app-card-h h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  letter-spacing: -0.005em;
  margin: 0;
}
.app-card-h .icon { color: var(--text-faint, #8A93A1); width: 18px; height: 18px; flex-shrink: 0; }
.app-card-text {
  font-size: 14px;
  color: var(--text-soft, #5B6472);
  line-height: 1.6;
  margin: 0 0 14px;
}
.app-card-footer {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ─── Grids ─── */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.app-grid-2 { grid-template-columns: repeat(2, 1fr); }
.app-grid-3 { grid-template-columns: repeat(3, 1fr); }
.app-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .app-grid-3, .app-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  .app-grid-2, .app-grid-3, .app-grid-4 { grid-template-columns: 1fr; }
}

/* ─── Buttons unifiés ─── */
.app-button,
.app-button-primary,
.app-button-secondary,
.app-button-ghost,
.app-button-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.18s ease;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}
.app-button-primary {
  background: linear-gradient(135deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  color: var(--navy-deep, #071B34);
  box-shadow: 0 8px 18px rgba(212,166,74,0.24);
}
.app-button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(212,166,74,0.36); color: var(--navy-deep); }
.app-button-secondary {
  background: var(--app-accent-soft, var(--bg-app));
  color: var(--app-accent, var(--text-app));
  border-color: var(--app-accent-bd, var(--line-app));
}
.app-button-secondary:hover { transform: translateY(-1px); background: #fff; }
.app-button-ghost {
  background: #fff;
  color: var(--text-app, #18212F);
  border-color: var(--line-app, #E5E8ED);
}
.app-button-ghost:hover { border-color: var(--gold-prem, #D4A64A); color: var(--gold-prem-3, #B88A2E); }
.app-button-danger {
  background: rgba(220,38,38,0.10);
  color: #B91C1C;
  border-color: rgba(220,38,38,0.30);
}
.app-button-danger:hover { background: rgba(220,38,38,0.16); border-color: rgba(220,38,38,0.50); color: #991B1B; }
.app-button .arrow,
.app-button-primary .arrow,
.app-button-secondary .arrow,
.app-button-ghost .arrow { transition: transform 0.2s ease; }
.app-button:hover .arrow,
.app-button-primary:hover .arrow,
.app-button-secondary:hover .arrow,
.app-button-ghost:hover .arrow { transform: translateX(3px); }

/* ─── Badges status ─── */
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--app-accent-soft, var(--bg-app));
  color: var(--app-accent, var(--text-app));
  border: 1px solid var(--app-accent-bd, transparent);
}
.app-badge-success { background: var(--success-soft, #ecfdf5); color: var(--success-app, #15A968); border-color: rgba(21,169,104,0.28); }
.app-badge-warn { background: #FEF3C7; color: #B45309; border-color: rgba(180,83,9,0.28); }
.app-badge-info { background: #DBEAFE; color: #1D4ED8; border-color: rgba(29,78,216,0.20); }
.app-badge-muted { background: var(--bg-app, #F7F8FA); color: var(--text-soft, #5B6472); border-color: var(--line-app, #E5E8ED); }
.app-badge-danger { background: rgba(220,38,38,0.08); color: #B91C1C; border-color: rgba(185,28,28,0.20); }

/* ─── Module color cards (pour modules.html) ─── */
.app-module-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
  color: inherit;
}
.app-module-card:hover {
  transform: translateY(-4px);
  border-color: var(--mod-color, var(--gold-prem, #D4A64A));
  box-shadow: 0 18px 36px rgba(15,23,42,0.08);
  color: inherit;
}
.app-module-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mod-color, var(--gold-prem)), transparent 90%);
}
.app-module-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--mod-color, var(--gold-prem-3));
  margin-bottom: 12px;
}
.app-module-num-pill {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--mod-color-soft, rgba(212,166,74,0.14));
  color: var(--mod-color, var(--gold-prem-3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
}
.app-module-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--mod-color-soft, rgba(212,166,74,0.12));
  border: 1px solid var(--mod-color-bd, rgba(212,166,74,0.28));
  color: var(--mod-color, var(--gold-prem-3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.app-module-icon svg { width: 22px; height: 22px; }
.app-module-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.25;
}
.app-module-summary {
  font-size: 13.5px;
  color: var(--text-soft, #5B6472);
  line-height: 1.6;
  margin: 0 0 16px;
}
.app-module-stats {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 10px;
  margin-bottom: 14px;
  justify-content: space-around;
}
.app-module-stat {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-soft, #5B6472);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.app-module-stat strong {
  display: block;
  font-size: 15px;
  color: var(--text-app, #18212F);
  font-weight: 900;
  margin-bottom: 1px;
}
.app-module-progress {
  margin-bottom: 14px;
}
.app-module-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-soft, #5B6472);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.app-module-progress-meta strong { color: var(--text-app, #18212F); font-size: 13px; }
.app-module-progress-bar {
  height: 6px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 6px;
  overflow: hidden;
}
.app-module-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mod-color, var(--gold-prem)), var(--mod-color-2, var(--gold-prem-3)));
  border-radius: inherit;
  transition: width 0.5s ease;
}
.app-module-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--mod-color, var(--gold-prem-3));
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--mod-color-bd, var(--line-app));
  background: var(--mod-color-soft, var(--bg-app));
  transition: 0.18s;
}
.app-module-card:hover .app-module-cta {
  background: var(--mod-color, var(--gold-prem));
  color: #fff;
  border-color: var(--mod-color, var(--gold-prem));
}

/* Couleurs spécifiques par module */
.app-mod-1 { --mod-color: #2563EB; --mod-color-2: #1E40AF; --mod-color-soft: rgba(37,99,235,0.10); --mod-color-bd: rgba(37,99,235,0.28); }
.app-mod-2 { --mod-color: #15A968; --mod-color-2: #047857; --mod-color-soft: rgba(21,169,104,0.10); --mod-color-bd: rgba(21,169,104,0.28); }
.app-mod-3 { --mod-color: #DC2626; --mod-color-2: #991B1B; --mod-color-soft: rgba(220,38,38,0.10); --mod-color-bd: rgba(220,38,38,0.28); }
.app-mod-4 { --mod-color: #0891B2; --mod-color-2: #0E7490; --mod-color-soft: rgba(8,145,178,0.10); --mod-color-bd: rgba(8,145,178,0.28); }
.app-mod-5 { --mod-color: #7C3AED; --mod-color-2: #5B21B6; --mod-color-soft: rgba(124,58,237,0.10); --mod-color-bd: rgba(124,58,237,0.28); }

.app-module-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  width: fit-content;
}
.app-module-status.status-not_started { background: var(--bg-app); color: var(--text-soft); border: 1px solid var(--line-app); }
.app-module-status.status-in_progress { background: rgba(37,99,235,0.10); color: #1D4ED8; border: 1px solid rgba(37,99,235,0.25); }
.app-module-status.status-good { background: #FEF3C7; color: #B45309; border: 1px solid rgba(180,83,9,0.25); }
.app-module-status.status-mastered { background: rgba(21,169,104,0.10); color: #047857; border: 1px solid rgba(21,169,104,0.28); }

/* ─── Activity cards (pour activites.html) ─── */
.app-activity-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
}
.app-activity-card:hover {
  transform: translateY(-4px);
  border-color: var(--act-color, var(--gold-prem));
  box-shadow: 0 16px 32px rgba(15,23,42,0.08);
  color: inherit;
}
.app-activity-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--act-color, var(--gold-prem)), transparent 90%);
}
.app-activity-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--act-soft, rgba(212,166,74,0.12));
  border: 1px solid var(--act-bd, rgba(212,166,74,0.28));
  color: var(--act-color, var(--gold-prem-3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.app-activity-icon svg { width: 28px; height: 28px; }
.app-activity-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--act-soft);
  color: var(--act-color);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  width: fit-content;
}
.app-activity-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-app);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.app-activity-card p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0 0 16px;
}
.app-activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11.5px;
  color: var(--text-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 14px;
  border-top: 1px solid var(--line-app);
  margin-top: auto;
}
.app-activity-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--act-color, var(--gold-prem-3));
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--act-soft);
  border: 1px solid var(--act-bd);
  transition: 0.18s;
}
.app-activity-card:hover .app-activity-cta {
  background: var(--act-color);
  color: #fff;
  border-color: var(--act-color);
}

/* Variantes activités */
.app-act-green  { --act-color: #15A968; --act-soft: rgba(21,169,104,0.10); --act-bd: rgba(21,169,104,0.28); }
.app-act-orange { --act-color: #EA580C; --act-soft: rgba(234,88,12,0.10); --act-bd: rgba(234,88,12,0.28); }
.app-act-blue   { --act-color: #2563EB; --act-soft: rgba(37,99,235,0.10); --act-bd: rgba(37,99,235,0.28); }
.app-act-purple { --act-color: #7C3AED; --act-soft: rgba(124,58,237,0.10); --act-bd: rgba(124,58,237,0.28); }
.app-act-gold   { --act-color: #D4A64A; --act-soft: rgba(212,166,74,0.10); --act-bd: rgba(212,166,74,0.28); }
.app-act-red    { --act-color: #DC2626; --act-soft: rgba(220,38,38,0.10); --act-bd: rgba(220,38,38,0.28); }

/* ─── Badge cards (pour badges.html) ─── */
.app-badge-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  transition: 0.22s ease;
}
.app-badge-card.locked { opacity: 0.45; filter: grayscale(0.8); background: var(--bg-app); }
.app-badge-card.unlocked {
  border-color: rgba(212,166,74,0.40);
  background: linear-gradient(135deg, #FFF8E6 0%, #fff 100%);
  box-shadow: 0 6px 18px rgba(212,166,74,0.15);
}
.app-badge-card:hover { transform: translateY(-2px); }
.app-badge-emoji {
  font-size: 36px;
  display: block;
  margin: 0 auto 8px;
  line-height: 1;
}
.app-badge-card h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-app);
  margin: 0 0 4px;
}
.app-badge-card p {
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.4;
  margin: 0;
}

/* ─── Form fields (pour parametres.html) ─── */
.app-form { display: flex; flex-direction: column; gap: 16px; }
.app-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .app-form-row { grid-template-columns: 1fr; } }
.app-field { display: flex; flex-direction: column; gap: 6px; }
.app-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-app);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.app-field input,
.app-field textarea,
.app-field select {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line-app);
  background: #fff;
  color: var(--text-app);
  font-size: 14px;
  font-family: inherit;
  transition: 0.18s;
}
.app-field input:focus,
.app-field textarea:focus,
.app-field select:focus {
  outline: none;
  border-color: var(--gold-prem);
  box-shadow: 0 0 0 3px rgba(212,166,74,0.15);
}
.app-field-hint { font-size: 12px; color: var(--text-faint); }
.app-alert {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  display: none;
}
.app-alert.show { display: block; }
.app-alert-error { background: rgba(220,38,38,0.08); color: #B91C1C; border: 1px solid rgba(220,38,38,0.20); }
.app-alert-success { background: rgba(21,169,104,0.08); color: #047857; border: 1px solid rgba(21,169,104,0.22); }

/* ─── FAQ accordion app version ─── */
.app-faq-item {
  background: #fff;
  border: 1px solid var(--line-app);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  transition: 0.2s;
  margin-bottom: 10px;
}
.app-faq-item[open] { border-color: var(--app-accent, var(--gold-prem)); }
.app-faq-q {
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-app);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
}
.app-faq-q::-webkit-details-marker { display: none; }
.app-faq-q::after {
  content: "+";
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--bg-app);
  color: var(--app-accent, var(--gold-prem-3));
  font-size: 16px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.18s;
}
.app-faq-item[open] .app-faq-q::after { content: "−"; background: var(--app-accent, var(--gold-prem)); color: #fff; }
.app-faq-a {
  padding: 0 18px 16px;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* ─── Empty state (réutilisable) ─── */
.app-empty {
  background: #fff;
  border: 1px dashed var(--line-app);
  border-radius: 16px;
  padding: 48px 28px;
  text-align: center;
}
.app-empty-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--app-accent-soft, rgba(212,166,74,0.10));
  border: 1px solid var(--app-accent-bd, rgba(212,166,74,0.28));
  color: var(--app-accent, var(--gold-prem-3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.app-empty h3 { font-size: 16px; font-weight: 800; color: var(--text-app); margin: 0 0 6px; }
.app-empty p { font-size: 14px; color: var(--text-soft); max-width: 440px; margin: 0 auto 14px; line-height: 1.55; }

/* ─── Lesson blocks (pour pages de cours futures) ─── */
.lesson-page { max-width: 880px; margin: 0 auto; }
.lesson-chapter {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-app);
}
.lesson-chapter:last-child { border-bottom: none; }
.lesson-chapter-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--app-accent-soft, rgba(212,166,74,0.10));
  color: var(--app-accent, var(--gold-prem-3));
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 12px;
}
.lesson-chapter h2 {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-app);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.lesson-block {
  background: #fff;
  border: 1px solid var(--line-app);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
  position: relative;
}
.lesson-block h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-app);
  margin: 0 0 8px;
}
.lesson-block p {
  font-size: 14.5px;
  color: var(--text-app);
  line-height: 1.7;
  margin: 0 0 10px;
}
.lesson-block p:last-child { margin-bottom: 0; }
.lesson-block ul,
.lesson-block ol { margin: 8px 0; padding-left: 22px; line-height: 1.7; color: var(--text-app); }
.lesson-block code {
  background: var(--bg-app);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.94em;
  color: var(--gold-prem-3);
}

.lesson-block--theory   { border-left: 4px solid #2563EB; }
.lesson-block--example  { border-left: 4px solid #15A968; background: linear-gradient(90deg, rgba(21,169,104,0.04), #fff); }
.lesson-block--warning  { border-left: 4px solid #DC2626; background: linear-gradient(90deg, rgba(220,38,38,0.04), #fff); }
.lesson-block--remember { border-left: 4px solid #D4A64A; background: linear-gradient(90deg, rgba(212,166,74,0.06), #fff); }
.lesson-block--definition { border-left: 4px solid #7C3AED; background: linear-gradient(90deg, rgba(124,58,237,0.04), #fff); }

.lesson-block-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.lesson-block--theory   .lesson-block-tag { background: rgba(37,99,235,0.10); color: #1D4ED8; }
.lesson-block--example  .lesson-block-tag { background: rgba(21,169,104,0.10); color: #047857; }
.lesson-block--warning  .lesson-block-tag { background: rgba(220,38,38,0.10); color: #B91C1C; }
.lesson-block--remember .lesson-block-tag { background: rgba(212,166,74,0.14); color: #B88A2E; }
.lesson-block--definition .lesson-block-tag { background: rgba(124,58,237,0.10); color: #6D28D9; }

.lesson-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line-app);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 600;
}
.lesson-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-app);
  border-radius: 6px;
  overflow: hidden;
}
.lesson-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-prem), var(--gold-prem-3));
  transition: width 0.5s ease;
}
.lesson-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-app);
  flex-wrap: wrap;
}

/* ─── Override : neutraliser certains résidus legacy dans /app/ ─── */
body.platform-v4 .modules-hero,
body.platform-v4 .page-hero,
body.platform-v4 #navbar,
body.platform-v4 .exam-nav,
body.platform-v4 .fiches-nav,
body.platform-v4 #progress-bar-wrap { display: none !important; }

/* Topbar app simplifiée */
.app-topbar-mini {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.app-topbar-mini .dash-streak,
.app-topbar-mini .dash-avatar { /* réutilisation styles dash existants */ }

/* Section title compact app */
.app-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 28px 0 14px;
}
.app-section-title h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-app);
  letter-spacing: -0.01em;
  margin: 0;
}
.app-section-title-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  display: block;
  margin-bottom: 4px;
}
.app-section-title-actions { display: flex; gap: 8px; }

/* Mobile tweaks app */
@media (max-width: 720px) {
  .app-page-header { padding: 22px 22px; }
  .app-page-header h1 { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   QUIZ ENGINE · UI réutilisable (cours.html, quiz.html, examen-blanc.html)
   ════════════════════════════════════════════════════════════════════ */
.quiz-engine { max-width: 760px; margin: 0 auto; }
.quiz-engine-bar {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-engine-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  font-weight: 600;
}
.quiz-engine-meta strong { color: var(--text-app, #18212F); font-weight: 800; }
.quiz-engine-meta-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--text-app, #18212F);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-app, #F7F8FA);
  border: 1px solid var(--line-app, #E5E8ED);
}
.quiz-engine-meta-timer.urgent {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.30);
  color: #B91C1C;
  animation: qePulse 1s infinite;
}
@keyframes qePulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0);} 50%{box-shadow:0 0 0 6px rgba(220,38,38,0.10);} }
.quiz-engine-progress {
  height: 6px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 6px;
  overflow: hidden;
}
.quiz-engine-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  transition: width 0.4s ease;
}

.quiz-engine-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 16px;
  padding: 28px 30px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.quiz-engine-q {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-app, #18212F);
  line-height: 1.5;
  margin-bottom: 22px;
}
.quiz-engine-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-engine-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-app, #18212F);
  font-family: inherit;
  transition: 0.18s ease;
}
.quiz-engine-opt:hover:not(:disabled) {
  border-color: var(--gold-prem, #D4A64A);
  background: rgba(212,166,74,0.04);
  transform: translateX(2px);
}
.quiz-engine-opt:disabled { cursor: default; }
.quiz-engine-opt.correct {
  border-color: var(--success-app, #15A968);
  background: rgba(21,169,104,0.06);
  color: #047857;
}
.quiz-engine-opt.wrong {
  border-color: #DC2626;
  background: rgba(220,38,38,0.04);
  color: #991B1B;
}
.quiz-engine-opt-letter {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}
.quiz-engine-opt.correct .quiz-engine-opt-letter { background: var(--success-app, #15A968); color: #fff; }
.quiz-engine-opt.wrong .quiz-engine-opt-letter { background: #DC2626; color: #fff; }
.quiz-engine-opt-text { flex: 1; }

.quiz-engine-feedback {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 4px solid;
  font-size: 14px;
  line-height: 1.55;
}
.quiz-engine-feedback.correct { background: rgba(21,169,104,0.06); border-color: var(--success-app, #15A968); color: #047857; }
.quiz-engine-feedback.wrong { background: rgba(220,38,38,0.04); border-color: #DC2626; color: #991B1B; }
.quiz-engine-feedback strong { display: block; font-size: 14.5px; margin-bottom: 5px; }

.quiz-engine-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.quiz-engine-result {
  background: linear-gradient(135deg, #fff 0%, var(--bg-app, #F7F8FA) 100%);
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 36px 30px;
  text-align: center;
  margin-bottom: 22px;
  box-shadow: 0 14px 32px rgba(15,23,42,0.06);
}
.quiz-engine-result-emoji { font-size: 56px; display: block; margin-bottom: 10px; line-height: 1; }
.quiz-engine-result h2 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--text-app, #18212F);
}
.quiz-engine-result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 14px 0 18px;
}
.quiz-engine-result-score strong {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.quiz-engine-result-score span {
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  font-weight: 600;
}
.quiz-engine-result-msg {
  font-size: 14.5px;
  color: var(--text-soft, #5B6472);
  max-width: 440px;
  margin: 0 auto 22px;
  line-height: 1.55;
}
.quiz-engine-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.quiz-engine-review {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 16px;
  padding: 22px 24px;
}
.quiz-engine-review h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  margin: 0 0 14px;
}
.quiz-engine-review-item {
  background: var(--bg-app, #F7F8FA);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-left: 3px solid var(--line-app, #E5E8ED);
}
.quiz-engine-review-item.ok { border-left-color: var(--success-app, #15A968); }
.quiz-engine-review-item.ko { border-left-color: #DC2626; }
.quiz-engine-review-item summary {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-app, #18212F);
  list-style: none;
}
.quiz-engine-review-item summary::-webkit-details-marker { display: none; }
.quiz-engine-review-status {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
}
.quiz-engine-review-item.ok .quiz-engine-review-status { background: var(--success-app, #15A968); }
.quiz-engine-review-item.ko .quiz-engine-review-status { background: #DC2626; }
.quiz-engine-review-q { flex: 1; line-height: 1.4; }
.quiz-engine-review-body { padding: 12px 0 4px 32px; }
.quiz-engine-review-opt {
  font-size: 13.5px;
  color: var(--text-soft, #5B6472);
  padding: 5px 0;
  line-height: 1.5;
}
.quiz-engine-review-opt.is-correct { color: #047857; font-weight: 600; }
.quiz-engine-review-opt.is-wrong { color: #B91C1C; font-weight: 600; text-decoration: line-through; }
.quiz-engine-review-expl {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px dashed var(--line-app, #E5E8ED);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════════════
   COURSE PAGE · Layout du contenu pédagogique (cours.html)
   ════════════════════════════════════════════════════════════════════ */
.course-toc {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--text-soft, #5B6472);
}
.course-toc-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.course-toc-meta strong { color: var(--text-app, #18212F); font-weight: 800; }

.course-body { max-width: 820px; margin: 0 auto; }
.course-body p { font-size: 15px; line-height: 1.75; color: var(--text-app, #18212F); margin: 0 0 14px; }
.course-body strong { color: var(--text-app, #18212F); }
.course-body ul,
.course-body ol { padding-left: 24px; margin: 0 0 16px; line-height: 1.75; color: var(--text-app, #18212F); }
.course-body li { margin-bottom: 4px; }
.course-body code { background: var(--bg-app, #F7F8FA); padding: 1px 6px; border-radius: 4px; font-size: 0.93em; color: var(--gold-prem-3, #B88A2E); }

/* Niveau pill */
.course-niveau {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.course-niveau-1 { background: rgba(37,99,235,0.10); color: #1D4ED8; border: 1px solid rgba(37,99,235,0.25); }
.course-niveau-2 { background: rgba(245,158,11,0.10); color: #B45309; border: 1px solid rgba(245,158,11,0.30); }
.course-niveau-3 { background: rgba(220,38,38,0.10); color: #B91C1C; border: 1px solid rgba(220,38,38,0.28); }

/* Game cards (jeux.html) */
.game-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: 0.22s ease;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--gold-prem, #D4A64A); box-shadow: 0 14px 28px rgba(15,23,42,0.07); }
.game-card-emoji { font-size: 42px; line-height: 1; margin-bottom: 14px; }
.game-card h3 { font-size: 18px; font-weight: 800; color: var(--text-app, #18212F); margin: 0 0 8px; }
.game-card p { font-size: 14px; color: var(--text-soft, #5B6472); line-height: 1.55; margin: 0 0 16px; }

/* Decision game (mini-jeu accept/refuse) */
.decision-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 30px 32px;
  max-width: 720px;
  margin: 0 auto 18px;
}
.decision-card-prompt {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-app, #18212F);
  margin: 0 0 22px;
  padding: 18px 20px;
  background: var(--bg-app, #F7F8FA);
  border-left: 4px solid var(--gold-prem, #D4A64A);
  border-radius: 10px;
}
.decision-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.decision-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  border: 2px solid;
  cursor: pointer;
  font-family: inherit;
  transition: 0.18s;
}
.decision-btn.accept { border-color: var(--success-app, #15A968); color: #047857; background: rgba(21,169,104,0.04); }
.decision-btn.accept:hover { background: var(--success-app, #15A968); color: #fff; }
.decision-btn.refuse { border-color: #DC2626; color: #B91C1C; background: rgba(220,38,38,0.04); }
.decision-btn.refuse:hover { background: #DC2626; color: #fff; }
.decision-feedback {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  display: none;
}
.decision-feedback.correct { background: rgba(21,169,104,0.06); border-left: 4px solid var(--success-app, #15A968); color: #047857; }
.decision-feedback.wrong { background: rgba(220,38,38,0.04); border-left: 4px solid #DC2626; color: #991B1B; }
.decision-feedback strong { display: block; margin-bottom: 6px; font-size: 15px; }

/* Module page TOC */
.module-toc-list {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .module-toc-list { grid-template-columns: 1fr 1fr; }
}
.module-toc-item {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-decoration: none;
  transition: 0.2s;
  color: inherit;
}
.module-toc-item:hover {
  border-color: var(--app-accent, var(--gold-prem));
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  transform: translateY(-2px);
}
.module-toc-num {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--app-accent-soft, rgba(212,166,74,0.10));
  color: var(--app-accent, var(--gold-prem-3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}
.module-toc-info { flex: 1; min-width: 0; }
.module-toc-info h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-app);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.module-toc-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-soft);
  font-weight: 600;
}
.module-toc-state {
  align-self: center;
  font-size: 12px;
  color: var(--success-app);
  font-weight: 800;
}

/* ════════════════════════════════════════════════════════════════════
   EXAM ENGINE · Mode examen blanc avec navigation libre + grille
   ════════════════════════════════════════════════════════════════════ */
.exam-engine { max-width: 880px; margin: 0 auto; }
.exam-engine-topbar {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  position: sticky;
  top: 12px;
  z-index: 10;
  box-shadow: 0 8px 18px rgba(15,23,42,0.04);
}
.exam-engine-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  font-weight: 600;
  margin-bottom: 10px;
}
.exam-engine-meta strong { color: var(--text-app, #18212F); font-weight: 800; }
.exam-engine-meta-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-app, #F7F8FA);
  border: 1px solid var(--line-app, #E5E8ED);
  font-size: 14.5px;
  color: var(--text-app, #18212F);
  letter-spacing: 0.02em;
}
.exam-engine-meta-timer.urgent {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.30);
  color: #B91C1C;
  animation: qePulse 1s infinite;
}
.exam-engine-submit {
  margin-left: auto;
}
.exam-engine-progress {
  height: 5px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}
.exam-engine-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-prem, #D4A64A), var(--gold-prem-3, #B88A2E));
  transition: width 0.4s ease;
}
.exam-engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 6px;
}
.exam-engine-grid-cell {
  aspect-ratio: 1;
  border: 1.5px solid var(--line-app, #E5E8ED);
  background: #fff;
  color: var(--text-app, #18212F);
  font-weight: 800;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
}
.exam-engine-grid-cell:hover { border-color: var(--gold-prem, #D4A64A); }
.exam-engine-grid-cell.answered { background: var(--app-accent-soft, rgba(212,166,74,0.10)); border-color: var(--app-accent-bd, rgba(212,166,74,0.32)); color: var(--app-accent, var(--gold-prem-3)); }
.exam-engine-grid-cell.current { outline: 2px solid var(--gold-prem, #D4A64A); outline-offset: 1px; transform: scale(1.05); }
.exam-engine-grid-cell.correct { background: rgba(21,169,104,0.16); border-color: rgba(21,169,104,0.45); color: #047857; }
.exam-engine-grid-cell.wrong { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.40); color: #B91C1C; }
.exam-engine-grid-cell.empty { background: var(--bg-app, #F7F8FA); border-color: rgba(180,83,9,0.30); color: #B45309; }

.exam-engine-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 16px;
  padding: 28px 30px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.exam-engine-q-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.exam-engine-q {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-app, #18212F);
  line-height: 1.55;
  margin-bottom: 22px;
}
.exam-engine-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.exam-engine-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border: 1.5px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-app, #18212F);
  font-family: inherit;
  transition: 0.18s ease;
}
.exam-engine-opt:hover:not(:disabled) {
  border-color: var(--gold-prem, #D4A64A);
  background: rgba(212,166,74,0.04);
  transform: translateX(2px);
}
.exam-engine-opt.picked { border-color: var(--gold-prem, #D4A64A); background: rgba(212,166,74,0.08); }
.exam-engine-opt:disabled { cursor: default; }
.exam-engine-opt.correct { border-color: var(--success-app, #15A968); background: rgba(21,169,104,0.06); color: #047857; }
.exam-engine-opt.wrong { border-color: #DC2626; background: rgba(220,38,38,0.06); color: #991B1B; }
.exam-engine-opt-letter {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}
.exam-engine-opt.picked .exam-engine-opt-letter { background: var(--gold-prem, #D4A64A); color: var(--navy-deep); }
.exam-engine-opt.correct .exam-engine-opt-letter { background: var(--success-app, #15A968); color: #fff; }
.exam-engine-opt.wrong .exam-engine-opt-letter { background: #DC2626; color: #fff; }
.exam-engine-opt-text { flex: 1; }

.exam-engine-explanation {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--bg-app, #F7F8FA);
  border-left: 3px solid var(--gold-prem, #D4A64A);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-app, #18212F);
}
.exam-engine-explanation strong { color: var(--gold-prem-3, #B88A2E); }

.exam-engine-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-app, #E5E8ED);
  flex-wrap: wrap;
}

.exam-engine-result {
  background: linear-gradient(135deg, #fff 0%, var(--bg-app, #F7F8FA) 100%);
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  padding: 30px 26px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 14px 32px rgba(15,23,42,0.06);
}
.exam-engine-result-emoji { font-size: 44px; display: block; margin-bottom: 8px; line-height: 1; }
.exam-engine-result h2 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--text-app, #18212F);
}
.exam-engine-result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 12px 0 14px;
}
.exam-engine-result-score strong {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.exam-engine-result-score span {
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  font-weight: 600;
}
.exam-engine-result-msg {
  font-size: 14.5px;
  color: var(--text-soft, #5B6472);
  max-width: 540px;
  margin: 0 auto 18px;
  line-height: 1.55;
}
.exam-engine-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.exam-engine-summary {
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  border-left: 3px solid #B45309;
}
.exam-engine-summary.success { border-left-color: var(--success-app, #15A968); color: #047857; }

@media (max-width: 720px) {
  .exam-engine-topbar { position: static; }
  .exam-engine-meta { flex-direction: column; align-items: stretch; }
  .exam-engine-submit { width: 100%; justify-content: center; }
  .exam-engine-card { padding: 22px 18px; }
  .exam-engine-grid { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════
   MINI-JEUX · Design premium unifié (mg-* prefix)
   Utilisé par /app/jeux.html, /app/jeu.html, et le moteur games-engine.js v2
   ════════════════════════════════════════════════════════════════════ */
.mg-shell { max-width: 820px; margin: 0 auto; }

/* Intro screen */
.mg-intro {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 22px;
  padding: 44px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15,23,42,0.06);
}
.mg-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mg-color, #D4A64A)08, transparent 60%);
  z-index: 0;
}
.mg-intro > * { position: relative; z-index: 1; }
.mg-intro-emoji {
  display: inline-flex;
  width: 84px; height: 84px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--mg-color, #D4A64A), var(--mg-color, #B88A2E));
  align-items: center;
  justify-content: center;
  font-size: 44px;
  margin-bottom: 20px;
  box-shadow: 0 14px 30px rgba(15,23,42,0.15);
  color: #fff;
  line-height: 1;
}
.mg-intro-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-app, #18212F);
  margin: 0 0 12px;
}
.mg-intro-desc {
  font-size: 15px;
  color: var(--text-soft, #5B6472);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 24px;
}
.mg-intro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}
.mg-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-app, #F7F8FA);
  border: 1px solid var(--line-app, #E5E8ED);
  color: var(--text-soft, #5B6472);
  font-size: 12.5px;
  font-weight: 700;
}
.mg-meta-green { background: rgba(21,169,104,0.10); border-color: rgba(21,169,104,0.30); color: #047857; }
.mg-meta-orange { background: rgba(234,88,12,0.10); border-color: rgba(234,88,12,0.30); color: #C2410C; }
.mg-meta-red { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.30); color: #B91C1C; }
.mg-start-btn {
  font-size: 15px !important;
  padding: 14px 30px !important;
}

/* Top bar (during game) */
.mg-bar {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  position: sticky;
  top: 12px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.mg-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-soft, #5B6472);
  font-weight: 600;
  margin-bottom: 8px;
}
.mg-bar-meta strong { color: var(--text-app, #18212F); font-weight: 800; }
.mg-score strong { color: var(--mg-color, var(--gold-prem-3, #B88A2E)); }
.mg-progress {
  height: 6px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 6px;
  overflow: hidden;
}
.mg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mg-color, var(--gold-prem, #D4A64A)), var(--mg-color, var(--gold-prem-3, #B88A2E)));
  transition: width 0.45s ease;
}

/* Game card */
.mg-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.04);
}
.mg-illustration {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mg-illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%);
}
.mg-illustration-emoji {
  font-size: 72px;
  line-height: 1;
  position: relative;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.20));
}
.mg-card-body { padding: 26px 28px; }
.mg-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mg-situation {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-app, #18212F);
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--bg-app, #F7F8FA);
  border-left: 4px solid var(--mg-color, var(--gold-prem, #D4A64A));
  border-radius: 10px;
}
.mg-situation strong { color: var(--text-app, #18212F); }
.mg-question {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.mg-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mg-choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 2px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-app, #18212F);
  text-align: left;
  line-height: 1.5;
  transition: 0.18s ease;
}
.mg-choice:hover:not(:disabled) {
  border-color: var(--gold-prem, #D4A64A);
  background: rgba(212,166,74,0.04);
  transform: translateX(2px);
}
.mg-choice:disabled { cursor: default; }
.mg-choice.correct { border-color: var(--success-app, #15A968); background: rgba(21,169,104,0.06); color: #047857; }
.mg-choice.wrong { border-color: #DC2626; background: rgba(220,38,38,0.04); color: #991B1B; }
.mg-choice-letter {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}
.mg-choice.correct .mg-choice-letter { background: var(--success-app, #15A968); color: #fff; }
.mg-choice.wrong .mg-choice-letter { background: #DC2626; color: #fff; }
.mg-choice-label { flex: 1; }

/* Variants accept/refuse */
.mg-choice-accept { border-color: rgba(21,169,104,0.40); }
.mg-choice-accept .mg-choice-letter { background: rgba(21,169,104,0.12); color: #047857; }
.mg-choice-refuse { border-color: rgba(220,38,38,0.40); }
.mg-choice-refuse .mg-choice-letter { background: rgba(220,38,38,0.10); color: #B91C1C; }

/* Feedback */
.mg-feedback {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  border-left: 4px solid;
  font-size: 14px;
  line-height: 1.6;
}
.mg-feedback.correct { background: rgba(21,169,104,0.06); border-color: var(--success-app, #15A968); color: #047857; }
.mg-feedback.wrong { background: rgba(220,38,38,0.04); border-color: #DC2626; color: #991B1B; }
.mg-feedback-head strong { font-size: 15.5px; font-weight: 900; }
.mg-feedback-body { margin-top: 6px; color: var(--text-app, #18212F); }
.mg-feedback-rule, .mg-feedback-risk {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.55);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-app, #18212F);
  line-height: 1.55;
}
.mg-feedback-rule strong, .mg-feedback-risk strong { color: var(--text-app, #18212F); }

.mg-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

/* Result screen */
.mg-result {
  background: linear-gradient(135deg, #fff 0%, var(--bg-app, #F7F8FA) 100%);
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 22px;
  padding: 36px 30px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.06);
}
.mg-result-emoji { font-size: 56px; display: block; margin-bottom: 8px; line-height: 1; }
.mg-result h2 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--text-app, #18212F);
  margin: 0 0 12px;
}
.mg-result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 14px 0 16px;
}
.mg-result-score strong {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.mg-result-score strong span { font-size: 0.4em; color: var(--text-faint, #8A93A1); }
.mg-result-pct { font-size: 14px !important; color: var(--text-soft, #5B6472); font-weight: 700; }
.mg-result-msg {
  font-size: 14.5px;
  color: var(--text-soft, #5B6472);
  max-width: 480px;
  margin: 0 auto 16px;
  line-height: 1.55;
}
.mg-result-meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.mg-result-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mg-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Result review (collapsible correction) */
.mg-review {
  margin-top: 22px;
  text-align: left;
  border-top: 1px solid var(--line-app, #E5E8ED);
  padding-top: 18px;
}
.mg-review summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text-app, #18212F);
  padding: 10px 14px;
  background: var(--bg-app, #F7F8FA);
  border-radius: 10px;
  list-style: none;
  font-size: 14px;
}
.mg-review summary::-webkit-details-marker { display: none; }
.mg-review summary::after { content: "▾"; float: right; transition: 0.2s; }
.mg-review[open] summary::after { transform: rotate(180deg); }
.mg-review-list { padding: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.mg-review-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 12px;
  border-left: 3px solid;
}
.mg-review-item.ok { border-left-color: var(--success-app, #15A968); }
.mg-review-item.ko { border-left-color: #DC2626; }
.mg-review-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
}
.mg-review-item.ok .mg-review-num { background: var(--success-app, #15A968); color: #fff; }
.mg-review-item.ko .mg-review-num { background: #DC2626; color: #fff; }
.mg-review-body { flex: 1; min-width: 0; }
.mg-review-q { font-size: 13.5px; color: var(--text-app, #18212F); line-height: 1.55; margin: 0 0 6px; }
.mg-review-ans { font-size: 12.5px; margin: 0 0 6px; color: var(--text-soft, #5B6472); }
.mg-review-ans em { font-style: normal; font-weight: 700; color: var(--text-app, #18212F); }
.mg-review-expl { font-size: 12.5px; color: var(--text-soft, #5B6472); line-height: 1.55; margin: 0; padding-top: 6px; border-top: 1px dashed var(--line-app, #E5E8ED); }

/* Game hub cards (jeux.html list) */
.mg-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.mg-hub-card {
  background: #fff;
  border: 1px solid var(--line-app, #E5E8ED);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: 0.22s ease;
  position: relative;
}
.mg-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15,23,42,0.10);
  border-color: var(--mg-color, var(--gold-prem, #D4A64A));
  color: inherit;
}
.mg-hub-illustration {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mg-hub-illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%);
}
.mg-hub-emoji {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.20));
  position: relative;
}
.mg-hub-body {
  padding: 22px 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mg-hub-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--mg-color-soft, var(--bg-app));
  color: var(--mg-color, var(--gold-prem-3));
  margin-bottom: 10px;
  align-self: flex-start;
}
.mg-hub-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.mg-hub-desc {
  font-size: 13.5px;
  color: var(--text-soft, #5B6472);
  line-height: 1.55;
  margin: 0 0 14px;
}
.mg-hub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11.5px;
  color: var(--text-soft, #5B6472);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-app, #E5E8ED);
}
.mg-hub-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mg-hub-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}
.mg-hub-best {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg-app, #F7F8FA);
  color: var(--text-app, #18212F);
  font-size: 12px;
  font-weight: 800;
}
.mg-hub-best.ok { background: rgba(21,169,104,0.10); color: #047857; }
.mg-hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--mg-color, var(--gold-prem, #D4A64A));
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  margin-left: auto;
}

/* Course mini-game block (cours.html "Mini-jeu associé") */
.mg-course-block {
  background: linear-gradient(135deg, var(--bg-app, #F7F8FA), #fff);
  border: 1px solid var(--line-app, #E5E8ED);
  border-left: 4px solid var(--mg-color, var(--gold-prem, #D4A64A));
  border-radius: 14px;
  padding: 20px 24px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mg-course-block-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mg-color, var(--gold-prem)), var(--mg-color, var(--gold-prem-3)));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(15,23,42,0.12);
}
.mg-course-block-info { flex: 1; min-width: 200px; }
.mg-course-block-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--mg-color, var(--gold-prem-3));
  margin-bottom: 4px;
}
.mg-course-block-info h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-app, #18212F);
  margin: 0 0 4px;
}
.mg-course-block-info p {
  font-size: 13px;
  color: var(--text-soft, #5B6472);
  margin: 0;
  line-height: 1.5;
}

/* Mobile */
@media (max-width: 720px) {
  .mg-intro { padding: 32px 20px; }
  .mg-card-body { padding: 20px 18px; }
  .mg-illustration { height: 130px; }
  .mg-illustration-emoji { font-size: 60px; }
  .mg-bar { position: static; }
  .mg-result { padding: 26px 18px; }
  .mg-result-score strong { font-size: 44px; }
  .mg-course-block { padding: 16px 18px; gap: 14px; }
  .mg-course-block-icon { width: 48px; height: 48px; font-size: 24px; }
}

/* Status pill colors for exam list */
.exam-status { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.exam-status.not_attempted { background: var(--bg-app, #F7F8FA); color: var(--text-soft, #5B6472); border: 1px solid var(--line-app, #E5E8ED); }
.exam-status.not_ready { background: rgba(220,38,38,0.10); color: #B91C1C; border: 1px solid rgba(220,38,38,0.25); }
.exam-status.review { background: #FEF3C7; color: #B45309; border: 1px solid rgba(180,83,9,0.25); }
.exam-status.good { background: rgba(234,179,8,0.14); color: #A16207; border: 1px solid rgba(234,179,8,0.30); }
.exam-status.ready { background: rgba(21,169,104,0.10); color: #047857; border: 1px solid rgba(21,169,104,0.30); }