@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cairo-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cairo-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/cairo-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/cairo-arabic-800-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/sora-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/sora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/sora-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/sora-latin-800-normal.woff2") format("woff2"); }
/* =========================================================
   YELLO — feuille de style commune
   Concept : pages blanches et aérées, typographie grasse,
   cartes verticales arrondies, noir comme couleur de structure,
   jaune Yello réservé aux accents et aux actions clés.
   ========================================================= */

:root {
  /* Couleurs */
  --ink: #111111;          /* texte, fonds sombres */
  --ink-2: #2a2a2a;        /* surfaces sombres secondaires */
  --paper: #ffffff;        /* fond principal */
  --mist: #f4f3f0;         /* fond des sections alternées */
  --line: #e4e2dc;         /* filets et bordures */
  --muted: #5f5d58;        /* texte secondaire */
  --yellow: #ffc20e;       /* jaune Yello */
  --yellow-soft: #fff3c4;  /* jaune très clair */
  --yellow-ink: #6b5200;   /* jaune foncé lisible sur clair */

  /* Typographie */
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; /* libellés : même famille, plus sobre */

  /* Échelle */
  --fs-hero: clamp(2.5rem, 5.6vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: 1.3rem;
  --fs-body: 1.0625rem;
  --fs-small: .9rem;

  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 1200px;
  --shadow: 0 1px 2px rgba(17,17,17,.04), 0 12px 32px -12px rgba(17,17,17,.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.035em; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* ---------- Libellés ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.on-dark .eyebrow, .eyebrow.light { color: rgba(255,255,255,.7); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--mist); color: var(--ink);
}
.tag.yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.tag.dark { background: var(--ink); color: #fff; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 700 .98rem/1 var(--font); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: background .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: #ffd23f; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.on-dark .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-more {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 2px; background: none; border-top: 0; border-left: 0; border-right: 0;
  font-family: var(--font); font-size: 1rem; cursor: pointer; color: inherit;
}
.link-more span { transition: transform .18s; }
.link-more:hover span { transform: translateX(4px); }

/* ---------- En-tête ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-right: auto; }
.nav-links a {
  text-decoration: none; font-weight: 600; font-size: .96rem; padding: 10px 14px; border-radius: 999px; color: var(--ink);
}
.nav-links a:hover { background: var(--mist); }
.nav-links a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.menu-toggle svg { width: 20px; height: 20px; }
@media (max-width: 960px) {
  .nav { gap: 12px; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 4px; padding: 12px 16px 20px; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 30px -20px rgba(0,0,0,.2);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; font-size: 1.05rem; }
  .nav-actions { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 520px) { .nav-actions .btn { display: none; } }

/* ---------- Sections ---------- */
.section { padding-block: 104px; }
.section-tight { padding-block: 72px; }
.section-mist { background: var(--mist); }
.section-dark { background: var(--ink); color: #fff; }
@media (max-width: 720px) { .section { padding-block: 72px; } .section-tight { padding-block: 56px; } }

.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.section-head p { color: var(--muted); font-size: 1.12rem; max-width: 62ch; }
.on-dark .section-head p, .section-dark .section-head p { color: rgba(255,255,255,.72); }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- Hero ---------- */
.hero { padding-block: 72px 96px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-copy { display: grid; gap: 24px; min-width: 0; }
.hero-copy > p { font-size: 1.2rem; color: var(--muted); max-width: 54ch; }
.hero h1 .mark { position: relative; white-space: nowrap; }
.hero h1 .mark::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .26em;
  background: var(--yellow); z-index: -1; border-radius: 4px;
}
.hero h1 { position: relative; z-index: 0; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero { padding-block: 48px 72px; } }

.page-hero { padding-block: 80px 88px; }
.page-hero .hero-copy { max-width: 820px; }
.page-hero.dark { background: var(--ink); color: #fff; }
.page-hero.dark .hero-copy > p { color: rgba(255,255,255,.75); }
.breadcrumb { font-size: .88rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero.dark .breadcrumb { color: rgba(255,255,255,.6); }

/* Chiffres clés */
.stats { display: grid; grid-template-columns: repeat(3, max-content); gap: 12px 40px; padding-top: 8px; }
@media (max-width: 480px) { .stats { grid-template-columns: repeat(2, max-content); gap: 16px 28px; } }
.stat strong { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: .88rem; color: var(--muted); }
.on-dark .stat span { color: rgba(255,255,255,.65); }
.stats-note { font-size: .78rem; color: var(--muted); }

/* Visuel produit dans le hero */
.hero-visual { position: relative; min-width: 0; padding: 24px 0 96px 24px; }
.arc {
  position: absolute; width: 340px; height: 340px; border-radius: 50%; z-index: 0;
  border: 64px solid var(--yellow); border-top-color: transparent; border-right-color: transparent;
  transform: rotate(-45deg); right: -70px; top: -30px;
}
.app-card {
  position: relative; z-index: 1; background: #fff; border-radius: 24px; box-shadow: var(--shadow);
  border: 1px solid var(--line); padding: 24px; display: grid; gap: 18px; max-width: 460px; margin-left: auto;
}
.app-top { display: flex; justify-content: space-between; align-items: center; }
.app-top b { font-size: .95rem; }
.app-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-weight: 800; }
.app-course { background: var(--ink); color: #fff; border-radius: 16px; padding: 20px; display: grid; gap: 12px; }
.app-course .tag { background: var(--yellow); color: var(--ink); justify-self: start; }
.app-course h3 { font-size: 1.2rem; }
.bar { height: 8px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--yellow); border-radius: 99px; }
.app-course small { color: rgba(255,255,255,.7); font-size: .8rem; display: flex; justify-content: space-between; }
.app-rows { display: grid; gap: 10px; }
.app-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--mist); font-size: .92rem; }
.app-row i { width: 32px; height: 32px; border-radius: 10px; background: #fff; display: grid; place-items: center; font-style: normal; flex-shrink: 0; }
.app-row div { min-width: 0; flex: 1; }
.app-row strong { display: block; font-size: .92rem; }
.app-row small { color: var(--muted); font-size: .8rem; }
.pill-state { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--yellow-soft); color: var(--yellow-ink); white-space: nowrap; }
.pill-state.done { background: #e7f3ea; color: #225c32; }
.coach-bubble {
  position: absolute; z-index: 2; left: 0; bottom: 0; max-width: 250px;
  background: var(--yellow); color: var(--ink); border-radius: 18px 18px 18px 4px; padding: 14px 16px; font-size: .88rem; font-weight: 600;
  box-shadow: var(--shadow);
}
.coach-bubble small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
@media (max-width: 960px) { .hero-visual { padding: 16px 0 96px; } .app-card { margin-inline: auto; } .arc { right: -120px; } }

/* ---------- Grilles ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Cartes d'orientation (2 publics) ---------- */
.audience-card {
  position: relative; overflow: hidden; border-radius: 28px; padding: 40px; min-height: 560px;
  display: flex; flex-direction: column; gap: 20px;
}
.audience-card.dark { background: var(--ink); color: #fff; }
.audience-card.light { background: var(--yellow); color: var(--ink); }
.audience-card .eyebrow { color: inherit; opacity: .8; }
.audience-card.light .eyebrow::before { background: var(--ink); }
.audience-card h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; }
.audience-card > p { font-size: 1.05rem; opacity: .85; max-width: 46ch; }
.audience-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.audience-card li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.audience-card li::before { content: "→"; color: var(--yellow); }
.audience-card.light li::before { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: .78rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; opacity: .85; }
.audience-card .actions { margin-top: auto; display: grid; gap: 14px; }
.audience-card .actions .btn-row { gap: 10px; }
.audience-card .fineprint { font-size: .8rem; opacity: .7; }
.audience-card.light .btn-primary { background: var(--ink); color: #fff; }
.audience-card.light .btn-ghost { border-color: var(--ink); }
.audience-card.dark .link-more, .audience-card .link-more { border-bottom-color: currentColor; }
.audience-card.dark .link-more { border-bottom-color: var(--yellow); }
@media (max-width: 680px) { .audience-card { padding: 28px; min-height: 0; } }

/* ---------- Cartes certification (verticales, style catalogue) ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tab {
  font: 600 .95rem/1 var(--font); padding: 12px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
@media (max-width: 1100px) { .cert-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px) { .cert-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px) { .cert-grid { grid-template-columns: 1fr; } }

.cert-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s;
}
.cert-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.cert-visual {
  position: relative; height: 150px; background: var(--ink); color: #fff;
  display: flex; align-items: flex-end; padding: 18px 20px; overflow: hidden;
}
.cert-visual::after {
  content: ""; position: absolute; width: 150px; height: 150px; right: -36px; top: -60px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 34%, var(--yellow) 35% 100%);
}
.cert-card.v2 .cert-visual { background: var(--yellow); color: var(--ink); }
.cert-card.v2 .cert-visual::after { background: radial-gradient(circle, transparent 0 34%, var(--ink) 35% 100%); }
.cert-card.v3 .cert-visual { background: var(--mist); color: var(--ink); }
.cert-code { position: relative; z-index: 1; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cert-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cert-kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cert-body h3 { font-size: 1.08rem; line-height: 1.25; }
.cert-meta { font-size: .85rem; font-weight: 600; }
.cert-body p { font-size: .92rem; color: var(--muted); }
.cert-body .link-more { margin-top: auto; align-self: flex-start; font-size: .92rem; }
.catalog-note { margin-top: 28px; font-size: .88rem; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }

/* ---------- Bloc éditorial (ENA) ---------- */
.feature {
  display: grid; grid-template-columns: 1.1fr .9fr; border-radius: 28px; overflow: hidden; background: var(--ink); color: #fff;
}
.feature-copy { padding: 56px; display: grid; gap: 20px; align-content: center; }
.feature-copy p { color: rgba(255,255,255,.75); max-width: 52ch; }
.feature-data { background: var(--ink-2); padding: 56px; display: grid; gap: 28px; align-content: center; position: relative; overflow: hidden; }
.feature-data::before {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; bottom: -110px;
  background: radial-gradient(circle, transparent 0 36%, rgba(255,194,14,.9) 37% 100%);
}
.big-figure { position: relative; }
.big-figure strong { display: block; font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.big-figure span { font-weight: 600; }
.source { font-size: .78rem; color: rgba(255,255,255,.55); position: relative; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature-copy, .feature-data { padding: 32px; } }

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; counter-reset: step; border-top: 2px solid var(--ink); }
.step { padding: 28px 24px 8px 0; display: grid; gap: 10px; align-content: start; counter-increment: step; }
.step::before { content: "0" counter(step); font-family: var(--mono); font-size: .85rem; font-weight: 500; color: var(--muted); }
.step h3 { font-size: 1.25rem; }
.step p { color: var(--muted); font-size: .98rem; }
.steps.five { grid-template-columns: repeat(5, minmax(0,1fr)); }
.section-dark .steps, .on-dark .steps { border-top-color: var(--yellow); }
.section-dark .step p { color: rgba(255,255,255,.7); }
.section-dark .step::before { color: var(--yellow); }
@media (max-width: 900px) { .steps, .steps.five { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; } }
@media (max-width: 520px) { .steps, .steps.five { grid-template-columns: 1fr; } }

/* ---------- Cartes simples ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.section-mist .card { border-color: transparent; }
.card p { color: var(--muted); font-size: .98rem; }
.card .link-more { margin-top: auto; padding-top: 8px; align-self: flex-start; }
.card-icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--yellow); display: grid; place-items: center; flex-shrink: 0;
}
.card-icon svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow-ink); font-weight: 500; }
.card.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.card.dark p { color: rgba(255,255,255,.72); }
.card.dark .card-label { color: var(--yellow); }
.section-dark .card { background: var(--ink-2); border-color: transparent; color: #fff; }
.section-dark .card p { color: rgba(255,255,255,.7); }
.section-dark .card-label { color: var(--yellow); }

/* Liste à puces sobres */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.checks li::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Bloc deux colonnes (texte + visuel) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split > * { min-width: 0; }
.split-copy { display: grid; gap: 20px; }
.split-copy > p { color: var(--muted); font-size: 1.08rem; }
.section-dark .split-copy > p { color: rgba(255,255,255,.72); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* Flux de transformation */
.flow { display: grid; gap: 10px; }
.flow-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; background: var(--mist); flex-wrap: wrap; }
.flow-item strong { font-size: 1.02rem; }
.flow-item span { font-size: .88rem; color: var(--muted); }
.flow-item.key { background: var(--ink); color: #fff; }
.flow-item.key span { color: var(--yellow); }
.flow-item.end { background: var(--yellow); }
.flow-item.end span { color: var(--ink); }
.flow-arrow { text-align: center; color: var(--muted); font-size: .9rem; line-height: 1; }

/* Profil de compétences */
.skills-panel { background: #fff; border-radius: 24px; padding: 28px; box-shadow: var(--shadow); border: 1px solid var(--line); display: grid; gap: 18px; }
.skills-panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.skill { display: grid; gap: 6px; }
.skill div { display: flex; justify-content: space-between; font-size: .92rem; font-weight: 600; }
.skill div span { font-variant-numeric: tabular-nums; }
.meter { height: 10px; border-radius: 99px; background: var(--mist); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink); border-radius: 99px; }
.skill.low .meter i { background: var(--yellow); }
.skill.low div span { color: var(--yellow-ink); }
.reco { background: var(--yellow-soft); border-radius: 14px; padding: 14px 16px; font-size: .92rem; }
.reco strong { display: block; }

/* Bulles coach */
.chat { display: grid; gap: 10px; }
.chat p { max-width: 85%; padding: 12px 16px; border-radius: 18px; font-size: .95rem; }
.chat .me { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.chat .bot { background: var(--yellow); color: var(--ink); border-bottom-left-radius: 4px; font-weight: 500; }
.chat-box { background: #fff; border-radius: 24px; padding: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 16px; }
.chat-box header { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; }
.chat-box header i { width: 10px; height: 10px; border-radius: 50%; background: #2fb35a; }

/* ---------- Tarifs ---------- */
.pricing { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 1080px) { .pricing { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .pricing { grid-template-columns: 1fr; } }
.price-card {
  border-radius: 24px; border: 1px solid var(--line); background: #fff; padding: 28px;
  display: flex; flex-direction: column; gap: 16px; position: relative;
}
.price-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); }
.price-card .badge { position: absolute; top: -12px; left: 28px; background: var(--yellow); color: var(--ink); font-size: .75rem; font-weight: 800; padding: 5px 12px; border-radius: 99px; }
.price-name { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.price-card.featured .price-name { color: var(--yellow); }
.price-card h3 { font-size: 1.25rem; }
.price { display: grid; gap: 2px; padding-block: 8px; border-block: 1px solid var(--line); }
.price-card.featured .price { border-color: rgba(255,255,255,.15); }
.price strong { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price strong small { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.price span { font-size: .88rem; color: var(--muted); }
.price-card.featured .price span { color: rgba(255,255,255,.65); }
.price-card > p { font-size: .95rem; color: var(--muted); }
.price-card.featured > p { color: rgba(255,255,255,.75); }
.price-card .btn { margin-top: auto; }
.price-card.featured .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.pricing-note { margin-top: 24px; font-size: .88rem; color: var(--muted); }

/* ---------- Distinctions et partenaires ---------- */
.awards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 820px) { .awards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .awards { grid-template-columns: 1fr; } }
.award { display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: 16px; background: #fff; font-weight: 700; }
.award svg { width: 26px; height: 26px; flex-shrink: 0; stroke: var(--ink); fill: var(--yellow); stroke-width: 1.6; }
.partners { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.partners span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .9rem; }

/* ---------- Bandeau CTA ---------- */
.cta-band { background: var(--yellow); border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.cta-band h2 { max-width: 20ch; }
.cta-band p { margin-top: 12px; font-size: 1.08rem; max-width: 56ch; }
.cta-band .btn-dark { position: relative; }
.pilot-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pilot-facts span { background: rgba(17,17,17,.08); padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: .85rem; }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; padding: 32px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; font-weight: 700; font-size: 1.08rem; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 24px; color: var(--muted); max-width: 70ch; }

/* ---------- Tableau / liste catalogue ---------- */
.list-rows { display: grid; border-top: 1px solid var(--line); }
.list-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.list-row > * { min-width: 0; }
.list-row h3 { font-size: 1.1rem; }
.list-row p { color: var(--muted); font-size: .95rem; }
.list-row .chips .chip { opacity: 1; border-color: var(--line); }
@media (max-width: 760px) { .list-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Modules plateforme ---------- */
.module { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.module:first-child { border-top: 1px solid var(--line); }
.module-name { display: grid; gap: 8px; align-content: start; }
.module-name b { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; color: var(--yellow-ink); font-weight: 500; }
.module-name h3 { font-size: 1.5rem; }
.module-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.module-body > p { color: var(--muted); font-size: 1.05rem; }
@media (max-width: 860px) { .module { grid-template-columns: 1fr; gap: 16px; } .module-body { grid-template-columns: 1fr; gap: 16px; } }

/* Comparatif avant / après */
.compare { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); }
.compare > div { padding: 32px; display: grid; gap: 14px; align-content: start; }
.compare > div + div { background: var(--ink); color: #fff; }
.compare ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.compare > div:first-child li { color: var(--muted); }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.footer { background: var(--ink); color: #fff; padding-block: 72px 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-intro { display: grid; gap: 18px; align-content: start; max-width: 340px; }
.footer-intro img { height: 36px; width: auto; }
.footer-intro p { color: rgba(255,255,255,.7); font-size: .95rem; }
.footer h4 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.footer-links { display: grid; gap: 10px; }
.footer-links a { text-decoration: none; color: rgba(255,255,255,.88); font-size: .95rem; }
.footer-links a:hover { color: var(--yellow); }
.footer-contact { user-select: all; }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.6); }
.footer-bottom strong { color: var(--yellow); font-weight: 600; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-intro { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Fenêtres (contact, vidéo) ---------- */
dialog {
  border: 0; padding: 0; border-radius: 24px; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px);
  box-shadow: 0 30px 80px rgba(0,0,0,.35); color: var(--ink); background: #fff;
}
dialog::backdrop { background: rgba(17,17,17,.6); backdrop-filter: blur(3px); }
.dialog-inner { padding: 32px; display: grid; gap: 18px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dialog-head h3 { font-size: 1.5rem; margin-top: 6px; }
.dialog-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.dialog-inner > p { color: var(--muted); }
.form { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--yellow); border-color: var(--ink); }
.form-msg { display: none; background: var(--yellow-soft); border-radius: 12px; padding: 14px 16px; font-size: .92rem; }
.form-msg.show { display: block; }
.copy-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.copy-btn { font: 600 .8rem var(--font); border: 1px solid var(--ink); background: transparent; border-radius: 99px; padding: 4px 10px; cursor: pointer; }
.video-dialog { width: min(960px, calc(100% - 32px)); }
.video-placeholder { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 16px; background: var(--ink); color: #fff; display: grid; place-items: center; text-align: center; padding: 24px; }
.video-placeholder p { color: rgba(255,255,255,.75); max-width: 40ch; margin-top: 8px; }
.video-dialog video { width: 100%; border-radius: 16px; background: #000; }

/* CTA mobile collant */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96);
    border-top: 1px solid var(--line); backdrop-filter: blur(8px);
  }
  .mobile-cta .btn { width: 100%; }
  body { padding-bottom: 76px; }
}

.center { text-align: center; }
.mt-32 { margin-top: 32px; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fiches détaillées (certifications, concours) ---------- */
.notice { background: var(--yellow-soft); border-radius: 16px; padding: 18px 22px; margin-bottom: 40px; max-width: 900px; }
.notice strong { display: block; margin-bottom: 2px; }
.fiche-group { display: grid; margin-bottom: 56px; }
.fiche-group-title { font-size: 1.5rem; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.fiche { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.fiche > * { min-width: 0; }
.fiche:target { background: var(--yellow-soft); box-shadow: 0 0 0 16px var(--yellow-soft); border-radius: 4px; }
.fiche-head { display: grid; gap: 8px; align-content: start; }
.fiche-code { justify-self: start; font-weight: 800; font-size: .85rem; background: var(--ink); color: var(--yellow); padding: 4px 10px; border-radius: 8px; }
.fiche-head h4 { font-size: 1.15rem; line-height: 1.25; }
.fiche-head p { font-size: .88rem; color: var(--muted); }
.fiche-head p span { color: var(--ink); font-weight: 600; }
.fiche-head .chips .chip { opacity: 1; border-color: var(--line); font-size: .72rem; }
.fiche-col h5 { margin: 0 0 8px; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fiche-col p { font-size: .96rem; }
.fiche-col.prep h5 { color: var(--yellow-ink); }
@media (max-width: 900px) { .fiche { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Ajouts v3 ---------- */
.awards-line { font-size: .82rem; color: var(--muted); max-width: 60ch; }
.awards { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1000px) { .awards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .awards { grid-template-columns: 1fr; } }
.section-dark .award { background: var(--ink-2); color: #fff; }
.section-dark .award svg { stroke: var(--yellow); fill: transparent; }
.assist { margin-top: 40px; display: flex; gap: 18px; align-items: flex-start; background: var(--yellow-soft); border-radius: 20px; padding: 24px 28px; max-width: 900px; }
.assist strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.assist p { color: var(--ink); }
.cert-body .btn { margin-top: auto; align-self: flex-start; }
.anchor { scroll-margin-top: 96px; }
.h1-long { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 1.05rem; box-shadow: 0 10px 24px -10px rgba(255,194,14,.9); }
.h1-long { font-size: clamp(2.1rem, 3.8vw, 3.2rem); }
.h1-long .mark { white-space: normal; background: linear-gradient(transparent 68%, var(--yellow) 68%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.h1-long .mark::after { display: none; }

/* =========================================================
   v4 — noir plus présent, jaune réservé aux accents
   ========================================================= */
:root { --ink: #0a0a0a; --ink-2: #1c1c1c; }

/* Boutons : noir par défaut, jaune uniquement sur fond sombre */
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.on-dark .btn-primary, .section-dark .btn-primary, .page-hero.dark .btn-primary,
.audience-card.dark .btn-primary, .cta-band .btn-primary, .price-card.featured .btn-primary,
.cert-card .btn-primary, .feature .btn-primary { background: var(--yellow); color: var(--ink); }
.btn-lg { box-shadow: none; }

/* Surlignage plus fin */
.hero h1 .mark::after { height: .12em; bottom: .02em; }
.h1-long .mark { background: linear-gradient(transparent 82%, var(--yellow) 82%, var(--yellow) 94%, transparent 94%); }

/* Formes et bulles en noir */
.arc { border-color: var(--ink); border-top-color: transparent; border-right-color: transparent; opacity: .9; }
.coach-bubble { background: var(--ink); color: #fff; }
.coach-bubble small { color: var(--yellow); }

/* Carte université : claire, avec un filet jaune */
.audience-card.light { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: inset 0 4px 0 var(--yellow); }
.audience-card.light .eyebrow::before { background: var(--yellow); }
.audience-card.light li::before { color: var(--yellow-ink); }
.audience-card.light .btn-primary { background: var(--ink); color: #fff; }

/* Bandeaux d'appel à l'action en noir */
.cta-band { background: var(--ink); color: #fff; }
.cta-band p { color: rgba(255,255,255,.75); }
.cta-band .eyebrow { color: rgba(255,255,255,.7) !important; }
.cta-band .btn-dark { background: var(--yellow); color: var(--ink); }
.cta-band .btn-dark:hover { background: #ffd23f; }
.pilot-facts span { background: rgba(255,255,255,.1); color: #fff; }

/* Encadrés */
.assist, .notice { background: var(--mist); box-shadow: inset 4px 0 0 var(--yellow); }
.assist .card-icon { background: var(--ink); }
.assist .card-icon svg { stroke: var(--yellow); }
.card-icon { background: var(--ink); }
.card-icon svg { stroke: var(--yellow); }
.flow-item.end { background: var(--ink); color: #fff; }
.flow-item.end span { color: var(--yellow); }
.flow-item.key { background: var(--ink-2); }
.reco { background: var(--mist); box-shadow: inset 4px 0 0 var(--yellow); }

/* ---------- Cartes de préparation avec image de fond ---------- */
.cert-card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 460px; border: 0; border-radius: var(--radius);
  background: var(--ink) var(--bg) center / cover no-repeat; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
  transition: transform .25s, box-shadow .25s;
}
.cert-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.05) 0%, rgba(10,10,10,.35) 30%, rgba(10,10,10,.88) 58%, rgba(10,10,10,.97) 100%);
}
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -20px rgba(0,0,0,.55); }
.cert-chip {
  align-self: flex-start; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 99px; background: rgba(10,10,10,.6); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
}
.cert-bottom { display: flex; flex-direction: column; gap: 8px; }
.cert-card .cert-code { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--yellow); }
.cert-card h3 { font-size: 1.08rem; line-height: 1.25; color: #fff; }
.cert-card .cert-meta { font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.62); }
.cert-card .cert-desc { font-size: .9rem; color: rgba(255,255,255,.82); }
.cert-card .btn, .cert-card .link-more { margin-top: 8px; align-self: flex-start; }
.cert-card .link-more { color: #fff; border-bottom-color: var(--yellow); }
.cert-card { background-size: 100% auto; background-position: center top; }
.cert-card::before { background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.15) 22%, rgba(10,10,10,.85) 42%, var(--ink) 52%, var(--ink) 100%); }

/* ---------- v5 ---------- */
.cert-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .cert-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cert-grid.cols-3 { grid-template-columns: 1fr; } }
.tabs-lg .tab { padding: 14px 24px; font-size: 1.02rem; }
.more-row { margin-top: 32px; display: flex; justify-content: center; }
.sector-nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); z-index: 5; background: var(--mist); padding-block: 16px; margin-bottom: 16px; }
.sector-nav .tab { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.sector-nav .count { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.sector { padding-block: 32px; scroll-margin-top: 170px; }
.sector-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 2px solid var(--ink); flex-wrap: wrap; }
.sector-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sector-head span { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
@media (max-width: 720px) { .sector-nav { position: static; } }

.studio-flow { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: stretch; }
.studio-flow > * { min-width: 0; }
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; }
.timeline li { counter-increment: t; position: relative; padding: 0 0 26px 64px; }
.timeline li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-weight: 800; }
.timeline li::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline b { display: block; font-size: 1.15rem; padding-top: 7px; }
.timeline p { color: var(--muted); }
.outputs { background: var(--ink); color: #fff; border-radius: 24px; padding: 32px; display: grid; gap: 20px; align-content: start; }
.outputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.output { background: var(--ink-2); border-radius: 16px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.output .card-icon { background: var(--yellow); width: 40px; height: 40px; }
.output .card-icon svg { stroke: var(--ink); }
.output .card-label { color: var(--yellow); }
.output h3 { font-size: 1.05rem; }
.output p { color: rgba(255,255,255,.7); font-size: .92rem; }
@media (max-width: 900px) { .studio-flow { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .outputs-grid { grid-template-columns: 1fr; } .outputs { padding: 22px; } }

.included { display: flex; gap: 14px; align-items: flex-start; background: var(--mist); box-shadow: inset 4px 0 0 var(--yellow); border-radius: 16px; padding: 18px 22px; margin-bottom: 32px; max-width: 900px; }
.included-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.included a { font-weight: 700; }
.incl { font-size: .85rem; font-weight: 600; }
.price-card.featured .incl { color: var(--yellow); }

/* ---------- Distinctions ---------- */
.honors { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.honors::before { content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: -260px; border-radius: 50%; border: 90px solid rgba(255,194,14,.06); }
.honors-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; position: relative; }
.honors-grid > * { min-width: 0; }
.honors-intro { display: grid; gap: 22px; }
.honors-figure { display: flex; align-items: center; gap: 18px; }
.honors-figure strong { font-size: clamp(5rem, 11vw, 8.5rem); font-weight: 800; line-height: .85; letter-spacing: -0.06em; color: var(--yellow); }
.honors-figure span { font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: #fff; }
.honors-intro h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.honors-intro p { color: rgba(255,255,255,.72); max-width: 52ch; }
.honors-stats { display: flex; gap: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); flex-wrap: wrap; }
.honors-stats strong { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.honors-stats span { font-size: .85rem; color: rgba(255,255,255,.6); }
.medals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; overflow: hidden; }
.medal { background: var(--ink); display: flex; align-items: center; gap: 18px; padding: 22px 24px; transition: background .2s; }
.medal:hover { background: var(--ink-2); }
.medal-badge { position: relative; width: 64px; height: 64px; flex-shrink: 0; color: var(--yellow); display: grid; place-items: center; }
.medal-badge .laurel { position: absolute; inset: 0; width: 100%; height: 100%; }
.medal-badge span { font-family: var(--mono); font-size: .8rem; font-weight: 500; color: #fff; }
.medal div:last-child { display: grid; gap: 2px; min-width: 0; }
.medal-kind { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.medal strong { font-size: 1.05rem; line-height: 1.25; }
.medal small { font-size: .82rem; color: rgba(255,255,255,.55); }
@media (max-width: 960px) { .honors-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 520px) { .medals { grid-template-columns: 1fr; } }

/* ---------- Avant / avec Yello ---------- */
.vs { position: relative; border-radius: 24px; overflow: hidden; background: linear-gradient(90deg, #fff 0 50%, var(--ink) 50% 100%); border: 1px solid var(--line); }
.vs-head, .vs-row { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.vs-head { padding: 26px 0 10px; }
.vs-head span { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding-inline: 36px; }
.vs-label-before { color: var(--muted); }
.vs-label-after { color: var(--yellow); }
.vs-row + .vs-row .vs-before { border-top: 1px solid var(--line); }
.vs-row + .vs-row .vs-after { border-top: 1px solid rgba(255,255,255,.1); }
.vs-before, .vs-after { display: flex; gap: 14px; align-items: center; padding: 22px 36px; min-height: 76px; }
.vs-before { color: var(--muted); }
.vs-after { color: #fff; font-weight: 700; font-size: 1.05rem; }
.vs-x, .vs-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: .9rem; }
.vs-x { background: var(--mist); color: #a3a19b; }
.vs-check { background: var(--yellow); color: var(--ink); }
.vs-arrow { width: 40px; height: 40px; margin: auto; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-weight: 800; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--paper); }
.vs-row:first-of-type .vs-arrow { }
@media (max-width: 760px) {
  .vs { background: var(--ink); border: 0; }
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.1); }
  .vs-row:first-of-type { border-top: 0; }
  .vs-row + .vs-row .vs-before, .vs-row + .vs-row .vs-after { border-top: 0; }
  .vs-before { padding: 0 0 8px; min-height: 0; color: rgba(255,255,255,.5); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
  .vs-x { background: transparent; color: rgba(255,255,255,.4); }
  .vs-arrow { display: none; }
  .vs-after { padding: 0; min-height: 0; }
}
.vs-arrow { box-shadow: none; }

/* ---------- Problème / réponse ---------- */
.ps .wrap { display: grid; gap: 24px; }
.ps-block { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; padding: 40px; border-radius: 28px; background: var(--mist); }
.ps-block.dark { background: var(--ink); color: #fff; }
.ps-label { display: grid; gap: 14px; }
.ps-label h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ps-card { background: #fff; border-radius: 18px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.ps-card h3 { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; }
.ps-card p { color: var(--muted); font-size: .95rem; }
.ps-num { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.ps-card.sol { background: var(--ink-2); }
.ps-card.sol h3 { color: var(--yellow); }
.ps-card.sol p { color: rgba(255,255,255,.75); }
.ps-card.sol .ps-num { color: rgba(255,255,255,.5); }
@media (max-width: 1080px) { .ps-block { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 760px) { .ps-grid { grid-template-columns: 1fr; } .ps-block { padding: 24px; } }

/* =========================================================
   v11 — blocs encadrés : fond blanc, bordure noire
   ========================================================= */
.cta-band, .ps-block.dark, .audience-card.dark, .outputs, .price-card.featured, .card.dark {
  background: #fff; color: var(--ink); border: 2px solid var(--ink);
}
/* textes secondaires */
.cta-band p, .ps-block.dark .ps-label p, .audience-card.dark > p, .card.dark p,
.price-card.featured > p, .price-card.featured .price span { color: var(--muted); }
.cta-band .eyebrow, .ps-block.dark .eyebrow, .audience-card.dark .eyebrow, .outputs .eyebrow { color: var(--muted) !important; }
.price-card.featured .price { border-color: var(--line); }
.price-card.featured .price-name, .price-card.featured .incl, .card.dark .card-label { color: var(--yellow-ink); }
.pilot-facts span { background: var(--mist); color: var(--ink); }

/* boutons dans ces blocs : noir, contour noir pour le secondaire */
.cta-band .btn-dark, .audience-card.dark .btn-primary, .price-card.featured .btn-primary { background: var(--ink); color: #fff; }
.cta-band .btn-dark:hover, .audience-card.dark .btn-primary:hover, .price-card.featured .btn-primary:hover { background: #000; }
.audience-card.dark .btn-ghost, .price-card.featured .btn-ghost { color: var(--ink); border-color: var(--ink); }
.audience-card.dark .btn-ghost:hover { background: var(--ink); color: #fff; }
.audience-card.dark .link-more { color: var(--ink); border-bottom-color: var(--yellow); }
.audience-card.dark li::before { color: var(--yellow-ink); }

/* cartes internes */
.ps-card.sol, .output { background: var(--mist); }
.ps-card.sol h3 { color: var(--ink); }
.ps-card.sol h3::after { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--yellow); margin-top: 12px; }
.ps-card.sol p, .output p { color: var(--muted); }
.ps-card.sol .ps-num { color: var(--muted); }
.output h3 { color: var(--ink); }
.output .card-label { color: var(--yellow-ink); }
.output .card-icon { background: var(--ink); }
.output .card-icon svg { stroke: var(--yellow); }
.audience-card.light { border: 2px solid var(--ink); box-shadow: none; }

/* ---------- Heros avec image de fond ---------- */
.hero-photo {
  position: relative; color: #fff;
  background-color: var(--ink);
  background-image: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.8) 40%, rgba(10,10,10,.25) 100%), var(--hero-img);
  background-size: cover; background-position: center right;
}
@media (max-width: 960px) {
  .hero-photo { background-image: linear-gradient(180deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.82) 100%), var(--hero-img); background-position: center; }
}
.hero-photo h1 { color: #fff; }
.hero-photo .hero-copy > p, .hero-photo .muted { color: rgba(255,255,255,.75) !important; }
.hero-photo .breadcrumb { color: rgba(255,255,255,.6); }
.hero-photo .eyebrow { color: rgba(255,255,255,.7); }
.hero-photo .btn-primary { background: var(--yellow); color: var(--ink); }
.hero-photo .btn-primary:hover { background: #ffd23f; }
.hero-photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hero-photo .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-photo .link-more { color: #fff; }
.hero-photo .arc { display: none; }
.hero-photo .coach-bubble { border: 1px solid rgba(255,255,255,.2); }
.hero-photo .flow-item:not(.key):not(.end) { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.12); }
.hero-photo .flow-item:not(.key):not(.end) span { color: rgba(255,255,255,.65); }
.hero-photo .flow-item.key { background: rgba(255,255,255,.14); }
.hero-photo .flow-item.end { background: var(--yellow); color: var(--ink); }
.hero-photo .flow-item.end span { color: var(--ink); }
.hero-photo .flow-arrow { color: rgba(255,255,255,.5); }
.hero-photo .stat span { color: rgba(255,255,255,.65); }
.page-hero.hero-photo { padding-block: 96px 104px; }
.hero-photo .app-card { color: var(--ink); } .hero-photo .app-course { color: #fff; }

/* ---------- Heros photo (v13) ---------- */
.hero-photo { background-image: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 34%, rgba(10,10,10,.25) 62%, rgba(10,10,10,0) 85%), var(--hero-img); background-position: center right; }
.hero.hero-photo { min-height: 640px; display: flex; align-items: center; padding-block: 96px; }
.hero.hero-photo .hero-grid { grid-template-columns: minmax(0, 620px); }
.hero.hero-photo .hero-visual, .hero.hero-photo .flow { display: none; }
.hero.hero-photo h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.hero.hero-photo .h1-long { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.page-hero.hero-photo { min-height: 520px; display: flex; align-items: center; }
.page-hero.hero-photo .hero-copy { max-width: 640px; }
@media (max-width: 960px) {
  .hero-photo { background-image: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.88) 55%, rgba(10,10,10,.95) 100%), var(--hero-img); background-position: 70% center; }
  .hero.hero-photo, .page-hero.hero-photo { min-height: 0; padding-block: 220px 64px; }
}

/* =========================================================
   v14 — cartes homogènes : fond blanc, contour noir
   ========================================================= */
.card, .price-card { border: 2px solid var(--ink); }
.section-mist .card { border-color: var(--ink); }

.cert-card {
  background: #fff; color: var(--ink); border: 2px solid var(--ink);
  padding: 0; min-height: 0; justify-content: flex-start;
}
.cert-card::before {
  content: ""; position: static; display: block; height: 150px; z-index: auto;
  background: var(--ink) var(--bg) center 25% / cover no-repeat;
  border-bottom: 2px solid var(--ink);
}
.cert-card:hover { box-shadow: 0 18px 30px -18px rgba(0,0,0,.35); }
.cert-chip { position: absolute; top: 14px; left: 14px; color: #fff; }
.cert-bottom { padding: 20px 22px 22px; flex: 1; }
.cert-card .cert-code { color: var(--ink); font-size: 1.6rem; display: inline-block; align-self: flex-start; box-shadow: inset 0 -.22em 0 var(--yellow); }
.cert-card h3 { color: var(--ink); }
.cert-card .cert-meta { color: var(--muted); }
.cert-card .cert-desc { color: var(--ink); opacity: .82; }
.cert-card .btn-primary { background: var(--ink); color: #fff; margin-top: auto; }
.cert-card .btn-primary:hover { background: #000; }
.cert-card .link-more { color: var(--ink); margin-top: auto; }
.cert-bottom > :last-child { margin-top: auto; }

/* ---------- Volets de l'accueil ---------- */
.volet { margin-top: 48px; }
.volet:first-of-type { margin-top: 8px; }
.volet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 2px solid var(--ink); }
.volet-head h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
.volet-head p { color: var(--muted); margin-top: 4px; }

/* ---------- Prix des préparations ---------- */
.cert-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.cert-price strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cert-price span { font-size: .78rem; color: var(--muted); }

/* ---------- Cartes de cours (carrées) ---------- */
.course-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1100px) { .course-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 820px) { .course-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .course-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
.course {
  aspect-ratio: 1 / 1; max-width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 16px; cursor: pointer;
  font: inherit; color: var(--ink); transition: transform .18s, box-shadow .18s, background .18s; overflow: hidden;
}
.course:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -16px rgba(0,0,0,.45); }
.course:hover .course-price { background: var(--yellow); }
.course-cat { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-title { font-weight: 800; font-size: .98rem; line-height: 1.22; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.course-price, .course-incl { margin-top: auto; align-self: flex-start; font-size: .8rem; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: var(--mist); transition: background .18s; font-variant-numeric: tabular-nums; }
.course-incl { background: var(--ink); color: var(--yellow); }
@media (max-width: 560px) { .course { padding: 12px; } .course-title { font-size: .88rem; -webkit-line-clamp: 3; } }
.course-cat-block { margin-bottom: 32px; }
.course-cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.course-cat-head h3 { font-size: 1.15rem; }
.course-cat-head span { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.cta-band .btn-row .btn-ghost { color: var(--ink); border-color: var(--ink); }

/* ---------- Bandeau déroulant des distinctions ---------- */
.honors-band { background: var(--ink); color: #fff; display: flex; align-items: stretch; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
.honors-band-lead { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 18px 28px; background: var(--ink-2); position: relative; z-index: 1; box-shadow: 24px 0 24px -8px var(--ink); white-space: nowrap; }
.honors-band-lead strong { color: var(--yellow); font-weight: 800; font-size: 1.1rem; }
.honors-band-lead span { font-size: .85rem; color: rgba(255,255,255,.8); }
.honors-band-lead i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); margin-inline: 8px; }
.marquee { display: flex; overflow: hidden; flex: 1; min-width: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; flex-shrink: 0; align-items: center; gap: 44px; padding-right: 44px; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus .marquee-track { animation-play-state: paused; }
.marquee-track li { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 700; font-size: .95rem; }
.marquee-track li em { font-style: normal; font-weight: 500; color: rgba(255,255,255,.55); margin-left: 4px; }
.marquee-track .laurel { width: 30px; height: 30px; color: var(--yellow); flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee { overflow-x: auto; } }
@media (max-width: 900px) {
  .honors-band { flex-direction: column; }
  .honors-band-lead { justify-content: center; flex-wrap: wrap; white-space: normal; box-shadow: none; padding: 14px 16px; }
  .marquee { padding-block: 14px; }
}
.honors-band-lead { gap: 26px; }
.hb { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hb + .hb { padding-left: 26px; border-left: 1px solid rgba(255,255,255,.15); }
@media (max-width: 900px) {
  .honors-band-lead { gap: 10px 18px; }
  .hb + .hb { padding-left: 0; border-left: 0; }
  .hb span { font-size: .78rem; }
}
.fiche-price { justify-self: start; font-weight: 800; font-size: .95rem; padding: 4px 10px; border-radius: 99px; background: var(--mist); color: var(--ink) !important; font-variant-numeric: tabular-nums; }

/* ---------- Cartes de cours v2 ---------- */
.course { position: relative; isolation: isolate; gap: 10px; padding: 16px; }
.course-watermark { position: absolute; right: -14px; bottom: -14px; width: 96px; height: 96px; z-index: -1; fill: none; stroke: var(--mist); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s, transform .3s; }
.course-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.course-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--ink); display: grid; place-items: center; transition: background .2s; }
.course-ico { width: 20px; height: 20px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.course-top .course-cat { -webkit-line-clamp: 2; }
.course-title { font-size: 1rem; }
.course-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.course-foot .course-price, .course-foot .course-incl { margin-top: 0; }
.course-go { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: .85rem; transition: background .2s, color .2s, transform .2s; }
.course:hover .course-icon { background: var(--yellow); }
.course:hover .course-ico { stroke: var(--ink); }
.course:hover .course-watermark { stroke: var(--yellow-soft); transform: rotate(-8deg) scale(1.05); }
.course:hover .course-go { background: var(--ink); color: #fff; transform: translateX(2px); }
.course:hover .course-price { background: var(--mist); }
@media (max-width: 560px) {
  .course-icon { width: 32px; height: 32px; } .course-ico { width: 17px; height: 17px; }
  .course-top .course-cat { display: none; }
  .course-go { width: 26px; height: 26px; }
}

/* =========================================================
   v21 — produit, paiement, avis, à propos, langues, WhatsApp
   ========================================================= */
.nav { gap: 24px; }
.nav-links a { padding: 10px 12px; font-size: .94rem; }
.lang-switch { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px; text-decoration: none; font: 700 .76rem/1 var(--font); }
.lang-switch span { padding: 6px 9px; border-radius: 999px; color: var(--ink); }
.lang-switch span.on { background: var(--ink); color: #fff; }
.lang-switch:hover span:not(.on) { background: var(--mist); }
@media (max-width: 1100px) and (min-width: 961px) { .nav-actions .btn { display: none; } }

/* Carte entièrement cliquable */
.cert-card.is-link { cursor: pointer; }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.cert-card.is-link:has(.card-link:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }
.cert-card.is-link:hover .btn-primary { background: #000; }
.cert-card h3 a { color: inherit; text-decoration: none; }
.cert-card h3 a:hover { text-decoration: underline; }

/* ---------- Page produit ---------- */
.product-hero { position: relative; isolation: isolate; color: #fff; background: var(--ink); overflow: hidden; padding-block: 56px 72px; }
.product-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg) right center / auto 140% no-repeat; opacity: .55; }
.product-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink) 35%, rgba(10,10,10,.6) 70%, rgba(10,10,10,.2)); }
.product-hero .wrap { display: grid; gap: 14px; justify-items: start; }
.product-hero .breadcrumb { color: rgba(255,255,255,.6); }
.product-hero .cert-chip { position: static; margin-top: 8px; }
.product-code { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: .95; color: var(--yellow); }
.product-hero h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 22ch; }
.product-meta { color: rgba(255,255,255,.65); font-size: .95rem; }
.product-lead { font-size: 1.15rem; max-width: 52ch; color: rgba(255,255,255,.85); }
.product-hero .chips { color: #fff; }

.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; padding-block: 56px 88px; }
.product-main { display: grid; gap: 56px; min-width: 0; }
.p-sec { display: grid; gap: 16px; }
.p-sec h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.p-text { font-size: 1.08rem; max-width: 66ch; }
.modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.modules li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; font-weight: 600; }
.mod-n { font-family: var(--mono); font-size: .8rem; color: var(--yellow-ink); }
.modules li:first-child, .modules li:last-child { background: var(--mist); }
.sup-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.sup { border: 2px solid var(--ink); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.sup h3 { font-size: 1.05rem; }
.sup p { color: var(--muted); font-size: .94rem; }
.product-main .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1000px) { .product-layout { grid-template-columns: 1fr; } .buy-card { position: static; order: -1; } }
@media (max-width: 560px) { .sup-grid, .product-main .steps { grid-template-columns: 1fr; } }

.buy-card { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); background: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: 26px; display: grid; gap: 14px; box-shadow: 0 24px 40px -28px rgba(0,0,0,.45); }
@media (max-width: 1000px) { .buy-card { position: static; } }
.buy-price { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.buy-sub { color: var(--muted); font-size: .88rem; margin-top: -6px; }
.buy-card h3 { font-size: .95rem; padding-top: 12px; border-top: 1px solid var(--line); }
.buy-card .checks { gap: 8px; font-size: .92rem; }
.buy-card .checks li { grid-template-columns: 20px 1fr; }
.buy-card .checks li::before { width: 18px; height: 18px; background-size: 11px; }
.buy-question { font-size: .88rem; color: var(--muted); text-align: center; }
.buy-question a { color: var(--ink); font-weight: 700; }

/* Formulaire de paiement */
.checkout { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
#checkout-dialog .checkout { border-top: 0; padding-top: 0; }
.pay-methods { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.pay-methods legend { font-size: .85rem; font-weight: 700; margin-bottom: 8px; padding: 0; }
.pay-opt { display: block; cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pm { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; font-weight: 700; font-size: .95rem; transition: border-color .15s, background .15s; }
.pm::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; background: #fff; }
.pm::after { content: ""; margin-left: auto; width: 34px; height: 22px; border-radius: 6px; }
.pm-wave::after { background: #1dc8f2; }
.pm-om::after { background: #ff7900; }
.pm-card::after { background: linear-gradient(135deg, #1a1f71 50%, #f7b600 50%); }
.pay-opt input:checked + .pm { border-color: var(--ink); background: var(--mist); }
.pay-opt input:checked + .pm::before { border: 5px solid var(--ink); }
.pay-opt input:focus-visible + .pm { outline: 3px solid var(--yellow); outline-offset: 2px; }
.btn-pay { min-height: 54px; font-size: 1.02rem; }
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.secure svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.checkout-msg { display: none; font-size: .9rem; background: var(--yellow-soft); border-radius: 12px; padding: 14px; }
.checkout-msg.show { display: grid; gap: 10px; }
.checkout-msg p { margin: 0; }
.checkout-price { font-weight: 800; font-size: 1.2rem; margin-top: 4px; }
.btn-wa { background: #25d366; color: #fff; }
.btn-wa:hover { background: #1fb457; }

/* ---------- Avis ---------- */
.reviews-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.rating-card { border: 2px solid var(--ink); border-radius: 22px; padding: 24px; display: grid; gap: 8px; justify-items: start; background: #fff; }
.rating-score { display: flex; align-items: baseline; gap: 8px; }
.rating-score strong { font-size: 3.6rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.rating-score span { color: var(--muted); font-weight: 600; }
.rating-card p { font-weight: 700; font-size: .95rem; }
.rating-card small { color: var(--muted); font-size: .8rem; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; }
.stars .on svg { fill: var(--yellow); }
.stars .off svg { fill: var(--line); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.review { margin: 0; border: 2px solid var(--ink); border-radius: 18px; padding: 18px; background: #fff; display: grid; gap: 10px; align-content: start; }
.review blockquote { margin: 0; display: grid; gap: 6px; }
.review blockquote strong { font-size: .98rem; }
.review blockquote p { font-size: .94rem; }
.review figcaption { font-size: .8rem; font-weight: 700; color: var(--ink); }
.review figcaption span { font-weight: 500; color: var(--muted); }
.product-main .reviews-wrap { grid-template-columns: 1fr; }
.product-main .reviews-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) { .reviews-wrap { grid-template-columns: 1fr; } .reviews-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .reviews-grid, .product-main .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- Bandeau des distinctions avec logos ---------- */
.honors-band .marquee { background: #fff; }
.honors-band .marquee-track { gap: 14px; padding-right: 14px; animation-duration: 45s; }
.aw-logo, .aw-text { height: 64px; display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.aw-logo img { height: 44px; width: auto; max-width: none; }
.aw-text { font-weight: 700; font-size: .92rem; }
.aw-text .laurel { width: 30px; height: 30px; color: var(--yellow-ink); }
.aw-text em { font-style: normal; font-weight: 500; color: var(--muted); }
.honors-band .marquee { padding-block: 10px; -webkit-mask: none; mask: none; }
.aw-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.aw-cell { background: #fff; border: 2px solid var(--ink); border-radius: 18px; height: 120px; display: grid; place-items: center; padding: 18px; text-align: center; }
.aw-cell img { max-height: 72px; width: auto; }
.aw-cell-text { gap: 2px; align-content: center; }
.aw-cell-text .laurel { width: 34px; height: 34px; color: var(--yellow-ink); margin-inline: auto; }
.aw-cell-text small { color: var(--muted); }
@media (max-width: 820px) { .aw-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- Guide et premier pas gratuit ---------- */
.guide-band { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: center; border: 2px solid var(--ink); border-radius: 28px; padding: 36px 40px; background: #fff; }
.guide-band > div:last-child { display: grid; gap: 14px; }
.guide-band p { color: var(--muted); max-width: 60ch; }
.guide-cover { aspect-ratio: 3 / 4; max-width: 100%; background: var(--ink); color: #fff; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 10px 10px 0 var(--yellow); }
.guide-cover span { font-weight: 800; color: var(--yellow); font-size: 1.1rem; }
.guide-cover strong { font-size: 1.2rem; line-height: 1.1; }
.guide-cover small { font-family: var(--mono); font-size: .65rem; color: rgba(255,255,255,.6); }
@media (max-width: 700px) { .guide-band { grid-template-columns: 1fr; padding: 26px; } .guide-cover { width: 140px; } }
.guide-done { display: grid; gap: 12px; justify-items: start; }
.free-band { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border: 2px solid var(--ink); border-radius: 28px; padding: 40px; background: var(--yellow-soft); }
.free-band > div:first-child { display: grid; gap: 14px; }
.free-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.free-steps li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.free-steps b { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-size: .8rem; flex-shrink: 0; }
.free-actions { display: grid; gap: 10px; justify-items: stretch; }
@media (max-width: 820px) { .free-band { grid-template-columns: 1fr; padding: 28px; } }
.hero-note { font-size: .85rem; color: rgba(255,255,255,.7); }

/* ---------- À propos ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; }
.kpis > div { padding: 26px; display: grid; gap: 4px; }
.kpis > div + div { border-left: 1px solid var(--line); }
.kpis strong { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; }
.kpis span { color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } .kpis > div:nth-child(3) { border-left: 0; } .kpis > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.values { display: grid; gap: 12px; }
.value { background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 20px 22px; display: grid; gap: 6px; }
.value b { font-family: var(--mono); font-size: .78rem; color: var(--yellow-ink); font-weight: 500; }
.value p { color: var(--muted); font-size: .95rem; }
.team { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.member { display: grid; grid-template-columns: 120px 1fr; gap: 22px; border: 2px solid var(--ink); border-radius: 24px; padding: 26px; background: #fff; }
.member > div:last-child { display: grid; gap: 8px; align-content: start; }
.member h3 { font-size: 1.4rem; }
.member-focus { font-weight: 700; }
.member p:not(.member-focus) { color: var(--muted); }
.avatar { width: 120px; height: 120px; border-radius: 20px; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-weight: 800; font-size: 1.8rem; letter-spacing: -0.02em; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .member { grid-template-columns: 1fr; } .avatar { width: 84px; height: 84px; font-size: 1.3rem; } }
.why { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-top: 36px; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; }
.why i { font-style: normal; color: var(--yellow-ink); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-list { margin: 0; border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; }
.contact-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 18px 22px; }
.contact-list > div + div { border-top: 1px solid var(--line); }
.contact-list dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.contact-list a { text-decoration: none; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp flottant ---------- */
.wa-float { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; gap: 10px; background: #25d366; color: #fff; text-decoration: none; border-radius: 999px; padding: 10px 18px 10px 10px; font-weight: 700; font-size: .9rem; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45); transition: transform .2s; }
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 34px; height: 34px; color: #fff; }
.wa-float svg path:first-child { fill: #fff; }
.wa-float svg path:last-child { fill: #25d366; }
@media (max-width: 720px) { .wa-float { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 14px; padding: 10px; } .wa-float span { display: none; } }

.footer-h4-2 { margin-top: 24px; }
.footer-addr { color: rgba(255,255,255,.6); font-size: .95rem; }
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; min-height: 48px; height: auto; padding-block: 12px; line-height: 1.25; } }
.hero-copy > *, .page-hero .hero-copy { min-width: 0; max-width: 100%; }
.aw-cell img[alt="Dakar Innov Days"] { max-height: 92px; border-radius: 10px; }

/* v22 — bandeau distinctions : chiffres compacts, plus de place pour les logos */
.honors-band-lead { gap: 0; padding: 10px 14px; box-shadow: 16px 0 18px -8px var(--ink); }
.hb { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 14px; line-height: 1.15; }
.hb + .hb { padding-left: 14px; }
.hb strong { font-size: 1rem; }
.hb span { font-size: .68rem; letter-spacing: .02em; color: rgba(255,255,255,.7); }
@media (max-width: 820px) {
  .honors-band-lead { flex-wrap: nowrap; justify-content: center; padding: 10px 8px; }
  .hb { align-items: center; padding: 0 12px; }
  .hb + .hb { border-left: 1px solid rgba(255,255,255,.15); padding-left: 12px; }
  .hb span { font-size: .66rem; }
}

/* ============ v23 — page Cours (style catalogue illustré) ============ */
.lx-hero { position: relative; background: linear-gradient(180deg, #fffdf6 0%, #fff 70%); padding: 36px 0 120px; overflow: hidden; }
.lx-hero::before { content: ""; position: absolute; right: -120px; top: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255,194,14,.22), rgba(255,194,14,0) 65%); pointer-events: none; }
.lx-hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; position: relative; }
.lx-copy .breadcrumb { margin-bottom: 22px; }
.lx-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; padding: 7px 14px; border-radius: 99px; background: var(--yellow-soft); color: var(--yellow-ink); }
.lx-chip span { color: #c79300; }
.lx-hero h1 { margin-top: 20px; font-size: clamp(2.5rem, 5.2vw, 4.3rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.lx-accent { position: relative; display: inline-block; }
.lx-accent::after { content: ""; position: absolute; left: -2px; right: -4px; bottom: .06em; height: .26em; background: var(--yellow); z-index: -1; border-radius: 4px; }
.lx-hero h1 { isolation: isolate; }
.lx-lead { margin-top: 22px; font-size: 1.16rem; line-height: 1.65; color: #3d3b37; max-width: 54ch; }
.lx-hero .btn-row { margin-top: 30px; }
.lx-play { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; font-size: .55rem; margin-right: 4px; padding-left: 2px; }
.lx-trust { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: .9rem; }
.lx-trust .stars { vertical-align: -3px; margin-right: 4px; }
.lx-trust small { color: var(--muted); }
.lx-avatars { display: flex; }
.lx-avatars i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem; border: 3px solid #fff; margin-left: -10px; background: var(--ink); color: var(--yellow); }
.lx-avatars i:first-child { margin-left: 0; }
.lx-avatars i:nth-child(2) { background: var(--yellow); color: var(--ink); }
.lx-avatars i:nth-child(3) { background: #d9d4c7; color: var(--ink); }
.lx-visual { position: relative; }
.lx-photo { border-radius: 32px; overflow: hidden; aspect-ratio: 4 / 3.3; box-shadow: 0 40px 70px -40px rgba(0,0,0,.45); }
.lx-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.lx-float { list-style: none; margin: 0; padding: 10px; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); width: 264px; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.35); display: grid; gap: 2px; }
.lx-float li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
.lx-float li + li { border-top: 1px solid #f0eee8; border-radius: 0; }
.lx-float strong { display: block; font-size: .88rem; line-height: 1.2; }
.lx-float small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.lx-fi { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--yellow-soft); }
.lx-float li:nth-child(even) .lx-fi { background: var(--mist); }
.lx-fi svg, .lx-si svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* thèmes */
.lx-themes-wrap { position: relative; margin-top: -84px; z-index: 2; }
.lx-themes { background: #fff; border-radius: 28px; padding: 30px 32px 28px; box-shadow: 0 30px 60px -36px rgba(0,0,0,.35); border: 1px solid #efece5; }
.lx-themes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.lx-themes-head h2 { font-size: 1.45rem; font-weight: 800; }
.theme-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
.theme { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 12px 6px; border-radius: 18px; text-decoration: none; color: var(--ink); transition: background .2s, transform .2s; }
.theme:hover { background: var(--mist); transform: translateY(-3px); }
.theme-ico { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; background: var(--yellow-soft); margin-bottom: 8px; transition: background .2s; }
.theme:nth-child(even) .theme-ico { background: var(--ink); }
.theme-ico svg { width: 32px; height: 32px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme:nth-child(even) .theme-ico svg { stroke: var(--yellow); }
.theme:hover .theme-ico { background: var(--yellow); }
.theme:hover .theme-ico svg { stroke: var(--ink); }
.theme strong { font-size: .92rem; line-height: 1.2; }
.theme small { font-size: .78rem; color: var(--muted); }

/* catalogue */
.section-soft { background: linear-gradient(180deg, #fff 0%, var(--mist) 220px); padding-top: 96px; }
.lx-cat-intro h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; }
.course-sector { margin-top: 24px; }
.course-sector .sector-head { display: grid; gap: 8px; justify-content: start; border-bottom: 0; padding-bottom: 0; margin: 40px 0 28px; }
.course-sector .sector-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.course-sector .sector-head p { color: var(--muted); font-size: 1.05rem; }
.course-cat-block { margin-bottom: 48px; }
.course-cat-head { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: nowrap; }
.course-cat-head h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.course-cat-head div > span { display: block; margin-top: 4px; font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.course-cat-ico { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: var(--ink); display: grid; place-items: center; }
.course-cat-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* cartes de cours illustrées */
.course { padding: 0; gap: 0; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid #e9e6df; box-shadow: 0 1px 0 rgba(0,0,0,.02); text-align: left; }
.course:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(0,0,0,.45); border-color: var(--ink); }
.course-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.course-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.course:hover .course-art img { transform: scale(1.05); }
.course-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px; flex: 1; }
.course-body .course-cat { font-size: .62rem; -webkit-line-clamp: 1; }
.course-body .course-title { font-size: 1rem; font-weight: 800; -webkit-line-clamp: 3; }
.course-ai { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--yellow-ink); }
.course-ai-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.course-body .course-foot { margin-top: auto; padding-top: 6px; }
.course-price { background: var(--mist); }
.course:hover .course-price { background: var(--yellow); }

/* bande chiffres */
.lx-stats-wrap { padding-block: 24px 0; }
.lx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--ink); color: #fff; border-radius: 26px; padding: 30px 12px; }
.lx-stats > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 6px 26px; }
.lx-stats > div + div { border-left: 1px solid rgba(255,255,255,.12); }
.lx-si { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,194,14,.14); display: grid; place-items: center; }
.lx-si svg { stroke: var(--yellow); width: 24px; height: 24px; }
.lx-stats strong { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.lx-stats small { color: rgba(255,255,255,.7); font-size: .84rem; }

/* assistant */
.lx-assist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lx-assist h2 { margin-top: 14px; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.lx-assist p { margin-top: 16px; font-size: 1.08rem; color: var(--muted); max-width: 52ch; }
.lx-checks { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.lx-checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.lx-checks li::before { content: "✓"; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.lx-chat { background: #fff; border: 2px solid var(--ink); border-radius: 28px; padding: 22px; box-shadow: 14px 14px 0 var(--yellow); display: grid; gap: 12px; max-width: 520px; justify-self: end; width: 100%; }
.lx-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lx-chat-head strong { display: block; font-size: .95rem; }
.lx-chat-head small { display: block; font-size: .76rem; color: var(--muted); }
.lx-chat-av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.lx-msg { margin: 0 !important; padding: 12px 16px; border-radius: 18px; font-size: .94rem !important; line-height: 1.5; max-width: 88%; color: var(--ink) !important; }
.lx-me { justify-self: end; background: var(--ink); color: #fff !important; border-bottom-right-radius: 6px; }
.lx-bot { background: var(--mist); border-bottom-left-radius: 6px; }
.lx-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; margin-top: 4px; padding: 12px 14px; border-radius: 16px; background: var(--yellow-soft); font-size: .8rem; font-weight: 700; }
.lx-progress b { grid-column: 1; height: 8px; border-radius: 8px; background: #fff; overflow: hidden; }
.lx-progress i { display: block; height: 100%; background: var(--ink); border-radius: 8px; }
.lx-progress em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 1.1rem; }

@media (max-width: 1100px) {
  .lx-float { right: 12px; }
}
@media (max-width: 900px) {
  .lx-hero { padding-bottom: 104px; }
  .lx-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .lx-float { position: relative; right: auto; top: auto; transform: none; width: auto; margin: -56px 16px 0; grid-template-columns: 1fr 1fr; }
  .lx-float li + li { border-top: 0; }
  .theme-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lx-stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .lx-stats > div:nth-child(3) { border-left: 0; }
  .lx-assist-grid { grid-template-columns: 1fr; gap: 40px; }
  .lx-chat { justify-self: stretch; }
}
@media (max-width: 560px) {
  .lx-hero { padding-top: 20px; }
  .lx-float { grid-template-columns: 1fr; margin: -40px 10px 0; }
  .lx-themes { padding: 22px 16px; border-radius: 22px; }
  .lx-themes-head .link-more { display: none; }
  .theme-ico { width: 58px; height: 58px; border-radius: 18px; }
  .theme-ico svg { width: 26px; height: 26px; }
  .theme strong { font-size: .82rem; }
  .lx-stats { grid-template-columns: 1fr 1fr; padding: 22px 6px; }
  .lx-stats > div { padding: 6px 12px; grid-template-columns: 1fr; text-align: left; }
  .lx-si { grid-row: auto; width: 38px; height: 38px; margin-bottom: 8px; }
  .lx-stats strong { font-size: 1.3rem; }
  .course-body { padding: 10px; gap: 6px; }
  .course-body .course-title { font-size: .86rem; }
  .course-ai { display: none; }
  .course-cat-ico { width: 42px; height: 42px; border-radius: 13px; }
  .course-cat-ico svg { width: 21px; height: 21px; }
  .lx-chat { box-shadow: 8px 8px 0 var(--yellow); }
}
/* v23b — correctifs */
.course { aspect-ratio: auto; border: 2px solid var(--ink); }
.course:hover { border-color: var(--ink); }
.course-art { flex-shrink: 0; border-bottom: 2px solid var(--ink); }
.course-cat-block .course-body .course-cat { display: none; }
.lx-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); }
.lx-accent { display: inline; position: static; background: linear-gradient(transparent 68%, var(--yellow) 68%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }
.lx-accent::after { content: none; }
@media (max-width: 560px) {
  .lx-trust { align-items: flex-start; gap: 12px; font-size: .84rem; }
  .lx-trust > span:last-child { flex: 1; min-width: 0; }
  .lx-trust .stars { display: flex; margin-bottom: 4px; }
  .lx-hero .btn-row .btn { width: 100%; justify-content: center; }
  #catalogue .sector-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  #catalogue .sector-nav .tab { flex-shrink: 0; }
  .course-sector .sector-head { margin-top: 24px; }
  .section-soft { padding-top: 64px; }
}

/* ============ v24 — libellés sobres (plus de police « machine à écrire ») ============ */
.eyebrow, .tag, .chip, .cert-chip, .cert-kicker, .card-label, .course-cat, .medal-kind, .medal-badge span, .price-name,
.footer h4, .contact-list dt, .fiche-col h5, .vs-head span, .value b, .module-name b, .sector-head span,
.course-cat-head div > span, .course-cat-head span, .sector-nav .count, .ps-num, .mod-n, .guide-cover small, .coach-bubble small, .step::before {
  font-family: var(--font); letter-spacing: .02em; font-feature-settings: "tnum";
}
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.course-cat, .cert-chip, .tag, .chip, .card-label, .medal-kind, .price-name, .footer h4, .contact-list dt { font-weight: 700; letter-spacing: .03em; }
.course-cat-head div > span, .course-cat-head span, .sector-head span { font-size: .84rem; font-weight: 500; letter-spacing: 0; }

/* ============ v24 — cartes de préparation compactes (même format que les cours) ============ */
.cert-grid, .cert-grid.cols-3 { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1100px) { .cert-grid, .cert-grid.cols-3 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 820px) { .cert-grid, .cert-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .cert-grid, .cert-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
.cert-card.cc { position: relative; display: flex; flex-direction: column; padding: 0; min-height: 0; aspect-ratio: auto; overflow: hidden;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 20px; box-shadow: none; transition: transform .2s, box-shadow .2s; }
.cert-card.cc::before, .cert-card.cc::after { content: none; }
.cert-card.cc:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(0,0,0,.45); }
.cc-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid var(--ink); }
.cc-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.cert-card.cc:hover .cc-art img { transform: scale(1.05); }
.cc-chip { position: absolute; left: 10px; bottom: 10px; background: #fff; color: var(--ink); border-radius: 99px; padding: 4px 10px; font-size: .68rem; font-weight: 700; }
.cc-body { display: flex; flex-direction: column; gap: 6px; padding: 14px; flex: 1; }
.cc-code { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.cert-card.cc h3 { font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cert-card.cc h3 a { color: inherit; text-decoration: none; }
.cert-card.cc h3 a:hover { text-decoration: none; }
.cc-meta { font-size: .78rem; color: var(--muted); }
.cc-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cert-card.cc:hover .course-price { background: var(--yellow); }
.cert-card.cc:hover .course-go { background: var(--ink); color: #fff; }
.cc-link { font-size: .82rem; font-weight: 700; border-bottom: 2px solid var(--yellow); }
@media (max-width: 560px) {
  .cc-body { padding: 10px; }
  .cc-code { font-size: 1.05rem; }
  .cert-card.cc h3 { font-size: .82rem; }
  .cc-meta { display: none; }
}

/* ============ v25 — direction artistique commune (page Cours étendue à tout le site) ============ */
:root { --p-blue: #22577A; --p-teal: #38A3A5; --p-green: #57CC99; --p-yellow: #F4D35E; --p-orange: #EE964B; }
.section-head h2, .section-head-row h2, .split-copy h2, .cta-band h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.volet-head h3 { font-size: clamp(1.4rem, 2.3vw, 1.8rem); font-weight: 800; letter-spacing: -0.025em; }
.lx-note { display: inline-flex; margin-top: 18px; font-weight: 700; }
p.lx-note { color: var(--muted); font-weight: 600; font-size: .92rem; }
.lx-chip { max-width: 100%; }

/* tuiles de thème : toutes les couleurs de la palette */
.theme .theme-ico { background: #e8f0f5; }
.theme .theme-ico svg { stroke: var(--p-blue); }
.theme:nth-child(5n+1) .theme-ico { background: var(--p-blue); } .theme:nth-child(5n+1) .theme-ico svg { stroke: #fff; }
.theme:nth-child(5n+2) .theme-ico { background: var(--p-teal); } .theme:nth-child(5n+2) .theme-ico svg { stroke: #fff; }
.theme:nth-child(5n+3) .theme-ico { background: var(--p-green); } .theme:nth-child(5n+3) .theme-ico svg { stroke: var(--ink); }
.theme:nth-child(5n+4) .theme-ico { background: var(--p-yellow); } .theme:nth-child(5n+4) .theme-ico svg { stroke: var(--ink); }
.theme:nth-child(5n+5) .theme-ico { background: var(--p-orange); } .theme:nth-child(5n+5) .theme-ico svg { stroke: #fff; }
.theme:hover .theme-ico { background: var(--ink); } .theme:hover .theme-ico svg { stroke: var(--yellow); }
.theme-row-7 { grid-template-columns: repeat(7, minmax(0,1fr)); }
@media (max-width: 1100px) { .theme-row-7 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 560px) { .theme-row-7 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* carte flottante : pastilles colorées */
.lx-float li:nth-child(1) .lx-fi { background: var(--p-blue); } .lx-float li:nth-child(1) .lx-fi svg { stroke: #fff; }
.lx-float li:nth-child(2) .lx-fi { background: var(--p-teal); } .lx-float li:nth-child(2) .lx-fi svg { stroke: #fff; }
.lx-float li:nth-child(3) .lx-fi { background: var(--p-yellow); }
.lx-float li:nth-child(4) .lx-fi { background: var(--p-orange); } .lx-float li:nth-child(4) .lx-fi svg { stroke: #fff; }

/* bande de chiffres */
.lx-stats > div:nth-child(1) .lx-si { background: var(--p-blue); } .lx-stats > div:nth-child(2) .lx-si { background: var(--p-teal); }
.lx-stats > div:nth-child(3) .lx-si { background: var(--p-green); } .lx-stats > div:nth-child(4) .lx-si { background: var(--p-orange); }
.lx-stats .lx-si svg { stroke: #fff; }

/* fonctionnalités */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.feat { background: #fff; border: 2px solid var(--ink); border-radius: 22px; padding: 26px; display: grid; gap: 10px; align-content: start; transition: transform .2s, box-shadow .2s; }
.feat:hover { transform: translateY(-3px); box-shadow: 8px 8px 0 var(--yellow); }
.feat h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.feat p { color: var(--muted); }
.feat-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px; }
.feat-ico svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat-ico.c0 { background: var(--p-blue); } .feat-ico.c1 { background: var(--p-teal); } .feat-ico.c2 { background: var(--p-green); }
.feat-ico.c3 { background: var(--p-yellow); } .feat-ico.c4 { background: var(--p-orange); }
.feat-ico.c2 svg, .feat-ico.c3 svg { stroke: var(--ink); }
@media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } .feat { padding: 20px; } }

/* problème / réponse : titres seuls, plus forts */
.ps-card { padding: 26px; gap: 18px; min-height: 0; }
.ps-card h3 { text-transform: none; font-size: clamp(1.2rem, 1.8vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.2; }
.ps-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff; background: var(--p-orange); }
.ps-card:nth-child(2) .ps-num { background: var(--p-yellow); color: var(--ink); }
.ps-card:nth-child(3) .ps-num { background: var(--p-blue); }
.ps-card.sol .ps-num { background: var(--p-green); color: var(--ink); }
.ps-card.sol:nth-child(2) .ps-num { background: var(--p-teal); color: #fff; }
.ps-card.sol:nth-child(3) .ps-num { background: var(--yellow); color: var(--ink); }
.ps-card.sol h3 { color: #fff; }

/* sections en dégradé doux, comme la page Cours */
.section-mist { background: linear-gradient(180deg, #fff 0%, var(--mist) 160px); }
.ps-card.sol h3 { color: var(--ink); }
.lx-hero-grid { grid-template-columns: 1.12fr .88fr; }
.lx-hero h1 { font-size: clamp(2.3rem, 4vw, 3.35rem); }
.lx-themes-wrap + .honors-band { margin-top: 48px; }
@media (max-width: 900px) { .lx-hero-grid { grid-template-columns: 1fr; } }
.lx-photo img[src*="studio-photo"], .lx-photo img[src*="certif-photo"] { object-position: 30% center; }

/* ============ v26 — programme de 1 000 cours ============ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.theme-row-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 560px) { .theme-row-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cf-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; margin-top: 24px; }
.cf-filters label { display: block; }
.cf-filters select, .cf-filters input { width: 100%; height: 52px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; padding: 0 14px; font: inherit; font-size: .95rem; color: var(--ink); }
.cf-search { position: relative; }
.cf-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.cf-search input { padding-left: 46px; }
.cf-bar { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 14px; }
.cf-count { font-weight: 800; }
.cf-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.cfiche { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cf-top { display: flex; align-items: center; gap: 10px; }
.cf-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.cf-ico svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-ico.c0 { background: var(--p-blue); } .cf-ico.c1 { background: var(--p-teal); } .cf-ico.c2 { background: var(--p-green); }
.cf-ico.c3 { background: var(--p-yellow); } .cf-ico.c4 { background: var(--p-orange); }
.cf-ico.c2 svg, .cf-ico.c3 svg { stroke: var(--ink); }
.cf-tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: .72rem; font-weight: 700; }
.cf-tags > span { padding: 3px 9px; border-radius: 99px; background: var(--mist); }
.cf-id { font-variant-numeric: tabular-nums; }
.cf-lvl.lD { background: #e4f6ec !important; } .cf-lvl.lI { background: #fdf1d6 !important; } .cf-lvl.lA { background: #fde3d0 !important; }
.cfiche h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.cf-meta { font-size: .78rem; color: var(--muted); font-weight: 600; }
.cf-desc { font-size: .9rem; color: #3d3b37; }
.cfiche details { border-top: 1px solid var(--line); padding-top: 8px; }
.cfiche summary { cursor: pointer; font-weight: 700; font-size: .86rem; }
.cfiche dl { display: grid; gap: 4px; margin: 10px 0 0; font-size: .84rem; }
.cfiche dt { font-weight: 800; margin-top: 6px; }
.cfiche dd { margin: 0; color: #3d3b37; }
.cf-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-status { font-size: .74rem; font-weight: 700; color: var(--yellow-ink); background: var(--yellow-soft); padding: 4px 10px; border-radius: 99px; }
.cf-req { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: .86rem; color: var(--ink); border-bottom: 2px solid var(--yellow); cursor: pointer; }
.cf-none { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--muted); }
@media (max-width: 1000px) { .cf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .cf-filters { grid-template-columns: 1fr 1fr; } .cf-search { grid-column: 1 / -1; } }
@media (max-width: 620px) { .cf-grid { grid-template-columns: 1fr; } .cf-filters { grid-template-columns: 1fr; } }
.c1000-band { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 26px 30px; border: 2px solid var(--ink); border-radius: 26px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 10px 10px 0 var(--p-teal); transition: transform .2s; }
.c1000-band:hover { transform: translateY(-3px); }
.c1000-num { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; color: var(--p-blue); }
.c1000-band strong { display: block; font-size: 1.3rem; font-weight: 800; }
.c1000-band small { display: block; color: var(--muted); font-size: .95rem; margin-top: 4px; }
@media (max-width: 760px) { .c1000-band { grid-template-columns: 1fr; gap: 12px; box-shadow: 6px 6px 0 var(--p-teal); } }
.notice a { font-weight: 700; }
.cf-grid { align-items: start; }
/* sélecteur de langue à trois choix */
.lang-switch a { padding: 6px 8px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.lang-switch a.on { background: var(--ink); color: #fff; }
.lang-switch a:not(.on):hover { background: var(--mist); }

/* ============ v27 — fiches de préparation : même direction artistique ============ */
.product-hero { color: var(--ink); background: linear-gradient(180deg, #fffdf6 0%, #fff 100%); padding-block: 44px 56px; }
.product-hero::after { content: none; }
.product-hero::before { inset: 36px max(16px, calc((100vw - 1152px) / 2)) 36px auto; width: min(40vw, 470px); border-radius: 28px; opacity: 1;
  background: var(--bg) center / cover no-repeat; box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); border: 2px solid var(--ink); }
.product-hero .wrap { padding-right: min(44vw, 520px); }
.product-hero .breadcrumb { color: var(--muted); }
.product-hero .breadcrumb a { color: var(--muted); }
.product-hero .cert-chip { background: var(--yellow-soft); color: var(--yellow-ink); border: 0; }
.product-code { color: var(--ink); background: linear-gradient(transparent 70%, var(--yellow) 70%, var(--yellow) 92%, transparent 92%); padding: 0 .04em; }
.product-meta { color: var(--muted); }
.product-lead { color: #3d3b37; }
.product-hero .chips { color: var(--ink); }
@media (max-width: 900px) {
  .product-hero::before { position: relative; display: block; inset: auto; width: auto; height: 200px; margin: 0 16px 24px; }
  .product-hero { display: flex; flex-direction: column-reverse; padding-top: 24px; }
  .product-hero .wrap { padding-right: 16px; }
}

/* =====================================================================
   v28 — NOUVELLE DIRECTION ARTISTIQUE (référence : clarté et énergie d’une école tech africaine)
   Police Sora · hero photo plein cadre · titres centrés · cartes blanches à image arrondie
   · boutons pleins à petit arrondi · onglets à icônes · bandes en dégradé · nuancier Yello
   ===================================================================== */
:root {
  --font: "Sora", "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Sora", "Segoe UI", system-ui, sans-serif;
  --ink: #0F0F0F; --cream: #FFFAF3; --sand: #EEE8DF; --line: #E7E2D9; --muted: #5d5a55;
  --yellow: #FED00D; --yellow-soft: #FFF4C2;
  --c-red: #E32925; --c-orange: #F26721; --c-amber: #F9A41C; --c-green: #4FB748; --c-emerald: #00A27D;
  --c-cyan: #139FDA; --c-blue: #0370B2; --c-indigo: #313D97; --c-violet: #502D8F; --c-petrol: #07446B;
  --grad: linear-gradient(100deg, #F26721 0%, #F9A41C 42%, #FED00D 100%);
  --wrap: 1200px;
}
body { font-family: var(--font); color: var(--ink); background: #fff; font-size: 16px; }
h1, h2, h3, h4 { font-family: var(--font); letter-spacing: -0.02em; }

/* --- en-tête crème, liens simples --- */
.topbar { background: var(--cream); border-bottom: 1px solid var(--sand); }
.nav-links a { font-size: .9rem; font-weight: 500; padding: 10px 12px; border-radius: 6px; }
.nav-links a:hover { background: var(--sand); }
.nav-links a[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; }
.topbar .btn-dark, .topbar .btn-sm { border-radius: 6px; }

/* --- boutons --- */
.btn { border-radius: 6px; font-weight: 600; letter-spacing: 0; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ghost { border-width: 1.5px; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 6px;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink); font: 600 .95rem/1 var(--font); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; }
.gbtn:hover { transform: translateY(-1px); background: #000; }
.gbtn-outline { background: #fff; color: var(--ink); }
.gbtn-outline:hover { background: var(--yellow); }
.gbtn-light { background: #fff; color: var(--ink); border-color: #fff; min-width: 240px; }
.gbtn-light:hover { background: var(--yellow); border-color: var(--yellow); }
.gbtn-line { background: transparent; color: var(--cream); border-color: rgba(255,250,243,.7); }
.gbtn-line:hover { background: rgba(255,255,255,.12); }

/* --- hero photo plein cadre --- */
.gm-hero { position: relative; min-height: 600px; display: flex; align-items: center; color: var(--cream);
  background: linear-gradient(90deg, rgba(15,15,15,.86) 0%, rgba(15,15,15,.62) 42%, rgba(15,15,15,.18) 72%, rgba(15,15,15,.05) 100%), var(--hero-img) center / cover no-repeat; }
.gm-hero-in { padding-block: 72px; display: grid; justify-items: start; gap: 18px; }
.gm-hero .breadcrumb, .gm-hero .breadcrumb a { color: rgba(255,250,243,.75); }
.gm-chip { display: inline-flex; padding: 7px 14px; border-radius: 99px; background: rgba(254,208,13,.16); color: var(--yellow); font-size: .8rem; font-weight: 600; border: 1px solid rgba(254,208,13,.4); }
.gm-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.75rem); font-weight: 800; line-height: 1.12; max-width: 17ch; color: var(--cream); letter-spacing: -0.025em; }
.gm-accent { color: var(--yellow); }
.gm-lead { font-size: 1.06rem; line-height: 1.65; max-width: 46ch; color: rgba(255,250,243,.88); }
.gm-hero .btn-row { margin-top: 10px; gap: 12px; }
.gm-note { color: var(--yellow); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--yellow); }
p.gm-note { border: 0; color: rgba(255,250,243,.8); }
.gm-trust { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: rgba(255,250,243,.85); }
.gm-trust .stars svg { width: 16px; height: 16px; }
.gm-strip { background: #fff; border-bottom: 1px solid var(--line); }
.gm-checks { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.gm-checks li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: start; }
.gm-checks li::before { content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--c-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.gm-checks strong { font-size: .95rem; font-weight: 600; }
.gm-checks span { font-size: .82rem; color: var(--muted); }
@media (max-width: 900px) { .gm-checks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .gm-hero { min-height: 0; background: linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.88) 55%), var(--hero-img) 62% center / cover no-repeat; }
  .gm-hero-in { padding-block: 56px 44px; }
  .gm-hero .btn-row { width: 100%; } .gm-hero .gbtn { width: 100%; min-width: 0; }
  .gm-checks { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
}
/* l’ancien hero clair n’est plus utilisé */
.lx-hero { display: none; }

/* --- titres de section centrés, comme la référence --- */
.section-head { text-align: center; margin-inline: auto; justify-items: center; max-width: 820px; }
.section-head p { margin-inline: auto; }
.section-head-row .section-head { text-align: left; justify-items: start; margin-inline: 0; }
.section-head h2, .gsec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.65rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
.eyebrow { color: var(--c-orange); }
.eyebrow::before { background: var(--c-orange); }

/* --- section catalogue (onglets) --- */
.gsec { position: relative; }
.anchor-pt { position: absolute; top: -80px; }
.gsec-head { text-align: center; max-width: 860px; margin: 0 auto 34px; display: grid; gap: 14px; justify-items: center; }
.gsec-sub { font-size: 1.08rem; font-weight: 600; line-height: 1.55; }
.gchecks { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.gchecks li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.gchecks li::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FB748' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.gtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; background: var(--yellow-soft); padding: 10px; border-radius: 16px; max-width: 900px; margin: 0 auto 22px; }
.gtab { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 11px 16px; border-radius: 10px; font: 500 .94rem var(--font); color: var(--ink); cursor: pointer; }
.gtab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gtab em { font-style: normal; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(15,15,15,.08); }
.gtab:hover { background: rgba(255,255,255,.7); }
.gtab[aria-selected="true"] { background: var(--ink); color: #fff; }
.gtab[aria-selected="true"] svg { stroke: var(--yellow); }
.gtab[aria-selected="true"] em { background: var(--yellow); color: var(--ink); }
.gfilters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; max-width: 900px; margin: 0 auto; }
.gfilters select, .gfilters input { width: 100%; height: 48px; border: 1px solid #cfcac1; border-radius: 6px; background: #fff; padding: 0 14px; font: 400 .92rem var(--font); color: var(--ink); }
.gsearch { position: relative; display: block; }
.gsearch svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.gsearch input { padding-left: 42px; }
.gcount { text-align: center; font-weight: 600; margin: 16px 0 20px; color: var(--muted); }
.gnone { grid-column: 1 / -1; text-align: center; padding: 30px; color: var(--muted); }
@media (max-width: 700px) { .gfilters { grid-template-columns: 1fr 1fr; } .gsearch { grid-column: 1 / -1; } .gtab { padding: 9px 12px; font-size: .86rem; } }

/* --- cartes (cours, préparations) --- */
.ggrid, .course-grid, .cert-grid, .cert-grid.cols-3 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
@media (max-width: 1100px) { .ggrid, .course-grid, .cert-grid, .cert-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px) { .ggrid, .course-grid, .cert-grid, .cert-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } }
@media (max-width: 520px) { .ggrid, .course-grid, .cert-grid, .cert-grid.cols-3 { grid-template-columns: 1fr; } }
.gcard, .cert-card.cc.gcard { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 16px; box-shadow: none; transform: none; overflow: visible; min-height: 0; aspect-ratio: auto; color: var(--ink); text-align: left; }
.gcard:hover, .cert-card.cc.gcard:hover { box-shadow: 0 18px 36px -24px rgba(15,15,15,.35); transform: translateY(-3px); }
.gcard-img { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--sand); border: 0; }
.gcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gcard:hover .gcard-img img { transform: scale(1.04); }
.gcard-code { position: absolute; left: 10px; bottom: 10px; background: #fff; color: var(--ink); font-weight: 800; font-size: .95rem; padding: 5px 11px; border-radius: 8px; }
.gcard-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.gbadge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 99px; font-size: .72rem; font-weight: 600; line-height: 1.3; color: #fff; background: var(--c-indigo); }
.gbadge.dom { background: #F3F0EA; color: var(--ink); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbadge.lvl-D { background: var(--c-green); } .gbadge.lvl-I { background: var(--c-cyan); } .gbadge.lvl-A { background: var(--c-violet); }
.gbadge.yello { background: var(--yellow); color: var(--ink); } .gbadge.incl { background: var(--c-emerald); }
.gbadge.kind-cert { background: var(--c-indigo); } .gbadge.kind-concours { background: var(--c-orange); } .gbadge.kind-examen { background: var(--c-emerald); }
.gcard h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.gcard-desc { font-size: .88rem; line-height: 1.6; color: #2c2b29; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gcard-price { font-weight: 700; font-size: .95rem; margin-top: auto; }
.gcard > .gbtn { width: 100%; margin-top: auto; }
.gcard-price + .gbtn { margin-top: 0; }
.cert-card.cc.gcard .card-link::after { content: none; }
.cert-card.cc.gcard::before, .cert-card.cc.gcard::after { content: none; }

/* fiche cours (fenêtre) */
.course-dlg { max-width: 640px; width: calc(100% - 32px); border: 0; border-radius: 20px; padding: 0; }
.course-dlg::backdrop { background: rgba(15,15,15,.55); }
.course-dlg .dialog-inner { display: grid; gap: 14px; }
.course-dlg h3 { font-size: 1.35rem; font-weight: 700; margin-top: 10px; }
.cd-sub { color: var(--muted); font-size: .88rem; }
.cd-img { aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden; }
.cd-img img { width: 100%; height: 100%; object-fit: cover; }
.cd-dl { display: grid; gap: 4px; margin: 0; font-size: .9rem; }
.cd-dl dt { font-weight: 700; margin-top: 8px; } .cd-dl dd { margin: 0; color: #2c2b29; }
.cd-ai { font-weight: 600; color: var(--c-emerald); font-size: .9rem; }
.cd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.cd-price { font-size: 1.35rem; }

/* --- bande chiffres en dégradé + cartes blanches --- */
.lx-stats-wrap { background: var(--grad); padding-block: 80px !important; }
.gstats-head { text-align: center; max-width: 760px; margin: 0 auto 34px; display: grid; gap: 12px; }
.gstats-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; color: var(--ink); }
.gstats-head p { font-weight: 600; font-size: 1.05rem; }
.lx-stats.gstats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; background: none; padding: 0; border-radius: 0; color: var(--ink); }
.gstat { background: #fff; border: 1px solid var(--ink); border-radius: 14px; padding: 24px 20px; display: grid; gap: 8px; align-content: start; }
.gstat + .gstat { border-left: 1px solid var(--ink) !important; }
.gstat strong { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1; }
.gstat b { font-size: 1.1rem; font-weight: 700; }
.gstat small { font-size: .9rem; color: #3a3833; }
.lx-stats-wrap .more-row { margin-top: 30px; }
.lx-stats-wrap .gbtn-light { border-color: var(--ink); }
@media (max-width: 900px) { .lx-stats.gstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lx-stats.gstats { grid-template-columns: 1fr; } .lx-stats-wrap { padding-block: 56px !important; } }

/* --- bandeau d’appel à l’action : noir --- */
.cta-band { background: var(--ink) !important; color: var(--cream) !important; border-radius: 20px; border: 0 !important; box-shadow: none !important; }
.cta-band h2 { color: var(--cream); }
.cta-band p { color: rgba(255,250,243,.8) !important; }
.cta-band .btn-dark, .cta-band .gbtn { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.cta-band .btn-ghost { color: var(--cream); border-color: rgba(255,250,243,.7); background: transparent; }

/* --- autres cartes au même gabarit --- */
.feat, .price-card, .ps-card, .review, .fiche, .card, .value, .member, .sup, .audience-card.light { border-radius: 20px !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.feat:hover { box-shadow: 0 18px 36px -24px rgba(15,15,15,.35) !important; }
.price-card.featured { border: 2px solid var(--ink) !important; }
.lx-chat { box-shadow: 10px 10px 0 var(--yellow); border-radius: 20px; }

/* panneau de thèmes : devient une rangée d’onglets à icônes */
.lx-themes-wrap { margin-top: 0; padding-top: 40px; }
.lx-themes { box-shadow: none; border: 0; background: var(--yellow-soft); border-radius: 18px; padding: 22px; }
.lx-themes-head { justify-content: center; text-align: center; }
.lx-themes-head .link-more { display: none; }
.lx-themes-head h2 { font-size: 1.3rem; font-weight: 600; }
.theme { background: #fff; border-radius: 14px; }
.theme:hover { transform: translateY(-2px); background: #fff; }

/* formulaires et fenêtres */
.field input, .field select, .field textarea, .checkout input { border-radius: 6px !important; border: 1px solid #cfcac1 !important; font-family: var(--font); }
dialog .dialog-inner { font-family: var(--font); }

/* fiches de préparation : hero sombre comme la référence */
.product-hero { background: var(--ink); color: var(--cream); }
.product-hero .breadcrumb, .product-hero .breadcrumb a, .product-meta { color: rgba(255,250,243,.7); }
.product-hero h1 { color: var(--cream); }
.product-code { color: var(--yellow); background: none; }
.product-lead { color: rgba(255,250,243,.88); }
.product-hero::before { border: 0; }
.product-hero .chips .chip { color: var(--ink); }

.lx-stats.gstats > div { display: grid; grid-template-columns: 1fr; grid-template-rows: none; padding: 24px 20px; column-gap: 0; }
.gtabs { max-width: 1040px; }
h2, .split-copy h2, .lx-assist h2, .ps-label h2, .cta-band h2, .sector-head h2, .course-sector .sector-head h2, .lx-cat-intro h2 { font-weight: 600; letter-spacing: -0.015em; }
.volet-head h3, .course-cat-head h3 { font-weight: 600; letter-spacing: -0.01em; }
.ps-card h3 { font-weight: 600; }
@media (max-width: 560px) { #catalogue .sector-nav { margin-inline: 0; padding-inline: 0; } }
.gcard, .gcard-badges { min-width: 0; } .gbadge.dom { min-width: 0; flex: 0 1 auto; }
.sector-nav { background: var(--yellow-soft); padding: 10px; border-radius: 16px; gap: 6px; }
.sector-nav .tab, .tabs .tab { border: 0; background: transparent; border-radius: 10px; font-weight: 500; }
.sector-nav .tab:hover, .tabs .tab:hover { background: #fff; }
.tabs[role="tablist"] { background: var(--yellow-soft); padding: 10px; border-radius: 16px; display: inline-flex; flex-wrap: wrap; }
.tabs .tab[aria-selected="true"] { background: var(--ink); color: #fff; }

/* ===== v29 — panneau « Que voulez-vous préparer ? » : cartes horizontales, titres sur une ligne ===== */
.lx-themes-wrap { padding-top: 56px; }
.lx-themes { background: var(--yellow-soft); border-radius: 24px; padding: 36px 36px 32px; }
.lx-themes-head { display: flex; justify-content: space-between; align-items: end; text-align: left; gap: 16px; margin-bottom: 24px; }
.lx-themes-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.lx-themes-head .link-more { display: inline-flex; }
.theme-row, .theme-row-7 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.theme-row-7 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.theme { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; text-align: left; gap: 16px; padding: 16px 18px; background: #fff; border: 1.5px solid transparent; border-radius: 18px; box-shadow: 0 1px 0 rgba(15,15,15,.04); transition: border-color .2s, transform .2s, box-shadow .2s; }
.theme:hover { background: #fff; border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(15,15,15,.35); }
.theme-ico { width: 56px; height: 56px; border-radius: 16px; margin: 0; }
.theme-ico svg { width: 26px; height: 26px; }
.theme-txt { display: grid; gap: 2px; min-width: 0; width: 100%; }
.theme strong { font-size: 1.08rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme small { font-size: .86rem; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); font-weight: 700; transition: background .2s, color .2s; }
.theme:hover .theme-go { background: var(--ink); color: var(--yellow); }
@media (max-width: 960px) { .theme-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lx-themes-wrap { padding-top: 32px; }
  .lx-themes { padding: 22px 14px; border-radius: 20px; }
  .lx-themes-head { margin-bottom: 16px; }
  .lx-themes-head .link-more { display: none; }
  .theme-row, .theme-row-7 { grid-template-columns: 1fr; gap: 10px; }
  .theme { padding: 12px 14px; gap: 12px; }
  .theme-ico { width: 46px; height: 46px; border-radius: 14px; }
  .theme-ico svg { width: 22px; height: 22px; }
  .theme strong { font-size: 1rem; }
}
.theme-row-7 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.theme-row-7 .theme strong, .theme-row-7 .theme small { white-space: normal; }
.theme-row-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.theme-row-7 .theme { grid-template-columns: auto minmax(0, 1fr); }
.theme-row-7 .theme-go { display: none; }
.theme-row-7 .theme strong { font-size: .98rem; }
@media (max-width: 1100px) { .theme-row-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .theme-row-7 { grid-template-columns: 1fr; } }

/* ===== v29 — Universités : 5 cartes, parcours visuel, approche scientifique ; Cours : comment on apprend ===== */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid-5 { grid-template-columns: 1fr; } }
.card.card-accent { background: var(--ink); color: #fff; border-color: var(--ink); }
.card.card-accent p { color: rgba(255,255,255,.72); }
.card.card-accent .card-label { color: var(--yellow); }
.card.card-accent .card-icon { background: var(--yellow); }
.card.card-accent .card-icon svg { stroke: var(--ink); }

.flow-steps { list-style: none; padding: 0; margin: 8px 0 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
.flow-steps::before { content: ""; position: absolute; top: 21px; left: 22px; right: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); opacity: .25; }
.flow-steps li { position: relative; display: grid; gap: 8px; align-content: start; }
.flow-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 1.05rem; box-shadow: 0 0 0 6px #fff; }
.flow-steps h3 { font-size: 1.12rem; font-weight: 800; margin-top: 6px; }
.flow-steps p { color: var(--muted); font-size: .94rem; }
.flow-viz { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 22px; background: var(--ink); border-radius: 28px; padding: 26px; }
.flow-src { background: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.flow-file { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.flow-file-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--c-red); display: grid; place-items: center; flex: none; }
.flow-file-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow-file strong { display: block; font-size: .98rem; line-height: 1.25; }
.flow-file small { color: var(--muted); font-size: .82rem; }
.flow-src i { display: block; height: 9px; border-radius: 6px; background: #ece8df; }
.flow-src i.s { width: 62%; }
.flow-go { margin-top: auto; align-self: flex-start; background: var(--grad); color: var(--ink); font-weight: 800; padding: 10px 16px; border-radius: 999px; font-size: .95rem; }
.flow-go b { margin-left: 4px; }
.flow-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fcard { background: #1d1d1d; border: 1px solid #2c2c2c; border-radius: 18px; padding: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; color: #fff; transition: border-color .2s, transform .2s; }
.fcard:hover { border-color: var(--yellow); transform: translateY(-2px); }
.fcard:last-child { grid-column: 1 / -1; }
.fcard .feat-ico { margin: 0; width: 46px; height: 46px; border-radius: 14px; }
.fcard .feat-ico svg { width: 22px; height: 22px; }
.fcard-tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); margin-bottom: 4px; }
.fcard h3 { font-size: 1.08rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.fcard p { color: rgba(255,255,255,.7); font-size: .92rem; line-height: 1.5; }
@media (max-width: 960px) {
  .flow-steps { grid-template-columns: 1fr; gap: 14px; }
  .flow-steps::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 14px); }
  .flow-steps li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
  .flow-steps li .flow-n { grid-row: span 2; }
  .flow-steps h3 { margin-top: 0; align-self: end; }
  .flow-viz { grid-template-columns: 1fr; padding: 16px; border-radius: 22px; }
}
@media (max-width: 600px) { .flow-out { grid-template-columns: 1fr; } .fcard { padding: 16px; } }

.science-sec { background: var(--yellow-soft); }
.science-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.science-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; }
.science-head p { color: var(--ink); font-size: 1.05rem; margin-bottom: 14px; }
.science-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.science-tags li { background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .9rem; }
.science-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sci { background: #fff; border-radius: 20px; padding: 24px; display: grid; gap: 6px; align-content: start; }
.sci-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--ink); display: grid; place-items: center; margin-bottom: 8px; }
.sci-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sci h3 { font-size: 1.15rem; font-weight: 800; }
.sci p { color: var(--muted); }
@media (max-width: 900px) { .science-head { grid-template-columns: 1fr; gap: 16px; } .science-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .science-grid { grid-template-columns: 1fr; } .sci { padding: 18px; grid-template-columns: auto 1fr; column-gap: 14px; } .sci-ico { grid-row: span 2; margin: 0; } }

.learn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.learn { border: 2px solid var(--ink); border-radius: 20px; padding: 22px; display: grid; gap: 6px; align-content: start; background: #fff; }
.learn .feat-ico { margin-bottom: 8px; }
.learn h3 { font-size: 1.12rem; font-weight: 800; }
.learn p { color: var(--muted); }
@media (max-width: 900px) { .learn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .learn-row { gap: 10px; } .learn { padding: 16px; } }
@media (min-width: 961px) {
  .flow-steps::before { display: none; }
  .flow-steps li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: -6px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); opacity: .25; }
}
.flow-src i.h { background: var(--yellow); width: 80%; }

/* ===== v30 — arabe (RTL) ===== */
html[dir="rtl"], html[dir="rtl"] body { overflow-x: clip; }
html[dir="rtl"] body { font-family: "Cairo", "Sora", "Segoe UI", system-ui, sans-serif; }
html[dir="rtl"] .skip-link { left: auto; right: -999px; }
html[dir="rtl"] .skip-link:focus { right: 16px; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; line-height: 1.3; }
html[dir="rtl"] .gm-accent, html[dir="rtl"] .lx-accent { letter-spacing: 0; }

/* =========================================================
   Mises à jour du 21 octobre 2026 : vidéo contre email,
   Yello Academy (leçons gratuites)
   ========================================================= */
.lx-themes .theme-row:not(.theme-row-7) .theme small { white-space: normal; overflow: visible; }

/* Vidéo de présentation */
.video-cover { all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 3 / 4; max-width: 100%; background: var(--ink); color: #fff; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 10px 10px 0 var(--yellow); position: relative; }
.video-cover .vc-brand { font-weight: 800; color: var(--yellow); font-size: 1.1rem; }
.video-cover .vc-play { align-self: center; width: 58px; height: 58px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; transition: transform .15s; }
.video-cover .vc-play svg { width: 26px; height: 26px; fill: var(--ink); margin-left: 3px; }
.video-cover:hover .vc-play { transform: scale(1.08); }
.video-cover strong { font-size: 1.15rem; line-height: 1.15; }
.video-cover small { color: rgba(255,255,255,.7); font-size: .8rem; }
.video-cover:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
#guide-dialog .vlead { display: grid; gap: 14px; }
#guide-dialog .vplay { display: grid; gap: 16px; }
.vplay-frame video { width: 100%; border-radius: 14px; background: #000; display: block; }
.vplay-frame .video-placeholder { width: 100%; }
.vplay-cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; background: var(--yellow-soft); border-radius: 14px; padding: 14px 18px; }
.vplay-cta p { margin: 0; max-width: 52ch; font-weight: 600; }
.vplay.ended .vplay-cta { background: var(--yellow); }
.vplay.ended .vplay-cta .btn { animation: ya-pulse 1.4s ease-in-out 3; }
@keyframes ya-pulse { 50% { transform: scale(1.05); } }

/* Cartes de cours : gratuit + assistant */
.gcard-free { display: grid; gap: 2px; }
.gcard-free strong { font-size: 1.05rem; color: #0a7a3b; }
.gcard-free small { font-size: .8rem; color: var(--muted); font-weight: 500; }
.gbtn-assist { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.gbtn-assist:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Yello Academy */
.ya-sec { padding-bottom: 40px; }
.ya-convert { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: center; background: var(--yellow); border-radius: 24px; padding: 30px 34px; margin: 0 auto 32px; max-width: 1080px; box-shadow: 0 18px 40px -24px rgba(17,17,17,.45); }
.ya-convert-k { display: inline-block; background: var(--ink); color: var(--yellow); font-weight: 700; font-size: .82rem; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px; }
.ya-convert h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; margin: 0 0 12px; max-width: 26ch; }
.ya-convert ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ya-convert li { padding-left: 26px; position: relative; font-weight: 500; }
.ya-convert li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
.ya-convert-cta { background: #fff; border-radius: 18px; padding: 20px; display: grid; gap: 12px; text-align: center; }
.ya-price { display: grid; justify-items: center; gap: 4px; margin: 0; }
.ya-price strong { font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.ya-price span { text-align: center; font-size: .85rem; line-height: 1.25; color: var(--muted); font-weight: 600; }
.ya-convert-cta small { color: var(--muted); font-size: .8rem; }
.ya-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; max-width: 1080px; margin: 0 auto 10px; }
.ya-search { position: relative; flex: 1 1 320px; min-width: 0; }
.ya-search input { width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px 13px 44px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.ya-search input:focus { outline: none; border-color: var(--ink); }
.ya-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; }
.ya-selects { display: flex; flex-wrap: wrap; gap: 10px; }
.ya-sel { display: grid; gap: 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ya-sel select { font: inherit; font-size: .92rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; max-width: 260px; }
.ya-count { max-width: 1080px; margin: 6px auto 14px; font-weight: 700; }
.ya-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; max-width: 1080px; margin: 0 auto; }
.ya-card { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; min-width: 0; transition: border-color .15s, transform .15s; }
.ya-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.ya-open { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 12px; flex: 1; }
.ya-open:focus-visible, .ya-assist:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.ya-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ya-code { font-size: .75rem; font-weight: 700; background: var(--mist); border-radius: 6px; padding: 2px 8px; }
.ya-card.adv .ya-code { background: var(--ink); color: var(--yellow); }
.ya-free { font-size: .72rem; font-weight: 800; color: #0a7a3b; background: #e3f5ea; border-radius: 999px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .04em; }
.ya-kick { font-size: .75rem; color: var(--muted); font-weight: 600; }
.ya-open strong { font-size: 1rem; line-height: 1.3; }
.ya-sub { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.ya-meta { margin-top: auto; padding-top: 6px; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ya-meter { display: inline-flex; gap: 2px; align-items: flex-end; }
.ya-meter i { width: 4px; border-radius: 1px; background: var(--line); }
.ya-meter i:nth-child(1) { height: 6px; } .ya-meter i:nth-child(2) { height: 9px; } .ya-meter i:nth-child(3) { height: 12px; }
.ya-meter i.on { background: var(--ink); }
.ya-assist { all: unset; box-sizing: border-box; cursor: pointer; display: block; text-align: center; padding: 10px 12px; font-size: .84rem; font-weight: 700; background: var(--yellow-soft); border-top: 1.5px solid var(--line); }
.ya-assist:hover { background: var(--yellow); }
.ya-sticky { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; max-width: 720px; margin: 26px auto 0 max(0px, calc((100% - 1080px) / 2)); background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 14px 12px 20px; box-shadow: 0 14px 34px -14px rgba(0,0,0,.55); }
.ya-sticky strong { color: var(--yellow); }
.ya-sticky .btn { background: var(--yellow); color: var(--ink); border-color: var(--yellow); white-space: nowrap; }
.ya-sticky .btn:hover { background: #fff; }
.ya-convert-cta .btn { white-space: normal; text-align: center; }
.ya-dialog { width: min(720px, calc(100% - 32px)); }
.ya-d-sub { color: var(--muted); margin: 4px 0 0; }
.ya-d-meta { font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ya-dialog h4 { margin: 18px 0 6px; font-size: 1rem; }
.ya-d-obj { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.ya-d-rel { font-size: .9rem; }
.ya-d-assist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.ya-d-assist > div { border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; background: var(--mist); }
.ya-d-assist > div:last-child { background: var(--yellow); }
.ya-d-assist span { font-size: .82rem; }
@media (max-width: 820px) {
  .ya-convert { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .ya-sel select { max-width: 100%; }
  .ya-selects, .ya-sel { width: 100%; }
  .ya-d-assist { grid-template-columns: 1fr; }
  .ya-sticky { display: none; }
}

/* Mises à jour du 21 octobre 2026 (2) : bouton « Voir le cours » et lecteur de leçon */
.ya-see { width: 100%; border-radius: 0; min-height: 46px; text-decoration: none; }
a.ya-open { text-decoration: none; color: inherit; }
.ya-grid-home { max-width: none; }
.ya-reader { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; }
.ya-reader::backdrop { background: rgba(0,0,0,.4); }
.ya-reader[open] { display: flex; flex-direction: column; }
.yr-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); padding-top: calc(10px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); background: #fff; }
.yr-back { all: unset; cursor: pointer; font-weight: 700; font-size: .92rem; padding: 8px 12px; border-radius: 999px; background: var(--mist); white-space: nowrap; }
.yr-back:hover { background: var(--yellow-soft); }
.yr-back:focus-visible { outline: 3px solid var(--yellow); }
.yr-bar-title { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yr-bar-cta { white-space: nowrap; }
.yr-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.yr-in { max-width: 820px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
.yr-kick { display: inline-block; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.yr-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; margin: 12px 0 8px; letter-spacing: -.02em; }
.yr-sub { font-size: 1.1rem; color: var(--muted); margin: 0 0 10px; }
.yr-meta { font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.yr-meta b { color: var(--ink); }
.yr-convert { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: center; background: var(--yellow); border-radius: 22px; padding: 24px 26px; margin: 24px 0; }
.yr-convert h3 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 10px; }
.yr-convert ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.yr-convert li { padding-left: 24px; position: relative; font-weight: 500; font-size: .95rem; }
.yr-convert li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
.yr-convert-cta { background: #fff; border-radius: 16px; padding: 18px; display: grid; gap: 10px; text-align: center; }
.yr-convert-cta small { color: var(--muted); font-size: .78rem; }
.yr-convert-cta .btn { white-space: normal; }
.yr-obj { background: var(--yellow-soft); border-radius: 16px; padding: 18px 22px; margin: 0 0 18px; }
.yr-obj h2 { font-size: 1.05rem; margin: 0 0 8px; }
.yr-obj ul { margin: 0; padding: 0; list-style: none; }
.yr-obj li { padding-left: 24px; position: relative; margin: 4px 0; }
.yr-obj li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
.yr-rel { font-size: .95rem; }
.yr-pre { border-left: 3px solid var(--ink); padding: 2px 0 2px 14px; margin: 0 0 12px; }
.yr-how { color: var(--muted); font-size: .95rem; }
.yr-loading { color: var(--muted); padding: 20px 0; }
.yr-article { font-size: 1.02rem; line-height: 1.65; }
.yr-article p, .yr-article li { max-width: 70ch; }
.yr-article h1 { display: block !important; text-align: left !important; font-size: 1.6rem; line-height: 1.2; margin: 44px 0 12px; padding-top: 16px; border-top: 3px solid var(--yellow); }
.yr-article h1 .mod-k, .yr-article h2 .ch-k { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.yr-article h2 { font-size: 1.25rem; line-height: 1.3; margin: 30px 0 10px; }
.yr-article h2 .ch-k { letter-spacing: 0; text-transform: none; }
.yr-article h3 { font-size: 1.08rem; margin: 22px 0 8px; }
.yr-article h4 { font-size: 1rem; margin: 10px 0; }
.yr-table { overflow-x: auto; margin: 14px 0 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.yr-article table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.45; }
.yr-article th { background: var(--mist); text-align: left; font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.yr-article td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.yr-article .box { border-radius: 14px; padding: 14px 18px 6px; margin: 18px 0; border-left: 4px solid; }
.yr-article .box-h { font-weight: 800; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.yr-article .box-i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; color: #fff; }
.yr-article .box-retenir { background: #fff6cc; border-color: #e0b400; } .yr-article .box-retenir .box-i { background: #e0b400; color: #111; }
.yr-article .box-conseil { background: #e6f6f1; border-color: #00a27d; } .yr-article .box-conseil .box-i { background: #00a27d; }
.yr-article .box-attention { background: #fdeee5; border-color: #f26721; } .yr-article .box-attention .box-i { background: #f26721; }
.yr-article .box-exemple, .yr-article .box-methode, .yr-article .box-ia, .yr-article .box-reflexion { background: #e6f1f8; border-color: #0370b2; }
.yr-article .box-exemple .box-i, .yr-article .box-methode .box-i, .yr-article .box-ia .box-i, .yr-article .box-reflexion .box-i { background: #0370b2; }
.yr-article .box-exercice { background: #efeaf6; border-color: #502d8f; } .yr-article .box-exercice .box-i { background: #502d8f; }
.yr-article .sheet { border: 1.5px dashed var(--line); border-radius: 14px; padding: 14px 18px; margin: 14px 0; }
.yr-article .sheet .line { height: 48px; border-bottom: 1px solid var(--line); }
.yr-article details.answers { border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; margin: 10px 0 18px; background: var(--mist); }
.yr-article details.answers summary { cursor: pointer; font-weight: 700; }
.yr-article .endcard { background: var(--ink); color: #fff; border-radius: 18px; padding: 20px 24px; margin: 32px 0 8px; }
.yr-article .endcard h3 { color: var(--yellow); margin-top: 0; }
.yr-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.yr-navbtn { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px !important; }
.yr-navbtn.next { text-align: right; }
.yr-navbtn small { color: var(--muted); font-size: .8rem; }
.yr-more { font-size: 1.15rem; margin: 20px 0 12px; }
@media (max-width: 820px) {
  .yr-convert { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .yr-bar-cta { display: none; }
  .yr-nav { grid-template-columns: 1fr; }
}

/* Barre des sujets (page Cours) */
.gsubjects { position: sticky; top: 76px; z-index: 3; background: var(--yellow-soft); border-radius: 16px; padding: 8px; margin: 0 auto 18px; max-width: 1180px; box-shadow: 0 10px 24px -20px rgba(0,0,0,.4); }
.gsubjects-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.gsubj { flex: none; white-space: nowrap; }
.gsubj em { font-style: normal; font-size: .75rem; font-weight: 700; background: rgba(0,0,0,.08); border-radius: 999px; padding: 1px 7px; }
.gsubj[aria-pressed="true"] { background: var(--ink); color: #fff; }
.gsubj[aria-pressed="true"] em { background: var(--yellow); color: var(--ink); }
.gsubj:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.gwhere { font-weight: 800; color: var(--ink); }
@media (max-width: 820px) { .gsubjects { top: 64px; border-radius: 12px; } }

/* Carte de conversion animée dans la leçon : rouge vif, noir, blanc, effet 3D (coach IA + attestation) */
.yc { --red: #e3141b; --red-d: #a50d12; position: relative; margin: 30px 0; padding: 34px 26px 30px; border-radius: 30px; overflow: hidden; isolation: isolate; color: #111;
  background: radial-gradient(90% 70% at 50% 0%, rgba(227,20,27,.55), rgba(227,20,27,0) 70%), radial-gradient(60% 50% at 100% 100%, rgba(227,20,27,.35), rgba(227,20,27,0) 70%), linear-gradient(180deg, #161616, #0b0b0b); }
.yc-orb { position: absolute; border-radius: 50%; z-index: -1; animation: yc-bob 6s ease-in-out infinite; }
.yc-orb.o1 { width: 46px; height: 46px; left: 7%; top: 26px; background: radial-gradient(circle at 32% 30%, #fff 0 6%, #ff5a5f 22%, var(--red) 55%, var(--red-d) 100%); box-shadow: 0 12px 20px -8px rgba(0,0,0,.6); }
.yc-orb.o2 { width: 22px; height: 22px; right: 9%; top: 150px; background: radial-gradient(circle at 32% 30%, #fff, #d9d9d9 60%, #9a9a9a); animation-delay: -2s; }
.yc-orb.o3 { width: 18px; height: 18px; left: 4%; top: 200px; background: radial-gradient(circle at 32% 30%, #ff8a8d, var(--red) 60%, var(--red-d)); animation-delay: -4s; }
.yc-orb.o4 { width: 120px; height: 120px; right: -30px; bottom: -40px; background: radial-gradient(circle at 35% 30%, #ff6b70, var(--red) 55%, var(--red-d)); filter: blur(10px); opacity: .55; animation-duration: 9s; }
@keyframes yc-bob { 50% { transform: translateY(-12px); } }
.yc-trail { position: absolute; z-index: -1; left: 22%; top: 22px; width: 52%; height: 70px; border-top: 2px dashed rgba(255,255,255,.28); border-radius: 50% 50% 0 0; }
.yc-plane { position: absolute; z-index: 1; right: 7%; top: 8px; width: 74px; filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)); animation: yc-fly 7s ease-in-out infinite; }
.yc-plane .p1 { fill: #fff; } .yc-plane .p2 { fill: #e9e9e9; } .yc-plane .p3 { fill: var(--red); }
@keyframes yc-fly { 0% { transform: translate(-20px, 14px) rotate(-6deg); } 50% { transform: translate(6px, -6px) rotate(4deg); } 100% { transform: translate(-20px, 14px) rotate(-6deg); } }
.yc-hero { position: relative; display: flex; justify-content: center; padding: 34px 0 0; z-index: 2; }
.yc-pillbtn { position: relative; border: 0; cursor: pointer; font: 800 clamp(1.5rem, 4.6vw, 2.4rem)/1 var(--font); letter-spacing: -.02em; color: #fff; padding: 26px 46px 30px; border-radius: 999px;
  background: radial-gradient(120% 90% at 30% 15%, #ff4a50 0%, var(--red) 45%, #c20f15 100%);
  box-shadow: inset 0 6px 10px rgba(255,255,255,.35), inset 0 -10px 16px rgba(110,0,4,.55), 0 14px 0 -2px #7d0a0e, 0 30px 40px -12px rgba(0,0,0,.7);
  text-shadow: 0 2px 0 rgba(120,0,6,.55), 0 4px 10px rgba(0,0,0,.25); animation: yc-press 3.2s ease-in-out infinite; transition: filter .15s; }
.yc-pillbtn span { display: inline-block; }
.yc-pillbtn:hover { filter: brightness(1.08); }
.yc-pillbtn:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@keyframes yc-press { 0%, 52%, 100% { transform: translateY(0); box-shadow: inset 0 6px 10px rgba(255,255,255,.35), inset 0 -10px 16px rgba(110,0,4,.55), 0 14px 0 -2px #7d0a0e, 0 30px 40px -12px rgba(0,0,0,.7); }
  60% { transform: translateY(9px); box-shadow: inset 0 6px 10px rgba(255,255,255,.3), inset 0 -6px 12px rgba(110,0,4,.55), 0 5px 0 -2px #7d0a0e, 0 14px 24px -12px rgba(0,0,0,.7); } 70% { transform: translateY(0); } }
.yc-hand { position: absolute; z-index: 3; width: 92px; height: 92px; left: calc(50% + 60px); top: 74px; fill: #fff; stroke: #222; stroke-width: .9; stroke-linejoin: round; filter: drop-shadow(0 14px 12px rgba(0,0,0,.45)); transform-origin: 30% 10%; animation: yc-tap 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes yc-tap { 0%, 40%, 100% { transform: translate(14px, 18px) rotate(-14deg); } 55% { transform: translate(0, 4px) rotate(-18deg) scale(.95); } 62% { transform: translate(0, 6px) rotate(-18deg) scale(.93); } 75% { transform: translate(14px, 18px) rotate(-14deg); } }
.yc-stack { position: relative; margin: -16px auto 0; max-width: 760px; z-index: 1; }
.yc-stack::before { content: ""; position: absolute; left: 12px; right: 12px; top: -10px; bottom: -14px; border-radius: 26px; background: linear-gradient(180deg, var(--red), var(--red-d)); box-shadow: 0 30px 40px -24px rgba(0,0,0,.8); z-index: -1; }
.yc-stack::after { content: ""; position: absolute; left: 30px; right: 30px; top: 2px; height: 10px; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 6px, transparent 6px 14px); opacity: .5; }
.yc-card { position: relative; background: #fff; border-radius: 22px; padding: 30px 26px 24px; margin-top: 16px; box-shadow: 0 1px 0 #fff inset, 0 18px 30px -18px rgba(0,0,0,.6); }
.yc-tag { display: inline-block; background: #ffe3e4; color: var(--red-d); font-weight: 800; font-size: .78rem; padding: 6px 12px; border-radius: 999px; }
.yc h3 { color: #111; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.18; margin: 12px 0 18px; letter-spacing: -.01em; }
.yc h3 em { font-style: normal; color: var(--red); }
.yc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.yc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.yc-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; opacity: 0; transform: translateY(8px); animation: yc-in .5s ease forwards; }
.yc-list li:nth-child(2) { animation-delay: .12s; } .yc-list li:nth-child(3) { animation-delay: .24s; } .yc-list li:nth-child(4) { animation-delay: .36s; }
@keyframes yc-in { to { opacity: 1; transform: none; } }
.yc-list b { display: block; font-size: .98rem; color: #111; }
.yc-list span:last-child { font-size: .88rem; color: #555; line-height: 1.45; }
.yc-ico { width: 36px; height: 36px; border-radius: 11px; background: #111; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(255,255,255,.08); }
.yc-ico svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yc-star { background: #fff1f1; border: 1.5px solid #ffc7c9; border-radius: 14px; padding: 10px; }
.yc-star .yc-ico { background: var(--red); }
.yc-side { display: grid; gap: 14px; }
.yc-cert { position: relative; overflow: hidden; background: #fff; border: 2px solid #111; border-radius: 14px; padding: 14px 14px 12px; display: grid; gap: 2px; transform: rotate(-3deg); box-shadow: 6px 6px 0 var(--red); animation: yc-float 5s ease-in-out infinite; }
@keyframes yc-float { 50% { transform: rotate(-1deg) translateY(-5px); } }
.yc-cert-logo { font-weight: 800; font-size: .82rem; } .yc-cert-logo b { color: var(--red); }
.yc-cert-k { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red-d); font-weight: 800; margin-top: 4px; }
.yc-cert strong { font-size: 1rem; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.yc-cert em { font-style: normal; font-weight: 700; font-size: .78rem; line-height: 1.3; padding-right: 36px; color: #333; }
.yc-seal { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 0 4px #ffd9da; }
.yc-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); transform: translateX(-120%); animation: yc-shine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes yc-shine { 55%, 100% { transform: translateX(120%); } }
.yc-price { background: #111; color: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 8px; text-align: center; }
.yc-amount { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; }
.yc-amount strong { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.yc-amount span { text-align: left; font-size: .78rem; font-weight: 700; line-height: 1.15; color: rgba(255,255,255,.7); }
.yc-per { margin: 0; font-size: .76rem; color: rgba(255,255,255,.7); }
.yc-btn { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer; font: 800 .98rem var(--font); color: #fff; background: var(--red); padding: 13px 14px; border-radius: 999px; box-shadow: inset 0 3px 5px rgba(255,255,255,.3), 0 6px 0 -1px #7d0a0e; transition: transform .15s, box-shadow .15s; }
.yc-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-130%); animation: yc-shine 2.8s ease-in-out infinite; }
.yc-btn:hover { transform: translateY(-2px); }
.yc-btn:active { transform: translateY(3px); box-shadow: inset 0 3px 5px rgba(255,255,255,.3), 0 2px 0 -1px #7d0a0e; }
.yc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.yc-price small { color: rgba(255,255,255,.6); font-size: .72rem; }
@media (max-width: 820px) {
  .yc { padding: 26px 14px 22px; border-radius: 24px; }
  .yc-pillbtn { padding: 20px 28px 24px; }
  .yc-hand { width: 66px; height: 66px; left: calc(50% + 40px); top: 64px; }
  .yc-plane { width: 52px; right: 4%; }
  .yc-cols { grid-template-columns: minmax(0, 1fr); }
  .yc-card { padding: 24px 16px 18px; }
  .yc-cert { max-width: 280px; order: 2; } .yc-price { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .yc-orb, .yc-plane, .yc-pillbtn, .yc-hand, .yc-cert, .yc-shine, .yc-btn::after { animation: none !important; }
  .yc-list li { animation: none; opacity: 1; transform: none; }
}
/* Avantages en tuiles 3D « slab » (inspiration cartes empilées) */
.yc-list li { background: #fff; border: 2px solid #111; border-radius: 16px; padding: 12px; box-shadow: 0 6px 0 #111, 0 14px 18px -10px rgba(0,0,0,.35); transition: transform .18s, box-shadow .18s; }
.yc-list li:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #111, 0 18px 22px -10px rgba(0,0,0,.35); }
.yc-list { gap: 16px; }
.yc-list li.yc-star { background: linear-gradient(180deg, #ff2a31, var(--red)); border-color: #7d0a0e; box-shadow: 0 6px 0 #7d0a0e, 0 14px 18px -10px rgba(0,0,0,.4); }
.yc-list li.yc-star b, .yc-list li.yc-star span:last-child { color: #fff; }
.yc-list li.yc-star .yc-ico { background: #fff; } .yc-list li.yc-star .yc-ico svg { stroke: var(--red); }
.yc-ico { box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.25); }
.yc-tag { white-space: normal; line-height: 1.3; }
@media (max-width: 820px) { .yc-tag { font-size: .72rem; } }

/* =====================  MON ESPACE · PANIER · ABONNEMENT  ===================== */
/* En-tête : accès Mon espace + panier */
.hd-espace, .hd-cart { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 700 .88rem var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.hd-espace svg, .hd-cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd-espace:hover, .hd-cart:hover { background: var(--yellow); }
.hd-espace[aria-current="page"] { background: var(--ink); color: #fff; }
.hd-cart { width: 42px; padding: 0; justify-content: center; }
.hd-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e3141b; color: #fff; font: 800 .7rem/20px var(--font); text-align: center; box-shadow: 0 0 0 2px #fff; }
.hd-espace .hd-badge { position: static; box-shadow: none; margin-left: 2px; }
.hd-espace[aria-current="page"] .hd-badge { background: var(--yellow); color: var(--ink); }
@media (max-width: 1240px) and (min-width: 961px) { .nav-actions .btn { display: none; } }
@media (max-width: 960px) { .nav-actions .btn { display: none; } }
@media (max-width: 420px) { .hd-espace { padding: 0 11px; font-size: .82rem; gap: 6px; } .nav-actions { gap: 6px; } .brand img { height: 28px; } }

/* Bouton « Ajouter à mon espace » sur les cartes */
.eadd { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 14px; border-radius: 6px; border: 1.5px dashed #b9b6ae; background: #fff; color: var(--ink); font: 700 .9rem/1.2 var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.eadd:hover { background: var(--yellow-soft); border-color: var(--ink); border-style: solid; }
.eadd small { flex-basis: 100%; font-size: .74rem; font-weight: 600; color: var(--muted); }
.eadd.in { border: 1.5px solid #138a4b; background: #eaf8f0; color: #0d6b39; }
.eadd.in small { color: #0d6b39; }
.eadd.in.locked { border-color: #e3141b; background: #fff1f1; color: #a50d12; }
.eadd.in.locked small { color: #a50d12; font-weight: 800; }
.eadd-buy { margin: 4px 0 18px; }
.gcard .gbtn + .eadd, .ya-card .eadd { margin-top: 8px; }
.gcard-tbd { color: var(--muted); font-weight: 700; }

/* Lecteur de leçon */
.yr-espace { height: 38px; padding: 0 14px; border-radius: 6px; border: 1.5px solid var(--ink); background: #fff; font: 700 .85rem var(--font); cursor: pointer; white-space: nowrap; }
.yr-espace.in { border-color: #138a4b; background: #eaf8f0; color: #0d6b39; }
@media (max-width: 760px) { .yr-espace { display: none; } }
.yr-finish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 34px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--mist); border: 1px solid var(--line); }
.yr-finish p { margin: 0; flex: 1 1 260px; }
.yr-done { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 800 .95rem var(--font); cursor: pointer; }
.yr-done.in { background: #138a4b; }

/* Petit message */
.es-toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-size: .9rem; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); transition: transform .3s ease; }
.es-toast.show { transform: translate(-50%, 0); }
.es-toast button { flex-shrink: 0; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--yellow); color: var(--ink); font: 800 .82rem var(--font); cursor: pointer; }
@media (max-width: 760px) { .es-toast { bottom: 84px; } }

/* Panier : tiroir à droite (ordinateur) / feuille du bas (mobile) */
dialog.es-cart { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(460px, 100vw); max-width: 100vw; padding: 0; border: 0; background: #fff; box-shadow: -30px 0 60px -30px rgba(0,0,0,.45); }
dialog.es-cart::backdrop { background: rgba(10,10,10,.5); }
.es-cart-in { padding: 22px 22px 30px; }
.es-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.es-cart-head h3 { margin: 0; font-size: 1.4rem; }
.es-cart-note { font-size: .84rem; color: var(--muted); background: var(--mist); border-radius: 10px; padding: 10px 12px; margin: 6px 0 14px; }
.es-cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.es-cart-list li { display: grid; grid-template-columns: 12px minmax(0,1fr) auto 30px; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.es-cart-list strong { display: block; font-size: .92rem; line-height: 1.3; }
.es-cart-list small { font-size: .76rem; color: var(--muted); }
.es-due { color: #a50d12; }
.es-cart-price { font-weight: 800; font-size: .9rem; white-space: nowrap; }
.es-rm { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.es-cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 4px; padding-top: 14px; border-top: 2px solid var(--ink); }
.es-cart-total strong { font-size: 1.5rem; }
.es-cart-warn { font-size: .8rem; color: var(--muted); }
.es-pay { display: grid; gap: 12px; margin-top: 14px; }
.es-pay fieldset { border: 0; padding: 0; margin: 0; }
.es-pay legend { font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.es-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.es-methods label { position: relative; }
.es-methods input { position: absolute; opacity: 0; }
.es-methods span { display: grid; place-items: center; min-height: 48px; padding: 6px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 700; font-size: .84rem; text-align: center; cursor: pointer; }
.es-methods input:checked + span { border-color: var(--ink); background: var(--yellow-soft); box-shadow: inset 0 0 0 1px var(--ink); }
.es-methods input:focus-visible + span { outline: 3px solid var(--yellow); }
.es-paybtn { min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; background: #e3141b; color: #fff; font: 800 1rem var(--font); cursor: pointer; box-shadow: inset 0 3px 5px rgba(255,255,255,.3), 0 5px 0 -1px #7d0a0e; }
.es-paybtn:active { transform: translateY(3px); box-shadow: inset 0 3px 5px rgba(255,255,255,.3), 0 2px 0 -1px #7d0a0e; }
.es-pay-msg { display: none; font-size: .88rem; background: #fff7e0; border: 1px solid #f1d27a; border-radius: 12px; padding: 12px; }
.es-pay-msg.show { display: block; }
.es-pay-msg p { margin: 0 0 8px; }
.es-cart-empty { text-align: center; padding: 30px 0; display: grid; gap: 10px; }
@media (max-width: 760px) {
  dialog.es-cart { margin: auto 0 0; width: 100vw; height: auto; max-height: 92vh; border-radius: 22px 22px 0 0; }
  .es-cart-in { padding: 18px 16px 26px; }
}

/* Page Mon espace */
.es-page { padding: 34px 0 90px; background: linear-gradient(180deg, var(--mist), #fff 340px); min-height: 70vh; }
.es-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.es-hello h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 8px 0 14px; }
.es-hello h1 em { font-style: normal; color: var(--muted); font-weight: 600; display: block; font-size: .6em; margin-top: 6px; letter-spacing: 0; }
.es-namefield { display: inline-grid; gap: 4px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.es-namefield input { min-width: 260px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: 600 .95rem var(--font); background: #fff; }
.es-stats { display: grid; grid-template-columns: repeat(5, minmax(84px, 1fr)); gap: 8px; }
.es-stats button { display: grid; gap: 2px; padding: 12px 10px; border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; box-shadow: 0 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; font-family: var(--font); }
.es-stats button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.es-stats button.on { background: var(--ink); color: #fff; }
.es-stats strong { font-size: 1.6rem; line-height: 1; }
.es-stats span { font-size: .76rem; font-weight: 700; }
.es-stats .due strong { color: #e3141b; }
.es-local { margin: 18px 0; font-size: .84rem; color: var(--muted); padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px dashed #c9c5bc; }
.es-sub { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #111; color: #fff; }
.es-sub p { margin: 2px 0 0; font-size: .86rem; color: rgba(255,255,255,.72); }
.es-sub.on { background: #0d6b39; }
.es-nav { position: sticky; top: 76px; z-index: 5; display: flex; gap: 6px; margin: 22px 0 8px; padding: 8px 0; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); overflow-x: auto; scrollbar-width: none; }
.es-nav a, .es-nav button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 700 .88rem var(--font); text-decoration: none; cursor: pointer; }
.es-nav b { background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .74rem; }
.es-sec { padding-top: 22px; scroll-margin-top: 140px; }
.es-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.es-sec-head h2 { margin: 0; font-size: 1.6rem; }
.es-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.es-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; }
.es-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.es-search input { border: 0; outline: 0; font: 500 .95rem var(--font); width: 220px; background: transparent; }
.es-sel select { height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); font: 600 .9rem var(--font); background: #fff; }
.es-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.es-chips button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 700 .85rem var(--font); cursor: pointer; }
.es-chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.es-chips b { font-size: .74rem; opacity: .7; }
.es-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: #999; }
.t-ent { --t: #ffc20e; } .t-pro { --t: #2f6df6; } .t-cert { --t: #e3141b; } .t-conc { --t: #7a3cf0; } .t-exam { --t: #138a4b; } .t-sub { --t: #e3141b; }
.es-dot[class*="t-"] { background: var(--t); }
.es-group { margin-top: 18px; }
.es-gh { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 10px; }
.es-gh small { color: var(--muted); font-weight: 600; font-size: .8rem; }
.es-item { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; margin-bottom: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(0,0,0,.4); }
.es-item.st-locked { border-color: #ffc7c9; background: linear-gradient(90deg, #fff6f6, #fff 40%); }
.es-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--t, #2f6df6); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.3); }
.es-ico svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.es-ico.t-ent svg { stroke: #111; }
.es-sub .es-ico { width: 48px; height: 48px; }
.es-kick { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.es-body h3 { font-size: 1.05rem; margin: 3px 0 8px; line-height: 1.3; }
.es-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.es-st, .es-acc { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.s-todo { background: #eef1f6; color: #3b4658; } .s-doing { background: #fff3c4; color: #6b5200; } .s-done { background: #eaf8f0; color: #0d6b39; } .s-locked { background: #e3141b; color: #fff; }
.es-acc.free { background: #f1f0ec; color: var(--ink); } .es-acc.ok { background: #eaf8f0; color: #0d6b39; } .es-acc.due { background: #fff1f1; color: #a50d12; }
.es-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.es-act .gbtn { min-height: 42px; }
.es-paybtn-sm { background: #e3141b; border-color: #e3141b; }
.es-paybtn-sm:hover { background: #a50d12; }
.es-link { border: 0; background: none; padding: 4px 2px; color: var(--ink); font: 700 .84rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.es-del { color: var(--muted); font-weight: 600; }
.es-empty { text-align: center; padding: 44px 20px; border: 2px dashed #d6d2c8; border-radius: 22px; background: #fff; }
.es-empty-art { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--yellow); margin-bottom: 8px; box-shadow: 0 6px 0 var(--ink); border: 2px solid var(--ink); }
.es-empty-art svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2; }
.es-empty p { max-width: 52ch; margin: 6px auto 16px; color: var(--muted); }
.es-empty .btn-row { justify-content: center; }
.es-none { padding: 20px 0; color: var(--muted); }
.es-atts { display: grid; gap: 10px; }
.es-att { display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 #e3141b; }
.es-att small { display: block; color: var(--muted); }
.es-att-seal { width: 44px; height: 44px; border-radius: 50%; background: #e3141b; color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 0 4px #ffd9da; }
.es-att-empty { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.es-att-empty h3 { margin: 0 0 6px; font-size: 1.05rem; }
.es-att-empty p { margin: 0 0 8px; color: var(--muted); font-size: .9rem; max-width: 70ch; }
.es-legal { font-size: .78rem; color: var(--muted); margin-top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .es-top { grid-template-columns: 1fr; }
  .es-stats { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
  .es-stats button { padding: 10px 6px; text-align: center; }
  .es-stats strong { font-size: 1.3rem; } .es-stats span { font-size: .68rem; }
}
@media (max-width: 640px) {
  .es-page { padding-top: 22px; }
  .es-namefield, .es-namefield input { width: 100%; min-width: 0; }
  .es-sub { grid-template-columns: 44px minmax(0,1fr); }
  .es-sub .es-paybtn { grid-column: 1 / -1; width: 100%; }
  .es-tools, .es-search { width: 100%; } .es-search input { width: 100%; } .es-sel { flex: 1; } .es-sel select { width: 100%; }
  .es-item { grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 14px; }
  .es-ico { width: 44px; height: 44px; border-radius: 12px; } .es-ico svg { width: 22px; height: 22px; }
  .es-act { grid-column: 1 / -1; justify-content: flex-start; }
  .es-act .gbtn { flex: 1 1 100%; }
  .es-att { grid-template-columns: 44px minmax(0,1fr); } .es-att .gbtn { grid-column: span 1; }
  .es-nav { top: 64px; }
}

/* Attestation (affichage / impression) */
dialog.es-attdlg { width: min(760px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 18px; background: #fff; }
dialog.es-attdlg::backdrop { background: rgba(10,10,10,.6); }
.es-attdoc { position: relative; overflow: hidden; margin: 18px; padding: 44px 34px 30px; border: 3px solid #111; outline: 1.5px solid #e3141b; outline-offset: -12px; text-align: center; background: radial-gradient(circle at 50% 0, #fff4f4, #fff 60%); }
.es-att-brand { font-weight: 800; font-size: 1.1rem; margin: 0; } .es-att-brand b { color: #e3141b; }
.es-att-k { margin: 8px 0 22px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: #a50d12; }
.es-att-l { margin: 0; color: #555; font-size: .9rem; }
.es-att-name { margin: 6px 0 18px; font: italic 700 clamp(1.6rem, 4vw, 2.3rem) Georgia, "Times New Roman", serif; }
.es-att-course { margin: 6px 0 18px; font-size: 1.25rem; font-weight: 800; }
.es-att-meta { font-size: .86rem; color: #333; }
.es-att-legal { font-size: .72rem; color: #666; margin: 18px auto 0; max-width: 56ch; }
.es-wm { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(4rem, 14vw, 8rem) var(--font); color: rgba(227,20,27,.1); transform: rotate(-18deg); pointer-events: none; }
.es-attbar { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 18px; }
@media print {
  body.es-printing > *:not(dialog.es-attdlg) { display: none !important; }
}
body:has(dialog.es-attdlg[open]) .topbar, body:has(dialog.es-attdlg[open]) main, body:has(dialog.es-attdlg[open]) footer { }
@media print { body:has(dialog.es-attdlg[open]) > *:not(dialog.es-attdlg) { display: none !important; } dialog.es-attdlg { position: static; box-shadow: none; } .es-attbar { display: none; } }

/* =====================  BANNIÈRE ABONNEMENT MOBILE — rouge, noir, blanc  ===================== */
.subband { --red: #e3141b; --red-d: #a50d12; position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 40px 0 18px;
  background: radial-gradient(50% 120% at 85% 50%, rgba(227,20,27,.75), rgba(227,20,27,0) 70%), radial-gradient(40% 90% at 0% 0%, rgba(227,20,27,.35), rgba(227,20,27,0) 70%), linear-gradient(100deg, #0b0b0b 0%, #151515 55%, #1c0506 100%); }
.subband::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(90deg, #000, transparent 60%); }
.sb-orb { position: absolute; z-index: -1; border-radius: 50%; animation: yc-bob 7s ease-in-out infinite; }
.sb-orb.a { width: 34px; height: 34px; left: 46%; top: 22px; background: radial-gradient(circle at 32% 30%, #fff 0 6%, #ff5a5f 22%, var(--red) 55%, var(--red-d)); }
.sb-orb.b { width: 16px; height: 16px; left: 58%; bottom: 40px; background: radial-gradient(circle at 32% 30%, #fff, #cfcfcf 60%, #8a8a8a); animation-delay: -3s; }
.sb-orb.c { width: 180px; height: 180px; right: -60px; top: -70px; background: radial-gradient(circle at 35% 30%, #ff6b70, var(--red) 55%, var(--red-d)); filter: blur(14px); opacity: .45; animation-duration: 10s; }
.sb-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.sb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); font-size: .78rem; font-weight: 700; }
.sb-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(227,20,27,.7); animation: sb-ping 1.8s infinite; }
@keyframes sb-ping { 70% { box-shadow: 0 0 0 9px rgba(227,20,27,0); } 100% { box-shadow: 0 0 0 0 rgba(227,20,27,0); } }
.subband h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.08; margin: 12px 0 10px; letter-spacing: -.025em; }
.subband h2 em { font-style: normal; color: #fff; background: var(--red); padding: 0 .25em; border-radius: 10px; box-shadow: 0 5px 0 var(--red-d); display: inline-block; transform: rotate(-1.5deg); }
.sb-text { color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.55; margin: 0 0 16px; max-width: 64ch; }
.sb-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sb-feats li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; background: #fff; color: #111; font-size: .8rem; font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.45); }
.sb-feats svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-feats li:last-child { background: var(--red); color: #fff; } .sb-feats li:last-child svg { stroke: #fff; }
.sb-buy { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; }
.sb-phone { width: 150px; height: 262px; padding: 8px; border-radius: 28px; background: linear-gradient(160deg, #2a2a2a, #050505); box-shadow: inset 0 0 0 2px #3a3a3a, 0 30px 40px -18px rgba(0,0,0,.8), 10px 10px 0 -2px var(--red); transform: rotate(-6deg); animation: sb-float 6s ease-in-out infinite; }
@keyframes sb-float { 50% { transform: rotate(-4deg) translateY(-8px); } }
.sb-screen { height: 100%; border-radius: 21px; background: #fff; color: #111; padding: 16px 10px 10px; display: grid; align-content: start; gap: 7px; font-size: .58rem; overflow: hidden; }
.sb-s-k { margin: 0; font-weight: 800; color: var(--red-d); }
.sb-s-bar { height: 6px; border-radius: 9px; background: #eee; overflow: hidden; } .sb-s-bar i { display: block; height: 100%; width: 60%; background: var(--red); border-radius: 9px; animation: sb-fill 4s ease-in-out infinite; }
@keyframes sb-fill { 0% { width: 40%; } 60%, 100% { width: 60%; } }
.sb-s-quiz { display: grid; gap: 4px; padding: 7px; border-radius: 9px; border: 1.5px solid #111; box-shadow: 0 3px 0 #111; }
.sb-s-quiz span { padding: 4px 6px; border-radius: 6px; background: #f2f2f2; } .sb-s-quiz .ok { background: #eaf8f0; color: #0d6b39; font-weight: 800; }
.sb-s-bub { padding: 7px; border-radius: 9px 9px 9px 2px; background: #111; color: #fff; line-height: 1.35; }
.sb-s-att { padding: 7px; border-radius: 9px; background: var(--red); color: #fff; font-weight: 800; text-align: center; }
.sb-price { display: grid; gap: 10px; justify-items: start; }
.sb-price p { display: flex; align-items: center; gap: 8px; margin: 0; }
.sb-price strong { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sb-price p span { font-size: .8rem; font-weight: 700; line-height: 1.15; color: rgba(255,255,255,.75); }
.sb-btn { position: relative; overflow: hidden; border: 0; cursor: pointer; color: #fff; font: 800 1.02rem/1.2 var(--font); padding: 16px 24px 18px; border-radius: 999px; background: radial-gradient(120% 90% at 30% 15%, #ff4a50 0%, var(--red) 45%, #c20f15 100%);
  box-shadow: inset 0 4px 8px rgba(255,255,255,.35), inset 0 -6px 10px rgba(110,0,4,.5), 0 8px 0 -1px #7d0a0e, 0 20px 30px -12px rgba(0,0,0,.7); transition: transform .12s, box-shadow .12s; }
.sb-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-130%); animation: yc-shine 3s ease-in-out infinite; }
.sb-btn:hover { filter: brightness(1.07); }
.sb-btn:active { transform: translateY(5px); box-shadow: inset 0 4px 8px rgba(255,255,255,.35), inset 0 -6px 10px rgba(110,0,4,.5), 0 3px 0 -1px #7d0a0e, 0 10px 20px -12px rgba(0,0,0,.7); }
.sb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.sb-price small { color: rgba(255,255,255,.6); font-size: .74rem; }
.sb-note { margin-top: 18px; font-size: .74rem; color: rgba(255,255,255,.55); }
@media (max-width: 1000px) { .sb-grid { grid-template-columns: 1fr; gap: 22px; } .sb-buy { grid-template-columns: 1fr; } .sb-phone { display: none; } }
@media (max-width: 640px) {
  .subband { padding: 26px 0 14px; }
  .sb-text { font-size: .9rem; }
  .sb-feats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .sb-feats li { flex-shrink: 0; }
  .sb-price { justify-items: stretch; } .sb-price p { justify-content: flex-start; } .sb-price strong { font-size: 2.4rem; }
  .sb-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sb-orb, .sb-phone, .sb-s-bar i, .sb-btn::after, .sb-pill i { animation: none !important; } }
/* correctifs bannière + espace mobile */
.subband { padding: 30px 0 14px; }
.subband h2 { margin: 10px 0 8px; }
.sb-text { margin-bottom: 12px; font-size: .94rem; }
.sb-phone { width: 132px; height: 230px; }
.sb-buy { grid-template-columns: 132px minmax(0, 1fr); }
.sb-note { margin-top: 12px; }
@media (max-width: 1000px) { .sb-grid { grid-template-columns: minmax(0, 1fr); } .sb-buy { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .sb-copy, .sb-buy { min-width: 0; }
  .subband h2 { font-size: 1.65rem; }
  .es-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* Bannière d'abonnement dans la leçon : pleine largeur du lecteur */
.yr-scroll { overflow-x: hidden; }
.sb-in-lesson { margin: 30px calc(50% - 50vw); }
.sb-in-lesson .wrap { max-width: 1200px; }
.sb-in-lesson.sb-end { margin-top: 40px; }
.sb-phone { height: 262px; } .sb-screen { gap: 6px; padding-top: 14px; } .sb-s-quiz span { padding: 3px 6px; }

/* Bouton vidéo harmonisé (partout) */
.vbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 7px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 700 .95rem/1 var(--font); cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s; }
.vbtn:hover { transform: translateY(-1px); background: var(--yellow-soft); }
.vbtn-play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e3141b; box-shadow: 0 0 0 0 rgba(227,20,27,.5); animation: vbtn-ping 2.2s infinite; flex-shrink: 0; }
.vbtn-play svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
@keyframes vbtn-ping { 70% { box-shadow: 0 0 0 10px rgba(227,20,27,0); } 100% { box-shadow: 0 0 0 0 rgba(227,20,27,0); } }
.vbtn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.vbtn-light:hover { background: rgba(255,255,255,.12); }
@media (max-width: 520px) { .vbtn { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .vbtn-play { animation: none; } }

/* ===== Mon espace : accès réservé aux abonnés de l’Assistant pédagogique (26/10/2026) ===== */
.es-gate { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; padding-top: 6px; }
.es-gate h1 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height: 1.08; letter-spacing: -.025em; margin: 10px 0 14px; max-width: 20ch; }
.es-gate h1 em { font-style: normal; background: var(--yellow); padding: 0 .18em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.es-gate-lead { color: var(--muted); max-width: 60ch; margin: 0 0 14px; }
.es-gate-note { margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--yellow-soft); color: #3a2e00; font-size: .95rem; max-width: 62ch; }
.es-gate-h2 { font-size: 1.15rem; margin: 26px 0 12px; }
.es-gate-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.es-gate-feats li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; font-size: .93rem; color: var(--muted); line-height: 1.45; }
.es-gate-feats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.es-gate-feats b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 3px; }
.es-gate-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.es-gate-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.es-gate-buy { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: #111; color: #fff; box-shadow: var(--shadow); }
.es-gate-pill { align-self: flex-start; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #111; background: var(--yellow); padding: 5px 10px; border-radius: 999px; }
.es-gate-buy h2 { color: #fff; font-size: 1.5rem; margin: 0; }
.es-gate-price { display: flex; align-items: center; gap: 10px; margin: 0; }
.es-gate-price strong { font-size: 3rem; line-height: 1; letter-spacing: -.03em; color: var(--yellow); }
.es-gate-price span { font-size: .85rem; line-height: 1.2; font-weight: 700; color: rgba(255,255,255,.8); }
.es-gate-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; color: rgba(255,255,255,.86); }
.es-gate-incl li::before { content: "✓"; color: var(--yellow); font-weight: 800; margin-right: 8px; }
.es-gate-btn { width: 100%; }
.es-gate-buy small { color: rgba(255,255,255,.6); font-size: .8rem; text-align: center; }
.es-gate-free { color: #fff; text-align: center; font-weight: 700; }
.es-gate-mcta { display: none; align-items: center; justify-content: center; width: 100%; margin: 4px 0 6px; }
@media (max-width: 900px) {
  .es-gate { grid-template-columns: 1fr; gap: 22px; }
  .es-gate-buy { position: static; }
  .es-gate-mcta { display: flex; }
  .es-gate-main .es-gate-h2 { margin-top: 18px; }
}
@media (max-width: 600px) {
  .es-gate-feats { grid-template-columns: 1fr; }
  .es-gate-buy { padding: 20px; }
  .es-gate-price strong { font-size: 2.5rem; }
}

/* ===== Leçon : bandeau fin Assistant pédagogique, en haut et à la fin (26/10/2026) ===== */
.ap-strip { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; margin: 22px 0; padding: 10px 10px 10px 12px;
  border: 1px solid #efd98a; border-radius: 16px; background: linear-gradient(90deg, var(--yellow-soft), #fffdf4 70%); }
.ap-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.ap-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-txt { margin: 0; font-size: .9rem; line-height: 1.35; color: var(--muted); }
.ap-txt b { display: block; color: var(--ink); font-size: .95rem; }
.ap-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; white-space: nowrap; }
.ap-price strong { font-size: 1rem; color: var(--ink); }
.ap-price small { font-size: .74rem; color: var(--muted); font-weight: 600; }
.ap-btn { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 800 .9rem var(--font); cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s; }
.ap-btn:hover { background: #000; transform: translateY(-1px); }
.ap-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ap-end { margin-top: 26px; }
.ap-btn-price { display: none; }
@media (max-width: 720px) {
  .ap-strip { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; }
  .ap-ico { width: 36px; height: 36px; }
  .ap-txt span { display: none; }
  .ap-price { grid-column: 1 / 2; grid-row: 2; display: none; }
  .ap-btn { grid-column: 1 / -1; width: 100%; min-height: 38px; }
  .ap-btn-price { display: inline; font-weight: 700; }
}

/* ===== Universités : catalogue combiné Entreprises + Universités (26/10/2026) ===== */
.uni-offer { display: grid; grid-template-columns: minmax(0, 760px); gap: 16px; margin: 6px 0 28px; }
.uni-stat { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 22px; background: var(--mist); border: 1px solid var(--line); }
.uni-stat strong { flex: none; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.uni-stat h3 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.25; }
.uni-stat p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.45; }
.uni-stat-accent { background: var(--ink); border-color: var(--ink); }
.uni-stat-accent strong { color: var(--yellow); }
.uni-stat-accent h3 { color: #fff; }
.uni-stat-accent p { color: rgba(255,255,255,.75); }
.gbadge.cat-tag { background: var(--ink); color: #fff; }
.gpub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--yellow-soft); font-size: .93rem; }
.gpub b { color: var(--ink); }
.gpub button { border: 0; background: none; font: 700 .88rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); padding: 2px; }
@media (max-width: 720px) {
  .uni-offer { grid-template-columns: 1fr; gap: 12px; }
  .uni-stat { padding: 18px 20px; gap: 6px; flex-direction: column; align-items: flex-start; }
}

/* En-tête mobile (multipage) : l’icône « Mon espace » seule pour éviter le débordement horizontal (26/10/2026) */
@media (max-width: 560px) {
  .hd-espace { width: 42px; padding: 0; justify-content: center; }
  .hd-espace > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hd-espace .hd-badge { position: absolute; top: -4px; right: -4px; margin: 0; }
  .lang-switch span, .lang-switch a { padding: 6px 7px; }
}
@media (max-width: 400px) { .lang-switch span, .lang-switch a { padding: 5px 5px; font-size: .7rem; } .nav-actions { gap: 5px; } }

/* ===== Accueil : sections resserrées (26/10/2026) ===== */
.section-compact.section, .section.section-compact { padding-block: 64px; }
.section-compact .section-head { margin-bottom: 28px; }
.steps-compact .step { padding: 20px 20px 4px 0; gap: 6px; }
.steps-compact .step p { font-size: .95rem; }
.gstats-compact { margin-top: 0; }
.aud-compact { min-height: 0; padding: 30px; gap: 14px; }
.aud-compact p { margin: 0; }
.aud-compact .chips { margin: 2px 0 6px; }
#avis.section-compact .reviews-wrap { margin-top: 0; }
@media (max-width: 720px) {
  .section-compact.section, .section.section-compact { padding-block: 44px; }
  .aud-compact { padding: 24px; }
}

/* ===== Pop-up d’abonnement « Mon espace » : composants du site, texte centré et symétrique (26/10/2026) ===== */
.es-gatedlg { width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 2px solid var(--ink); border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: auto; }
.es-gatedlg::backdrop { background: rgba(17,17,17,.55); backdrop-filter: blur(2px); }
.es-gd-in { position: relative; padding: 40px 36px 32px; display: grid; gap: 28px; text-align: center; }
.es-gd-in .dialog-close { position: absolute; top: 16px; right: 16px; }
.es-gd-head { display: grid; justify-items: center; gap: 10px; }
.es-gd-head h2 { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; }
.es-gd-head p { margin: 0; max-width: 52ch; color: var(--muted); }
.es-gd-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.es-gd-feats li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 18px 12px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; }
.es-gd-feats .feat-ico { margin: 0; width: 48px; height: 48px; border-radius: 15px; }
.es-gd-feats .feat-ico svg { width: 24px; height: 24px; }
.es-gd-feats b { font-size: .95rem; line-height: 1.2; min-height: 2.4em; display: grid; place-items: center; }
.es-gd-feats li > span:last-child { font-size: .84rem; line-height: 1.4; color: var(--muted); }
.es-gd-buy { display: grid; justify-items: center; gap: 8px; }
.es-gd-price { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.es-gd-price strong { font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -.03em; }
.es-gd-price span { font-weight: 700; color: var(--muted); }
.es-gd-terms { margin: 0; font-size: .86rem; color: var(--muted); }
.es-gd-note { margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--yellow-soft); font-size: .88rem; }
.es-gd-cta { margin-top: 8px; min-width: 240px; justify-content: center; }
.es-gd-buy .link-more { margin-top: 6px; font-size: .9rem; }
@media (max-width: 820px) {
  .es-gd-in { padding: 32px 20px 24px; gap: 22px; text-align: left; }
  .es-gd-head { justify-items: start; padding-right: 30px; }
  .es-gd-feats { grid-template-columns: 1fr; gap: 8px; }
  .es-gd-feats li { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 14px; row-gap: 2px; padding: 12px 14px; border-radius: 16px; }
  .es-gd-feats .feat-ico { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 13px; }
  .es-gd-feats b { min-height: 0; display: block; }
  .es-gd-buy { justify-items: stretch; text-align: center; }
  .es-gd-cta { width: 100%; }
}

/* Page « Mon espace » sans abonnement : mêmes icônes et boutons que le site */
.es-gate-feats .feat-ico { margin: 0; width: 44px; height: 44px; border-radius: 14px; }
.es-gate-feats .feat-ico svg { width: 22px; height: 22px; }
.es-gate-buy .btn-primary { background: var(--yellow); color: var(--ink); width: 100%; justify-content: center; }
.es-gate-mcta { justify-content: center; }

/* ===== Audit 27/10/2026 : lisibilité, contrastes, mobile, tarifs ===== */
/* Surtitres : orange foncé lisible (5,2:1) sur fond clair ; orange vif conservé pour la pastille */
.eyebrow { color: #C2410C; }
.on-dark .eyebrow, .eyebrow.light, .section-dark .eyebrow, .audience-card.dark .eyebrow, .price-card.featured .eyebrow { color: var(--c-orange); }
/* WhatsApp : texte foncé sur le vert de la marque (10:1 au lieu de 2:1) */
.btn-wa, .btn-wa:hover { color: #0a0a0a; }
.wa-float, .wa-float span { color: #0a0a0a; }
.wa-float svg path:first-child { fill: #0a0a0a; }
@media (max-width: 720px) {
  .wa-float { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
  .wa-float svg { width: 28px; height: 28px; }
  .footer { padding-bottom: 96px; }
}
/* Plancher de taille de texte : 12 px pour toute information */
.course-cat, .course-body .course-cat { font-size: .75rem; }
.gbadge { font-size: .78rem; }
.pill-state, .card-label, .cert-kicker, .medal-kind, .cc-chip, .fcard-tag, .cf-tags, .ya-free, .yc-cert-k, .es-att-legal { font-size: .75rem; }
.hb span, .es-stats span, .guide-cover small, .coach-bubble small { font-size: .75rem; }
/* En-tête : les libellés ne passent jamais sur deux lignes */
.nav-links a { white-space: nowrap; }
/* Bouton de commande WhatsApp (tant que le paiement en ligne n'est pas branché) */
.btn-pay.btn-wa-order { background: #25d366; color: #0a0a0a; }
.btn-pay.btn-wa-order:hover { background: #1fb457; }
.checkout .secure { line-height: 1.45; }
.es-wanote { font-size: .85rem; color: var(--muted); margin: 4px 0 10px; line-height: 1.45; }
.form-msg .btn-row { margin-top: 10px; gap: 10px; }
/* Tarifs en un coup d'œil (accueil) */
.tarif-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 900px) { .tarif-grid { grid-template-columns: 1fr; } }
.tarif { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.tarif h3 { font-size: 1.2rem; margin: 0; }
.tarif ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; flex: 1; }
.tarif li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.tarif li:last-child { border-bottom: 0; padding-bottom: 0; }
.tarif li span { font-size: .92rem; color: var(--muted); line-height: 1.4; }
.tarif li strong { font-size: 1rem; white-space: nowrap; text-align: right; }
.tarif li strong small { font-weight: 500; color: var(--muted); margin-left: 2px; }
.tarif .btn { align-self: flex-start; }
/* Mobile : grilles longues repliées après 4 cartes */
@media (max-width: 720px) { .m-fold > .m-hide { display: none !important; } }
.m-more { display: none; }
@media (max-width: 720px) { .m-more { display: flex; justify-content: center; margin-top: 14px; } }
@media (min-width: 981px) and (max-width: 1440px) { .nav-links a { padding: 10px 9px; } .nav-actions { gap: 8px; } }
/* Mobile : rails horizontaux pour les sélections de l'accueil et du catalogue entreprises */
@media (max-width: 720px) {
  #parcours .cert-grid, #cours .course-grid, #catalogue-cours .course-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 16px 14px; margin: 0 -16px; scrollbar-width: none;
  }
  #parcours .cert-grid::-webkit-scrollbar, #cours .course-grid::-webkit-scrollbar, #catalogue-cours .course-grid::-webkit-scrollbar { display: none; }
  #parcours .cert-grid > *, #cours .course-grid > *, #catalogue-cours .course-grid > * { scroll-snap-align: start; }
}
.tarif ul { align-content: start; }
.tarif li { flex-wrap: wrap; }
.tarif li span { flex: 1 1 150px; }
.btn-pay.btn-wa-order [data-price-label] { display: none; }

/* Préparations pas encore ouvertes : « Être prévenu » à la place du paiement */
a.eadd { text-decoration: none; }
.notify-box { display: grid; gap: 12px; padding: 16px; border: 1.5px dashed #b9b6ae; border-radius: 12px; background: var(--yellow-soft); }
.notify-box p { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.45; }

/* Home : préparations disponibles maintenant (2 cartes) */
.cert-grid.ready-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 760px; }
@media (max-width: 560px) { .cert-grid.ready-grid { gap: 10px; } }
/* Préparation disponible : « Acheter » en bouton plein, pas en pointillés */
.ready-grid a.eadd { background: var(--yellow); border: 1.5px solid var(--yellow); }
.ready-grid a.eadd:hover { background: #ffd23f; border-color: var(--ink); }