:root {
  --paper: #f6fafd;
  --mist: #e8f2fa;
  --ice: #f3f7fc;
  --aqua: #8fd6ee;
  --sky: #52b2e4;
  --brand: #2f7ed8;
  --brand-text: #2569b8;   /* bleu royal lisible sur fond clair (AA) */
  --brand-strong: #1f5da8;
  --navy: #0a1931;
  --navy-2: #173e68;
  --ink: #0a1931;
  --muted: #53617c;
  --muted-2: #5c6880;
  --line: rgba(10, 25, 49, 0.1);
  --line-strong: rgba(10, 25, 49, 0.17);
  /* Mot accentue du titre : couleur pleine, halo, trait trace, balayage */
  --accent-ink: #1a5fc4;
  --accent-glow: rgba(82, 178, 228, 0.3);
  --accent-swash: rgba(82, 178, 228, 0.62);
  --accent-sweep: rgba(143, 214, 238, 0.5);
  --star: rgba(47, 126, 216, 0.42);
  --aurora-a: rgba(143, 214, 238, 0.72);
  --obj-glow: rgba(143, 214, 238, 0.5);
  --ring-track: rgba(10, 25, 49, 0.09);
  --grain-opacity: 0.05;
  --grain-blend: multiply;
  --aurora-b: rgba(47, 126, 216, 0.3);
  --aurora-c: rgba(203, 239, 248, 0.8);
  --streak: rgba(82, 178, 228, 0.55);
  --streak-head: rgba(47, 126, 216, 0.9);
  --grid-line: rgba(10, 25, 49, 0.035);
  --formula-ink: rgba(37, 105, 184, 0.2);
  --glass: rgba(255, 255, 255, 0.64);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-solid: rgba(255, 255, 255, 0.96);
  --success: #176a65;
  --success-soft: rgba(23, 106, 101, 0.1);
  --warning: #805b1a;
  --warning-soft: rgba(128, 91, 26, 0.11);
  --danger: #963f54;
  --shadow-sm: 0 1px 1px rgba(10, 25, 49, 0.025), 0 14px 38px rgba(10, 25, 49, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --shadow-md: 0 34px 88px rgba(10, 25, 49, 0.14), 0 10px 28px rgba(47, 126, 216, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --shadow-dark: 0 32px 84px rgba(5, 18, 39, 0.28);
  --radius-sm: 15px;
  --radius: 24px;
  --radius-lg: 34px;
  --radius-xl: 48px;
  --font-text: "Revicard Sans", "Segoe UI Variable Text", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Revicard Sans", "Segoe UI Variable Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .78, .22, 1);
  --content: 1280px;
  --gutter: clamp(20px, 5vw, 76px);
  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #f4f9ff;
  --mist: #12243a;
  --ice: #07111f;
  --aqua: #8fd6ee;
  --sky: #67c7ec;
  --brand: #61bfe8;
  --brand-text: #7fcdec;   /* cyan lisible sur fond nuit (AA) */
  --brand-strong: #8fd6ee;
  --navy: #eef5fc;
  --navy-2: #b9ddf0;
  --ink: #eef5fc;
  --muted: #a9b7c8;
  --muted-2: #7e90a7;
  --line: rgba(143, 214, 238, 0.13);
  --line-strong: rgba(143, 214, 238, 0.23);
  --accent-ink: #8fd6ee;
  --accent-glow: rgba(82, 178, 228, 0.24);
  --accent-swash: rgba(143, 214, 238, 0.6);
  --accent-sweep: rgba(203, 239, 248, 0.42);
  --star: rgba(203, 239, 248, 0.72);
  --aurora-a: rgba(47, 126, 216, 0.38);
  --obj-glow: rgba(47, 126, 216, 0.34);
  --ring-track: rgba(143, 214, 238, 0.14);
  --grain-opacity: 0.07;
  --grain-blend: overlay;
  --aurora-b: rgba(82, 178, 228, 0.26);
  --aurora-c: rgba(23, 62, 104, 0.68);
  --streak: rgba(143, 214, 238, 0.75);
  --streak-head: rgba(240, 251, 255, 0.95);
  --grid-line: rgba(143, 214, 238, 0.055);
  --formula-ink: rgba(143, 214, 238, 0.22);
  --glass: rgba(12, 27, 45, 0.68);
  --glass-strong: rgba(12, 27, 45, 0.84);
  --glass-solid: rgba(12, 27, 45, 0.97);
  --success: #73d0c7;
  --success-soft: rgba(67, 177, 166, 0.13);
  --warning: #edc77e;
  --warning-soft: rgba(217, 168, 77, 0.13);
  --danger: #ee91a7;
  --shadow-sm: 0 2px 2px rgba(0, 0, 0, 0.12), 0 18px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --shadow-md: 0 38px 92px rgba(0, 0, 0, 0.44), 0 10px 30px rgba(1, 8, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-dark: 0 40px 100px rgba(0, 0, 0, 0.48);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 84% -2%, rgba(143, 214, 238, .34), transparent 27rem),
    radial-gradient(circle at 8% 72%, rgba(82, 178, 228, .08), transparent 30rem),
    linear-gradient(145deg, #f7fbfe 0%, var(--ice) 54%, #eaf3fb 100%);
  color: var(--ink);
  font-family: var(--font-text);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color .28s var(--ease), background .28s var(--ease);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 86% 0%, rgba(82, 178, 228, .16), transparent 32rem),
    radial-gradient(circle at 5% 86%, rgba(47, 126, 216, .1), transparent 34rem),
    linear-gradient(145deg, #07111f 0%, #0a1626 54%, #081321 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(10, 25, 49, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 25, 49, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
html[data-theme="dark"] body::before { opacity: .065; filter: invert(1); }
body[data-page="accueil"]::before,
html[data-theme="dark"] body[data-page="accueil"]::before { opacity: 0; }
body.atlas-open { overflow: hidden; }

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
::selection { color: #fff; background: rgba(47, 126, 216, .76); }
:focus-visible { outline: 3px solid rgba(82, 178, 228, .35); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.ambient-orb {
  width: min(56vw, 760px);
  aspect-ratio: 1;
  position: fixed;
  z-index: -1;
  top: -280px;
  right: -220px;
  border-radius: 50%;
  border: 1px solid rgba(82, 178, 228, .12);
  box-shadow: 0 0 0 70px rgba(143, 214, 238, .035), 0 0 0 140px rgba(82, 178, 228, .022);
  pointer-events: none;
}

/* Floating shell */
.brand-island {
  min-height: 58px;
  position: fixed;
  z-index: 80;
  top: 20px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 15px 8px 10px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 18px;
  background: var(--glass-strong);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transition: transform .25s var(--ease), background .28s, border-color .28s;
}
.brand-island:hover { transform: translateY(-2px); }
.brand-island .brand-symbol { width: 40px; height: 40px; display: none; object-fit: contain; }
.brand-island .brand-wordmark { width: 132px; height: 34px; object-fit: contain; }
.brand-island .brand-wordmark.dark-logo { display: none; }
html[data-theme="dark"] .brand-island { border-color: rgba(143, 214, 238, .16); }
html[data-theme="dark"] .brand-island .light-logo { display: none; }
html[data-theme="dark"] .brand-island .dark-logo { display: block; }

.utility-island {
  position: fixed;
  z-index: 80;
  top: 20px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 18px;
  background: var(--glass-strong);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
html[data-theme="dark"] .utility-island { border-color: rgba(143, 214, 238, .16); }
.utility-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: transform .22s var(--ease), color .22s, background .22s;
}
.utility-button::before {
  content: "";
  width: 31px;
  height: 31px;
  position: absolute;
  border-radius: 50%;
  background: rgba(143, 214, 238, .2);
  transform: scale(.68);
  transition: transform .25s var(--ease);
}
.utility-button .icon { position: relative; z-index: 1; }
.utility-button:hover { color: var(--brand); transform: translateY(-2px) rotate(-3deg); }
.utility-button:hover::before { transform: scale(1); }
.utility-entry {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 13px;
  background: var(--navy);
  color: var(--paper);
  font-size: 14px;
  font-weight: 740;
  letter-spacing: -.01em;
  transition: transform .22s var(--ease), box-shadow .22s;
}
.utility-entry:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10, 25, 49, .16); }
html[data-theme="dark"] .utility-entry { color: #07111f; background: linear-gradient(125deg, #8fd6ee, #52b2e4); }

.atlas-dock {
  min-height: 72px;
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 23px;
  background: var(--glass-strong);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  transform: translateX(-50%);
  transition: transform .28s var(--ease), background .28s, border-color .28s;
}
html[data-theme="dark"] .atlas-dock { border-color: rgba(143, 214, 238, .17); }
.dock-link, .atlas-trigger {
  min-width: 90px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  white-space: nowrap;
  cursor: pointer;
  transition: color .22s, background .22s, transform .22s var(--ease);
}
.dock-link:hover { color: var(--ink); background: rgba(143, 214, 238, .11); transform: translateY(-2px); }
.dock-link.is-current { color: var(--ink); background: rgba(143, 214, 238, .22); }
.dock-link .icon { width: 18px; }
.atlas-trigger {
  min-width: 134px;
  color: var(--paper);
  background: linear-gradient(130deg, #0a1931, #173e68);
  box-shadow: 0 12px 25px rgba(10, 25, 49, .22);
}
.atlas-trigger:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(10, 25, 49, .27); }
.atlas-trigger .atlas-glyph { width: 22px; height: 22px; position: relative; }
.atlas-trigger .atlas-glyph::before,
.atlas-trigger .atlas-glyph::after,
.atlas-trigger .atlas-glyph span {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.atlas-trigger .atlas-glyph::before { top: 1px; left: 1px; }
.atlas-trigger .atlas-glyph::after { right: 1px; bottom: 1px; }
.atlas-trigger .atlas-glyph span { top: 2px; right: 2px; border-radius: 2px; transform: rotate(45deg); }
html[data-theme="dark"] .atlas-trigger { color: #07111f; background: linear-gradient(125deg, #8fd6ee, #52b2e4); box-shadow: 0 14px 34px rgba(32, 143, 194, .22); }

.atlas-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 17, 33, .26);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.atlas-overlay.is-open { opacity: 1; visibility: visible; }
.atlas-panel {
  width: min(1220px, 95vw);
  max-height: min(820px, 90vh);
  position: relative;
  overflow: auto;
  padding: clamp(27px, 4vw, 55px);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: clamp(28px, 4vw, 52px);
  background:
    radial-gradient(circle at var(--atlas-x, 76%) var(--atlas-y, 18%), rgba(143, 214, 238, .3), transparent 26rem),
    var(--glass-solid);
  box-shadow: 0 50px 150px rgba(3, 13, 29, .35);
  transform: translateY(22px) scale(.97);
  transition: transform .34s var(--ease);
}
.atlas-overlay.is-open .atlas-panel { transform: translateY(0) scale(1); }
html[data-theme="dark"] .atlas-panel { border-color: rgba(143, 214, 238, .2); }
.atlas-close {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--glass);
  cursor: pointer;
  transition: transform .22s, background .22s;
}
.atlas-close:hover { transform: rotate(5deg); background: rgba(143, 214, 238, .16); }
.atlas-heading { max-width: 780px; margin-bottom: 36px; }
.atlas-heading .eyebrow { margin-bottom: 12px; }
.atlas-heading h2 { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.atlas-heading p { max-width: 58ch; margin-top: 15px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.atlas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.atlas-group {
  min-height: 268px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: rgba(255, 255, 255, .34);
}
html[data-theme="dark"] .atlas-group { background: rgba(143, 214, 238, .025); }
.atlas-group > span { display: block; margin-bottom: 12px; color: var(--brand-text); font-size: 12px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.atlas-group a { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; min-height: 48px; padding: 6px 7px; border-radius: 13px; transition: background .2s, transform .2s; }
.atlas-group a:hover { background: rgba(143, 214, 238, .14); transform: translateX(3px); }
.atlas-group a > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(143, 214, 238, .18); color: var(--navy); }
.atlas-group a > i .icon { width: 16px; }
.atlas-group a b { font-size: 14px; line-height: 1.3; }
.atlas-group a > .icon { width: 15px; color: var(--muted-2); }
.atlas-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 18px 3px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.atlas-foot a { color: var(--brand-text); font-weight: 760; }

/* Layout and type */
.site-main { min-height: 100vh; padding: 100px var(--gutter) 132px; }
.container { width: min(100%, var(--content)); margin: 0 auto; }
.narrow { width: min(100%, 980px); margin-inline: auto; }
.prose-width { width: min(100%, 760px); }
.section { position: relative; padding: clamp(72px, 9vw, 136px) 0; }
.section.compact { padding-block: clamp(52px, 6vw, 86px); }
.section.flush-top { padding-top: 0; }
.section-divider { border-top: 1px solid var(--line); }
.eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow::before { display: none; }
.eyebrow.no-line::before { display: none; }
.eyebrow.pill { padding: 8px 11px; border: 1px solid rgba(47, 126, 216, .12); border-radius: 999px; background: rgba(143, 214, 238, .11); letter-spacing: .08em; }
.display, .page-title, .section-title, .card-display, .conversion h2, .switch-copy h3, .showcase-copy h3, .atlas-heading h2 { font-family: var(--font-display); }
.display, .page-title, .section-title {
  max-width: 1100px;
  color: var(--ink);
  font-weight: 710;
  line-height: .98;
  letter-spacing: -.065em;
}
.display { font-size: clamp(38px, min(4.4vw, 8.6vh), 80px); line-height: .97; }
.page-title { font-size: clamp(34px, 4.3vw, 80px); line-height: 1.0; }
.section-title { font-size: clamp(30px, 3.6vw, 58px); }
.section-title.small { font-size: clamp(26px, 2.8vw, 40px); }
.display .accent, .page-title .accent, .section-title .accent { color: var(--accent-ink); }
/* Sur un fond sombre, le bleu royal fonce n'est plus lisible : l'accent bascule
   sur la variante claire de la palette. */
.dark-surface .accent, .dark-card .accent, .conversion .accent { color: var(--aqua); }
.display .soft, .page-title .soft, .section-title .soft { color: var(--muted-2); font-weight: 580; }
.lead { max-width: 62ch; color: var(--muted); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.62; letter-spacing: -.012em; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(32px, 5vw, 62px); }
.section-head > div:first-child { max-width: 970px; }
.section-head .eyebrow { margin-bottom: 15px; }
.section-head .lead { max-width: 540px; }
.section-head.center { display: block; max-width: 920px; margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { margin-inline: auto; }
.section-head.center .lead { margin: 20px auto 0; }
.kicker { color: var(--muted); font-size: 14px; font-weight: 680; letter-spacing: .01em; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-text); font-size: 14px; font-weight: 760; }
.text-link .icon { width: 16px; transition: transform .2s; }
.text-link:hover .icon { transform: translateX(4px); }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 790;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s, background .22s, border-color .22s;
}
.button:hover { transform: translateY(-2px); }
.button.primary { color: var(--paper); background: linear-gradient(130deg, #0a1931, #173e68); box-shadow: 0 15px 30px rgba(10, 25, 49, .18); }
.button.primary:hover { box-shadow: 0 20px 42px rgba(10, 25, 49, .24); }
html[data-theme="dark"] .button.primary { color: #07111f; background: linear-gradient(125deg, #8fd6ee, #52b2e4); }
.button.secondary { color: var(--ink); border-color: var(--line-strong); background: var(--glass); backdrop-filter: blur(16px); }
.button.secondary:hover { background: var(--glass-strong); border-color: rgba(82, 178, 228, .34); }
.button.small { min-height: 44px; padding-inline: 16px; border-radius: 13px; font-size: 13px; }
.button .icon { width: 17px; }
.glass {
  border: 1px solid rgba(255, 255, 255, .74);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
html[data-theme="dark"] .glass { border-color: rgba(143, 214, 238, .13); }
.surface {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}
.dark-surface {
  color: #f4f9ff;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 88% 8%, rgba(82, 178, 228, .22), transparent 18rem),
    linear-gradient(145deg, #08172e, #173e68);
  box-shadow: var(--shadow-dark);
}
.dark-surface h2, .dark-surface h3, .dark-surface b, .dark-surface strong { color: #f4f9ff; }
.dark-surface p { color: rgba(239, 247, 255, .7); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
html[data-theme="dark"] .tag { background: rgba(143, 214, 238, .045); }
.tag .icon { width: 13px; }
.icon-box {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: rgba(143, 214, 238, .2);
  color: var(--navy);
}
.icon-box .icon { width: 21px; }
.icon-box.small { width: 36px; height: 36px; border-radius: 11px; }
.icon-box.small .icon { width: 16px; }
.number-label { color: var(--brand-text); font: 740 12px "SFMono-Regular", Consolas, monospace; letter-spacing: .07em; }
.muted { color: var(--muted); }
.fine { color: var(--muted-2); font-size: 13px; line-height: 1.5; }

/* ===================================================================== HERO */
/* Deux colonnes. A gauche le texte, a droite un objet unique : une fiche vue
   grande, coupee par le bord de l'ecran, la pile des autres derriere, une carte
   et un score poses devant. Le corps de la fiche s'estompe : on percoit une page
   structuree, on ne la lit pas. Aucun bouton, aucune explication dans l'image. */
.home-hero {
  min-height: clamp(610px, calc(100svh - 96px), 840px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(14px, 2.2vh, 30px) 0 clamp(24px, 4vh, 54px);
}
body[data-page="accueil"] .site-main { padding-top: 82px; overflow-x: clip; }
.home-hero > *:not(.hero-canvas) { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(28px, 3.4vw, 56px);
}
.hero-lead { padding-bottom: clamp(6px, 1.6vh, 22px); }

/* ------------------------------------------------------------- Fond en couches */
.hero-canvas {
  position: absolute;
  z-index: 0;
  top: -104px;
  bottom: -94px;
  left: 50%;
  width: 100vw;
  overflow: clip;
  pointer-events: none;
  transform: translateX(-50%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 78%, transparent 100%);
}
/* Nappes lumineuses : elles occupent l'espace sans dessiner de forme */
.aurora { position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; }
.aurora-1 {
  width: 44vw; height: 44vw; top: -12vw; left: -10vw;
  background: radial-gradient(circle, var(--aurora-a), transparent 68%);
  animation: aurora-a 38s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 54vw; height: 54vw; top: -20vw; right: -14vw;
  background: radial-gradient(circle, var(--aurora-b), transparent 66%);
  animation: aurora-b 46s ease-in-out infinite alternate;
}
.aurora-3 {
  width: 64vw; height: 42vw; bottom: -22vw; left: 14vw;
  background: radial-gradient(circle, var(--aurora-c), transparent 70%);
  animation: aurora-c 54s ease-in-out infinite alternate;
}
@keyframes aurora-a { to { transform: translate3d(6vw, 4vw, 0) scale(1.12); } }
@keyframes aurora-b { to { transform: translate3d(-5vw, 5vw, 0) scale(1.09); } }
@keyframes aurora-c { to { transform: translate3d(4vw, -3vw, 0) scale(1.14); } }

/* Champ de formules : elles derivent et rebondissent sur les bords. Tres peu
   opaques, elles donnent une matiere vivante sans jamais capter la lecture. */
.hero-formulas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint size;
}
.formula {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  color: var(--formula-ink);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 600;
  letter-spacing: -.01em;
  opacity: .84;
  text-shadow: 0 0 18px rgba(82, 178, 228, .18);
  will-change: transform;
}
/* Grain : il casse le lisse des degrades, sans motif visible */
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- Bloc de texte */
.hero-lead .display { max-width: 15ch; text-wrap: balance; }
.hero-lead .lead { margin-top: 20px; max-width: 46ch; }
.hero-lead .button-row { margin-top: 28px; }
.hero-lead .button.primary { position: relative; }
.hero-lead .button.primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 10px -6px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--brand), var(--sky));
  filter: blur(17px);
  opacity: .4;
  transition: opacity .3s var(--ease);
}
.hero-lead .button.primary:hover::after { opacity: .62; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass);
  color: var(--brand-strong);
  font-size: 11.5px;
  font-weight: 780;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-tag i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 0 4px rgba(82, 178, 228, .18);
  animation: tag-pulse 3s ease-in-out infinite;
}
@keyframes tag-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(82, 178, 228, .18); } 50% { box-shadow: 0 0 0 7px rgba(82, 178, 228, .07); } }

/* Le dernier groupe de mots s'ecrit sur sa propre ligne. Sa hauteur reste
   stable pendant l'effacement : aucun texte voisin ne saute. */
.accent { position: relative; display: inline-block; }
.hero-word {
  width: max-content;
  max-width: 100%;
  min-height: 1.04em;
  display: block;
  position: relative;
  margin-top: .06em;
  white-space: nowrap;
  isolation: isolate;
}
.hero-word::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -7% 16%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(60% 70% at 50% 50%, var(--accent-glow), transparent 72%);
  filter: blur(15px);
}
.accent:not(.hero-word)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -7% 16%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(60% 70% at 50% 50%, var(--accent-glow), transparent 72%);
  filter: blur(15px);
}
/* Soulignement trace a la main : une passe large qui remonte legerement, puis
   une seconde passe plus fine, comme un retour de feutre. L'epaisseur du trait
   ne suit pas l'etirement horizontal grace a vector-effect. */
/* Soulignement au feutre : une forme pleine, fine a l'attaque, epaisse au
   milieu, effilee a la sortie. Un trace uniforme au stroke restait plat, et la
   seconde passe donnait un trait detache. Le trait se dessine de gauche a
   droite par un masque qui s'ouvre. */
.hero-swash {
  width: 103%;
  height: .34em;
  position: absolute;
  left: -.025em;
  bottom: -.17em;
  overflow: visible;
  pointer-events: none;
  fill: var(--accent-swash);
  stroke: none;
  clip-path: inset(0 100% 0 0);
  animation: swash-draw .78s cubic-bezier(.32, .72, .3, 1) .45s forwards;
}
@keyframes swash-draw { to { clip-path: inset(0 -4% 0 0); } }

/* ---------------------------------------------------------------- Paquet du hero */
/* Quatre cartes empilees. La pile ne bouge jamais de place : seule la carte du
   dessus change, donc la composition reste la meme a chaque instant. */
.hero-deck {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.4vh, 18px);
  align-content: center;
  position: relative;
  isolation: isolate;
  touch-action: pan-y;
}
.deck-glow {
  position: absolute;
  z-index: 0;
  inset: -14% -12% -6%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(48% 52% at 52% 46%, var(--obj-glow), transparent 72%);
  filter: blur(34px);
}
/* La scene reserve physiquement la place des cartes inclinees. Elle ne rogne
   ni le verre, ni les ombres, ni le halo. */
.deck-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 48px 52px 12px 8px;
  overflow: visible;
}
.deck-stack {
  width: clamp(282px, 26vw, 386px);
  height: clamp(444px, 53vh, 520px);
  position: relative;
  perspective: 1400px;
}
.deck-card {
  /* La carte du hero garde exactement la meme palette en theme clair et en
     theme sombre. Les jetons d'encre sont redefinis ici, donc chaque regle
     enfant qui les utilise suit sans avoir a etre dupliquee. */
  --deck-face: #15304e;
  --deck-line: rgba(143, 214, 238, .2);
  --deck-inset: #0e2440;
  --deck-inset-line: rgba(143, 214, 238, .15);
  --deck-accent-soft: rgba(143, 214, 238, .15);
  --deck-accent-line: rgba(143, 214, 238, .34);
  --deck-shadow: 0 16px 34px rgba(4, 12, 24, .3);
  --deck-foot-ink: #9db4cd;
  --ink: #eef5fc;
  --muted: #a9b7c8;
  --muted-2: #7e90a7;
  --aqua: #8fd6ee;
  --brand: #61bfe8;
  --brand-text: #7fcdec;
  --brand-strong: #8fd6ee;
  --line: rgba(143, 214, 238, .13);
  --line-strong: rgba(143, 214, 238, .23);
  --success: #73d0c7;
  --success-soft: rgba(67, 177, 166, .16);
  --danger: #ee91a7;
  --ring-track: rgba(143, 214, 238, .14);
  color: var(--ink);
  position: absolute;
  inset: 0;
  padding: clamp(20px, 1.9vw, 28px);
  border: 1px solid var(--deck-line);
  border-radius: clamp(20px, 1.9vw, 26px);
  background: var(--deck-face);
  /* Les cartes du dessous ne portent pas d'ombre : quatre ombres empilees
     formaient une tache sombre derriere la pile. Seule celle du dessus en a. */
  box-shadow: none;
  cursor: pointer;
  transform-origin: 50% 92%;
  transition: transform .46s var(--ease), opacity .3s var(--ease), box-shadow .3s;
  touch-action: pan-y;
  user-select: none;
}
/* Positions dans la pile : la carte partante repasse dessous */
.deck-card[data-pos="0"] { z-index: 4; transform: none; box-shadow: var(--deck-shadow); }
.deck-card[data-pos="1"] { z-index: 3; transform: translate(13px, -13px) rotate(2.6deg) scale(.972); }
.deck-card[data-pos="2"] { z-index: 2; transform: translate(26px, -25px) rotate(5deg) scale(.944); }
.deck-card[data-pos="3"] { z-index: 1; transform: translate(38px, -36px) rotate(7.2deg) scale(.916); }
.deck-card[data-pos="0"]:hover { border-color: var(--deck-accent-line); }
.deck-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* La carte sortante descend et s'efface sur place : aucune excursion laterale,
   donc aucun elargissement de page et aucune secousse sur mobile. */
.deck-card.is-tucking { z-index: 0; opacity: 0; transform: translateY(30px) scale(.94); }
/* Seule la carte du dessus montre son contenu : les autres ne sont que des tranches */
.deck-card[data-pos="0"] .deck-body { opacity: 1; }
.deck-card .deck-body { opacity: 0; transition: opacity .3s var(--ease); }
.deck-body { height: 100%; display: flex; flex-direction: column; }
/* Le corps de la carte se centre dans la hauteur restante : les cartes courtes
   ne laissent pas un trou avant le pied. */
.deck-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 14px 0; }
.deck-main-flush { padding-bottom: 6px; }
.deck-main-flush .deck-flip { margin-top: 0; }
.flip-hint .icon { transition: transform .25s var(--ease); }
.deck-flip:hover .flip-hint .icon { transform: translateX(2px); }
/* L'explication n'apparait qu'une fois la reponse donnee */
/* La place de l'explication est reservee des le depart : repondre ne change
   pas la hauteur de la carte, donc rien ne peut deborder ni sauter. */
.deck-explain {
  min-height: 2.9em;
  margin-top: 12px;
  opacity: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  transition: opacity .34s var(--ease) .08s;
}
.deck-options.is-answered ~ .deck-explain { opacity: 1; }

.deck-kicker { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10.5px; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.deck-kicker b {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--aqua);
  color: #07111f;
  font-size: 10.5px;
  letter-spacing: 0;
}
.deck-subject { display: block; margin-bottom: 11px; color: var(--brand-text); font-size: 10px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.deck-card h2 { margin-top: 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 760; line-height: 1.22; letter-spacing: -.028em; }
.deck-text { margin-top: 11px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.deck-mini { display: grid; gap: 7px; margin-top: 14px; list-style: none; }
.deck-mini li { position: relative; padding-left: 15px; color: var(--muted); font-size: 12.5px; line-height: 1.4; transition: color .32s, transform .32s var(--ease), opacity .32s; }
.deck-mini li::before { content: ""; width: 5px; height: 5px; position: absolute; top: 7px; left: 0; border-radius: 50%; background: var(--brand); }
.deck-card[data-demo="fiche"][data-pos="0"] .deck-mini li { opacity: .48; transform: translateX(-3px); }
.deck-card[data-demo="fiche"][data-pos="0"] .deck-mini li.is-highlighted { color: var(--ink); opacity: 1; transform: none; }
.deck-card[data-demo="fiche"][data-pos="0"] .deck-mini li.is-highlighted::before { box-shadow: 0 0 0 5px rgba(82, 178, 228, .12); }
.deck-foot { margin-top: auto; padding-top: 16px; color: var(--deck-foot-ink); font-size: 11px; font-weight: 640; letter-spacing: .03em; }

.deck-question { margin-top: 0; color: var(--ink); font-size: 13px; font-weight: 640; line-height: 1.5; }
.deck-options { display: grid; gap: 6px; margin-top: 12px; list-style: none; }
.deck-options button {
  width: 100%;
  display: flex; gap: 9px; align-items: center;
  padding: 8px 11px;
  border: 1px solid var(--deck-inset-line);
  border-radius: 12px;
  background: var(--deck-inset);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.deck-options button:hover { border-color: var(--deck-accent-line); }
.deck-options .opt-mark { width: 15px; height: 15px; flex: 0 0 auto; border: 1.5px solid var(--deck-accent-line); border-radius: 50%; transition: background .2s, border-color .2s; }
.deck-options.is-answered button { cursor: default; }
.deck-options.is-answered button:not(.is-right):not(.is-wrong) { opacity: .5; }
.deck-options button.is-right { border-color: rgba(23, 106, 101, .38); background: var(--success-soft); color: var(--ink); font-weight: 650; }
.deck-options button.is-right .opt-mark {
  border-color: var(--success);
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2440' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.deck-options button.is-wrong { border-color: rgba(150, 63, 84, .34); color: var(--danger); }
.deck-options button.is-wrong .opt-mark { border-color: var(--danger); }

.deck-flip { position: relative; min-height: clamp(180px, 22vh, 236px); transform-style: preserve-3d; transition: transform .58s var(--ease); }
.deck-flip.is-flipped { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--deck-inset-line);
  border-radius: 16px;
  background: var(--deck-inset);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-face p { color: var(--ink); font-size: 14px; font-weight: 620; line-height: 1.45; }
.flip-back { transform: rotateY(180deg); border-color: var(--deck-accent-line); background: var(--deck-accent-soft); }
.flip-back p { font-weight: 560; font-size: 13px; }
.flip-hint { display: inline-flex; gap: 6px; align-items: center; color: var(--brand-text); font-size: 11px; font-weight: 700; }
.flip-hint .icon { width: 13px; }

.deck-score { display: flex; align-items: center; gap: 15px; }
.deck-ring { width: clamp(76px, 7vw, 92px); height: clamp(76px, 7vw, 92px); flex: 0 0 auto; transform: rotate(-90deg); }
.deck-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.deck-ring .ring-track { stroke: var(--ring-track); }
.deck-ring .ring-value { stroke: var(--brand); transition: stroke-dasharray 1.35s var(--ease); }
.deck-score b { display: block; font-size: clamp(28px, 2.6vw, 36px); font-weight: 780; line-height: 1; letter-spacing: -.05em; }
.deck-score b small { font-size: .42em; }
.deck-score > div > span { display: block; margin-top: 6px; color: var(--muted); font-size: 10.5px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.deck-proofs { display: grid; gap: 10px; margin-top: 18px; list-style: none; }
.deck-proofs li { display: grid; grid-template-columns: 68px minmax(0, 1fr) 26px; gap: 10px; align-items: center; }
.deck-proofs span { color: var(--muted); font-size: 11.5px; font-weight: 640; }
.deck-proofs i { height: 5px; overflow: hidden; border-radius: 9px; background: var(--ring-track); }
.deck-proofs i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--aqua)); transition: width 1.1s var(--ease); }
.deck-proofs em { color: var(--brand-text); font: 740 12px "SFMono-Regular", Consolas, monospace; font-style: normal; text-align: right; }

/* Un compteur, un ruban unique et une commande pause. Aucun chapelet de
   tirets, quel que soit le nombre de cartes. */
.deck-controls {
  width: min(100%, 286px);
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
  position: relative;
  z-index: 5;
}
.deck-step {
  min-width: 36px;
  color: var(--muted-2);
  font: 700 10.5px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .04em;
}
.deck-progress {
  width: 100%;
  height: 3px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ring-track);
}
.deck-progress i {
  height: 100%;
  display: block;
  transform-origin: 0 50%;
  transform: scaleX(0);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--aqua));
}
.deck-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--glass);
  color: var(--muted);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: color .2s, background .2s, transform .2s;
}
.deck-toggle:hover { color: var(--brand-text); background: var(--glass-strong); transform: translateY(-1px); }
.deck-toggle .icon { width: 14px; }
.hero-deck.is-static .deck-controls { grid-template-columns: auto minmax(0, 1fr); }
.hero-deck.is-static .deck-toggle { display: none; }

