/* ============================================================
   Ogerant — Landing v2 · "Salle des machines"
   Premium editorial system built from the five-color brand charter.
   Zero-build, vanilla CSS with restrained progressive enhancement.
   ============================================================ */

/* ---------- Tokens (charte graphique O'Gérant) ----------
   Brand palette: 01 #4A1FA8 violet · 02 #B089F2 lavande · 03 #CD223B rouge
   · 04 #E6E6E6 gris clair · 05 #071957 marine (ground). */
:root {
	--brand-violet: #4a1fa8;
	--brand-lavender: #b089f2;
	--brand-red: #cd223b;
	--brand-gray: #e6e6e6;
	--brand-navy: #071957;

  --bg0: var(--brand-navy);
  --bg: var(--brand-navy);
  --bg2: #0e2470;         /* raised navy */
  --ink: #f4f3fb;
  --muted: #b3abdd;
  --faint: #7e79a9;

  --v1: var(--brand-violet);
  --v2: #7c54d0;          /* violet→lavande blend */
  --v3: var(--brand-lavender);
  --indigo: #33268f;
  --cyan: #b089f2;        /* legacy neon slot → lavande */
  --accent: var(--brand-red);
  --emerald: #34d399;
  --amber: #fbbf24;

  --grad: linear-gradient(100deg, var(--brand-violet) 0%, #7c54d0 50%, var(--brand-lavender) 100%);
  --grad-btn: linear-gradient(100deg, #3a1885 0%, #4a1fa8 55%, #6b3fd0 100%); /* darker tail: AA white text */
  --grad-cool: linear-gradient(120deg, #b089f2 0%, #4a1fa8 70%);
  --grad-text: linear-gradient(100deg, var(--brand-violet) 0%, var(--brand-navy) 100%);
  --grad-text-dark: linear-gradient(100deg, var(--brand-lavender) 0%, var(--brand-gray) 72%, #fff 100%);

  /* light "sheet" ground (brand gris clair 04 family) */
  --paper: #f2f1f7;
  --paper-2: var(--brand-gray);
  --ink-d: var(--brand-navy);
  --muted-d: #4d4a78;
  --line-d: rgba(7, 25, 87, 0.14);

  --line: rgba(255, 255, 255, 0.10);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.08);
  --glass-bd: rgba(255, 255, 255, 0.14);

  --radius: 16px;
  --radius-lg: 28px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1240px;
  --nav-h: 76px;

  --font-display: 'Public Sans', 'Cairo', 'Noto Sans Tifinagh', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Public Sans', 'Cairo', 'Noto Sans Tifinagh', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--bg0);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  font-feature-settings: 'cv11', 'ss01';
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
::selection { background: rgba(124, 84, 208, 0.4); color: #fff; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.skip-link {
  position: fixed; top: -60px; inset-inline-start: 16px; z-index: 10000;
  padding: 10px 18px; border-radius: 10px; background: var(--v2); color: #fff; font-weight: 700;
  transition: top .25s var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { position: relative; }
.section-head { max-width: 760px; margin: 0 auto clamp(40px, 6vh, 72px); text-align: center; }
.section-head h2 { margin-top: 18px; }
.section-head .lead { margin-top: 16px; }
.section-head.side {
  max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px;
  text-align: start; margin-bottom: clamp(40px, 6vh, 72px);
}
.section-head.side h2 { margin-top: 18px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
h1.display { font-size: clamp(38px, 6.4vw, 88px); font-weight: 700; line-height: 1.04; }
h2 { font-size: clamp(26px, 3.8vw, 52px); }
h2.display { font-size: clamp(32px, 5vw, 68px); }
h2.big { font-size: clamp(36px, 6vw, 84px); line-height: 1.02; }
h3 { font-size: 19px; font-weight: 600; }
.lead { font-size: clamp(16px, 1.55vw, 20px); color: var(--muted); line-height: 1.65; font-weight: 450; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark-zone .grad, .hero .grad, .cta-final .grad { background: var(--grad-text-dark); -webkit-background-clip: text; background-clip: text; }
.thin { font-weight: 400; }
.brandword { background: var(--grad-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brandword .apos { color: var(--accent); -webkit-text-fill-color: var(--accent); } /* red dot, echoes the logo */

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c4a8ff; padding: 8px 16px;
  border: 1px solid rgba(124, 84, 208, 0.35); border-radius: 4px;
  background: rgba(74, 31, 168, 0.10);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v3); box-shadow: 0 0 14px var(--v3); animation: blink 2.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.eyebrow.red { color: #ffb4b6; background: rgba(205, 34, 59,.10); border-color: rgba(205, 34, 59,.4); }
.eyebrow.red .dot { background: var(--accent); box-shadow: 0 0 14px var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
  border-radius: 12px; padding: 13px 22px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  will-change: transform;
}
.btn-primary {
  background: var(--grad-btn); color: #fff;
  box-shadow: 0 12px 36px -12px rgba(124, 84, 208, 0.65);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0; transition: background-position .7s var(--ease);
}
.btn-primary:hover::before { background-position: -120% 0; }
.btn-primary:hover { box-shadow: 0 18px 48px -12px rgba(124, 84, 208, 0.85); }
.btn-ghost { background: var(--glass); border: 1px solid var(--glass-bd); color: var(--ink); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: var(--glass-2); border-color: rgba(255,255,255,.3); }
.btn-lg { padding: 17px 30px; font-size: 14px; border-radius: 14px; }
.btn svg { width: 17px; height: 17px; }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9980; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 0%; background: var(--grad); box-shadow: 0 0 12px rgba(124, 84, 208,.8); }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 9900; pointer-events: none; padding: 0 16px; }
.nav-frame {
  pointer-events: auto;
  max-width: var(--maxw); margin: 0 auto; padding: 10px 14px 10px 20px;
  /* 3-zone grid: links stay mathematically centered whatever the
     brand / CTA widths are, scrolled or not */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  border-radius: 18px; border: 1px solid transparent;
  transition: background .4s, border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav-frame > .brand { justify-self: start; }
.nav-frame > .nav-cta { justify-self: end; }
.nav.scrolled .nav-frame {
  background: rgba(13, 8, 35, 0.72); border-color: var(--glass-bd);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.8);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0; }
.brand .mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  background: var(--grad); color: #fff; font-size: 19px; font-weight: 900;
  box-shadow: 0 6px 20px -6px rgba(74,31,168,.7);
}
/* O'Gérant wordmark (assets/logo-gradient-dark.svg — white lettering,
   gradient O + red dot) sits directly on the dark nav. */
.brand img.brand-logo { height: 34px; width: auto; display: block; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  position: relative; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-radius: 10px; transition: color .25s, background .25s;
}
.nav-links a:hover { color: var(--ink); background: var(--glass); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: flex; border: 1px solid var(--glass-bd); border-radius: 10px; overflow: hidden; }
.lang-switch button {
  padding: 7px 10px; font-size: 11.5px; font-weight: 700; color: var(--faint);
  transition: color .2s, background .2s; line-height: 1;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--grad-btn); color: #fff; }
.lang-switch button[data-lang="ar"] { font-size: 14px; line-height: 0.8; }
.lang-switch button[data-lang="zgh"] { font-size: 13px; }
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--glass-bd); place-items: center; }
.nav-burger svg { width: 20px; height: 20px; }

.nav-mobile-cta { display: none; }
@media (max-width: 1279px) {
  html.js .nav-links {
    position: absolute; top: calc(100% + 10px); left: 16px; right: 16px;
    flex-direction: column; padding: 10px;
    background: rgba(13, 8, 35, 0.96); border: 1px solid var(--glass-bd); border-radius: 16px;
    backdrop-filter: blur(20px);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  html.js .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  /* no-JS: keep a usable static row instead of a dead burger */
  html:not(.js) .nav { position: relative; }
  html:not(.js) .nav-frame { grid-template-columns: 1fr auto; gap: 10px 12px; }
  html:not(.js) .nav-frame > .brand { grid-column: 1; grid-row: 1; }
  html:not(.js) .nav-frame > .nav-cta { grid-column: 2; grid-row: 1; }
  html:not(.js) .nav-links { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: 0; }
  html:not(.js) .nav-links a { display: flex; align-items: center; min-height: 44px; padding: 6px 8px; font-size: 12px; }
  html:not(.js) .nav-burger { display: none; }
  html:not(.js) .hero { padding-top: 20px; }
  .nav-burger { display: grid; }
  .nav .nav-cta .btn-primary { display: none; }
  html.js .nav-mobile-cta {
    display: block; margin-top: 6px; text-align: center;
    background: var(--grad-btn); color: #fff !important; border-radius: 10px;
    font-family: var(--font-display); font-weight: 600;
  }
}

/* ============================================================
   HERO
   ============================================================ */
html.js [data-intro] { opacity: 0; transform: translateY(20px); }
html.js [data-intro].in { opacity: 1; transform: none; transition: opacity .24s var(--ease), transform .24s var(--ease); }

/* Hero constellation — real product proof connected to five business modules. */
.hero-stage {
  position: relative; z-index: 2; min-width: 0; width: 100%;
  margin: 0; isolation: isolate;
}
.stage-glow {
  position: absolute; inset: 8% -10% 0; z-index: 0;
  background: radial-gradient(ellipse, rgba(176, 137, 242, .24), rgba(74, 31, 168, .14) 45%, transparent 72%);
  pointer-events: none;
}
.shot-frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-bd);
  background: #050f38;
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.85), 0 30px 90px -30px rgba(74, 31, 168, 0.5);
}
.shot-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--glass-bd);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--glass-2); }
.shot-bar i:nth-child(1) { background: #ff5f57; } .shot-bar i:nth-child(2) { background: #febc2e; } .shot-bar i:nth-child(3) { background: #28c840; }
.shot-bar .url { margin-inline-start: 12px; font-size: 11.5px; color: var(--faint); font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; }
.shot-frame img { width: 100%; height: auto; }
html.js .hero-shot img { cursor: zoom-in; }
.hero-shot { position: relative; z-index: 2; transform: none; transform-origin: 50% 0%; }
.hero-suite-shot {
  position: absolute; z-index: 1; inset-block-start: 17%; inset-inline-end: -16%; width: 76%;
  transform: rotate(3deg); transform-origin: center; pointer-events: none;
}
[dir="rtl"] .hero-suite-shot { transform: rotate(-3deg); }
.shot-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(176, 137, 242, 0.12) 45%, rgba(124, 84, 208, 0.16) 55%, transparent);
  display: none;
}
@keyframes scan { 0% { transform: translateY(-120px); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translateY(640px); opacity: 0; } }

.hud-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(13, 8, 35, 0.82); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
  font-size: 12.5px;
}
.hud-chip .lab { color: var(--faint); font-weight: 600; }
.hud-chip .val { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.hud-chip .val.ok { color: var(--emerald); } .hud-chip .val.warn { color: var(--amber); }
.hud-chip b { font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; color: var(--cyan); }
.chip-ai { top: -22px; inset-inline-start: -14px; }
.chip-k1 { top: 26%; inset-inline-end: -20px; flex-direction: column; align-items: flex-start; gap: 2px; }
.chip-k2 { top: 56%; inset-inline-start: -26px; flex-direction: column; align-items: flex-start; gap: 2px; }
.chip-k3 { bottom: -16px; inset-inline-end: 12%; flex-direction: column; align-items: flex-start; gap: 2px; }
.chip-k4 { inset-block-start: 63%; inset-inline-end: -22px; flex-direction: column; align-items: flex-start; gap: 2px; }
.ai-live { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 12px var(--emerald); animation: blink 1.6s infinite; }
[data-float="1"], [data-float="2"], [data-float="3"] { animation: none; }
@keyframes float1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 760px) { .hero-suite-shot, .chip-k1, .chip-k2, .chip-k3, .chip-k4 { display: none; } .chip-ai { inset-inline-start: 8px; } }