/* ------------------------------------------- Barre de statistiques du hero */
.stat-band { padding: clamp(12px, 1.1vw, 18px); border-radius: var(--radius-lg); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, .8vw, 16px); }
.stat-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  column-gap: 8px;
  row-gap: 3px;
  position: relative;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.stat-cell .stat-note { grid-column: 1 / -1; }
.stat-cell + .stat-cell { border-left: 1px solid var(--line); }
.stat-cell:hover, .stat-cell.is-open { border-color: rgba(82, 178, 228, .28); background: rgba(143, 214, 238, .12); transform: translateY(-2px); }
.stat-cell strong { font-size: clamp(25px, 2vw, 34px); line-height: 1.05; letter-spacing: -.05em; white-space: nowrap; }
.stat-label { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.stat-note { color: var(--muted); font-size: 13px; line-height: 1.4; }
.stat-more { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 10px; right: 12px; color: var(--brand-text); font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .25s; }
.stat-more .icon { width: 12px; }
.stat-cell:hover .stat-more, .stat-cell:focus-visible .stat-more, .stat-cell.is-open .stat-more { opacity: 1; }
.stat-footnote { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.stat-detail { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass-strong); animation: panel-in .35s var(--ease) both; }
.stat-detail h3 { margin-bottom: 12px; font-size: 17px; letter-spacing: -.02em; }
.stat-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.stat-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px; border-radius: 12px; background: rgba(143, 214, 238, .12); font-size: 14px; }
.stat-rows span { color: var(--muted); }
.stat-rows b { color: var(--ink); font-weight: 740; white-space: nowrap; }
.stat-detail .fine { margin-top: 12px; }

/* ============================================================ HERO SECONDAIRE */
.page-hero {
  min-height: 0;
  display: grid;
  align-items: start;
  position: relative;
  padding: clamp(30px, 3.2vw, 52px) clamp(24px, 3.4vw, 56px) clamp(30px, 3.2vw, 48px);
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.page-hero.has-aside { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); align-items: center; gap: clamp(28px, 4vw, 60px); }
.page-hero::before { content: ""; width: 430px; height: 430px; position: absolute; top: -230px; right: -90px; border: 1px solid rgba(82, 178, 228, .15); border-radius: 50%; box-shadow: 0 0 0 60px rgba(143, 214, 238, .035), 0 0 0 120px rgba(82, 178, 228, .022); }
.page-hero::after { content: ""; width: 250px; height: 180px; position: absolute; right: 6%; bottom: -120px; border-radius: 48% 52% 42% 58%; background: linear-gradient(135deg, rgba(143, 214, 238, .3), rgba(47, 126, 216, .08)); filter: blur(1px); transform: rotate(-8deg); }
.page-hero-content { max-width: 980px; position: relative; z-index: 2; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero .page-title { max-width: 22ch; }
.page-hero .lead { margin-top: 20px; }
.page-hero .button-row { margin-top: 26px; }
.page-hero-aside { position: relative; z-index: 2; }
.page-hero.dark-surface::after { background: linear-gradient(135deg, rgba(143, 214, 238, .26), rgba(255, 255, 255, .04)); }
.page-hero.dark-surface .page-title { color: #f4f9ff; }
.page-hero.dark-surface .lead { color: rgba(239, 247, 255, .74); }
.page-hero.dark-surface .hero-rotator { color: rgba(239, 247, 255, .78); }
.page-hero.dark-surface .hero-rotator b { color: #a8e2f7; }

/* Mot anime des hero secondaires : largeur reservee, aucun decalage */
.hero-rotator { min-height: 1.8em; display: flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--muted); font-size: 15px; }
.hero-rotator b { display: inline-block; min-width: 9ch; color: var(--brand-text); font-weight: 760; transition: opacity .24s var(--ease), transform .24s var(--ease); }
.hero-rotator b.is-swapping { opacity: 0; transform: translateY(-6px); }

/* Grids and cards */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.asym-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 20px; }
.split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); align-items: center; gap: clamp(42px, 7vw, 110px); }
.split.reverse { grid-template-columns: minmax(420px, 1.08fr) minmax(0, .92fr); }
.card {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  transition: transform .28s var(--ease), box-shadow .28s, border-color .28s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(82, 178, 228, .24); }
.card h3 { margin: 18px 0 9px; font-size: clamp(20px, 1.5vw, 26px); line-height: 1.18; letter-spacing: -.03em; }
.card p { max-width: 58ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.card .text-link { margin-top: 22px; }
.card .card-index { position: absolute; top: 23px; right: 23px; color: var(--muted-2); font: 700 12px "SFMono-Regular", Consolas, monospace; }
.card.large { min-height: 390px; }
.card.tinted { background: linear-gradient(145deg, rgba(203, 239, 248, .55), rgba(255, 255, 255, .5)); }
html[data-theme="dark"] .card.tinted { background: linear-gradient(145deg, rgba(23, 62, 104, .58), rgba(12, 27, 45, .76)); }
.card.dark-card { color: #f4f9ff; background: linear-gradient(145deg, #09172d, #173e68); border-color: rgba(255, 255, 255, .1); box-shadow: var(--shadow-dark); }
.card.dark-card h3 { color: #f4f9ff; }
.card.dark-card p { color: rgba(239, 247, 255, .68); }
.card.dark-card .icon-box { color: #07111f; background: #8fd6ee; }
.card-line { height: 1px; margin: 22px 0; background: var(--line); }
.metric-big { display: flex; align-items: flex-end; gap: 7px; margin: 18px 0 8px; }
.metric-big strong { font-size: clamp(40px, 4vw, 62px); line-height: .85; letter-spacing: -.055em; }
.metric-big span { color: var(--muted); font-size: 14px; }
.card-list { display: grid; gap: 13px; margin-top: 23px; }
.card-list li { display: flex; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.card-list li::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; margin-top: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(82, 178, 228, .1); }
.card-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; padding: 4px 4px 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.card-rail > * { scroll-snap-align: start; }

/* Method and product visualizations */
.method-chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.method-step { min-height: 310px; position: relative; padding: 30px; border: 1px solid var(--line); background: var(--glass); }
.method-step:first-child { border-radius: 28px 0 0 28px; }
.method-step:last-child { border-radius: 0 28px 28px 0; }
.method-step + .method-step { border-left: 0; }
.method-step::after { content: ""; width: 28px; height: 28px; position: absolute; z-index: 3; top: 49px; right: -15px; border: 1px solid var(--line); border-radius: 50%; background: var(--glass-solid); box-shadow: var(--shadow-sm); }
.method-step:last-child::after { display: none; }
.method-step .number-label { margin-bottom: 30px; }
.method-step h3 { max-width: 260px; margin-bottom: 11px; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.16; letter-spacing: -.03em; }
.method-step p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.method-step .step-proof { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--brand-text); font-size: 13px; font-weight: 740; }

.showcase {
  min-height: 650px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-radius: 34px;
}
.showcase-tabs { display: flex; flex-direction: column; gap: 7px; }
.showcase-tab {
  min-height: 72px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .22s, color .22s, transform .22s;
}
.showcase-tab:hover { color: var(--ink); transform: translateX(2px); }
.showcase-tab.is-active { color: var(--ink); border-color: var(--line); background: var(--glass-strong); box-shadow: var(--shadow-sm); }
.showcase-tab b, .showcase-tab small { display: block; }
.showcase-tab b { font-size: 14px; }
.showcase-tab small { margin-top: 3px; color: var(--muted-2); font-size: 12px; }
.showcase-stage { min-height: 430px; position: relative; overflow: hidden; border-radius: 25px; background: linear-gradient(145deg, rgba(232, 242, 250, .78), rgba(203, 239, 248, .3)); }
html[data-theme="dark"] .showcase-stage { background: linear-gradient(145deg, rgba(7, 17, 31, .84), rgba(23, 62, 104, .48)); }
.showcase-panel { min-height: 100%; display: none; position: relative; padding: clamp(22px, 3vw, 44px); animation: panel-in .45s var(--ease) both; }
.showcase-panel.is-active { display: grid; grid-template-columns: minmax(0, .85fr) minmax(340px, 1.15fr); align-items: center; gap: clamp(24px, 3vw, 46px); }
.showcase-copy .eyebrow { margin-bottom: 15px; }
.showcase-copy h3 { font-size: clamp(26px, 2.6vw, 42px); line-height: 1.08; letter-spacing: -.04em; }
.showcase-copy p { margin-top: 15px; max-width: 46ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.showcase-copy .tag-row { margin-top: 22px; }
.product-mock {
  min-height: 420px;
  position: relative;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 28px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 30px 70px rgba(10, 25, 49, .16);
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}
html[data-theme="dark"] .product-mock { border-color: rgba(143, 214, 238, .16); background: rgba(10, 25, 45, .76); }
.mock-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mock-top b { font-size: 13px; }
.mock-top span { color: var(--muted); font: 700 11px "SFMono-Regular", Consolas, monospace; }
.mock-title { margin: 26px 0 17px; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.25; letter-spacing: -.025em; }
.mock-lines { display: grid; gap: 10px; }
.mock-lines i { height: 8px; display: block; border-radius: 9px; background: rgba(47, 126, 216, .08); }
.mock-lines i:nth-child(2) { width: 84%; }
.mock-lines i:nth-child(3) { width: 69%; }
.mock-callout { margin-top: 25px; padding: 16px; border-left: 3px solid var(--brand); border-radius: 0 14px 14px 0; background: rgba(143, 214, 238, .13); color: var(--muted); font-size: 14px; line-height: 1.5; }
.mock-options { display: grid; gap: 10px; margin-top: 18px; }
.mock-option { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; }
.mock-option.is-selected { color: var(--ink); border-color: rgba(82, 178, 228, .38); background: rgba(143, 214, 238, .12); }
.mock-option b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--glass-solid); font-size: 12px; }
.mock-flash { min-height: 310px; display: grid; place-items: center; padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(203, 239, 248, .38), rgba(255, 255, 255, .62)); text-align: center; }
html[data-theme="dark"] .mock-flash { background: linear-gradient(145deg, rgba(23, 62, 104, .48), rgba(10, 25, 45, .72)); }
.mock-flash strong { max-width: 440px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.28; letter-spacing: -.028em; }
.mock-flash span { display: block; margin-top: 18px; color: var(--muted); font-size: 13px; }
.mock-chart { height: 235px; display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 9px; margin-top: 30px; padding-top: 20px; border-bottom: 1px solid var(--line); }
.mock-chart i { display: block; border-radius: 9px 9px 3px 3px; background: linear-gradient(to top, var(--brand), var(--aqua)); transform-origin: bottom; animation: grow-y .9s var(--ease) both; }
.mock-thread { display: grid; gap: 12px; margin-top: 24px; }
.mock-post { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
.mock-post b { font-size: 14px; }
.mock-post p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Programs */
.program-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 25px; }
.filter-button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--glass);
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
  cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
}
.filter-button:hover { transform: translateY(-1px); color: var(--ink); }
.filter-button.is-active { color: var(--paper); background: var(--navy); }
html[data-theme="dark"] .filter-button.is-active { color: #07111f; background: var(--aqua); }
.program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.program-card { min-height: 390px; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 27px; border-radius: 28px; }
.program-card::after { content: ""; width: 170px; height: 170px; position: absolute; top: -76px; right: -60px; border: 1px solid rgba(82, 178, 228, .18); border-radius: 50%; box-shadow: 0 0 0 30px rgba(143, 214, 238, .04); }
.program-card .program-code { color: var(--brand-text); font: 760 12px "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; }
.program-card h3 { margin: 26px 0 10px; font-size: clamp(23px, 1.9vw, 30px); line-height: 1.12; letter-spacing: -.035em; }
.program-card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.program-card .tag-row { margin-top: 20px; }
.program-card .program-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: auto 0 24px; padding-top: 30px; }
.program-meta span { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .28); }
html[data-theme="dark"] .program-meta span { background: rgba(143, 214, 238, .035); }
.program-meta b, .program-meta small { display: block; }
.program-meta b { font-size: 22px; letter-spacing: -.03em; }
.program-meta small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.subject-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.subject-item { min-height: 148px; display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); transition: transform .22s, border-color .22s, box-shadow .22s; }
.subject-item:hover { transform: translateY(-3px); border-color: rgba(82, 178, 228, .25); box-shadow: var(--shadow-sm); }
.subject-item .subject-code { width: 58px; min-height: 44px; display: grid; place-items: center; padding: 4px; border-radius: 13px; background: rgba(143, 214, 238, .22); color: var(--brand-strong); font: 740 11px/1.25 "SFMono-Regular", Consolas, monospace; text-align: center; }
.subject-item h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.subject-item p { margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Pricing */
.pricing-control { width: fit-content; display: flex; align-items: center; gap: 5px; margin: 0 auto 36px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); box-shadow: var(--shadow-sm); }
.pricing-control button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 760; cursor: pointer; transition: color .2s, background .2s; }
.pricing-control button.is-active { color: var(--paper); background: var(--navy); }
html[data-theme="dark"] .pricing-control button.is-active { color: #07111f; background: var(--aqua); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.price-card { min-height: 600px; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 30px; background: var(--glass); box-shadow: var(--shadow-sm); }
.price-card.is-featured { color: #f4f9ff; border-color: rgba(255, 255, 255, .12); background: radial-gradient(circle at 90% 0%, rgba(82, 178, 228, .27), transparent 17rem), linear-gradient(145deg, #08172e, #173e68); box-shadow: var(--shadow-dark); transform: translateY(-12px); }
.price-card.is-featured h3, .price-card.is-featured strong, .price-card.is-featured b { color: #f4f9ff; }
.price-card.is-featured p, .price-card.is-featured li, .price-card.is-featured .price-suffix { color: rgba(239, 247, 255, .7); }
.price-badge { width: fit-content; min-height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: rgba(143, 214, 238, .22); color: var(--brand-strong); font-size: 12px; font-weight: 780; text-transform: uppercase; letter-spacing: .08em; }
.price-card.is-featured .price-badge { color: #07111f; background: #8fd6ee; }
.price-card h3 { margin: 22px 0 8px; font-size: clamp(21px, 1.7vw, 27px); letter-spacing: -.03em; }
.price-card > p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.price { display: flex; align-items: flex-end; gap: 7px; margin: 31px 0 5px; }
.price strong { font-size: clamp(40px, 4vw, 60px); line-height: .85; letter-spacing: -.055em; }
.price strong small { font-size: .38em; font-weight: 720; letter-spacing: -.015em; vertical-align: baseline; }
.price-suffix { color: var(--muted); font-size: 14px; font-weight: 640; }
.price-note { min-height: 22px; color: var(--muted-2); font-size: 13px; }
.price-list { display: grid; gap: 13px; margin: 30px 0; padding-top: 25px; border-top: 1px solid var(--line); }
.price-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.price-list .icon { width: 15px; color: var(--success); }
.price-card .button { width: 100%; margin-top: auto; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 25px; background: var(--glass); }
.compare-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 17px 19px; border-bottom: 1px solid var(--line); text-align: center; font-size: 14px; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table thead th { color: var(--ink); background: rgba(143, 214, 238, .07); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.compare-table tbody th { color: var(--ink); font-size: 14px; font-weight: 680; }
.compare-table td { color: var(--muted); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table .icon { width: 15px; margin: auto; color: var(--success); }

/* FAQ, forms, content */
.faq-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 26px; }
.search-field { min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); box-shadow: var(--shadow-sm); }
.search-field .icon { width: 18px; color: var(--muted); }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-field input::placeholder { color: var(--muted-2); }
.faq-categories { display: flex; flex-wrap: wrap; gap: 7px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); box-shadow: var(--shadow-sm); }
.faq-question { width: 100%; min-height: 72px; display: grid; grid-template-columns: 1fr 38px; align-items: center; gap: 15px; padding: 12px 14px 12px 22px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.faq-question b { font-size: 16px; line-height: 1.35; }
.faq-question i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(143, 214, 238, .1); transition: transform .25s var(--ease), background .25s; }
.faq-question i .icon { width: 16px; }
.faq-item.is-open .faq-question i { transform: rotate(45deg); background: rgba(143, 214, 238, .22); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.faq-answer > div { max-width: 70ch; padding: 0 72px 22px 22px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.faq-empty { display: none; padding: 30px; text-align: center; color: var(--muted); font-size: 15px; }

.form-card { padding: clamp(25px, 4vw, 45px); border-radius: 30px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--muted); font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  outline: 0;
  background: rgba(255, 255, 255, .48);
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: rgba(143, 214, 238, .04); }
.field input, .field select { height: 50px; padding: 0 14px; }
.field textarea { min-height: 145px; padding: 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(82, 178, 228, .55); box-shadow: 0 0 0 4px rgba(82, 178, 228, .09); }
.field small { color: var(--muted-2); font-size: 12px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.check-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); }
.auth-layout { min-height: calc(100vh - 140px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(430px, .6fr); align-items: center; gap: clamp(40px, 7vw, 110px); }
.auth-story { max-width: 660px; }
.auth-story .page-title { font-size: clamp(36px, 4.4vw, 68px); }
.auth-story .lead { margin-top: 22px; }
.auth-benefits { display: grid; gap: 12px; margin-top: 30px; }
.auth-benefit { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 15px; }
.auth-panel h2 { font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
.auth-panel > p { margin-top: 9px; color: var(--muted); font-size: 15px; }
.auth-panel form { display: grid; gap: 14px; margin-top: 27px; }
.auth-panel .button { width: 100%; }
.form-divider { display: flex; align-items: center; gap: 11px; color: var(--muted-2); font-size: 12px; }
.form-divider::before, .form-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 70px 1fr; gap: 24px; min-height: 180px; position: relative; }
.timeline-item::before { content: ""; width: 1px; position: absolute; top: 57px; bottom: 0; left: 29px; background: var(--line); }
.timeline-item:last-child::before { display: none; }
.timeline-mark { width: 59px; height: 59px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 19px; background: var(--glass-strong); color: var(--brand); font: 760 14px "SFMono-Regular", Consolas, monospace; box-shadow: var(--shadow-sm); }
.timeline-copy { padding: 8px 0 38px; }
.timeline-copy h3 { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.2; letter-spacing: -.03em; }
.timeline-copy p { max-width: 62ch; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }

.formula-card { padding: clamp(26px, 4vw, 48px); border-radius: 34px; }
.formula-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 28px; }
.formula-part { padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255, 255, 255, .3); }
html[data-theme="dark"] .formula-part { background: rgba(143, 214, 238, .035); }
.formula-part strong { display: block; font-size: 32px; letter-spacing: -.04em; }
.formula-part b { display: block; margin-top: 7px; font-size: 15px; }
.formula-part p { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.formula-equation { margin-top: 17px; padding: 18px; border-radius: 17px; background: var(--navy); color: var(--paper); font: 640 14px/1.7 "SFMono-Regular", Consolas, monospace; overflow-x: auto; }
html[data-theme="dark"] .formula-equation { color: #07111f; background: var(--aqua); }

.resource-grid, .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.resource-card, .article-card { min-height: 320px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 25px; background: var(--glass); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.resource-card:hover, .article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.resource-card h3, .article-card h3 { margin: 24px 0 9px; font-size: clamp(20px, 1.5vw, 25px); line-height: 1.22; letter-spacing: -.03em; }
.resource-card p, .article-card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.resource-card .text-link, .article-card .text-link { margin-top: auto; padding-top: 24px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted-2); font-size: 13px; }

.legal-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 50px; }
.legal-nav { position: sticky; top: 115px; display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); box-shadow: var(--shadow-sm); }
.legal-nav a { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 11px; color: var(--muted); font-size: 13px; font-weight: 700; }
.legal-nav a:hover { color: var(--ink); background: rgba(143, 214, 238, .11); }
.legal-copy { max-width: 850px; }
.legal-copy section { padding: 0 0 46px; scroll-margin-top: 100px; }
.legal-copy h2 { margin-bottom: 14px; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.2; letter-spacing: -.03em; }
.legal-copy h3 { margin: 22px 0 9px; font-size: 19px; }
.legal-copy p, .legal-copy li { max-width: 70ch; margin-bottom: 12px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.legal-copy ul { display: grid; gap: 8px; margin-top: 12px; }
.legal-copy li { position: relative; padding-left: 15px; }
.legal-copy li::before { content: ""; width: 5px; height: 5px; position: absolute; left: 0; top: 8px; border-radius: 50%; background: var(--brand); }

/* Conversion strip and footer */
.conversion { min-height: 340px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; position: relative; overflow: hidden; padding: clamp(35px, 6vw, 82px); border-radius: 42px; }
.conversion::before { content: ""; width: 500px; height: 500px; position: absolute; top: -340px; right: 8%; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .018); }
.conversion > * { position: relative; z-index: 1; }
.conversion > .sky { position: absolute; z-index: 0; }
.conversion h2 { max-width: 20ch; color: #f4f9ff; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -.04em; }
.conversion p { max-width: 58ch; margin-top: 17px; color: rgba(239, 247, 255, .72); font-size: 16px; line-height: 1.6; }
.conversion .button.primary { color: #07111f; background: #f4f9ff; white-space: nowrap; }
.site-footer { padding: 70px 0 22px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, .6fr); gap: 50px; }
.footer-brand img { width: 150px; height: 42px; object-fit: contain; object-position: left center; }
.footer-brand .dark-logo { display: none; }
html[data-theme="dark"] .footer-brand .light-logo { display: none; }
html[data-theme="dark"] .footer-brand .dark-logo { display: block; }
.footer-brand p { max-width: 42ch; margin-top: 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.footer-column > span { display: block; margin-bottom: 15px; color: var(--ink); font-size: 12px; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; }
.footer-column a { display: block; width: fit-content; min-height: 26px; margin: 8px 0; color: var(--muted); font-size: 14px; transition: color .2s, transform .2s; }
.footer-column a:hover { color: var(--brand-text); transform: translateX(2px); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 13px; }

.toast { max-width: min(460px, calc(100vw - 30px)); min-height: 52px; position: fixed; z-index: 300; left: 50%; bottom: 106px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--glass-solid); box-shadow: var(--shadow-md); color: var(--ink); font-size: 14px; font-weight: 660; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s var(--ease); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast .icon { width: 17px; color: var(--success); }

/* Lisibilite des textes secondaires sur les surfaces sombres */
.dark-card .tag, .conversion .tag, .price-card.is-featured .tag { color: rgba(239, 247, 255, .84); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); }
.dark-card .card-list li, .conversion .card-list li, .price-card.is-featured .card-list li { color: rgba(239, 247, 255, .8); }
.dark-card .program-meta span, .price-card.is-featured .program-meta span { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); }
.dark-card .program-meta small { color: rgba(239, 247, 255, .78); }
.dark-card .program-meta b { color: #f4f9ff; }
.dark-card .number-label, .dark-card .program-code, .conversion .number-label { color: #a8e2f7; }
.dark-card .text-link, .conversion .text-link, .page-hero.dark-surface .text-link { color: #a8e2f7; }
.dark-card .eyebrow, .page-hero.dark-surface .eyebrow, .conversion .eyebrow { color: #a8e2f7; }
.dark-card .icon-box { color: #07111f; background: #8fd6ee; }
.dark-card .mock-chart i { background: linear-gradient(to top, #52b2e4, #a8e2f7); }
/* Badge de remise sur la carte mise en avant */
.price-card.is-featured .discount-badge { background: linear-gradient(125deg, #8fd6ee, #cbeff8); color: #07111f; box-shadow: 0 8px 18px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .discount-badge { background: linear-gradient(125deg, #8fd6ee, #b5e5f5); color: #07111f; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }

/* ------------------------------------------- Proportions et blocs de contenu */
.card.large { min-height: 0; }
.split-start { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: clamp(28px, 4vw, 66px); }
.asym-grid { align-items: start; }

.free-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.free-price { display: flex; align-items: baseline; gap: 12px; }
.free-price strong { font-size: clamp(52px, 5vw, 76px); line-height: .85; letter-spacing: -.06em; }
.free-price strong small { font-size: .42em; font-weight: 700; letter-spacing: -.02em; vertical-align: baseline; }
.free-price span { color: var(--muted); font-size: 15px; }
.free-card h3 { font-size: clamp(21px, 1.8vw, 27px); line-height: 1.2; letter-spacing: -.03em; }
.free-card p { max-width: 52ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.free-card .button-row { margin-top: 6px; }

/* Quatre programmes sur une ligne */
.program-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.program-card { min-height: 0; padding: 24px; border-radius: 26px; }
.program-card::after { width: 130px; height: 130px; top: -62px; right: -46px; }
.program-card .program-meta { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 22px 0 20px; padding-top: 0; }
.program-meta span { padding: 11px 12px; }
.program-card .text-link { margin-top: auto; }

/* --------------------------------------- Apercus fideles de l'espace etudiant */
.app-mock {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--glass-solid);
  box-shadow: var(--shadow-md);
}
html[data-theme="dark"] .app-mock { background: rgba(12, 30, 52, .92); border-color: rgba(143, 214, 238, .16); }
.app-mock-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mock-pill { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; background: rgba(143, 214, 238, .24); color: var(--brand-strong); font-size: 12px; font-weight: 740; }
.mock-pill.is-ok { background: var(--success-soft); color: var(--success); }
.mock-pill .icon { width: 13px; }
.mock-time { color: var(--muted-2); font-size: 12px; font-weight: 660; }
.mock-kicker { color: var(--brand-text); font-size: 12px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.app-mock .mock-title { margin: 0; font-size: clamp(22px, 2vw, 31px); line-height: 1.12; letter-spacing: -.035em; }
.app-mock .mock-title.small { font-size: clamp(18px, 1.5vw, 23px); }
.mock-text { max-width: 46ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.mock-progress { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; color: var(--muted); font-size: 13px; }
.mock-progress b { color: var(--ink); font-size: 15px; }
.mock-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(47, 126, 216, .12); }
.mock-track i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--aqua)); }
.mock-action {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
}
html[data-theme="dark"] .mock-action { background: var(--aqua); color: #07111f; }
.mock-action .icon { width: 16px; }
.mock-action.is-wide { width: 100%; }
.app-mock.is-accent { border-color: transparent; background: linear-gradient(150deg, #2f7ed8, #52b2e4 62%, #8fd6ee); color: #fff; }
html[data-theme="dark"] .app-mock.is-accent { background: linear-gradient(150deg, #1c5599, #2f7ed8 60%, #52b2e4); }
.app-mock.is-accent .mock-kicker, .app-mock.is-accent .mock-time { color: rgba(255, 255, 255, .82); }
.app-mock.is-accent .mock-title { color: #fff; }
.app-mock.is-accent .mock-text { color: rgba(255, 255, 255, .86); }
.app-mock.is-accent .mock-pill { background: rgba(255, 255, 255, .24); color: #fff; }
.app-mock.is-accent .mock-action { background: rgba(255, 255, 255, .95); color: #0a1931; }
.mock-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.mock-chips span { display: grid; gap: 3px; padding: 12px 13px; border-radius: 14px; background: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .82); font-size: 12px; }
.mock-chips b { color: #fff; font-size: 17px; letter-spacing: -.02em; }
.mock-flashface { display: grid; justify-items: center; gap: 12px; padding: clamp(22px, 3vw, 40px) 16px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(150deg, rgba(203, 239, 248, .5), rgba(255, 255, 255, .5)); text-align: center; }
html[data-theme="dark"] .mock-flashface { background: linear-gradient(150deg, rgba(23, 62, 104, .5), rgba(10, 25, 45, .6)); }
.mock-flashface strong { max-width: 24ch; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.25; letter-spacing: -.03em; }
.mock-flashface > span:last-child { color: var(--muted); font-size: 13px; }
.mock-rate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.mock-rate span { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.mock-rate span.is-on { border-color: transparent; background: var(--navy); color: var(--paper); }
html[data-theme="dark"] .mock-rate span.is-on { background: var(--aqua); color: #07111f; }
.mock-ring { display: flex; align-items: center; gap: 20px; margin: 4px 0; }
.mock-ring svg { width: 108px; height: 108px; flex: 0 0 auto; transform: rotate(-90deg); }
.mock-ring circle { fill: none; stroke: rgba(47, 126, 216, .14); stroke-width: 11; }
.mock-ring circle.is-value { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 219; }
.mock-ring strong { font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.mock-ring strong small { font-size: .5em; }
.mock-ring span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.mock-rows { display: grid; gap: 9px; }
.mock-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) 84px 42px; align-items: center; gap: 12px; font-size: 13px; }
.mock-rows span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-rows i { height: 6px; display: block; overflow: hidden; border-radius: 999px; background: rgba(47, 126, 216, .12); }
.mock-rows b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--aqua)); }
.mock-rows em { color: var(--muted); font-style: normal; font-weight: 700; text-align: right; }
.mock-answer { display: grid; gap: 9px; padding: 15px; border-left: 3px solid var(--success); border-radius: 0 16px 16px 0; background: var(--success-soft); }
.mock-answer p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }


/* ======================================================= COMPOSANTS SPECIFIQUES */

/* Zone de compte de la barre flottante */
.account-area { display: flex; align-items: center; gap: 6px; }

/* Bascule entre programmes */
.program-switch { display: grid; gap: 16px; }
.switch-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.switch-tab {
  min-height: 58px;
  display: grid;
  gap: 2px;
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color .22s, background .22s, border-color .22s, transform .22s var(--ease);
}
.switch-tab:hover { color: var(--ink); transform: translateY(-2px); border-color: rgba(82, 178, 228, .3); }
.switch-tab b { display: block; font-size: 16px; letter-spacing: -.02em; }
.switch-tab small { display: block; color: var(--muted-2); font-size: 12px; }
.switch-tab.is-active { color: var(--paper); border-color: transparent; background: var(--navy); }
.switch-tab.is-active small { color: rgba(255, 255, 255, .68); }
html[data-theme="dark"] .switch-tab.is-active { color: #07111f; background: var(--aqua); }
html[data-theme="dark"] .switch-tab.is-active small { color: rgba(7, 17, 31, .68); }

.switch-stage {
  min-height: 380px;
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
  transition: opacity .22s var(--ease);
}
.switch-stage.is-changing { opacity: 0; }
.switch-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: clamp(24px, 3vw, 52px); animation: panel-in .4s var(--ease) both; }
.switch-copy h3 { margin: 14px 0 10px; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.035em; }
.switch-copy p { max-width: 52ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.switch-subjects { display: grid; gap: 7px; margin: 22px 0; }
.switch-subjects li { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 12px; padding: 9px 13px; border-radius: 13px; background: rgba(143, 214, 238, .11); color: var(--ink); font-size: 14px; }
.switch-subjects li b { color: var(--brand-text); font: 720 12px "SFMono-Regular", Consolas, monospace; }
.switch-subjects li.is-pending { color: var(--muted-2); background: transparent; border: 1px dashed var(--line-strong); }
.switch-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; }
.switch-number { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .34); }
html[data-theme="dark"] .switch-number { background: rgba(143, 214, 238, .04); }
.switch-number strong { display: block; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; letter-spacing: -.05em; }
.switch-number span { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; }
.switch-number.is-soft strong { font-size: clamp(20px, 1.8vw, 28px); }

/* Bandeau de volumes d'un programme */
.program-stat-band { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 18px); padding: clamp(18px, 2vw, 28px); border-radius: var(--radius-lg); }
.program-stat { padding: 6px 16px; }
.program-stat + .program-stat { border-left: 1px solid var(--line); }
.program-stat strong { display: block; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; letter-spacing: -.05em; }
.program-stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.35; }

/* Matiere en attente et notes de grille */
.subject-item.is-pending { border-style: dashed; background: transparent; }
.subject-item.is-pending .subject-code { background: rgba(143, 214, 238, .1); color: var(--muted-2); }
.subject-item.is-pending h3 { color: var(--muted); }
.grid-note { max-width: 74ch; margin-top: 22px; color: var(--muted-2); font-size: 14px; line-height: 1.6; }
.companion-card { max-width: 760px; margin-top: 26px; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--radius); }
.companion-card h3 { margin: 12px 0 9px; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.03em; }
.companion-card p { max-width: 66ch; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Progression des niveaux de quiz */
.level-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.level-step { position: relative; padding: 22px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.level-step b { display: block; margin-bottom: 8px; font-size: 16px; letter-spacing: -.02em; }
.level-step span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.level-step.is-next { border-style: dashed; border-color: rgba(82, 178, 228, .4); background: rgba(143, 214, 238, .11); }
.level-step.is-next b { color: var(--brand-text); }

/* Tarifs : ancien prix, remise et economie */
.price-flags { display: flex; flex-wrap: wrap; gap: 7px; }
.price-badge.is-best { background: rgba(47, 126, 216, .22); color: var(--brand-strong); }
.price-card.is-featured .price-badge.is-best { color: #07111f; background: #d6f2ff; }
.price-was { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.price-was s { color: var(--muted-2); font-size: 19px; text-decoration-thickness: 2px; }
.price-card.is-featured .price-was s { color: rgba(239, 247, 255, .6); }
.discount-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(125deg, #1f5da8, #2569b8);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 8px 18px rgba(31, 93, 168, .34);
}
.price-card .price { margin-top: 10px; }
.price-was + .price { margin-top: 8px; }
.price-saving { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.price-saving b { color: var(--brand-strong); font-weight: 780; }
.price-card.is-featured .price-saving { color: rgba(239, 247, 255, .78); }
.price-card.is-featured .price-saving b { color: #a8e2f7; }
[data-price-value], [data-price-was], [data-price-saving], [data-price-permonth] { transition: opacity .22s var(--ease), transform .22s var(--ease); }
[data-price-value].is-swapping, [data-price-was].is-swapping, [data-price-saving].is-swapping, [data-price-permonth].is-swapping { opacity: 0; transform: translateY(6px); }

/* Blocs de texte divers */
.card-display { margin: 18px 0 10px; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -.035em; }
.dark-card .card-display { color: #f4f9ff; }
.article-body section { margin-bottom: 30px; }
.article-body h2 { margin-bottom: 10px; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.2; letter-spacing: -.03em; }
.article-body p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.form-intro { margin: 8px 0 18px; color: var(--muted); font-size: 15px; }
.form-card h3 { font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.03em; }
.auth-redirect { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(143, 214, 238, .16); color: var(--muted); font-size: 14px; line-height: 1.45; }
.auth-redirect .icon { width: 18px; flex: 0 0 auto; color: var(--brand-text); }
.check-row-split { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.check-row-split label { display: flex; align-items: center; gap: 8px; }
.footer-claim { margin-top: 12px !important; color: var(--brand-text) !important; font-weight: 700; }
.method-chain-4 { grid-template-columns: repeat(4, 1fr); }

/* Interactions and motion */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-hidden="true"] { display: none !important; }
@keyframes orbit-breathe { 0%, 100% { transform: rotate(18deg) scale(1); } 50% { transform: rotate(24deg) scale(1.025); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes grow-y { from { transform: scaleY(.12); } to { transform: scaleY(1); } }

@media (max-width: 1180px) {
  :root { --content: 1060px; }
  .showcase-flow { gap: 8px; }
  .flow-card { padding: 14px; }
  .home-hero { min-height: 0; }
  .switch-panel { grid-template-columns: minmax(0, 1fr) minmax(250px, .85fr); }
  .program-stat-band { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .program-stat:nth-child(3n+1) { border-left: 0; }
  .level-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-grid, .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-start { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 230px minmax(0, 1fr); }
  .showcase-panel.is-active { grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.2fr repeat(3, .7fr); gap: 28px; }
}

@media (max-width: 920px) {
  .site-main { padding-inline: var(--gutter); }
  .brand-island { top: 14px; left: 15px; }
  .utility-island { top: 14px; right: 15px; }
  .brand-island .brand-wordmark { width: 112px; }
  .utility-entry span { display: none; }
  .utility-entry { width: 44px; padding: 0; }
  .home-hero { padding-top: 20px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 34px; }
  .hero-lead { max-width: 720px; padding-bottom: 0; }
  .hero-deck { width: min(100%, 560px); margin-inline: auto; }
  .deck-stack { width: min(100%, 360px); }
  .split, .split.reverse, .auth-layout { grid-template-columns: 1fr; }
  /* Le panneau passe en colonne : les trois etapes s'enchainent de haut en bas */
  .showcase-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .flow-arrow { display: none; }
  .showcase-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .showcase-score { align-self: stretch; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell + .stat-cell { border-left: 0; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--line); border-radius: 20px; }
  .switch-panel { grid-template-columns: 1fr; }
  .switch-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .method-chain-4 { grid-template-columns: repeat(2, 1fr); }
  .page-hero.has-aside { grid-template-columns: 1fr; }
  .section-head { display: block; }
  .section-head .lead { margin-top: 18px; }
  .asym-grid { grid-template-columns: 1fr; }
  .grid-3, .pricing-grid, .resource-grid, .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-start { grid-template-columns: 1fr; }
  .mock-chips { grid-template-columns: 1fr; }
  .pricing-grid .price-card:last-child { grid-column: 1 / -1; }
  .price-card.is-featured { transform: none; }
  .method-chain { grid-template-columns: 1fr; }
  .method-step, .method-step:first-child, .method-step:last-child { min-height: 220px; border-radius: 0; }
  .method-step:first-child { border-radius: 26px 26px 0 0; }
  .method-step:last-child { border-radius: 0 0 26px 26px; }
  .method-step + .method-step { border-top: 0; border-left: 1px solid var(--line); }
  .method-step::after { top: auto; right: auto; left: 30px; bottom: -15px; }
  .showcase { grid-template-columns: 1fr; }
  .showcase-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .showcase-tab { min-width: 180px; }
  .showcase-panel.is-active { grid-template-columns: 1fr; }
  .product-mock { transform: none; }
  .conversion { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; }
}

@media (pointer: coarse) {
  .orbit-explain { min-height: 44px; padding-inline: 14px; }
  .utility-button, .utility-entry { min-height: 44px; }
  /* Au doigt, un lien de 22 px se rate. Les zones cliquables s'agrandissent
     sans que la typographie bouge. */
  .text-link { min-height: 44px; align-items: center; }
  .deck-toggle { width: 44px; height: 44px; }
  .footer-column a { min-height: 42px; margin: 0; align-content: center; }
  .footer-bottom a { display: inline-block; padding: 13px 0; }
  .faq-question { min-height: 56px; }
}

@media (max-width: 700px) {
  body { font-size: 14px; }
  .site-main { padding: 84px var(--gutter) 112px; }
  body[data-page="accueil"] .site-main { padding-top: 66px; }
  .ambient-orb { display: none; }
  .brand-island { min-height: 50px; padding: 6px; border-radius: 15px; }
  .brand-island .brand-symbol { width: 38px; height: 38px; }
  .brand-island .brand-symbol { display: block; }
  .brand-island .brand-wordmark { display: none !important; }
  .utility-island { padding: 4px; border-radius: 15px; }
  .utility-button, .utility-entry { width: 44px; height: 44px; min-height: 44px; }
  .atlas-dock { width: calc(100% - 20px); min-height: 66px; bottom: 10px; justify-content: space-between; padding: 6px; border-radius: 20px; }
  .dock-link, .atlas-trigger { min-width: 0; min-height: 52px; flex: 1; padding: 0 7px; border-radius: 14px; }
  .dock-link span { display: none; }
  .dock-link .icon { width: 20px; }
  .atlas-trigger { flex: 1.4; }
  .atlas-trigger > span:last-child { display: none; }
  .atlas-overlay { padding: 8px; }
  .atlas-panel { width: 100%; max-height: 96vh; padding: 26px 14px 24px; border-radius: 28px; }
  .atlas-close { width: 42px; height: 42px; top: 14px; right: 14px; }
  .atlas-heading { padding-right: 48px; margin-bottom: 24px; }
  .atlas-heading h2 { font-size: 40px; }
  .atlas-heading p { font-size: 14px; }
  .atlas-grid { grid-template-columns: 1fr; gap: 9px; }
  .atlas-group { min-height: 0; padding: 14px; }
  .atlas-group a { min-height: 44px; }
  .atlas-foot { display: block; }
  .atlas-foot span { display: block; margin-bottom: 7px; }
  /* Mobile : le bloc de texte passe a gauche, un paragraphe centre sur une
     colonne etroite se lit mal. Le panneau garde ses trois etapes, empilees. */
  .home-hero { min-height: auto; gap: 22px; padding: 18px 0 32px; text-align: left; }
  .auth-story { text-align: left; }
  .auth-story .button-row { margin-inline: 0; justify-content: flex-start; }
  .auth-story .lead { margin-inline: 0; }
  .hero-lead .display, .hero-lead .lead { margin-inline: 0; max-width: none; }
  .hero-lead .button-row { justify-content: stretch; margin-top: 22px; }
  .hero-tag { margin-bottom: 15px; }
  .hero-canvas { top: -66px; bottom: -42px; left: 50%; width: 100vw; }
  .aurora-1 { width: 84vw; height: 84vw; top: -30vw; left: -30vw; }
  .aurora-2 { width: 96vw; height: 96vw; top: -34vw; right: -38vw; }
  .aurora-3 { width: 110vw; height: 76vw; bottom: -34vw; left: -8vw; }
  /* Le paquet passe sous le texte, pleine largeur, toujours manipulable */
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 30px; }
  .hero-lead { align-self: auto; padding-bottom: 0; }
  .deck-stage { padding: 38px 36px 8px 0; }
  .deck-stack { width: min(100%, 314px); height: clamp(474px, 124vw, 528px); }
  .deck-card[data-pos="1"] { transform: translate(10px, -10px) rotate(2.2deg) scale(.975); }
  .deck-card[data-pos="2"] { transform: translate(20px, -20px) rotate(4.2deg) scale(.95); }
  .deck-card[data-pos="3"] { transform: translate(30px, -29px) rotate(6.2deg) scale(.925); }
  .deck-card { padding: 20px; }
  .deck-card h2 { font-size: 18px; }
  .deck-text, .deck-question { font-size: 13px; }
  .deck-mini li { font-size: 12.5px; }
  /* Au doigt, chaque proposition garde 44 px de haut */
  .deck-options button { min-height: 44px; padding: 10px 12px; font-size: 12.5px; }
  .deck-glow { inset: -8% -6% 4%; }
  .deck-controls { width: min(100%, 272px); }
  .display { font-size: clamp(34px, 9.4vw, 52px); }
  .page-title { font-size: clamp(30px, 8.4vw, 46px); }
  .section-title { font-size: clamp(26px, 7.4vw, 40px); }
  .section-title.small { font-size: clamp(23px, 6.4vw, 32px); }
  .lead { font-size: 16px; }
  .conversion h2 { font-size: clamp(24px, 7vw, 34px); }
  .button-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .button-row .button { width: 100%; }
  /* Le bouton secondaire s'allege, sauf sur un fond sombre ou il deviendrait illisible */
  .hero-lead .button-row .button.secondary,
  .page-hero.glass .button-row .button.secondary { background: none; box-shadow: none; }
  .mastery-detail { margin-top: 12px; }
  /* Bande de chiffres : chiffre au-dessus du libelle, plus aucun chevauchement */
  .stat-band { padding: 6px 14px 13px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .stat-cell {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 2px;
    padding: 14px 10px 14px 0;
    border-radius: 0;
  }
  .stat-cell:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--line); }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat-cell:hover, .stat-cell.is-open { background: none; transform: none; }
  .stat-cell strong { font-size: 31px; }
  .stat-label { font-size: 13.5px; }
  .stat-note { font-size: 12.5px; }
  .stat-more { display: none; }
  .stat-footnote { font-size: 13px; }
  .section { padding: 70px 0; }
  .section-head { margin-bottom: 30px; }
  .page-hero { padding: 30px 20px 34px; border-radius: 28px; }
  .page-hero::before, .page-hero::after { display: none; }
  .page-hero .lead { margin-top: 20px; }
  .grid-2, .grid-3, .grid-4, .pricing-grid, .program-grid, .subject-grid, .resource-grid, .article-grid, .formula-grid, .form-grid, .split-start { grid-template-columns: 1fr; }
  .mock-rate { grid-template-columns: repeat(2, 1fr); }
  .mock-ring { flex-direction: column; align-items: flex-start; gap: 12px; }
  .method-chain-4 { grid-template-columns: 1fr; }
  .switch-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .switch-subjects li { grid-template-columns: 1fr; gap: 3px; }
  .switch-stage { padding: 18px; min-height: 0; }
  .program-stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .program-stat { padding: 6px 10px; }
  .program-stat:nth-child(odd) { border-left: 0; }
  .level-rail { grid-template-columns: 1fr; }
  .stat-rows { grid-template-columns: 1fr; }
  .pricing-grid .price-card:last-child, .field.full { grid-column: auto; }
  .card.large { min-height: 330px; }
  .showcase { padding: 9px; border-radius: 26px; }
  .showcase-stage { min-height: 0; }
  .showcase-panel { padding: 22px 14px; }
  .product-mock { min-height: 370px; padding: 18px; }
  /* Comparatif : les colonnes de formule sortaient de l'ecran et restaient
     invisibles. Chaque ligne devient une carte qui porte ses trois valeurs. */
  .compare-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .compare-table { min-width: 0; display: grid; gap: 10px; }
  .compare-table thead { display: none; }
  .compare-table tbody { display: contents; }
  .compare-table tr {
    display: grid;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--glass);
  }
  .compare-table tbody th {
    padding: 0 0 11px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    font-weight: 720;
    text-align: left;
  }
  .compare-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 0 0;
    border: 0;
    text-align: right;
    font-size: 14px;
  }
  .compare-table td::before {
    content: attr(data-plan);
    color: var(--muted);
    font-size: 13px;
    font-weight: 640;
    text-align: left;
  }
  .compare-table td:first-child { text-align: right; }
  .compare-table .icon { width: 16px; margin: 0 0 0 auto; }
  .faq-tools { grid-template-columns: 1fr; }
  .faq-answer > div { padding-right: 22px; }
  .auth-layout { min-height: auto; gap: 45px; }
  .auth-story { text-align: center; }
  .auth-story .lead { margin-inline: auto; }
  .auth-benefits { text-align: left; }
  .conversion { min-height: 390px; padding: 35px 24px; border-radius: 30px; }
  .conversion .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-column > span { margin-bottom: 11px; }
  .footer-column a { margin: 6px 0; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 6px; }
}

@media (max-width: 430px) {
  .hero-word { font-size: .9em; }
  /* Les onglets de programme tiennent en deux lignes de deux, pas quatre blocs */
  .switch-tab { flex: 1 1 calc(50% - 4px); }
  .showcase-tab { min-width: 155px; }
  .timeline-item { grid-template-columns: 54px 1fr; gap: 13px; }
  .timeline-mark { width: 49px; height: 49px; border-radius: 15px; }
  .timeline-item::before { left: 24px; top: 49px; }
}

/* Ecrans peu hauts : le premier ecran garde le titre, le texte, les boutons et
   le haut du panneau produit. Le panneau se coupe plus tot, c'est voulu. */
@media (min-width: 1181px) and (max-height: 940px) {
  .home-hero { min-height: calc(100svh - 92px); padding-top: clamp(12px, 1.8vh, 20px); gap: clamp(16px, 2vh, 26px); }
  .display { font-size: clamp(36px, min(4vw, 7.6vh), 66px); }
  .hero-lead .lead { margin-top: 13px; font-size: 15px; }
  .hero-lead .button-row { margin-top: 20px; }
  .hero-tag { margin-bottom: 14px; }
}
@media (min-width: 1181px) and (max-height: 820px) {
  .home-hero { min-height: calc(100svh - 86px); padding-top: 10px; }
  .display { font-size: clamp(34px, min(3.6vw, 7vh), 58px); }
  .showcase-head { padding-bottom: 14px; }
  .showcase-flow { margin-top: 14px; }
  .flow-card { padding: 14px; }
}

/* Ecrans peu hauts : la carte du paquet se resserre au lieu de deborder. Le
   contenu ne change pas, seuls les espacements et le corps du texte baissent. */
/* Telephones etroits : meme contenu, espacements resserres */
@media (max-width: 384px) {
  .deck-card { padding: 17px; }
  .deck-card h2 { font-size: 16.5px; }
  .deck-text { font-size: 12.5px; }
  .deck-question { font-size: 12.5px; }
  .deck-options { gap: 5px; }
  .deck-options button { padding: 8px 10px; font-size: 12px; }
  .deck-explain { min-height: 2.7em; font-size: 11.5px; }
  .deck-mini li { font-size: 12px; }
}

@media (max-height: 800px) and (min-width: 701px) {
  .deck-card { padding: 18px; }
  .deck-card h2 { font-size: 16px; }
  .deck-text { margin-top: 9px; font-size: 12px; line-height: 1.5; }
  .deck-mini { gap: 5px; margin-top: 10px; }
  .deck-mini li { font-size: 11.5px; }
  .deck-subject { margin-bottom: 8px; }
  .deck-question { font-size: 12.2px; line-height: 1.42; }
  .deck-options { gap: 5px; margin-top: 10px; }
  .deck-options button { padding: 6px 10px; font-size: 11.5px; }
  .deck-explain { min-height: 2.7em; margin-top: 9px; font-size: 11px; }
  .deck-main { padding: 8px 0; }
  .deck-foot { padding-top: 10px; font-size: 10.5px; }
  .deck-flip { min-height: clamp(150px, 19vh, 190px); }
  .flip-face { padding: 14px; gap: 10px; }
  .flip-face p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  /* Composition orbitale entierement statique */
  .sky::before, .sky i, .hero-tag i, .aurora { animation: none !important; }
  .hero-swash { animation: none !important; clip-path: none; }
  .hero-rotator b.is-swapping { opacity: 1; transform: none; }
}

@media print {
  .brand-island, .utility-island, .atlas-dock, .atlas-overlay, .toast { display: none !important; }
  .site-main { padding: 0; }
  body { background: #fff; color: #000; }
  .glass, .surface, .card { box-shadow: none; backdrop-filter: none; }
}

/* Choix du type de compte sur la page de connexion. L'accès enseignant se fait
   sur invitation : aucune page publique ne le présente. */
.field-label { display: block; margin-bottom: 9px; color: var(--ink); font-size: 13px; font-weight: 700; }
.role-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.role-choice label { position: relative; display: block; cursor: pointer; }
.role-choice input { position: absolute; opacity: 0; pointer-events: none; }
.role-choice span {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--glass);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.role-choice b { font-size: 14px; font-weight: 720; }
.role-choice small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.role-choice label:hover span { border-color: rgba(47, 126, 216, .3); }
.role-choice input:checked + span {
  border-color: rgba(47, 126, 216, .45);
  background: rgba(143, 214, 238, .16);
  box-shadow: inset 0 0 0 1px rgba(47, 126, 216, .18);
}
.role-choice input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 560px) {
  .role-choice { grid-template-columns: 1fr; }
  .role-choice span { min-height: 0; }
}