.suite-map { position: relative; min-height: 660px; margin: 0; }
.suite-map::before,
.suite-map::after {
  position: absolute; z-index: 0; left: 50%; top: 48%; border-radius: 50%;
  border: 1px solid rgba(176, 137, 242, .17); content: ""; pointer-events: none;
  transform: translate(-50%, -50%);
}
.suite-map::before { width: 116%; aspect-ratio: 1.15; }
.suite-map::after { width: 102%; aspect-ratio: 1.15; border-style: dashed; opacity: .6; }
.suite-links { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.suite-links path {
  fill: none; stroke: var(--brand-lavender); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .8;
  vector-effect: non-scaling-stroke;
}
[dir="rtl"] .suite-links { transform: scaleX(-1); transform-origin: center; }
.suite-hub {
  position: absolute; z-index: 2; inset-block-start: 154px; left: 50%; width: min(680px, 90%);
  min-height: 0; overflow: visible; border: 0; border-radius: 24px; background: transparent;
  box-shadow: none; transform: translateX(-50%); pointer-events: none;
}
.suite-hub::before {
  position: absolute; inset: -8px; border: 1px solid rgba(176, 137, 242, .26);
  border-radius: 22px; background: rgba(176, 137, 242, .06); content: "";
  transform: rotate(-2deg); pointer-events: none;
}
.suite-hub picture {
  position: relative; display: block; overflow: hidden; border: 1px solid rgba(230, 230, 230, .6);
  border-radius: 14px; background: #fff;
  box-shadow: 0 32px 64px -30px rgba(0, 0, 0, .55), 0 0 48px -24px rgba(176, 137, 242, .5);
}
.suite-hub img { display: block; width: 100%; height: auto; }
.suite-hub-bar {
  position: absolute; z-index: 4; inset-block-start: -28px; left: 50%; width: max-content; max-width: 96%;
  gap: 9px; padding: 12px 16px; border: 1px solid rgba(176, 137, 242, .5);
  border-radius: 12px; background: var(--brand-navy); color: #fff;
  box-shadow: 0 8px 30px rgba(7, 25, 87, .3), 0 0 0 5px rgba(176, 137, 242, .07);
  transform: translateX(-50%);
}
.suite-hub-bar > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-lavender); }
.suite-hub-bar strong { font-size: 13px; color: #fff; }
.suite-hub-bar span { margin: 0; padding-inline-start: 10px; border-inline-start: 1px solid rgba(176, 137, 242, .35); color: #e6e6e6; font-size: 11px; line-height: 1.4; }
.suite-node-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.suite-node {
  --node-position: translateX(0);
  width: 31%; min-height: 78px; padding: 12px; gap: 10px;
  border-color: rgba(176, 137, 242, .26); border-radius: 14px;
  background: #16265c; color: #fff; text-align: start;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: var(--node-position);
}
.suite-node > span:last-child { display: grid; gap: 3px; min-width: 0; }
.suite-node b { color: #fff; font-family: var(--font-display); font-size: 12px; letter-spacing: -.01em; line-height: 1.4; }
.suite-node small { color: #c8c3df; font-size: 10.5px; line-height: 1.4; }
.suite-node-icon {
  display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center;
  border: 1px solid rgba(176, 137, 242, .2); border-radius: 9px;
  background: rgba(176, 137, 242, .1); color: var(--brand-lavender);
}
.suite-node-icon svg { width: 18px; height: 18px; }
/* Deux nœuds depuis le 2026-09-30 : Achats & ventes, Paie & RH et Stock sont
   retirés de la vitrine pour la prochaine phase (masqués, pas supprimés). */
.suite-node--treasury {
  --node-position: translateX(-50%); inset-block-start: 18px; left: 50%; width: 39%;
}
.suite-node--projects {
  --node-position: translateX(-50%); inset-block-end: 0; left: 50%;
  border-color: rgba(176, 137, 242, .65);
  background: linear-gradient(125deg, var(--brand-violet), #301b73);
  box-shadow: 0 16px 36px -20px rgba(74, 31, 168, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.suite-node--projects b { color: #fff; }
.suite-node--projects small { color: #ded7ed; }
.suite-node--projects .suite-node-icon {
  border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); color: #fff;
}

html.js .hero-stage.can-animate .suite-hub picture,
html.js .hero-stage.can-animate .suite-hub-bar,
html.js .hero-stage.can-animate .suite-node,
html.js .hero-stage.can-animate .suite-links path {
  transition-property: opacity, transform, stroke-dashoffset;
  transition-duration: .58s;
  transition-timing-function: var(--ease);
}
html.js .hero-stage.can-animate:not(.is-ready) .suite-hub picture,
html.js .hero-stage.can-animate:not(.is-ready) .suite-hub-bar { opacity: 0; }
html.js .hero-stage.can-animate:not(.is-ready) .suite-hub picture { transform: translateY(18px) scale(.985); }
html.js .hero-stage.can-animate:not(.is-ready) .suite-hub-bar { transform: translateX(-50%) translateY(12px) scale(.98); }
html.js .hero-stage.can-animate .suite-hub picture { transition-delay: .05s; }
html.js .hero-stage.can-animate .suite-hub-bar { transition-delay: .24s; }
html.js .hero-stage.can-animate:not(.is-ready) .suite-links path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .hero-stage.can-animate .suite-links path { transition-delay: .38s; transition-duration: .72s; }
html.js .hero-stage.can-animate:not(.is-ready) .suite-node {
  opacity: 0; transform: var(--node-position) translateY(12px) scale(.97);
}
html.js .hero-stage.can-animate .suite-node:nth-child(1) { transition-delay: .72s; }
html.js .hero-stage.can-animate .suite-node:nth-child(2) { transition-delay: .8s; }
html.js .hero-stage.can-animate .suite-node:nth-child(3) { transition-delay: .88s; }

@media (max-width: 900px) {
  .hero-stage, .suite-map { min-height: 0; }
  .suite-map { display: grid; gap: 28px; }
  .suite-map::before,
  .suite-map::after { display: none; }
  .suite-links { display: none; }
  .suite-hub {
    position: relative; inset: auto; left: auto; width: min(680px, 100%);
    margin: 0 auto; transform: none;
  }
  .suite-node-list {
    position: relative; inset: auto; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
  .suite-node {
    --node-position: translateX(0);
    position: relative; inset: auto; width: auto; min-height: 74px; transform: none;
  }
  .suite-node--projects,
  .suite-node--treasury { grid-column: 1 / -1; }
  html.js .hero-stage.can-animate:not(.is-ready) .suite-node { transform: translateY(10px) scale(.98); }
}

@media (max-width: 480px) {
  .suite-node-list { grid-template-columns: 1fr; }
  .suite-node { min-height: 64px; }
}

.scrollcue {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 44px auto 0; padding-bottom: 34px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.34em; color: var(--faint);
}
.cue-line { width: 1px; height: 44px; background: linear-gradient(var(--v2), transparent); position: relative; overflow: hidden; }
.cue-line::after { content: ""; position: absolute; top: -16px; left: 0; width: 100%; height: 16px; background: var(--cyan); animation: cuedrop 1.8s var(--ease) infinite; }
@keyframes cuedrop { to { top: 60px; } }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  position: relative; z-index: 5; overflow: hidden;
  background: var(--grad);
  transform: none; margin: 0;
  border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(0,0,0,.3);
  box-shadow: 0 24px 70px -28px rgba(124, 84, 208, 0.7);
}
.ticker-track {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 28px; width: 100%;
  padding: 16px 24px; white-space: nowrap;
  animation: none;
}
.ticker-track > :nth-child(n + 17) { display: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
.t-item { font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2vw, 24px); color: #fff; letter-spacing: 0.01em; }
.t-item.out { color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.85); }
.t-sep { color: rgba(255,255,255,.65); font-size: 12px; }

/* ============================================================
   LIGHT SHEETS (statement, problem, solution, showcase, …)
   ============================================================ */
.sheet {
  position: relative; z-index: 4;
  background: var(--paper); color: var(--ink-d);
}
.sheet.light .lead { color: var(--muted-d); }
.sheet .eyebrow { color: #4a1fa8; background: rgba(74, 31, 168, 0.08); border-color: rgba(74, 31, 168, 0.3); }
.sheet .eyebrow.red { color: #a91b30; background: rgba(205, 34, 59,.07); border-color: rgba(205, 34, 59,.3); }
.sheet .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.statement {
	border-radius: 36px 36px 0 0;
	margin-top: 0;
	padding: clamp(110px, 16vh, 190px) 0;
	text-align: center;
	background: var(--paper) url("assets/brand-ribbon.svg") center 18% / min(1500px, 110vw) auto no-repeat;
}
.statement .statement-sub { max-width: 640px; margin: 26px auto 0; }
#probleme { padding: clamp(70px, 10vh, 120px) 0 0; }
#solution, #apercu, #benefices, #confiance, #faq { padding: clamp(90px, 13vh, 150px) 0; }
#apercu { padding-bottom: 0; }

/* problem — sticky stacking panels with giant numerals */
.prob-stack { margin-top: 10px; }
.prob-panel { position: sticky; top: calc(var(--nav-h) + 8px + var(--pi) * 14px); padding-bottom: 20px; }
.prob-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 4vw, 60px);
  background: #fff; border: 1px solid var(--line-d); border-radius: var(--radius-lg);
  padding: clamp(28px, 4.5vw, 56px) clamp(24px, 4vw, 64px);
  min-height: clamp(240px, 36vh, 360px);
  box-shadow: 0 30px 80px -40px rgba(23, 17, 46, 0.35);
  will-change: transform;
}
.prob-idx { font-family: var(--font-display); font-size: 13px; color: var(--v2); align-self: start; padding-top: 6px; }
.prob-meta { max-width: 420px; }
.prob-meta .ic {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px;
  background: rgba(205, 34, 59, 0.08); color: var(--accent); margin-bottom: 18px;
}
.prob-meta .ic svg { width: 22px; height: 22px; }
.prob-meta h3 { font-size: clamp(19px, 2vw, 25px); margin-bottom: 10px; }
.prob-meta p { color: var(--muted-d); font-size: 15px; }
.prob-num {
  font-family: var(--font-display); font-weight: 700; line-height: .9;
  font-size: clamp(64px, 11vw, 170px); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(205, 34, 59, 0.55);
  white-space: nowrap; word-spacing: .14em;
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s;
}
.prob-panel:hover .prob-num { color: var(--accent); -webkit-text-stroke-color: transparent; }
@media (max-width: 860px) {
  .prob-inner { grid-template-columns: 1fr; gap: 14px; min-height: 0; }
  .prob-num { font-size: clamp(56px, 16vw, 110px); }
}

/* solution — split + animated pipeline */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.sol-copy h2 { margin-top: 18px; }
.sol-copy .lead { margin-top: 16px; }
.sol-list { margin-top: 34px; display: grid; gap: 10px; }
.sol-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line-d); border-radius: var(--radius);
  padding: 18px 20px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.sol-item:hover { transform: translateX(8px); border-color: rgba(74, 31, 168, 0.4); box-shadow: 0 18px 44px -22px rgba(74, 31, 168, 0.35); }
.sol-item .ck {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px; display: grid; place-items: center;
  border-radius: 50%; background: var(--grad); color: #fff;
}
.sol-item .ck svg { width: 14px; height: 14px; }
.sol-item h3 { font-size: 16.5px; margin-bottom: 3px; }
.sol-item p { font-size: 14px; color: var(--muted-d); }

.pipe-panel {
  position: relative; height: 520px;
  background: var(--bg0); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(23, 17, 46, 0.5);
  box-shadow: 0 40px 100px -40px rgba(23, 17, 46, 0.5);
}
.pipe-panel::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/brand-orbit.svg") center / cover no-repeat;
	opacity: .48;
}
.pipe-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pipe-node {
  position: absolute; left: var(--nx); top: var(--ny);
  display: flex; align-items: center; gap: 9px; padding: 11px 17px;
  background: rgba(22, 15, 54, 0.92); border: 1px solid var(--glass-bd); border-radius: 12px;
  color: var(--ink); font-size: 13px; font-weight: 600;
  box-shadow: 0 14px 36px -16px rgba(0,0,0,.7);
  opacity: .35; transform: scale(.92); transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.pipe-node svg { width: 17px; height: 17px; color: var(--cyan); }
.pipe-node.lit { opacity: 1; transform: scale(1); border-color: rgba(124, 84, 208, 0.6); box-shadow: 0 0 0 1px rgba(124, 84, 208,.35), 0 16px 44px -14px rgba(124, 84, 208,.6); }
.pipe-pulse {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 18px var(--cyan);
  offset-path: path("M 60 40 C 220 40 360 90 360 170 C 360 250 80 250 80 330 C 80 420 240 470 360 470");
  animation: pipego 5s linear infinite;
}
@keyframes pipego { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } .pipe-panel { display: none; } }

/* ============================================================
   DARK ZONES (features, modules, valeurs, stats, cta)
   ============================================================ */
.dark-zone {
  position: relative; z-index: 3; background: var(--brand-navy); color: var(--ink);
  padding: clamp(90px, 13vh, 150px) 0;
}
.dark-zone::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
		radial-gradient(60% 40% at 50% 0%, rgba(74, 31, 168, 0.16), transparent 65%),
		url("assets/brand-orbit.svg") top center / min(1500px, 120vw) auto no-repeat;
	opacity: .72;
}

/* features — bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feat-card {
  position: relative; overflow: hidden;
  padding: 30px 28px 26px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-bd);
  transition: border-color .35s;
}
.feat-card.span2 { grid-column: span 2; }
.feat-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--c) 16%, transparent), transparent 65%);
}
.feat-card:hover::before { opacity: 1; }
.feat-card:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.feat-card .ic {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  margin-bottom: 40px;
}
.feat-card .ic svg { width: 21px; height: 21px; }
.feat-card h3 { font-size: 18px; margin-bottom: 8px; }
.feat-card p { font-size: 14px; color: var(--muted); max-width: 380px; }
.feat-card .tag {
  display: inline-block; margin-top: 18px; padding: 5px 11px; border-radius: 6px;
  font-family: var(--font-display); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 80%, #fff); background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.card-num {
  position: absolute; top: 16px; inset-inline-end: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(196, 168, 255, 0.22);
}
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .feat-card.span2 { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .feat-card.span2 { grid-column: auto; } }

/* modules — one shared, lazy illustration stage driven by the module index */
.mod-board {
	display: grid;
	grid-template-columns: minmax(360px, .92fr) minmax(0, 1.3fr);
	gap: 26px;
	align-items: start;
}
.mod-panel {
	position: sticky;
	top: calc(var(--nav-h) + 24px);
	min-width: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
	border-radius: 24px;
	background: var(--brand-navy);
	box-shadow: 0 30px 80px -36px color-mix(in srgb, var(--c) 58%, transparent);
	transition: border-color .28s, box-shadow .28s;
}
.mod-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(3, 10, 42, .02) 38%, rgba(3, 10, 42, .94) 100%);
}
.mp-art {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--brand-navy);
}
.mp-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity .18s ease-out;
}
.mp-art img.is-ready { opacity: 1; }
.mp-count {
	position: absolute;
	top: 22px;
	inset-inline-start: 24px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 10px;
	letter-spacing: .22em;
	color: rgba(255, 255, 255, .7);
}
.mp-count b { color: #fff; font-weight: 600; }
.mp-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 10px var(--c);
}
.mp-meta {
	position: absolute;
	inset-inline: 26px;
	bottom: 24px;
	z-index: 3;
}
.mp-ic {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
	border: 1px solid color-mix(in srgb, var(--c) 46%, transparent);
	border-radius: 14px;
	background: rgba(7, 25, 87, .7);
	color: color-mix(in srgb, var(--c) 88%, #fff);
	backdrop-filter: blur(12px);
}
.mp-ic svg { width: 22px; height: 22px; }
.mp-title { color: #fff; font-size: clamp(22px, 2.3vw, 30px); }
.mp-desc {
	max-width: 320px;
	margin-top: 5px;
	color: rgba(255, 255, 255, .72);
	font-size: 14px;
}
.mod-panel.swap .mp-meta { animation: mpin .28s var(--ease); }
@keyframes mpin { from { opacity: .25; transform: translateY(8px); } }

.mod-index { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.mod-row {
  position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; text-align: start; font: inherit; color: inherit;
  background: rgba(255, 255, 255, 0.025); border: 1px solid transparent;
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.mod-row::before {
  display: none;
}
.mod-row:hover, .mod-row.on {
  background: var(--glass-2); border-color: color-mix(in srgb, var(--c) 45%, transparent);
  transform: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
}
.mod-row:focus-visible { outline: 2px solid var(--brand-violet); outline-offset: 2px; }
.mod-row:hover::before, .mod-row.on::before { opacity: 1; }
.mr-num { font-family: var(--font-display); font-size: 10.5px; color: var(--faint); letter-spacing: .08em; }
.mr-ic {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
}
.mr-ic svg { width: 15px; height: 15px; }
.mr-tx { min-width: 0; }
.mr-t { display: block; font-family: var(--font-display); font-weight: 500; font-size: 13.5px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-d { display: none; }
.mr-go { width: 15px; height: 15px; color: var(--faint); opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .3s var(--ease); }
.mr-go svg { width: 15px; height: 15px; }
.mod-row:hover .mr-go, .mod-row.on .mr-go { opacity: 1; transform: none; }
[dir="rtl"] .mod-row:hover, [dir="rtl"] .mod-row.on { transform: none; }
[dir="rtl"] .mr-go svg { transform: scaleX(-1); }
.mod-mobile-preview { display: none; }
@media (max-width: 1100px) {
	.mod-board { grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); }
	.mod-index { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1100px) {
	/* Keep the sticky square inside its containing block through module 15. */
	.mod-index { padding-bottom: clamp(180px, 28vh, 240px); }
}
@media (max-width: 860px) {
  .mod-board { grid-template-columns: 1fr; }
  .mod-panel { display: none; }
  .mod-index { grid-template-columns: 1fr; }
  .mod-row { padding: 12px 14px; }
  .mr-t { white-space: normal; }
  .mr-d { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
	.mod-mobile-preview {
		display: block;
		aspect-ratio: 1;
		margin: 4px 0 10px;
		overflow: hidden;
		border: 1px solid rgba(74, 31, 168, .2);
		border-radius: 18px;
		background: var(--brand-navy);
		box-shadow: 0 24px 60px -40px rgba(7, 25, 87, .64);
	}
	.mod-mobile-preview[hidden] { display: none; }
	.mod-mobile-preview picture,
	.mod-mobile-preview img { display: block; width: 100%; height: 100%; }
	.mod-mobile-preview img {
		object-fit: contain;
		opacity: 0;
		transition: opacity .18s ease-out;
	}
	.mod-mobile-preview img.is-ready { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.mp-art img,
	.mod-mobile-preview img { transition: none; }
	.mod-panel.swap .mp-meta { animation: none; }
}

/* ============================================================
   SHOWCASE — real screenshots, pinned deck
   ============================================================ */
.show-pin { padding: 20px 0 90px; }
.show-grid { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: clamp(30px, 4.5vw, 70px); align-items: center; }
.show-copy { display: grid; gap: 8px; align-content: center; }
.show-cap {
  position: relative; display: block; width: 100%; text-align: start; font: inherit; color: inherit;
  padding: 16px 18px 16px 22px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; opacity: .7;
  transition: opacity .35s, background .35s, border-color .35s, transform .35s var(--ease);
}
.show-cap::before {
  display: none;
}
.show-cap.is-on { opacity: 1; background: #fff; border-color: rgba(74, 31, 168, .34); transform: none; box-shadow: inset 0 0 0 1px rgba(74, 31, 168, .08), 0 20px 50px -28px rgba(23,17,46,.35); }
.show-cap.is-on::before { opacity: 1; }
.show-cap .show-i { display: block; font-family: var(--font-display); font-size: 11px; color: var(--v1); letter-spacing: .14em; }
.show-cap .cap-t { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 17px; margin: 4px 0 4px; color: var(--ink-d); }
.show-cap .cap-p { display: block; font-size: 13.5px; color: var(--muted-d); line-height: 1.55; }
.show-stage { position: relative; }
.show-frame { box-shadow: 0 70px 160px -50px rgba(23, 17, 46, 0.55), 0 30px 80px -40px rgba(74, 31, 168, 0.35); }
.show-tabs {
  display: flex; gap: 4px; padding: 7px 10px; overflow: hidden;
  background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--glass-bd);
}
.show-tabs .st {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--faint);
}
.show-tabs .st svg { width: 13px; height: 13px; }
.show-tabs .st.on { background: rgba(74, 31, 168, 0.22); color: #d6c6f8; }
.show-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.show-kpis .sk {
  background: #fff; border: 1px solid var(--line-d); border-radius: 12px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 1px;
}
.show-kpis .lab { font-size: 11px; font-weight: 600; color: var(--muted-d); letter-spacing: .04em; }
.show-kpis .val { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink-d); }
.show-kpis .val.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.show-kpis .val.ok { color: #0d9466; } .show-kpis .val.warn { color: #b45309; } .show-kpis .val.vio { color: #4a1fa8; }
@media (max-width: 560px) { .show-kpis { grid-template-columns: repeat(2, 1fr); } .show-tabs { display: none; } }
.show-imgs { position: relative; aspect-ratio: 16 / 10; background: #050f38; }
.show-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.js .show-imgs img {
  cursor: zoom-in;
  opacity: 0; transform: scale(1.04); clip-path: inset(0 0 100% 0);
  transition: opacity .6s var(--ease), transform .8s var(--ease), clip-path .8s var(--ease);
}
html:not(.js) .show-imgs { aspect-ratio: auto; }
html:not(.js) .show-imgs img { position: static; height: auto; }
html.js .show-imgs img.is-on { opacity: 1; transform: none; clip-path: inset(0 0 0 0); z-index: 2; }
/* Scrub-owned deck (desktop pin): the wipe/scale entry is too violent when
   scroll can flip several slides per second — plain crossfade instead. */
html.js .show-imgs.scrubbed img { transform: none; clip-path: none; transition: opacity .4s linear; }
.show-dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.show-dots span { width: 22px; height: 4px; border-radius: 4px; background: var(--line-d); transition: background .3s, width .3s; }
.show-dots span.is-on { background: var(--v2); width: 38px; }
@media (max-width: 980px) {
  .show-grid { grid-template-columns: 1fr; }
  .show-copy { grid-auto-flow: column; grid-auto-columns: 75%; overflow-x: auto; scrollbar-width: none; gap: 12px; }
  .show-copy::-webkit-scrollbar { display: none; }
  .show-cap { opacity: 1; background: #fff; border-color: var(--line-d); }
  .show-kpis { margin-top: 12px; }
}

/* ============================================================
   BENEFITS — numbered editorial rows
   ============================================================ */
.ben-rows { border-top: 1px solid var(--line-d); }
.ben-row {
  position: relative; display: grid; grid-template-columns: 70px 60px 1fr 1.2fr 50px; align-items: center; gap: 22px;
  padding: 30px 10px; border-bottom: 1px solid var(--line-d);
  transition: background .35s, padding .35s var(--ease);
}
.ben-row:hover { background: #fff; padding-inline-start: 26px; }
.ben-row .ben-i {
  font-family: var(--font-display); font-weight: 700; font-size: 34px;
  color: transparent; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--c) 65%, transparent);
}
.ben-row .ic {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c);
}
.ben-row .ic svg { width: 21px; height: 21px; }
.ben-row h3 { font-size: clamp(18px, 2vw, 24px); }
.ben-row p { color: var(--muted-d); font-size: 14.5px; }
.ben-arrow {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-d); color: var(--ink-d);
  transform: rotate(0); transition: transform .4s var(--ease), background .35s, color .35s, border-color .35s;
}
.ben-arrow svg { width: 17px; height: 17px; }
.ben-row:hover .ben-arrow { transform: rotate(45deg); background: var(--ink-d); color: #fff; border-color: var(--ink-d); }
@media (max-width: 860px) {
  .ben-row { grid-template-columns: 50px 1fr 40px; grid-template-areas: "i t a" "i p a"; row-gap: 6px; }
  .ben-row .ben-i { grid-area: i; font-size: 26px; } .ben-row .ic { display: none; }
  .ben-row h3 { grid-area: t; } .ben-row p { grid-area: p; } .ben-arrow { grid-area: a; }
}

/* ============================================================
   VALEURS — editorial dark rows
   ============================================================ */
.val-rows { display: grid; gap: 14px; }
.val-row {
  position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 26px; align-items: center;
  padding: 30px 34px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, var(--glass), rgba(255,255,255,0.015));
  border: 1px solid var(--glass-bd);
  transition: border-color .4s, transform .4s var(--ease);
}
.val-row:hover { transform: translateX(10px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.val-row::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at 8% 50%, color-mix(in srgb, var(--c) 14%, transparent), transparent 72%); opacity: .72;
}
.val-row .ic {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.val-row .ic svg { width: 23px; height: 23px; }
.val-body h3 { font-size: 20px; display: inline; margin-inline-end: 14px; }
.val-body em { font-style: normal; color: color-mix(in srgb, var(--c) 85%, #fff); font-size: 14px; font-weight: 600; }
.val-body p { margin-top: 6px; color: var(--muted); font-size: 14.5px; max-width: 720px; }
.val-i {
  font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--c) 45%, transparent);
}
@media (max-width: 760px) { .val-row { grid-template-columns: 1fr; } .val-i { display: none; } }

/* ============================================================
   TRUST
   ============================================================ */
/* Trois blocs depuis #2599 : la piste vide d'un `repeat(4, …)` laissait un
   quart de rangée blanc à droite. */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trust-card {
  background: #fff; border: 1px solid var(--line-d); border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.trust-card:hover {
  transform: translateY(-8px); border-color: color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--c) 55%, transparent);
}
.trust-card .ic {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
  background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); margin-bottom: 20px;
}
.trust-card .ic svg { width: 21px; height: 21px; }
.trust-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.trust-card p { font-size: 13.5px; color: var(--muted-d); }
.poweredby { margin-top: 44px; text-align: center; color: var(--muted-d); font-size: 14px; }
@media (max-width: 980px) { .trust-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
	.ticker-track > :nth-child(n + 9) { display: none; }
	.ticker-track { gap: 10px 16px; padding: 14px 18px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap { max-width: 860px; }
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--line-d); border-radius: 16px; overflow: hidden;
  transition: border-color .35s, box-shadow .35s;
}
.faq-item[open] { border-color: rgba(74, 31, 168, 0.45); box-shadow: 0 24px 60px -34px rgba(74, 31, 168, 0.4); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x { flex: 0 0 auto; width: 18px; height: 18px; color: var(--v1); transition: transform .35s var(--ease); }
.faq-item[open] .faq-x { transform: rotate(45deg); }
.faq-a { padding: 0 24px 22px; color: var(--muted-d); font-size: 14.5px; line-height: 1.7; max-width: 720px; }

/* ============================================================
   CTA — screenshot collage + form
   ============================================================ */
.cta-final { overflow: clip; padding: clamp(110px, 16vh, 200px) 0; }
.cta-collage {
  position: absolute; inset: -12% -4%; display: flex; gap: 22px; z-index: 0;
  transform: rotate(-7deg); opacity: .6;
}
.col-track { flex: 1; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.col-track img { border-radius: 14px; border: 1px solid var(--glass-bd); width: 100%; }
.ct-a, .ct-b, .ct-c { animation: none; }
@keyframes colup { to { transform: translateY(-50%); } }
.cta-veil {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70% 70% at 50% 50%, rgba(13, 8, 35, 0.55) 0%, rgba(13, 8, 35, 0.92) 62%, var(--bg0) 100%);
}
.cta-inner { position: relative; z-index: 2; text-align: center; max-width: 780px; }
.cta-inner .display { margin-top: 22px; }
.cta-inner .lead { margin: 18px auto 0; max-width: 560px; text-wrap: balance; }
.cta-form { display: flex; gap: 12px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }
.cta-input {
  display: flex; align-items: center; gap: 10px; min-width: min(360px, 86vw);
  padding: 0 18px; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(10px);
  transition: border-color .3s, box-shadow .3s;
}
.cta-input:focus-within { border-color: var(--v2); box-shadow: 0 0 0 4px rgba(124, 84, 208, 0.22), 0 0 40px -8px rgba(124, 84, 208,.5); }
.cta-input svg { width: 17px; height: 17px; color: var(--faint); }
.cta-input input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 14.5px; padding: 16px 0; }
.cta-input input::placeholder { color: var(--faint); }
.fineprint { margin-top: 20px; font-size: 12.5px; color: var(--faint); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; background: var(--bg0); border-top: 1px solid var(--glass-bd); padding: 70px 0 34px; overflow: clip; }
.foot-mega {
  position: absolute; left: 50%; bottom: -4vw; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(110px, 19vw, 300px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(196, 168, 255, 0.10);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.foot-grid { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { margin-top: 16px; color: var(--muted); font-size: 14px; max-width: 320px; }
.foot-col { display: grid; gap: 10px; align-content: start; }
.foot-col h3 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 6px; }
.foot-col a { color: var(--muted); font-size: 14px; width: fit-content; position: relative; transition: color .25s; }
.foot-col a::after { content: ""; position: absolute; bottom: -2px; inset-inline-start: 0; width: 0; height: 1px; background: var(--grad); transition: width .3s var(--ease); }
.foot-col a:hover { color: var(--ink); }
.foot-col a:hover::after { width: 100%; }
.foot-bottom {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 13px;
}
.foot-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-legal a { color: var(--faint); font-size: 13px; transition: color .25s; }
.foot-legal a:hover { color: var(--ink); }
.foot-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-socials a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--glass-bd); color: var(--muted);
  transition: transform .3s var(--ease), color .3s, border-color .3s, background .3s;
}
.foot-socials a:hover { transform: translateY(-4px); color: #fff; border-color: var(--v2); background: rgba(124, 84, 208, 0.14); }
.foot-socials svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 9985; display: grid; place-items: center; padding: 4vmin;
  background: rgba(13, 8, 35, 0.9); backdrop-filter: blur(14px);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 90vh; width: auto; border-radius: 14px; border: 1px solid var(--glass-bd); box-shadow: 0 60px 160px -40px #000; animation: lbin .35s var(--ease); }
@keyframes lbin { from { opacity: 0; transform: scale(.94); } }
.lb-close {
  position: absolute; top: 22px; inset-inline-end: 22px; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--glass-2); border: 1px solid var(--glass-bd); color: #fff;
  transition: transform .3s var(--ease), background .3s;
}
.lb-close:hover { transform: rotate(90deg); background: rgba(205, 34, 59, .5); }
.lb-close svg { width: 20px; height: 20px; }
.video-modal video {
  display: block; width: min(1080px, 92vw); height: auto; max-width: 92vw; max-height: 86vh;
  aspect-ratio: 16 / 9; object-fit: contain; border-radius: 14px;
  border: 1px solid var(--glass-bd); background: #000;
  box-shadow: 0 60px 160px -40px #000; animation: lbin .35s var(--ease);
}

/* ---------- generic reveal (IO-driven, GSAP-free fallback) ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(20px); }
html.js [data-reveal].in { opacity: 1; transform: none; transition: opacity .24s var(--ease), transform .24s var(--ease); }

/* ---------- i18n / RTL / fonts ---------- */
:lang(ar) { letter-spacing: 0 !important; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .eyebrow, :lang(ar) .btn { font-family: 'Cairo', var(--font-body); }
:lang(zgh) h1, :lang(zgh) h2, :lang(zgh) h3 { font-family: 'Noto Sans Tifinagh', var(--font-display); font-synthesis: none; }
[dir="rtl"] .ticker { transform: rotate(1.6deg) scale(1.02); }
[dir="rtl"] .btn svg.lucide-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .ben-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .ben-row:hover .ben-arrow { transform: rotate(-45deg); }
[dir="rtl"] .mod-card { direction: rtl; text-align: start; }
[dir="rtl"] .sol-item:hover { transform: translateX(-8px); }
[dir="rtl"] .val-row:hover { transform: translateX(-10px); }
[dir="rtl"] .show-cap.is-on { transform: translateX(-6px); }

/* Brand-charter motion policy: user-triggered transitions only. */
[dir="rtl"] .ticker, [dir="rtl"] .show-cap.is-on { transform: none; }
.eyebrow .dot, .ai-live, .mp-dot, .cue-line::after { animation: none; }
.pipe-pulse, .mp-scan { display: none; }

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.sheet :focus-visible { outline-color: #4a1fa8; }

/* visually hidden (screen-reader only) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- reduced motion: kill every loop, show everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .eyebrow .dot, .ai-live,
  .shot-scan, .cue-line::after, .ticker-track,
  .ct-a, .ct-b, .ct-c, [data-float="1"], [data-float="2"], [data-float="3"] {
    animation: none !important;
  }
  html.js [data-reveal], html.js [data-intro] { opacity: 1 !important; transform: none !important; }
  .pipe-node { opacity: 1 !important; transform: none !important; }
  .pipe-pulse { display: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============ Pricing (#pricing) ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid rgba(44, 26, 115, 0.14); border-radius: 18px;
  padding: 26px 22px; background: #fff;
}
.price-card.featured { border-color: rgba(74, 31, 168, 0.55); box-shadow: 0 24px 60px -34px rgba(74, 31, 168, 0.4); }
.price-card h3 { font-size: 18px; font-weight: 700; }
.price-amt { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-amt span { font-size: 12px; font-weight: 600; color: #7b7595; letter-spacing: 0; }
.price-card p { font-size: 13.5px; line-height: 1.55; color: #585271; }
.price-badge {
  position: absolute; top: -11px; inset-inline-start: 22px;
  background: linear-gradient(90deg, #8b69d9, #6b4bc1); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
#pricing .fineprint { margin-top: 18px; text-align: center; }
[dir="rtl"] .price-card { text-align: start; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LIGHT EDITION — predominantly light brand system
   Navy bookends the light editorial sections: hero, final CTA and modals.
   ============================================================ */
body {
	background: #fbfafc;
	color: var(--ink-d);
}

.lead { color: var(--muted-d); }
.grad,
.hero .grad,
.dark-zone:not(.cta-final) .grad {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
}
.brandword {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
}
.eyebrow {
	color: var(--brand-violet);
	background: rgba(176, 137, 242, .12);
	border-color: rgba(74, 31, 168, .22);
	border-radius: 999px;
	clip-path: none;
}
.eyebrow .dot { box-shadow: none; }
.btn-ghost {
	background: rgba(255, 255, 255, .82);
	border-color: var(--line-d);
	color: var(--brand-navy);
	box-shadow: 0 10px 28px -22px rgba(7, 25, 87, .5);
}
.btn-ghost:hover {
	background: #fff;
	border-color: rgba(74, 31, 168, .34);
}

/* Light, full-width navigation */
.nav {
	top: 0;
	padding: 0 18px;
	background: rgba(255, 255, 255, .9);
	border-bottom: 1px solid rgba(7, 25, 87, .08);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.nav-frame {
	max-width: 1380px;
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
}
.nav.scrolled .nav-frame {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.nav-links a { color: #625d7b; }
.nav-links a:hover {
	color: var(--brand-navy);
	background: rgba(176, 137, 242, .12);
}
.lang-switch { border-color: var(--line-d); background: #fff; }
.lang-switch button { color: #746e8d; }
.lang-switch button:hover { color: var(--brand-navy); }
.nav-burger {
	border-color: var(--line-d);
	color: var(--brand-navy);
	background: #fff;
}

/* Connected enterprise — cinematic navy, clear product proof, one-shot motion. */
.hero {
	min-height: auto;
	padding: calc(var(--nav-h) + 20px) 0 0;
	display: block;
	background: #fbfafc;
	color: #fff;
	overflow: clip;
}
.hero-shell {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .43fr) minmax(0, .57fr);
	align-items: center;
	column-gap: 42px;
	width: min(1600px, calc(100% - 40px));
	margin: 0 auto;
	padding: 52px clamp(32px, 3.4vw, 56px) 0;
	overflow: clip;
	border: 1px solid rgba(176, 137, 242, .18);
	border-radius: 28px;
	background: var(--brand-navy);
	box-shadow: 0 32px 80px -60px rgba(7, 25, 87, .6);
}
.hero-shell::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, var(--brand-navy) 0%, rgba(7, 25, 87, .97) 30%, rgba(7, 25, 87, .5) 65%, rgba(7, 25, 87, .2));
	content: "";
	pointer-events: none;
}
.hero-cover-art {
	position: absolute;
	z-index: 0;
	inset-block: 0;
	inset-inline-end: 0;
	display: block;
	width: 70%;
	height: 100%;
	opacity: .22;
	pointer-events: none;
	user-select: none;
}
.hero-cover-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% 64%;
}
[dir="rtl"] .hero-shell::after {
	background: linear-gradient(270deg, var(--brand-navy) 0%, rgba(7, 25, 87, .97) 30%, rgba(7, 25, 87, .5) 65%, rgba(7, 25, 87, .2));
}
.hero-inner {
	position: relative;
	z-index: 3;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: start;
}
.hero .eyebrow {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #d8c4fa;
	font-size: 10px;
	letter-spacing: .12em;
	line-height: 1.6;
}
.hero .eyebrow .dot { background: var(--brand-red); box-shadow: 0 0 0 5px rgba(205, 34, 59, .16); }
h1.hero-h1 {
	margin-top: 28px;
	font-size: clamp(50px, 4.6vw, 72px);
	line-height: 1.03;
	letter-spacing: -.055em;
	color: #fff;
	text-wrap: initial;
}
.hero-h1 .thin { display: block; margin-bottom: 18px; font-size: .52em; line-height: 1.3; letter-spacing: -.025em; color: #e6e6e6; }
.hero-h1 br { display: none; }
.hero-h1 .brandword { display: block; background: none; color: var(--brand-lavender); }
.hero-h1 .apos { color: var(--brand-lavender); -webkit-text-fill-color: var(--brand-lavender); }
.hero-sub {
	max-width: 470px;
	margin: 26px 0 0;
	font-size: 16px;
	line-height: 1.75;
	color: #cdcde0;
}
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; }
.hero-cta .btn-primary { min-height: 54px; border-color: rgba(176, 137, 242, .55); box-shadow: 0 10px 36px -15px rgba(176, 137, 242, .55); }
.hero-cta .btn-ghost { gap: 12px; padding: 0 4px 0 0; min-height: 44px; border: 0; background: none; color: #fff; box-shadow: none; backdrop-filter: none; text-align: start; }
.hero-cta .btn-ghost:hover { color: #e2ceff; transform: none; }
.hero-play { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(176, 137, 242, .55); border-radius: 50%; background: rgba(176, 137, 242, .08); transition: background .2s; }
.hero-cta .btn-ghost:hover .hero-play { background: rgba(176, 137, 242, .22); }
.hero-play svg { width: 15px; height: 15px; fill: currentColor; }
.hero-video-duration { font-size: 11px; font-weight: 400; color: #bbb7d6; padding-inline-start: 10px; border-inline-start: 1px solid rgba(176, 137, 242, .3); }
.hero-assure {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	max-width: 400px;
	margin-top: 20px;
	font-size: 11px;
	color: #b8b9d3;
	line-height: 1.55;
}
.hero-assure svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--brand-lavender); }
.hero-foundation { position: relative; z-index: 3; grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 22px 0; border-top: 1px solid rgba(176, 137, 242, .2); font-size: 11px; color: #c5c5da; }
.hero-origin, .hero-system, .hero-system li { display: flex; align-items: center; gap: 8px; margin: 0; }
.hero-origin svg { width: 15px; height: 15px; color: #ef8594; }
.hero-system { flex-wrap: wrap; gap: 24px; padding: 0; list-style: none; }
.hero-system svg { width: 14px; height: 14px; color: var(--brand-lavender); }
.shot-frame:not(.suite-hub) {
	border-color: rgba(7, 25, 87, .13);
	background: #fff;
	box-shadow: 0 38px 100px -46px rgba(7, 25, 87, .42), 0 18px 50px -32px rgba(74, 31, 168, .34);
}
.shot-bar:not(.suite-hub-bar) {
	background: rgba(255, 255, 255, .96);
	border-bottom-color: rgba(7, 25, 87, .1);
}
.shot-bar .url { color: #777189; }
.hud-chip:not(.suite-node) {
	background: rgba(255, 255, 255, .92);
	border-color: rgba(7, 25, 87, .12);
	color: var(--brand-navy);
	box-shadow: 0 18px 42px -24px rgba(7, 25, 87, .42);
}
.hud-chip .lab { color: #716b86; }
.hud-chip:not(.suite-node) b { color: var(--brand-violet); }
.scrollcue { display: none; }

.hero-proof {
	position: relative;
	z-index: 7;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: min(1100px, calc(100% - 96px));
	margin: -148px auto 72px;
	overflow: hidden;
	border: 1px solid rgba(7, 25, 87, .1);
	border-radius: 24px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 28px 70px -42px rgba(7, 25, 87, .48);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.hero-proof-cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px 32px;
	border-inline-end: 1px solid rgba(7, 25, 87, .1);
}
.hero-proof-cell:last-child { border-inline-end: 0; }
.hero-proof-cell strong {
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--brand-violet);
}
.hero-proof-cell span { color: #625d77; font-size: 13.5px; }

/* Light section rhythm */
.sheet { background: #fbfafc; }
.statement {
	margin-top: 0;
	border-radius: 0;
	background: #fff url("assets/brand-ribbon.svg") center 24% / min(1500px, 110vw) auto no-repeat;
}
#probleme { background: #f5f4f8; }
#solution { background: #fff; }
#apercu { background: #f7f6fa; }
#benefices { background: #fff; }
#confiance { background: #f7f6fa; }
#faq { background: #fff; }
#pricing {
	padding: clamp(90px, 13vh, 150px) 0;
	background: #f7f6fa;
}

/* Former dark feature/module/value/stat sections are now light. */
.dark-zone:not(.cta-final) {
	background: #f7f6fa;
	color: var(--brand-navy);
}
.dark-zone:not(.cta-final)::before {
	background:
		radial-gradient(60% 42% at 50% 0%, rgba(176, 137, 242, .16), transparent 68%),
		url("assets/brand-orbit.svg") top center / min(1450px, 116vw) auto no-repeat;
	opacity: .16;
}
.dark-zone:not(.cta-final) .lead { color: var(--muted-d); }
.dark-zone:not(.cta-final) .eyebrow {
	color: var(--brand-violet);
	background: rgba(176, 137, 242, .12);
	border-color: rgba(74, 31, 168, .22);
}
.feat-card {
	background: rgba(255, 255, 255, .9);
	border-color: var(--line-d);
	box-shadow: 0 22px 50px -46px rgba(7, 25, 87, .5);
}
.feat-card h3 { color: var(--brand-navy); }
.feat-card p { color: var(--muted-d); }
.feat-card .tag {
	color: color-mix(in srgb, var(--c) 68%, var(--brand-navy));
	background: color-mix(in srgb, var(--c) 10%, #fff);
}
.card-num { -webkit-text-stroke-color: rgba(74, 31, 168, .17); }

#modules { background: #fff; }
.mod-row {
	color: var(--brand-navy);
	background: #f8f7fb;
	border-color: rgba(7, 25, 87, .06);
}
.mod-row:hover,
.mod-row.on {
	background: rgba(176, 137, 242, .13);
	border-color: color-mix(in srgb, var(--c) 38%, transparent);
	box-shadow: inset 0 0 0 1px rgba(74, 31, 168, .07);
}
.mr-num,
.mr-go { color: #77718c; }
.mr-t { color: var(--brand-navy); }
.mr-d { color: var(--muted-d); }

#valeurs { background: #f7f6fa; }
.val-row {
	background: rgba(255, 255, 255, .9);
	border-color: var(--line-d);
}
.val-row:hover { transform: none; }
.val-body h3 { color: var(--brand-navy); }
.val-body em { color: color-mix(in srgb, var(--c) 70%, var(--brand-navy)); }
.val-body p { color: var(--muted-d); }

/* SoumIA explainer */
.soumia {
	padding: clamp(84px, 12vh, 140px) 0;
	background: #f7f6fa;
}
.soumia-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
	align-items: center;
	gap: clamp(34px, 5vw, 72px);
	min-height: 660px;
	padding: clamp(38px, 5.5vw, 72px);
	overflow: hidden;
	border: 1px solid rgba(7, 25, 87, .1);
	border-radius: 34px;
	background:
		radial-gradient(80% 90% at 100% 12%, rgba(176, 137, 242, .18), transparent 64%),
		#fff;
	box-shadow: 0 38px 90px -66px rgba(7, 25, 87, .42);
}
.soumia-vector {
	position: absolute;
	right: -18%;
	bottom: -4%;
	width: min(900px, 72vw);
	opacity: .13;
	pointer-events: none;
}
.soumia-copy { position: relative; z-index: 3; }
.soumia-copy h2 { margin-top: 20px; text-wrap: balance; }
.soumia-copy > .lead { margin-top: 18px; max-width: 650px; }
.soumia-flow { display: grid; gap: 10px; margin-top: 28px; }
.soumia-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 13px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid rgba(7, 25, 87, .09);
	border-radius: 15px;
	background: #f9f8fc;
}
.soumia-step-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(176, 137, 242, .17);
	color: var(--brand-violet);
}
.soumia-step-icon svg { width: 18px; height: 18px; }
.soumia-step b { display: block; color: var(--brand-navy); font-size: 14px; }
.soumia-step small { display: block; margin-top: 2px; color: #625d77; font-size: 12.5px; line-height: 1.5; }
.soumia-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: #6d6784;
	font-size: 12.5px;
}
.soumia-note svg { width: 16px; height: 16px; color: var(--brand-violet); }
/* `.hero-play` et `.hero-video-duration` sont dessinés pour le hero SOMBRE :
   repris tels quels ici, le chiffre de durée passait en gris pâle sur blanc. */
.soumia-video-cta { margin-top: 26px; gap: 12px; }
.soumia-video-cta .hero-play {
	width: 34px;
	height: 34px;
	border-color: rgba(74, 31, 168, .35);
	background: rgba(74, 31, 168, .08);
	color: var(--brand-violet);
}
.soumia-video-cta:hover .hero-play { background: rgba(74, 31, 168, .16); }
.soumia-video-cta .hero-video-duration {
	color: var(--muted-d);
	border-inline-start-color: rgba(74, 31, 168, .22);
}
.soumia-visual {
	position: relative;
	z-index: 2;
	min-height: 570px;
	overflow: hidden;
	border: 1px solid rgba(74, 31, 168, .14);
	border-radius: 28px;
	background:
		url("assets/brand-orbit.svg") center / 155% auto no-repeat,
		radial-gradient(circle at 50% 42%, rgba(176, 137, 242, .28), transparent 48%),
		linear-gradient(150deg, #f8f5ff, #eeebf7);
}
.soumia-mascot {
	position: absolute;
	right: -8%;
	bottom: -8%;
	z-index: 2;
	width: min(540px, 104%);
	height: auto;
	filter: drop-shadow(0 32px 30px rgba(74, 31, 168, .2));
}
/* #1604 — the user-supplied MCP illustration is a 2:3 portrait. Keep it
   centred and contained so every provider node remains visible. */
.mcp-visual {
	display: grid;
	place-items: center;
	justify-self: center;
	width: min(100%, 436px);
	min-height: 0;
	padding: 28px;
}
.mcp-visual picture {
	display: block;
	width: min(100%, 380px);
}
.mcp-illustration {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	object-position: center;
	border-radius: 18px;
}
@media (max-width: 900px) {
	.mcp-visual {
		width: min(100%, 416px);
		padding: 18px;
	}
}

.soumia-identity {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 13px 8px 8px;
	border: 1px solid rgba(7, 25, 87, .1);
	border-radius: 16px;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 18px 40px -28px rgba(7, 25, 87, .4);
	backdrop-filter: blur(12px);
}
.soumia-identity img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.soumia-identity b { display: block; color: var(--brand-navy); font-size: 13px; }
.soumia-identity small { display: block; color: #716b86; font-size: 11px; }
.soumia-conversation {
	position: absolute;
	left: 22px;
	bottom: 22px;
	z-index: 4;
	display: grid;
	gap: 8px;
	width: min(330px, calc(100% - 44px));
}
.soumia-conversation p {
	padding: 12px 14px;
	border: 1px solid rgba(7, 25, 87, .1);
	border-radius: 14px;
	background: rgba(255, 255, 255, .93);
	box-shadow: 0 18px 46px -30px rgba(7, 25, 87, .46);
	font-size: 12.5px;
	line-height: 1.45;
}
.soumia-question { color: var(--brand-navy); font-weight: 650; }
.soumia-answer { display: flex; gap: 8px; color: #5e5872; }
.soumia-answer svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--brand-violet); }
/* Final CTA is the page's single inverse band. */
.dark-zone.cta-final {
	background: var(--brand-navy);
	color: #fff;
}
.cta-final .lead { color: #c1badc; }
.cta-final .eyebrow {
	color: #e1d5fb;
	background: rgba(176, 137, 242, .12);
	border-color: rgba(176, 137, 242, .3);
}
.cta-final .grad {
	background: var(--grad-text-dark);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Light footer closes the page without adding another dark block. */
.footer {
	background: #fff;
	color: var(--brand-navy);
	border-top-color: var(--line-d);
}
.foot-mega { -webkit-text-stroke-color: rgba(74, 31, 168, .08); }
.foot-brand p,
.foot-col a { color: #625d77; }
.foot-col h3 { color: #77718c; }
.foot-col a:hover { color: var(--brand-navy); }
.foot-bottom { border-top-color: var(--line-d); color: #77718c; }
.foot-legal a { color: #77718c; }
.foot-legal a:hover { color: var(--brand-navy); }
.foot-socials a { border-color: var(--line-d); color: var(--brand-violet); }
.foot-socials a:hover { color: #fff; }

/* Contact block under the brand column — fills the left whitespace. */
.foot-contact { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.foot-contact li { margin: 0; }
.foot-contact .fc-row { display: flex; align-items: flex-start; gap: 11px; color: #625d77; max-width: 300px; }
a.fc-row { transition: color .25s; }
a.fc-row:hover .fc-v { color: var(--brand-navy); }
.foot-contact .fc-row > i, .foot-contact .fc-row > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--brand-violet); }
.fc-txt { display: grid; gap: 2px; line-height: 1.35; justify-items: start; }
.fc-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9a94ab; font-weight: 500; }
/* Values are always LTR (phone, email, Latin address) — isolate so RTL pages
   don't reorder the digits; justify-items:start keeps them on the start edge. */
.fc-v { font-size: 14px; color: #625d77; transition: color .25s; overflow-wrap: break-word; direction: ltr; unicode-bidi: isolate; }

@media (max-width: 1120px) {
	.hero-shell {
		grid-template-columns: 1fr;
		padding: 54px 42px 0;
	}
	.hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
	.hero-sub { margin-inline: auto; }
	.hero-cta { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px; }
	.hero-assure { margin-inline: auto; justify-content: center; }
	.hero-stage { width: min(680px, 100%); margin: 48px auto 0; }
	.hero-cover-art {
		inset-block: auto 0;
		width: 100%;
		height: 70%;
	}
	.hero-shell::after,
	[dir="rtl"] .hero-shell::after {
		background: linear-gradient(180deg, var(--brand-navy) 0%, rgba(7, 25, 87, .95) 30%, rgba(7, 25, 87, .5) 65%, rgba(7, 25, 87, .4));
	}
	.hero-proof { margin-top: -132px; }
	.soumia-card { grid-template-columns: 1fr 1fr; }
}

/* Huitième entrée de menu (Formations, #3131) : à 1280px la barre de liens
   poussait la colonne de gauche sous la largeur naturelle du wordmark, qui se
   faisait comprimer par le `max-width: 100%` global des images. On resserre
   l'entre-deux des liens plutôt que de rogner la marque, et seulement sur la
   bande où ça se joue : au-dessus de 1400px rien ne change. */
@media (min-width: 1280px) and (max-width: 1400px) {
	.nav-links a { padding-inline: 9px; font-size: 13px; }
	.nav-cta { gap: 9px; }
}

@media (max-width: 1279px) {
	.nav-frame { padding-inline: 8px; }
	html.js .nav-frame { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
	html.js .nav-links {
		background: rgba(255, 255, 255, .98);
		border-color: var(--line-d);
		box-shadow: 0 26px 70px -40px rgba(7, 25, 87, .5);
	}
	html.js .nav-links a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 900px) {
	.hero-stage { margin-top: 72px; }
	.hero-foundation { flex-direction: column; align-items: center; gap: 14px; }
	.soumia-card { grid-template-columns: 1fr; }
	.soumia-copy { max-width: 720px; }
	.soumia-visual { min-height: 590px; }
	.mcp-visual { min-height: 0; }
}

@media (max-width: 640px) {
	.nav { padding-inline: 12px; }
	.nav-frame { padding-block: 11px; }
	.brand img.brand-logo { height: 30px; }
	.nav-cta { gap: 8px; }
	.lang-switch button { padding-inline: 8px; }
	.hero { padding-top: calc(var(--nav-h) + 12px); }
	.hero-shell {
		width: calc(100% - 24px);
		padding: 36px 20px 0;
		border-radius: 20px;
	}
	h1.hero-h1 { font-size: clamp(38px, 10.8vw, 62px); margin-top: 24px; }
	.hero-h1 .thin { font-size: .52em; margin-bottom: 14px; }
	.hero .eyebrow { font-size: 9px; letter-spacing: .05em; }
	.hero-sub { font-size: 14px; line-height: 1.7; margin-top: 22px; }
	.hero-cta { display: grid; grid-template-columns: 1fr; width: 100%; gap: 16px; margin-top: 24px; }
	.hero-cta .btn { width: 100%; }
	.hero-cta .btn-ghost { justify-content: center; }
	.hero-assure { text-align: start; }
	.hero-stage { width: 100%; margin-top: 56px; }
	.suite-hub-bar { padding: 10px; gap: 7px; }
	.suite-hub-bar strong { font-size: 11px; }
	.suite-hub-bar span { font-size: 9px; padding-inline-start: 7px; }
	.suite-hub-bar > svg { width: 14px; height: 14px; }
	.suite-node b { font-size: 13px; }
	.suite-node small { font-size: 11px; }
	.hero-foundation { margin-top: 28px; font-size: 10px; }
	.hero-system { gap: 10px 16px; justify-content: center; }
	.hero-shot { border-radius: 13px; }
	.chip-ai { top: -18px; }
	.hero-proof {
		grid-template-columns: 1fr;
		width: calc(100% - 48px);
		margin: -108px auto 52px;
		border-radius: 18px;
	}
	.hero-proof-cell {
		padding: 18px 20px;
		border-inline-end: 0;
		border-bottom: 1px solid rgba(7, 25, 87, .09);
	}
	.hero-proof-cell:last-child { border-bottom: 0; }
	.statement { padding-top: 90px; }
	.soumia { padding-block: 70px; }
	.soumia-card {
		padding: 30px 18px 18px;
		border-radius: 24px;
	}
	.soumia-step { padding: 12px; }
	.soumia-note { align-items: flex-start; }
	.soumia-visual { min-height: 490px; border-radius: 20px; }
	.mcp-visual { min-height: 0; }
	.soumia-mascot { right: -14%; bottom: -2%; width: 380px; }
	.soumia-identity { top: 14px; left: 14px; }
	.soumia-conversation { left: 14px; bottom: 14px; width: calc(100% - 28px); }
	.mod-row { min-height: 54px; }
	.footer { padding-top: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.soumia-mascot { transform: none !important; }
}

/* ============================================================
   PRICING — complete plans + semantic comparison
   ============================================================ */
section[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

.pricing-section { overflow: clip; }
.pricing-section .section-head { max-width: 860px; }
.pricing-grid {
	align-items: stretch;
	gap: 16px;
	margin-top: 0;
}
.price-card {
	gap: 0;
	min-width: 0;
	padding: 30px 22px 22px;
	border-color: var(--line-d);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 18px 50px -42px rgba(7, 25, 87, .36);
}
.price-card.featured {
	border-color: rgba(74, 31, 168, .5);
	background: linear-gradient(180deg, rgba(176, 137, 242, .12), #fff 35%);
	box-shadow: 0 28px 70px -42px rgba(74, 31, 168, .5);
}
.price-card h3 { color: var(--brand-navy); font-size: 22px; }
.price-summary {
	min-height: 66px;
	margin-top: 10px;
	color: var(--muted-d);
}
.price-kicker {
	margin-top: 24px;
	color: var(--brand-violet);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.35;
	text-transform: uppercase;
}
.price-amt {
	margin-top: 7px;
	color: var(--brand-navy);
	font-size: clamp(23px, 2.2vw, 30px);
	line-height: 1.15;
}
.price-total {
	margin-top: 6px;
	color: #716b89;
	font-size: 12.5px;
}
.price-facts {
	display: grid;
	gap: 0;
	margin: 22px 0 24px;
	border-top: 1px solid var(--line-d);
}
.price-facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line-d);
}
.price-facts dt { color: #716b89; font-size: 12px; }
.price-facts dd {
	color: var(--brand-navy);
	font-size: 12.5px;
	font-weight: 700;
	text-align: end;
}
.price-facts .trial-fact {
	margin-inline: -10px;
	padding-inline: 10px;
	border-radius: 8px;
	background: rgba(176, 137, 242, .14);
}
.price-cta {
	width: 100%;
	min-height: 46px;
	margin-top: auto;
	text-align: center;
}
.price-card .btn-ghost {
	border-color: rgba(7, 25, 87, .18);
	color: var(--brand-navy);
	background: #fff;
}
.price-card .btn-ghost:hover { border-color: rgba(74, 31, 168, .4); }
.price-badge {
	top: -12px;
	background: var(--brand-violet);
	box-shadow: 0 8px 24px -14px rgba(74, 31, 168, .65);
}
#pricing .fineprint { color: #716b89; }

.pricing-comparison {
	margin-top: clamp(64px, 8vw, 96px);
}
.pricing-comparison-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 22px;
}
.pricing-comparison-head .price-kicker { margin-top: 0; }
.pricing-comparison-head h3 {
	max-width: 720px;
	margin-top: 8px;
	color: var(--brand-navy);
	font-size: clamp(24px, 3vw, 38px);
}
.pricing-scroll-hint {
	max-width: 330px;
	color: #716b89;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: end;
}
.pricing-table-scroll {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	border: 1px solid var(--line-d);
	border-radius: 20px;
	background: #fff;
	box-shadow: inset -20px 0 20px -24px rgba(7, 25, 87, .7), 0 24px 65px -52px rgba(7, 25, 87, .45);
	-webkit-overflow-scrolling: touch;
}
.pricing-table-scroll:focus-visible {
	outline: 3px solid rgba(74, 31, 168, .36);
	outline-offset: 3px;
}
[dir="rtl"] .pricing-table-scroll {
	box-shadow: inset 20px 0 20px -24px rgba(7, 25, 87, .7), 0 24px 65px -52px rgba(7, 25, 87, .45);
}
.pricing-table {
	width: 100%;
	min-width: 840px;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--brand-navy);
	font-size: 13px;
	table-layout: fixed;
}
.pricing-table .metric-col { width: 260px; }
.pricing-table col:not(.metric-col) { width: 145px; }
.pricing-table th,
.pricing-table td {
	padding: 15px 14px;
	border-bottom: 1px solid var(--line-d);
	background: #fff;
	vertical-align: middle;
}
.pricing-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	min-height: 68px;
	background: #f8f7fb;
	font-size: 13px;
	font-weight: 800;
	text-align: center;
}
.pricing-table thead th:first-child { text-align: start; }
.pricing-table tr > :first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 2;
	border-inline-end: 1px solid var(--line-d);
	box-shadow: 10px 0 20px -20px rgba(7, 25, 87, .6);
	text-align: start;
}
[dir="rtl"] .pricing-table tr > :first-child {
	box-shadow: -10px 0 20px -20px rgba(7, 25, 87, .6);
}
.pricing-table thead tr > :first-child { z-index: 4; background: #f8f7fb; }
.pricing-table tbody th[scope="row"] { font-weight: 700; }
.pricing-table tbody th[scope="row"] small {
	display: block;
	margin-top: 4px;
	color: #716b89;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
}
.pricing-table td { color: #454064; text-align: center; }
.pricing-table .is-business {
	border-inline: 1px solid rgba(74, 31, 168, .15);
	background: rgba(176, 137, 242, .1);
	color: var(--brand-navy);
	font-weight: 700;
}
.pricing-table thead .is-business { background: #eee7fb; }
.pricing-table thead .is-business small {
	display: block;
	margin-top: 4px;
	color: var(--brand-violet);
	font-size: 10px;
	font-weight: 800;
}
.pricing-table .compare-group th {
	position: static;
	padding: 10px 14px;
	border-inline-end: 0;
	background: var(--brand-navy);
	box-shadow: none;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.pricing-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.pricing-table .plan-yes,
.pricing-table .plan-no { font-size: 0; }
.pricing-table .plan-yes svg,
.pricing-table .plan-no svg { width: 18px; height: 18px; }
.pricing-table .plan-yes svg { color: var(--brand-violet); stroke-width: 3; }
.pricing-table .plan-no svg { color: #9b96aa; }

.pricing-options {
	display: grid;
	grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
	gap: 28px 54px;
	margin-top: 28px;
	padding: 30px;
	border: 1px solid var(--line-d);
	border-radius: 20px;
	background: #fff;
}
.pricing-options .price-kicker { margin-top: 0; }
.pricing-options h3 { margin-top: 8px; color: var(--brand-navy); font-size: 24px; }
.pricing-options ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 28px;
	list-style: none;
}
.pricing-options li { display: grid; gap: 4px; }
.pricing-options li b { color: var(--brand-navy); font-size: 13px; }
.pricing-options li span,
.pricing-options-note { color: #716b89; font-size: 12px; line-height: 1.5; }
.pricing-options-note {
	grid-column: 1 / -1;
	padding-top: 18px;
	border-top: 1px solid var(--line-d);
}

@media (max-width: 1100px) {
	.price-summary { min-height: 86px; }
	.price-card { padding-inline: 18px; }
}

@media (max-width: 980px) {
	.price-summary { min-height: 48px; }
	.pricing-options { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.pricing-section .container { padding-inline: 18px; }
	.price-card { padding: 28px 20px 20px; }
	.price-summary { min-height: 0; }
	.pricing-comparison-head { display: grid; gap: 12px; }
	.pricing-scroll-hint { text-align: start; }
	.pricing-table { min-width: 760px; }
	.pricing-table .metric-col { width: 180px; }
	.pricing-table col:not(.metric-col) { width: 145px; }
	.pricing-table th,
	.pricing-table td { padding: 13px 10px; }
	.pricing-options { padding: 22px 18px; }
	.pricing-options ul { grid-template-columns: 1fr; }
}

/* Dedicated pricing comparison page. */
.pricing-compare {
	display: flex;
	width: max-content;
	min-height: 46px;
	margin: 28px auto 0;
	border-color: rgba(74, 31, 168, .25);
	color: var(--brand-violet);
	background: #fff;
}
.pricing-compare svg { width: 17px; height: 17px; }
.nav-links a[aria-current="page"] {
	color: var(--brand-violet);
	background: rgba(176, 137, 242, .14);
}
.pricing-page { background: #fbfafc; color: var(--brand-navy); }
.pricing-page-hero {
	position: relative;
	overflow: clip;
	padding: calc(var(--nav-h) + 64px) 0 clamp(64px, 9vw, 110px);
	background:
		radial-gradient(65% 110% at 84% 18%, rgba(176, 137, 242, .2), transparent 66%),
		linear-gradient(180deg, #fff, #f7f5fb);
}
.pricing-page-hero .container { position: relative; z-index: 2; }
.pricing-page-hero h1 {
	max-width: 920px;
	margin-top: 24px;
	color: var(--brand-navy);
	font-size: clamp(42px, 6.4vw, 82px);
	text-wrap: balance;
}
.pricing-page-hero .lead { max-width: 780px; margin-top: 24px; }
.pricing-page-vector {
	position: absolute;
	pointer-events: none;
	user-select: none;
}
.pricing-page-orbit {
	top: 2%;
	inset-inline-end: -12%;
	width: min(940px, 72vw);
	opacity: .13;
}
.pricing-page-ribbon {
	inset-inline-end: -8%;
	bottom: -42%;
	width: min(980px, 76vw);
	opacity: .16;
}
.pricing-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	color: #716b89;
	font-size: 13px;
}
.pricing-breadcrumb a:hover { color: var(--brand-violet); }
.pricing-breadcrumb svg { width: 15px; height: 15px; }
[dir="rtl"] .pricing-breadcrumb svg { transform: scaleX(-1); }
.pricing-page-trial {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 26px;
	padding: 11px 14px;
	border: 1px solid rgba(74, 31, 168, .18);
	border-radius: 12px;
	background: rgba(176, 137, 242, .12);
	color: var(--brand-navy);
	font-size: 13px;
	font-weight: 650;
}
.pricing-page-trial svg { width: 17px; height: 17px; color: var(--brand-violet); }
.pricing-page-comparison {
	padding: clamp(72px, 10vw, 120px) 0;
	background: #f7f6fa;
}
.pricing-page .pricing-comparison {
	margin-top: 0;
	scroll-margin-top: calc(var(--nav-h) + 20px);
}
.pricing-page #pricing-comparison-title { scroll-margin-top: calc(var(--nav-h) + 20px); }
.pricing-page .pricing-table-scroll { box-shadow: 0 28px 70px -52px rgba(7, 25, 87, .5); }
.pricing-page-cta { padding: 36px 0; background: var(--brand-navy); color: #fff; }
.pricing-page-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
}
.pricing-page-cta .price-kicker { margin-top: 0; color: var(--brand-lavender); }
.pricing-page-cta h2 { margin-top: 8px; color: #fff; font-size: clamp(26px, 3vw, 40px); }
.pricing-page-cta p:not(.price-kicker) { margin-top: 10px; color: #cec9e4; }
.pricing-page-cta .btn { flex: 0 0 auto; }

@media (max-width: 760px) {
	.pricing-page-hero { padding-top: calc(var(--nav-h) + 42px); }
	.pricing-page-hero h1 { font-size: clamp(40px, 12vw, 58px); }
	.pricing-page-orbit { inset-inline-end: -54%; width: 150vw; }
	.pricing-page-ribbon { width: 140vw; }
	.pricing-page-trial { align-items: flex-start; }
	.pricing-page-cta-inner { display: grid; }
	.pricing-page-cta .btn { width: 100%; }
}

@media (max-width: 560px) {
	.pricing-compare { width: 100%; }
}

/* ============================================================
   PRESSE (/presse) — release list + article + boilerplate.
   Subpage chrome (hero, breadcrumb, dark CTA band) reuses the
   pricing-page-* classes above — rename them to a neutral
   subpage-* prefix when a third v2 subpage lands (#1653).
   ============================================================ */
.presse-list-section { padding: clamp(56px, 8vw, 96px) 0; background: #f7f6fa; }
.presse-list-title { margin-top: 8px; color: var(--brand-navy); font-size: clamp(24px, 2.6vw, 34px); }
.presse-list { display: grid; gap: 14px; margin-top: 26px; padding: 0; list-style: none; }
.presse-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 24px;
	border: 1px solid var(--line-d);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 50px -42px rgba(7, 25, 87, .36);
}
.presse-item time {
	color: var(--brand-violet);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.presse-item h3 { margin-top: 8px; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.35; }
.presse-item h3 a { color: var(--brand-navy); text-decoration: none; }
.presse-item h3 a:hover { color: var(--brand-violet); }
.presse-item-main p { margin-top: 8px; color: var(--muted-d); font-size: 14.5px; line-height: 1.6; }
.presse-item-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.presse-item-actions .btn-ghost {
	border-color: rgba(7, 25, 87, .18);
	color: var(--brand-navy);
	background: #fff;
}
.presse-item-actions .btn-ghost:hover { border-color: rgba(74, 31, 168, .4); }

.presse-article-section {
	padding: clamp(64px, 9vw, 110px) 0;
	scroll-margin-top: calc(var(--nav-h) + 20px);
	background: #fff;
}
.presse-article { max-width: 780px; margin-inline: auto; }
.presse-article-kicker {
	color: var(--brand-violet);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.presse-article h2 {
	margin-top: 12px;
	color: var(--brand-navy);
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.22;
	text-wrap: balance;
}
.presse-article-dateline { margin-top: 14px; color: #716b89; font-size: 13px; font-weight: 650; }
.presse-article > p:not(.presse-article-kicker):not(.presse-article-dateline) {
	margin-top: 20px;
	color: var(--muted-d);
	font-size: 16px;
	line-height: 1.75;
}
.presse-quote {
	margin: 28px 0 0;
	padding: 22px 26px;
	border-inline-start: 3px solid var(--brand-violet);
	border-radius: 0 16px 16px 0;
	background: rgba(176, 137, 242, .1);
}
[dir="rtl"] .presse-quote { border-radius: 16px 0 0 16px; }
.presse-quote p { color: var(--brand-navy); font-size: 16.5px; line-height: 1.7; font-weight: 500; }
.presse-quote footer { margin-top: 12px; color: var(--brand-violet); font-size: 13px; font-weight: 700; }
.presse-boiler { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-d); }
.presse-boiler h3 { color: var(--brand-navy); font-size: 17px; }
.presse-boiler p { margin-top: 10px; color: var(--muted-d); font-size: 14.5px; line-height: 1.7; }

@media (max-width: 760px) {
	.presse-item { flex-direction: column; align-items: stretch; }
	.presse-item-actions .btn { flex: 1; justify-content: center; }
}

/* Contact presse — two mailto CTAs on the navy band. */
.presse-contact-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 12px; }
.presse-contact-actions .btn-ghost {
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
	background: transparent;
}
.presse-contact-actions .btn-ghost:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); }
@media (max-width: 760px) {
	.presse-contact-actions { width: 100%; }
	.presse-contact-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   #1950 — Tarifs (section #pricing) aligned on the app's /plans UI.
   Two-zone plan cards: a lifted white panel (name, price, CTA)
   floating in a 4px gutter over the card's tinted ground. The
   ground is a RAMP — each rung up the ladder takes a stronger
   wash of brand violet — and the recommended card is marked by
   its ground (slow lateral pan of brand tint + the O mark as
   filigrane), never by a chip. Per-card Mensuel/Annuel toggle,
   one state shared across the row (wired in v2.js).
   ============================================================ */
.plans-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 20px;
	margin-top: 34px;
}
.plan-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
	padding: 4px;
	border: 1px solid rgba(7, 25, 87, 0.10);
	border-radius: 22px;
	background-color: rgba(7, 25, 87, 0.03);
	box-shadow: 0 18px 50px -42px rgba(7, 25, 87, 0.36);
	text-align: start;
	transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.plan-card:hover {
	border-color: rgba(74, 31, 168, 0.30);
	box-shadow: 0 24px 60px -38px rgba(7, 25, 87, 0.45);
}
.plan-card.tier-1 { background-image: linear-gradient(180deg, rgba(74, 31, 168, 0.08), transparent 62%); }
.plan-card.tier-3 { background-image: linear-gradient(180deg, rgba(74, 31, 168, 0.16), transparent 62%); }
.plan-card.featured {
	border-color: rgba(74, 31, 168, 0.30);
	background-image: linear-gradient(90deg, rgba(74, 31, 168, 0.16), rgba(74, 31, 168, 0.05) 50%, rgba(74, 31, 168, 0.16));
	background-size: 250% 100%;
	box-shadow: 0 28px 70px -40px rgba(74, 31, 168, 0.55);
	animation: plan-brand-pan 14s ease-in-out infinite;
}
.plan-card.featured:hover { border-color: rgba(74, 31, 168, 0.50); }
@keyframes plan-brand-pan {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
.plan-mark {
	position: absolute;
	bottom: -40px;
	inset-inline-end: -40px;
	z-index: 0;
	width: 192px;
	height: 192px;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
	animation: plan-mark-drift 26s ease-in-out infinite;
}
@keyframes plan-mark-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(0, -18px, 0) rotate(6deg); }
}
.plan-panel {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	padding: 16px;
	border: 1px solid rgba(7, 25, 87, 0.06);
	border-radius: 18px;
	background: #fff;
}
.plan-card.featured .plan-panel {
	border-color: rgba(74, 31, 168, 0.20);
	background: linear-gradient(135deg, rgba(176, 137, 242, 0.22), rgba(176, 137, 242, 0.08)) #fff;
}
.plan-panel h3 { min-height: 26px; color: var(--brand-navy); font-size: 20px; font-weight: 600; }
.plan-card.tier-1 .plan-panel h3,
.plan-card.featured .plan-panel h3 { padding-inline-end: 112px; }
.plan-toggle {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 2px;
	border: 1px solid rgba(7, 25, 87, 0.06);
	border-radius: 999px;
	background: rgba(7, 25, 87, 0.06);
}
.plan-toggle button {
	border: 0;
	border-radius: 999px;
	padding: 3px 9px;
	background: transparent;
	color: #716b89;
	font: 600 10.5px/1.4 var(--font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.plan-toggle button:hover { color: var(--brand-navy); }
.plan-toggle button[aria-pressed="true"] {
	background: var(--brand-violet);
	color: #fff;
	box-shadow: 0 4px 10px -6px rgba(74, 31, 168, 0.8);
}
.plan-amt {
	margin-top: 12px;
	color: var(--brand-navy);
	font-size: clamp(24px, 2vw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.plan-sub {
	min-height: 20px;
	margin-top: 2px;
	color: #716b89;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
.plan-note { min-height: 20px; color: var(--brand-violet); font-size: 12.5px; font-weight: 600; }
.plan-desc { min-height: 44px; margin-top: 8px; color: var(--muted-d); font-size: 13px; line-height: 1.55; }
.plan-cta { width: 100%; min-height: 46px; margin-top: 14px; text-align: center; }
.plan-card .btn-ghost {
	border-color: rgba(7, 25, 87, 0.18);
	color: var(--brand-navy);
	background: #fff;
}
.plan-card .btn-ghost:hover { border-color: rgba(74, 31, 168, 0.40); }
/* Interval switching: the grid's data-interval decides which figures render. */
.plans-grid[data-interval="yearly"] [data-when="monthly"],
.plans-grid[data-interval="monthly"] [data-when="yearly"] { display: none; }

.plan-ground {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px 14px 14px;
}
.plan-list-head { color: var(--brand-navy); font-size: 13px; font-weight: 600; }
.plan-feats { display: grid; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.plan-feats li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--ink-d);
	font-size: 13px;
	line-height: 1.55;
	overflow-wrap: break-word;
}
.feat-ic { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
svg.feat-ic { fill: var(--brand-violet); stroke: #fff; }
/* Terms this product invented open their definition — dashed hint, as in-app. */
button.def {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: underline dashed;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
button.def:hover { text-decoration-style: solid; }
.plan-addons { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(7, 25, 87, 0.10); }
.plan-addons-head {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--brand-navy);
	font-size: 13px;
	font-weight: 600;
}
.plan-addons-head svg { width: 14px; height: 14px; color: var(--brand-violet); }
.plan-addons ul { display: grid; gap: 6px; margin-top: 8px; padding: 0; list-style: none; }
.plan-addons li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	color: #716b89;
	font-size: 12.5px;
	line-height: 1.5;
}
.addon-label { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.addon-label svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; color: var(--brand-violet); }
.addon-price { flex-shrink: 0; color: var(--brand-navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-addons-more {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--brand-violet);
	font: 600 12.5px/1.4 var(--font-body);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Definition + options popovers (anchored under their trigger by v2.js). */
.def-pop,
.opts-pop {
	position: fixed;
	margin: 0;
	border: 1px solid var(--line-d);
	border-radius: 14px;
	background: #fff;
	color: var(--muted-d);
	box-shadow: 0 24px 60px -30px rgba(7, 25, 87, 0.4);
}
.def-pop { width: min(288px, calc(100vw - 16px)); padding: 13px 15px; font-size: 13px; line-height: 1.55; }
.opts-pop { width: min(320px, calc(100vw - 16px)); padding: 0; }
.opts-pop-title {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line-d);
	color: #716b89;
	font-size: 12.5px;
	font-weight: 600;
}
.opts-pop ul { display: grid; gap: 8px; margin: 0; padding: 12px 14px; list-style: none; }
.opts-pop li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.opts-pop li span { flex: 1; min-width: 0; padding-bottom: 2px; border-bottom: 1px dotted rgba(7, 25, 87, 0.25); }
.opts-pop li b { flex-shrink: 0; color: var(--brand-navy); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1160px) {
	.plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.plans-grid { grid-template-columns: 1fr; }
	/* The recommended card leads on mobile, as in-app (max-lg:-order-1). */
	.plan-card.featured { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
	.plan-card.featured { animation: none; }
	.plan-mark { animation: none; transform: none; }
}
@media (min-width: 761px) {
	html:lang(fr) .hero-h1,
	html:lang(en) .hero-h1 {
		text-wrap: balance;
		white-space: normal;
	}
}
.hero {
	padding-bottom: 0;
}

.statement {
	padding-top: clamp(72px, 8vw, 112px);
}

@media (max-width: 640px) {
	.statement {
		padding-top: 72px;
	}
}

/* ============================================================
   Configurateur à la carte (#2599)

   Reprend le vocabulaire des `.plan-card` juste au-dessus : même rayon, même
   trait, même ombre portée. La sélection se marque par un FOND teinté et un
   anneau, jamais par un liseré de bord — la règle du repo, un accent latéral
   se lit comme de l'UI générée.

   Propriétés logiques partout (`padding-inline`, `inset-inline`) : la page se
   rend aussi en arabe, et un `left` codé en dur y pose la coche du mauvais
   côté de la carte.

   ⚠️ Les jetons de texte sont les `-d` — `--ink-d`, `--muted-d`. Sans suffixe
   ils valent l'encre des sections SOMBRES (`--ink: #f4f3fb`, presque blanc), et
   `.pricing-page` est un fond clair : la première version de ce bloc a rendu
   les prix en blanc sur blanc. Invisible aux tests, visible à l'écran.
   ============================================================ */
.pricing-configurator {
	padding-block: clamp(48px, 7vw, 96px);
}
.cfg-head {
	max-width: 720px;
	margin-inline: auto;
	margin-block-end: clamp(28px, 4vw, 48px);
	text-align: center;
}
.cfg-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 14px;
	border: 1px solid rgba(74, 31, 168, 0.22);
	border-radius: 999px;
	background: rgba(74, 31, 168, 0.07);
	color: var(--brand-violet);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.cfg-head h2 {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.12;
}
.cfg-sub {
	margin: 0;
	color: var(--muted-d);
	font-size: 1.02rem;
	line-height: 1.6;
}

.cfg-grid {
	display: grid;
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
	grid-template-columns: 1fr;
}
@media (min-width: 960px) {
	.cfg-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

.cfg-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* La légende porte le groupe pour un lecteur d'écran ; à l'écran, le titre de
   section la dit déjà. */
.cfg-legend {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.cfg-list {
	display: grid;
	gap: 10px;
	margin: 0; padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cfg-list { grid-template-columns: 1fr 1fr; } }

.cfg-card {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
	/* Les cartes d'une même rangée n'ont plus la même hauteur depuis que
	   certaines portent une ligne « Inclut » : sans ceci, la voisine courte
	   laissait un trou sous elle au lieu de s'étirer. */
	height: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(7, 25, 87, 0.10);
	border-radius: 16px;
	background-color: rgba(7, 25, 87, 0.03);
	cursor: pointer;
	transition: background-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.cfg-card:hover { background-color: rgba(74, 31, 168, 0.06); }
/* Sélection : fond teinté + anneau. Pas de bordure latérale. */
.cfg-card.is-on {
	background-color: rgba(74, 31, 168, 0.09);
	box-shadow: inset 0 0 0 2px rgba(74, 31, 168, 0.45);
}
/* La case native reste focalisable et sous le doigt : elle est masquée à la
   vue, jamais retirée de l'arbre — d'où `opacity`, et non `display:none`. */
.cfg-check {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-start: 16px;
	width: 20px; height: 20px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.cfg-tick {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	margin-block-start: 2px;
	border: 1.5px solid rgba(7, 25, 87, 0.28);
	border-radius: 6px;
	background: #fff;
	transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.cfg-card.is-on .cfg-tick {
	border-color: var(--brand-violet);
	background-color: var(--brand-violet);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.cfg-check:focus-visible + .cfg-tick {
	outline: 2px solid var(--brand-violet);
	outline-offset: 2px;
}

.cfg-body { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.cfg-num {
	color: var(--muted-d);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.cfg-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cfg-desc { color: var(--muted-d); font-size: 0.88rem; line-height: 1.4; }
.cfg-incl {
	margin-block-start: 4px;
	color: var(--brand-violet);
	font-size: 0.76rem;
	font-weight: 600;
}
.cfg-price {
	margin-inline-start: auto;
	flex: 0 0 auto;
	text-align: end;
	font-size: 0.78rem;
	color: var(--muted-d);
	white-space: nowrap;
}
.cfg-price b { display: block; color: var(--ink-d); font-size: 1.05rem; }

.cfg-summary {
	position: sticky;
	inset-block-start: calc(var(--nav-h) + 16px);
	padding: 22px;
	border: 1px solid rgba(74, 31, 168, 0.22);
	border-radius: 20px;
	background-image: linear-gradient(180deg, rgba(74, 31, 168, 0.10), transparent 60%);
	background-color: rgba(7, 25, 87, 0.03);
	box-shadow: 0 22px 60px -44px rgba(7, 25, 87, 0.45);
	text-align: center;
}
.cfg-sum-title { margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; }

/* Compteur de sociétés + remise volume. Le prix catalogue est PAR société :
   ce bloc est ce qui empêche le récapitulatif de facturer un groupe comme une
   PME, et il rend la remise dégressive visible au lieu de la laisser dans un
   devis. */
.cfg-orgs {
	margin-block: 4px 12px;
	padding-block: 12px;
	border-block: 1px solid rgba(74, 31, 168, 0.16);
}
.cfg-orgs-label {
	display: block;
	color: var(--muted-d);
	font-size: 0.82rem;
	font-weight: 600;
}
.cfg-orgs-stepper {
	margin-block-start: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cfg-orgs-step {
	inline-size: 34px;
	block-size: 34px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(74, 31, 168, 0.28);
	border-radius: 10px;
	background: #fff;
	color: var(--brand-violet);
	cursor: pointer;
	transition: background 0.16s var(--ease);
}
.cfg-orgs-step:hover:not(:disabled) { background: rgba(74, 31, 168, 0.09); }
.cfg-orgs-step:disabled { opacity: 0.34; cursor: not-allowed; }
.cfg-orgs-step svg { inline-size: 16px; block-size: 16px; }
.cfg-orgs-input {
	/* Les flèches natives doublonnaient avec les boutons − / + : deux compteurs
	   côte à côte dans un cadre de 64px. */
	appearance: textfield;
	-moz-appearance: textfield;
	inline-size: 64px;
	padding: 7px 4px;
	border: 1px solid rgba(74, 31, 168, 0.28);
	border-radius: 10px;
	background: #fff;
	color: var(--ink-d);
	font: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.cfg-orgs-input::-webkit-outer-spin-button,
.cfg-orgs-input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.cfg-orgs-hint {
	margin: 8px 0 0;
	color: var(--muted-d);
	font-size: 0.74rem;
	line-height: 1.5;
}

.cfg-sum-count { margin: 0; color: var(--muted-d); font-size: 0.86rem; }
.cfg-sum-sep { margin-inline: 2px; opacity: 0.5; }
.cfg-sum-lines {
	margin: 10px 0 0;
	display: grid;
	gap: 4px;
	font-size: 0.8rem;
}
/* `display: grid` sur un sélecteur de classe bat le `[hidden]` de la feuille
   du navigateur : sans cette ligne, masquer le bloc en JS ne le masque pas. */
.cfg-sum-lines[hidden] { display: none; }
.cfg-sum-line {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	text-align: start;
}
.cfg-sum-line dt { color: var(--muted-d); }
.cfg-sum-line dd { margin: 0; font-variant-numeric: tabular-nums; }
.cfg-sum-line--gross dd { color: var(--muted-d); text-decoration: line-through; }
/* Vert assombri exprès : `#0d9466` (le vert « ok » des maquettes sombres) ne
   passe pas AA en 0.8rem sur le fond papier du récapitulatif. */
.cfg-sum-line--saved dt,
.cfg-sum-line--saved dd { color: #0a6b4a; font-weight: 700; }
.cfg-sum-rate {
	margin-inline-start: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(10, 107, 74, 0.12);
	font-size: 0.72rem;
	white-space: nowrap;
}
.cfg-sum-total { margin: 6px 0 0; font-size: 0.86rem; color: var(--muted-d); }
.cfg-sum-total b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.4vw, 2.7rem);
	line-height: 1.05;
	color: var(--ink-d);
}
.cfg-sum-year { margin: 8px 0 0; color: var(--muted-d); font-size: 0.82rem; }
.cfg-live {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.cfg-cta { display: block; margin-block-start: 18px; }
/* Rien de coché : le CTA ne promet pas un panier vide. */
.cfg-grid.is-empty .cfg-cta { pointer-events: none; opacity: 0.45; }
.cfg-reset {
	margin-block-start: 10px;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--muted-d);
	font: inherit;
	font-size: 0.82rem;
	cursor: pointer;
}
.cfg-reset:hover { color: var(--ink-d); text-decoration: underline; }
.cfg-grid.is-empty .cfg-reset { visibility: hidden; }
.cfg-fine {
	margin: 14px 0 0;
	color: var(--muted-d);
	font-size: 0.74rem;
	line-height: 1.5;
}

/* Mobile : le récapitulatif passe DEVANT la liste et se colle sous la nav.
   En une seule colonne il tombait après quinze modules — on cochait une case
   et le total était à un écran et demi plus bas, ce qui vide un configurateur
   de son intérêt. Compacté en bandeau : le montant reste la seule chose qui a
   besoin d'être grande. */
@media (max-width: 959px) {
	.cfg-summary {
		order: -1;
		z-index: 3;
		/* OPAQUE. En colonne unique le récapitulatif flotte au-dessus des cartes
		   qui défilent : le fond translucide du desktop les laissait traverser,
		   et deux textes se superposaient. Il n'est translucide que là où il ne
		   recouvre rien. */
		background-image: none;
		background-color: #f3f1fa;
		box-shadow: 0 10px 24px -18px rgba(7, 25, 87, 0.55);
		display: grid;
		align-items: center;
		padding: 14px 16px;
		gap: 2px 14px;
		grid-template-columns: auto 1fr;
		text-align: start;
	}
	/* Le bandeau est STICKY : chaque ligne ajoutée mange l'écran de lecture des
	   modules. Le compteur de sociétés reste (il change le total) mais perd sa
	   grille de paliers, et la remise ne garde que la ligne qui est la nouvelle
	   — le sous-total barré ne se lit pas sur 360px. Placements explicites :
	   deux blocs pleine largeur au milieu d'un flux auto-placé le décalaient. */
	.cfg-sum-title { grid-column: 1 / -1; grid-row: 1; margin: 0; }
	.cfg-orgs {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 0;
		padding-block: 6px 0;
		border-block-width: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.cfg-orgs-label { font-size: 0.78rem; }
	.cfg-orgs-stepper { margin: 0; }
	.cfg-orgs-step { inline-size: 30px; block-size: 30px; }
	.cfg-orgs-input { inline-size: 54px; padding-block: 4px; }
	.cfg-orgs-hint { display: none; }
	.cfg-sum-count { grid-column: 1; grid-row: 3; margin: 0; }
	.cfg-sum-total { grid-column: 2; grid-row: 3; margin: 0; }
	.cfg-sum-total b { font-size: 1.9rem; }
	.cfg-sum-lines { grid-column: 1 / -1; grid-row: 4; margin: 0; }
	.cfg-sum-line--gross { display: none; }
	.cfg-sum-year { grid-column: 1 / -1; grid-row: 5; margin: 0; }
	.cfg-cta { grid-column: 1 / -1; grid-row: 6; margin-block-start: 10px; }
	.cfg-reset,
	.cfg-fine { display: none; }
}

/* ============================================================
   2026-09 all-in-one vision
   Five business modules share one data layer. The public-tender
   expertise stays visually prominent without becoming the category.
   ============================================================ */
.connected-data { overflow: clip; }
.connected-data .section-head.side { margin-bottom: clamp(28px, 3.5vh, 42px); }
.connected-flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line-d);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 28px 70px -52px rgba(7, 25, 87, 0.55);
	isolation: isolate;
	list-style: none;
}
.connected-step {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px 12px;
	min-width: 0;
	padding: 24px 22px 26px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.connected-step + .connected-step { border-inline-start: 1px solid var(--line-d); }
.connected-index {
	align-self: center;
	color: var(--brand-violet);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.connected-icon {
	display: grid;
	place-items: center;
	justify-self: end;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(74, 31, 168, 0.18);
	border-radius: 14px;
	background: #fff;
	color: var(--brand-violet);
	box-shadow: 0 16px 32px -24px rgba(74, 31, 168, 0.7);
}
.connected-icon svg { width: 20px; height: 20px; }
.connected-step > span:last-child { grid-column: 1 / -1; display: grid; gap: 8px; padding-block-start: 2px; }
.connected-step b { color: var(--ink-d); font-size: 16px; }
.connected-step small { color: var(--muted-d); font-size: 12.5px; line-height: 1.55; }
.connected-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	max-width: 760px;
	margin: 28px auto 0;
	color: var(--muted-d);
	font-size: 14px;
	text-align: center;
}
.connected-note svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--brand-violet); }

.soumia-capabilities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin-top: 28px;
}
.soumia-capability {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid rgba(74, 31, 168, 0.12);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.74);
	color: var(--ink-d);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}
.soumia-capability > svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--brand-violet); }
.soumia-capability small {
	display: block;
	margin-top: 2px;
	color: var(--brand-violet);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.module-grid {
	display: grid;
	/* Une colonne : deux modules depuis le 2026-09-30, le phare puis Finance & trésorerie. */
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}
.module-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	min-height: 330px;
	padding: 26px;
	border: 1px solid rgba(7, 25, 87, 0.1);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 28px 70px -52px rgba(7, 25, 87, 0.45);
}
.module-card--flagship {
	grid-column: span 2;
	background:
		radial-gradient(circle at 84% 14%, rgba(176, 137, 242, 0.24), transparent 34%),
		linear-gradient(145deg, #321578, var(--brand-navy));
	border-color: rgba(176, 137, 242, 0.34);
	box-shadow: 0 30px 70px -42px rgba(50, 21, 120, 0.72);
}
.module-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(74, 31, 168, 0.18);
	border-radius: 14px;
	background: rgba(176, 137, 242, 0.14);
	color: var(--brand-violet);
}
.module-card--flagship .module-icon { border-color: rgba(176, 137, 242, 0.3); background: rgba(176, 137, 242, 0.12); color: var(--brand-lavender); }
.module-icon svg { width: 20px; height: 20px; }
.module-status {
	padding: 6px 9px;
	border: 1px solid rgba(74, 31, 168, 0.18);
	border-radius: 999px;
	color: var(--brand-violet);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.module-card--flagship .module-status { border-color: rgba(176, 137, 242, 0.3); color: #e7d9ff; }
.module-index {
	--module-index-color: var(--brand-violet);
	display: block;
	width: max-content;
	color: color-mix(in srgb, var(--module-index-color) 10%, transparent);
	font-size: clamp(48px, 5.6vw, 76px);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.08em;
	line-height: 0.82;
	-webkit-text-stroke: 1px var(--module-index-color);
}
.module-card--flagship .module-index { --module-index-color: var(--brand-lavender); }
.module-card h3 { margin-top: 10px; color: var(--brand-navy); font-size: clamp(21px, 2.2vw, 28px); }
.module-card p { margin-top: 10px; color: var(--muted-d); font-size: 14px; line-height: 1.65; }
.module-points { display: grid; gap: 7px; margin: auto 0 0; padding: 0; list-style: none; }
.module-points li { display: flex; gap: 8px; color: var(--brand-navy); font-size: 12.5px; }
.module-points li::before { content: "·"; color: var(--brand-violet); font-weight: 900; }
.module-card--flagship h3,
.module-card--flagship .module-points li { color: #fff; }
.module-card--flagship p { color: #d9d4e8; }
.module-card--flagship .module-points li::before { color: var(--brand-lavender); }
.module-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	color: var(--brand-violet);
	font-size: 13px;
	font-weight: 700;
}
.module-card--flagship .module-link { color: #fff; }
.module-link svg { width: 16px; height: 16px; }
.module-link:hover { color: var(--brand-lavender); }
.module-link:focus-visible { outline: 2px solid var(--brand-lavender); outline-offset: 5px; border-radius: 4px; }

.tender-spotlight { overflow: clip; }
.tender-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--brand-violet);
	font-size: 13px;
	font-weight: 700;
}
.tender-note svg { width: 17px; height: 17px; }
.tender-lifecycle {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
.tender-lifecycle li {
	display: grid;
	gap: 8px;
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--line-d);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.66);
}
.tender-step-icon { color: var(--brand-violet); }
.tender-step-icon svg { width: 20px; height: 20px; }
.tender-lifecycle .mono { color: #918aa7; font-size: 10px; }
.tender-lifecycle b { color: var(--ink-d); font-size: 14px; }
.tender-lifecycle small { color: var(--muted-d); font-size: 12px; line-height: 1.5; }
.tender-proof { max-width: 980px; margin-inline: auto; }
.tender-proof .shot-frame { height: auto; overflow: hidden; border-radius: 18px; }
.tender-proof img { width: 100%; height: auto; }

.pricing-teaser {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
	padding: clamp(30px, 5vw, 64px);
	border: 1px solid var(--line-d);
	border-radius: 24px;
	background:
		radial-gradient(circle at 8% 8%, rgba(176, 137, 242, 0.2), transparent 30%),
		rgba(255, 255, 255, 0.72);
	box-shadow: 0 30px 80px -58px rgba(7, 25, 87, 0.6);
}
.pricing-teaser h2 { margin-top: 18px; }
.pricing-teaser .lead { margin-top: 16px; }
.pricing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.pricing-trial { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-d); font-size: 12.5px; }
.pricing-trial svg { width: 16px; height: 16px; color: var(--brand-violet); }
.pricing-details-link { color: var(--brand-navy); font-size: 12px; }
.pricing-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pricing-steps li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	padding: 14px;
	border: 1px solid rgba(74, 31, 168, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.75);
}
.pricing-steps .mono { color: var(--brand-violet); font-size: 11px; font-weight: 700; }
.pricing-steps div { display: grid; gap: 3px; }
.pricing-steps b { color: var(--ink-d); font-size: 13px; }
.pricing-steps small { color: var(--muted-d); font-size: 11.5px; line-height: 1.45; }

body.has-open-dialog { overflow: hidden; }
.module-configurator-dialog {
	width: min(1180px, calc(100% - 32px));
	height: min(820px, calc(100dvh - 32px));
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(74, 31, 168, 0.18);
	border-radius: 24px;
	background: #fbfafc;
	color: var(--ink-d);
	box-shadow: 0 38px 120px -42px rgba(7, 25, 87, 0.72);
}
.module-configurator-dialog::backdrop {
	background: rgba(7, 14, 48, 0.68);
	backdrop-filter: blur(8px);
}
.module-configurator-shell {
	display: flex;
	height: 100%;
	min-height: 0;
	flex-direction: column;
}
.module-configurator-head {
	display: flex;
	flex: 0 0 auto;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 22px 26px 18px;
	border-bottom: 1px solid var(--line-d);
	background: rgba(255, 255, 255, 0.9);
}
.module-configurator-head h2 {
	margin: 10px 0 5px;
	color: var(--ink-d);
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: -0.035em;
}
.module-configurator-head p { max-width: 72ch; color: var(--muted-d); font-size: 13px; line-height: 1.5; }
.module-configurator-close {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-d);
	border-radius: 12px;
	background: #fff;
	color: var(--ink-d);
	cursor: pointer;
}
.module-configurator-close:hover { background: rgba(74, 31, 168, 0.06); }
.module-configurator-close:focus-visible,
.module-configurator-back:focus-visible { outline: 2px solid var(--brand-violet); outline-offset: 2px; }
.module-configurator-close svg { width: 18px; height: 18px; }
.module-configurator-form {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	flex-direction: column;
}
.module-configurator-step {
	flex: 1 1 auto;
	min-height: 0;
}
.module-configurator-step[hidden] { display: none; }
.module-configurator-step--pricing { overflow: hidden; }
.module-configurator-pricing {
	display: grid;
	height: 100%;
	min-height: 0;
	grid-template-columns: minmax(0, 1fr) 292px;
	gap: 20px;
	padding: 20px 24px 24px;
}
.module-configurator-choice {
	overflow-y: auto;
	padding: 2px 8px 2px 2px;
	scrollbar-gutter: stable;
}
.module-configurator-choice .cfg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-configurator-choice .cfg-card {
	min-height: 94px;
	padding: 13px 14px;
	background-color: rgba(7, 25, 87, 0.025);
}
.module-configurator-choice .cfg-card.is-on { background-color: rgba(74, 31, 168, 0.09); }
.module-configurator-choice .cfg-price {
	display: grid;
	gap: 1px;
}
.module-configurator-summary {
	position: static;
	inset: auto;
	align-self: start;
	padding: 24px 20px;
}
.module-configurator-summary .cfg-sum-total b { font-variant-numeric: tabular-nums; }
.module-configurator-summary .cfg-cta {
	display: inline-flex;
	width: 100%;
	gap: 7px;
	padding-inline: 14px;
	font-size: 11.5px;
	white-space: nowrap;
}
.module-configurator-summary .cfg-cta:disabled { cursor: not-allowed; opacity: 0.45; }
.module-configurator-step--contact {
	overflow-y: auto;
	padding: clamp(28px, 5vw, 54px);
}
.module-configurator-step--contact > * { width: min(720px, 100%); margin-inline: auto; }
.module-configurator-contact-head {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line-d);
}
.module-configurator-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--brand-violet);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.module-configurator-back:hover { background: rgba(74, 31, 168, 0.06); }
.module-configurator-back svg { width: 16px; height: 16px; }
[dir="rtl"] .module-configurator-back svg { transform: rotate(180deg); }
.module-configurator-contact-total { display: grid; gap: 2px; text-align: end; }
.module-configurator-contact-total span { color: var(--muted-d); font-size: 12px; }
.module-configurator-contact-total strong { color: var(--ink-d); font-size: 16px; font-variant-numeric: tabular-nums; }
.module-configurator-contact-copy { padding-top: 28px; }
.module-configurator-contact-copy h3 { margin: 0; color: var(--ink-d); font-size: 24px; letter-spacing: -0.025em; }
.module-configurator-contact-copy p { margin: 7px 0 0; color: var(--muted-d); font-size: 14px; line-height: 1.55; }
/* Rappel du contrat quand plusieurs sociétés sont configurées : autant de
   raisons sociales, un seul contact. */
.module-configurator-note {
	margin: 10px 0 0;
	padding: 9px 12px;
	border-radius: 12px;
	background: rgba(74, 31, 168, 0.07);
	color: var(--muted-d);
	font-size: 12.5px;
	line-height: 1.5;
}
.module-configurator-note[hidden] { display: none; }
.module-configurator-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 24px;
}
.module-configurator-field { display: grid; gap: 7px; min-width: 0; }
.module-configurator-field--wide { grid-column: 1 / -1; }
.module-configurator-field label { color: var(--ink-d); font-size: 12px; font-weight: 700; }
.module-configurator-field input {
	width: 100%;
	height: 46px;
	padding-inline: 13px;
	border: 1px solid var(--line-d);
	border-radius: 12px;
	background: #fff;
	color: var(--ink-d);
	font: inherit;
}
.module-configurator-field input:focus { border-color: var(--brand-violet); outline: 3px solid rgba(74, 31, 168, 0.12); }
.module-configurator-field input[aria-invalid="true"] { border-color: var(--brand-red); }
.module-configurator-field [role="alert"] { margin: 0; color: var(--brand-red); font-size: 11.5px; }
.module-configurator-field [role="alert"][hidden] { display: none; }
.module-configurator-actions {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	margin-top: 24px;
}
.module-configurator-actions p { max-width: 31ch; color: var(--muted-d); font-size: 11.5px; line-height: 1.45; }
.module-configurator-actions a { color: var(--brand-violet); text-decoration: underline; text-underline-offset: 2px; }
.module-configurator-actions button:disabled { cursor: progress; opacity: .72; }

@media (max-width: 980px) {
	.connected-flow { grid-template-columns: 1fr; }
	.connected-step {
		grid-template-columns: auto auto minmax(0, 1fr);
		gap: 16px;
		align-items: center;
		padding: 20px 22px;
	}
	.connected-step + .connected-step {
		border-block-start: 1px solid var(--line-d);
		border-inline-start: 0;
	}
	.connected-step > span:last-child { grid-column: auto; gap: 5px; padding-block-start: 0; }
	.connected-icon { justify-self: start; }
	.module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.module-card--flagship { grid-column: span 2; }
	.tender-lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pricing-teaser { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.module-configurator-dialog {
		width: calc(100% - 20px);
		height: calc(100dvh - 20px);
		max-height: calc(100dvh - 20px);
		border-radius: 18px;
	}
	.module-configurator-pricing {
		display: flex;
		overflow-y: auto;
		flex-direction: column;
		gap: 0;
		padding: 0;
	}
	.module-configurator-choice {
		overflow: visible;
		padding: 16px;
		scrollbar-gutter: auto;
	}
	.module-configurator-summary {
		position: sticky;
		z-index: 3;
		inset-block-start: 0;
		order: -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 2px 16px;
		align-items: center;
		width: 100%;
		padding: 12px 16px;
		border: 0;
		border-bottom: 1px solid var(--line-d);
		border-radius: 0;
		background: var(--paper);
		box-shadow: 0 10px 24px -18px rgba(7, 25, 87, 0.55);
		text-align: start;
	}
	.module-configurator-summary .cfg-sum-title { grid-column: 1 / 3; margin: 0; }
	.module-configurator-summary .cfg-sum-count { grid-column: 1; margin: 0; }
	.module-configurator-summary .cfg-sum-total { grid-column: 2; grid-row: 2; margin: 0; }
	.module-configurator-summary .cfg-sum-total b { font-size: 1.75rem; }
	.module-configurator-summary .cfg-sum-year { grid-column: 1 / 3; grid-row: 3; margin: 0; }
	/* Le CTA de la modale occupe la colonne 3 sur les rangées 1 à 3 : les deux
	   nouveaux blocs passent SOUS lui, pas à travers. */
	.module-configurator-summary .cfg-orgs { grid-column: 1 / 3; grid-row: 4; }
	.module-configurator-summary .cfg-sum-lines { grid-column: 1 / 3; grid-row: 5; }
	.module-configurator-summary .cfg-cta { grid-column: 3; grid-row: 1 / 4; margin: 0; }
	.module-configurator-summary .cfg-reset,
	.module-configurator-summary .cfg-fine { display: none; }
}

@media (max-width: 640px) {
	.connected-data .section-head.side {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		align-items: start;
	}
	.connected-data .section-head.side .lead { margin-top: 0; }
	.module-grid,
	.tender-lifecycle { grid-template-columns: 1fr; }
	.connected-flow { border-radius: 20px; }
	.connected-step { gap: 10px; padding: 14px; }
	.connected-index { min-width: 24px; font-size: 10px; }
	.connected-icon { width: 44px; height: 44px; border-radius: 13px; }
	.connected-step b { font-size: 15px; }
	.module-card--flagship { grid-column: auto; }
	.module-card { min-height: 0; padding: 22px; }
	.module-index { font-size: 44px; }
	.soumia-capabilities { grid-template-columns: 1fr; }
	.pricing-teaser { padding: 24px; }
	.pricing-actions { align-items: stretch; flex-direction: column; }
	.pricing-actions .btn { width: 100%; }
	.pricing-details-link { align-self: center; }
	.module-configurator-head { padding: 16px; }
	.module-configurator-head .eyebrow { display: none; }
	.module-configurator-head h2 { margin-top: 0; font-size: 23px; }
	.module-configurator-head p { font-size: 12px; }
	.module-configurator-choice .cfg-list { grid-template-columns: 1fr; }
	.module-configurator-choice .cfg-card { min-height: 0; }
	.module-configurator-summary { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }
	.module-configurator-summary .cfg-sum-title { grid-column: 1; }
	/* Deux colonnes ici, et le CTA repasse pleine largeur : sans rangée
	   explicite, le compteur de modules atterrissait SOUS le bouton (rangée 3
	   des deux côtés) et disparaissait. */
	.module-configurator-summary .cfg-sum-count { grid-column: 1; grid-row: 2; }
	.module-configurator-summary .cfg-sum-total { grid-column: 2; grid-row: 1 / 3; text-align: end; }
	.module-configurator-summary .cfg-sum-year { display: none; }
	.module-configurator-summary .cfg-orgs { grid-column: 1 / -1; grid-row: 3; }
	.module-configurator-summary .cfg-sum-lines { grid-column: 1 / -1; grid-row: 4; }
	.module-configurator-summary .cfg-cta { grid-column: 1 / -1; grid-row: 5; margin-top: 8px; }
	.module-configurator-step--contact { padding: 22px 18px; }
	.module-configurator-contact-head { align-items: flex-start; }
	.module-configurator-contact-copy { padding-top: 22px; }
	.module-configurator-contact-copy h3 { font-size: 21px; }
	.module-configurator-fields { grid-template-columns: 1fr; }
	.module-configurator-field--wide { grid-column: auto; }
	.module-configurator-actions { align-items: stretch; flex-direction: column; }
	.module-configurator-actions .btn { width: 100%; }
}

/* ============================================================
   ZELLIGE — le motif khatam (étoile à huit branches)
   ============================================================
   Le khatam est construit comme il l'est dans un vrai zellige : DEUX CARRÉS
   superposés, l'un tourné de 45°. Ce n'est pas une étoile décorative dessinée
   à l'œil, c'est la construction géométrique d'origine — d'où le fait qu'elle
   se raccorde toute seule. La tuile porte une étoile pleine au centre et un
   quart d'étoile à chaque coin : répétée, elle recompose un champ continu.

   Le motif est un MASQUE, pas une image de fond. Une seule tuile sert donc les
   trois surfaces, et chacune choisit sa teinte avec son propre dégradé — navy
   sur le sable du héros, lavande sur le navy du CTA, rouge sur la carte
   « Bâti au Maroc ». Une image de fond aurait demandé trois data-URI.

   Le dégradé porte AUSSI l'estompage : le masque découpe la forme, le fond
   décide où elle s'éteint. Pas de `mask-composite`, pas de seconde couche.

   Les teintes de fond des surfaces sont vérifiées par la charte
   (`app/verify-landing-charte.mjs`). Les pseudo-éléments ajoutent uniquement
   le filigrane, sans modifier ces fonds. */
:root {
	--zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M36 21 51 36 36 51 21 36Z'/%3E%3Cpath d='M25.4 25.4H46.6V46.6H25.4Z'/%3E%3Cpath d='M0 -15 15 0 0 15 -15 0Z'/%3E%3Cpath d='M-10.6 -10.6H10.6V10.6H-10.6Z'/%3E%3Cpath d='M72 -15 87 0 72 15 57 0Z'/%3E%3Cpath d='M61.4 -10.6H82.6V10.6H61.4Z'/%3E%3Cpath d='M0 57 15 72 0 87 -15 72Z'/%3E%3Cpath d='M-10.6 61.4H10.6V82.6H-10.6Z'/%3E%3Cpath d='M72 57 87 72 72 87 57 72Z'/%3E%3Cpath d='M61.4 61.4H82.6V82.6H61.4Z'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-shell::before,
.trust-card--maroc::before,
.cta-final::before {
	position: absolute;
	-webkit-mask-image: var(--zellige);
	mask-image: var(--zellige);
	-webkit-mask-size: 72px 72px;
	mask-size: 72px 72px;
	content: "";
	pointer-events: none;
}

/* Héros — filigrane d'angle, PAS un papier peint. Le `::after` du héros est
   déjà pris (le voile qui estompe la couverture) ; le motif passe donc en
   z-index 2, au-dessus de ce voile et sous `.hero-inner` (z-index 3), sinon le
   voile l'effacerait justement du côté où on veut le voir. */
.hero-shell::before {
	z-index: 2;
	inset: 0;
	background: radial-gradient(38% 54% at -6% -8%, rgba(176, 137, 242, .32), transparent 76%);
}
[dir="rtl"] .hero-shell::before {
	background: radial-gradient(38% 54% at 106% -8%, rgba(176, 137, 242, .32), transparent 76%);
}

/* CTA — le collage de captures est flou et bruité derrière son voile ; le
   zellige lui rend une structure. z-index 2 : après `.cta-veil` (1), et avant
   `.cta-inner` qui partage le 2 mais suit dans l'ordre du document. */
.cta-final::before {
	z-index: 2;
	inset: 0;
	background: radial-gradient(64% 58% at 50% -6%, rgba(176, 137, 242, .38), transparent 72%);
}

/* « Bâti au Maroc » — la seule des trois cartes de confiance qui affirme
   quelque chose sur le pays. Elle le disait en toutes lettres et ne le montrait
   pas. Le rouge est `--brand-red`, déjà dans la palette. */
.trust-card--maroc {
	position: relative;
	overflow: hidden;
}
.trust-card--maroc::before {
	z-index: 0;
	inset: 0;
	background: radial-gradient(76% 92% at 100% -6%, rgba(205, 34, 59, .36), transparent 72%);
}
[dir="rtl"] .trust-card--maroc::before {
	background: radial-gradient(76% 92% at 0% -6%, rgba(205, 34, 59, .36), transparent 72%);
}
/* Le pseudo-élément positionné se peint après le contenu statique : sans ça, le
   motif passerait PAR-DESSUS le titre et le texte de la carte. */
.trust-card--maroc > * {
	position: relative;
	z-index: 1;
}

/* ============================================================
   2026-09-30 — deux packs tout inclus (Essentiel / Premium). Remplace le
   configurateur à la carte sur `/` et `/pricing`. Mêmes jetons que les cartes
   `.cfg-card` : fond teinté, anneau pour le pack mis en avant, pas de bordure
   latérale.
   ============================================================ */
.pack-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-block-start: 34px;
}
.pack-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 26px 26px 24px;
	border: 1px solid rgba(7, 25, 87, 0.10);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 22px 60px -48px rgba(7, 25, 87, 0.45);
}
.pack-card--premium {
	border-color: rgba(74, 31, 168, 0.45);
	background-image: linear-gradient(180deg, rgba(74, 31, 168, 0.08), transparent 55%);
	box-shadow: inset 0 0 0 1px rgba(74, 31, 168, 0.25), 0 26px 70px -46px rgba(74, 31, 168, 0.6);
}
.pack-head { display: grid; gap: 4px; }
.pack-tag {
	color: var(--brand-violet);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pack-name { margin: 0; color: var(--brand-navy); font-size: 1.5rem; font-weight: 600; }
.pack-price { margin: 4px 0 0; color: var(--muted-d); font-size: 0.82rem; line-height: 1.3; }
.pack-price b {
	display: block;
	color: var(--ink-d);
	font-size: clamp(2rem, 3.2vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.pack-year { margin: 0; color: var(--muted-d); font-size: 0.8rem; }
.pack-year b { color: var(--ink-d); font-variant-numeric: tabular-nums; }
/* Le crochet sous le prix : Essentiel nomme son plafond (on sait où il
   s'arrête), Premium reformule 1 490 en « moins de 50 MAD par jour » et en
   « un marché gagné de plus paie l'année » : le même chiffre, lu autrement. */
.pack-hook { margin: 2px 0 0; color: var(--muted-d); font-size: 0.82rem; line-height: 1.5; }
.pack-hook--premium { color: var(--brand-violet); font-weight: 600; }
.pack-included {
	margin: 10px 0 0;
	padding-block-start: 12px;
	border-block-start: 1px solid rgba(7, 25, 87, 0.10);
	color: var(--brand-violet);
	font-size: 0.78rem;
	font-weight: 700;
}
.pack-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pack-list li {
	position: relative;
	padding-inline-start: 20px;
	color: var(--ink-d);
	font-size: 0.9rem;
	line-height: 1.4;
}
.pack-list li::before {
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--brand-lavender);
	content: "";
}
.pack-card--premium .pack-list li::before { background: var(--brand-violet); }
.pack-cta { margin-block-start: auto; padding-block-start: 14px; }
.pack-card .pack-cta { width: 100%; justify-content: center; }
.pack-all {
	display: grid;
	gap: 12px;
	margin-block-start: 18px;
	padding: 20px 24px;
	border: 1px solid rgba(74, 31, 168, 0.16);
	border-radius: 18px;
	background: rgba(74, 31, 168, 0.04);
}
.pack-all > b { color: var(--brand-navy); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pack-all ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pack-all li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-d); font-size: 0.9rem; line-height: 1.45; }
.pack-all li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--brand-violet); }
.pack-trial { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; color: var(--muted-d); font-size: 0.82rem; }
.pack-trial svg { width: 16px; height: 16px; color: var(--brand-violet); }
/* La modale coche un pack (radio) : le coche devient rond. */
.cfg-card input[type="radio"] + .cfg-tick { border-radius: 50%; }
.cfg-points { display: grid; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; }
.cfg-points li { position: relative; padding-inline-start: 12px; color: var(--ink-d); font-size: 0.8rem; line-height: 1.35; }
.cfg-points li::before { position: absolute; inset-inline-start: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-violet); content: ""; }
.cfg-sum-count b { color: var(--ink-d); font-size: 1rem; }
/* Tableau à deux colonnes : les colonnes de pack respirent. */
.pricing-table--packs col:not(.metric-col) { width: 220px; }
.pricing-table--packs td { font-weight: 600; }
@media (max-width: 720px) {
	.pack-grid { grid-template-columns: 1fr; }
	.pack-card { padding: 22px 20px 20px; }
	.pricing-table--packs col:not(.metric-col) { width: 150px; }
}