/* ==========================================================================
   SKYVISION : composants communs des maquettes « outils gratuits »
   Base : tokens.css (charte relevée sur le site live le 2026-09-25).
   Charge tokens.css AVANT ce fichier.
   Aucune dépendance externe : polices locales (tokens.css), pas de CDN,
   pas d'image distante. Fond étoilé, horizon et nébuleuse en CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Variables propres aux maquettes (pas des tokens de marque)
   -------------------------------------------------------------------------- */
:root {
  --mock-h: 56px;                           /* hauteur du bandeau maquette, recalculée en JS */
  --mock-ink: #07041c;                      /* = --sv-ink-violet */
  --line-light: var(--sv-tab-border);       /* #e4e9f1 */
  --text-muted-light: #4a5663;              /* 7.4:1 sur blanc */
  --text-muted-dark: rgba(255, 255, 255, 0.74);
  --error-dark: #ffb4a8;                    /* 10:1 sur #07041c (proposition) */
  --error-light: #b3261e;                   /* 6.5:1 sur blanc (proposition) */
  --nav-h: 55px;
  --radius-sm: 12px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mock-h) + 96px);
}
body {
  margin: 0;
  font-family: var(--sv-font-text);
  font-size: var(--sv-fs-regular);
  line-height: var(--sv-lh-1-5);
  font-weight: var(--sv-fw-text);
  color: var(--sv-navy);
  background: var(--sv-navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Satoshi 600 à 800 n'existe pas en local : on ne l'appelle jamais (évite le CDN). */
strong, b { font-weight: 500; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--sv-font-title); font-weight: var(--sv-fw-title); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--sv-purple);
  outline-offset: 2px;
  border-radius: 4px;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: #fff; color: var(--sv-navy); padding: 8px 14px; border-radius: var(--sv-radius-pill);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   2. Mise en page
   -------------------------------------------------------------------------- */
.sv-container {
  width: 100%;
  max-width: calc(var(--sv-container) + 2 * var(--sv-gutter));
  margin-inline: auto;
  padding-inline: var(--sv-gutter);
}
.sv-container--md { max-width: calc(var(--sv-container-medium) + 2 * var(--sv-gutter)); }
.sv-container--sm { max-width: calc(820px + 2 * var(--sv-gutter)); }

.sv-section { padding-block: var(--sv-section-large); position: relative; }
.sv-section--tight { padding-block: var(--sv-section-medium); }
.sv-section--light { background: var(--sv-white); color: var(--sv-navy); }
.sv-section--dark { background: var(--sv-navy); color: var(--sv-white); }

.sv-head { text-align: center; max-width: 860px; margin: 0 auto var(--sv-space-7); }
.sv-head p { color: var(--text-muted-light); font-size: var(--sv-fs-medium); max-width: 40em; margin: var(--sv-space-4) auto 0; }
.sv-section--dark .sv-head p, .sv-sky .sv-head p, .sv-nebula .sv-head p { color: var(--text-muted-dark); }
.sv-center { text-align: center; }
.sv-actions { display: flex; justify-content: center; margin-top: var(--sv-space-7); }

.sv-grid { display: grid; gap: 16px; }
.sv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) {
  .sv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sv-grid--2, .sv-grid--3, .sv-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
.sv-h1 {
  font-size: var(--sv-fs-h1-page);
  line-height: 1.08;
  letter-spacing: var(--sv-ls-title);
  font-weight: 500;
  text-wrap: balance;
}
.sv-h2 {
  font-size: var(--sv-fs-h2);
  line-height: 1.08;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
.sv-h3 { font-size: var(--sv-fs-h3); line-height: var(--sv-lh-1-2); }
.sv-h4 { font-size: var(--sv-fs-h4); line-height: 1.25; }
.sv-grad {
  background: var(--sv-gradient-title);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sv-lead { font-size: var(--sv-fs-medium); line-height: 1.5; max-width: 34em; }
.sv-small { font-size: var(--sv-fs-14); }
.sv-muted { color: var(--text-muted-light); }
.sv-on-dark .sv-muted, .sv-sky .sv-muted, .sv-nebula .sv-muted, .sv-section--dark .sv-muted { color: var(--text-muted-dark); }
.sv-eyebrow {
  display: inline-block;
  font-family: var(--sv-font-title); font-weight: 700;
  font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
}
.sv-num { font-variant-numeric: tabular-nums; }
.sv-nowrap { white-space: nowrap; }

/* Marques de rédaction [à vérifier] / [à arbitrer] : surbrillance discrète */
.sv-todo {
  display: inline;
  font-size: 0.86em; font-weight: 500;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(254, 189, 104, 0.2);
  color: #7a4a06;
  border: 1px dashed rgba(201, 138, 46, 0.7);
  white-space: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sv-sky .sv-todo, .sv-nebula .sv-todo, .sv-section--dark .sv-todo, .sv-form-card .sv-todo, .sv-on-dark .sv-todo {
  background: rgba(254, 189, 104, 0.12); color: var(--sv-gold); border-color: rgba(254, 189, 104, 0.55);
}
/* Variables d'email / de rapport non fournies par le copy deck */
.sv-var {
  font-family: var(--sv-font-text); font-size: 0.9em; font-weight: 500;
  padding: 0 5px; border-radius: 5px;
  background: rgba(115, 93, 208, 0.12); color: #4b3aa6;
  border: 1px solid rgba(115, 93, 208, 0.35);
}
.sv-sky .sv-var, .sv-nebula .sv-var, .sv-on-dark .sv-var { background: rgba(115, 93, 208, 0.25); color: #d9d2ff; border-color: rgba(185, 170, 255, 0.45); }
/* Valeur fictive insérée par l'outil (lisible, repérable au survol) */
.sv-fill { border-bottom: 1px dotted currentColor; }

/* --------------------------------------------------------------------------
   4. Bandeau « Maquette interne · données fictives » + onglets d'états
   -------------------------------------------------------------------------- */
.mock-bar {
  position: sticky; top: 0; z-index: 1000;
  background: var(--mock-ink);
  color: #fff;
  border-bottom: 1px solid transparent;
  border-image: var(--sv-gradient) 1;
}
.mock-bar__inner {
  display: flex; align-items: center; gap: 12px 16px;
  max-width: 1440px; margin: 0 auto; padding: 8px 16px;
}
.mock-bar__home {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: 500; text-decoration: none; color: rgba(255,255,255,.8);
  padding: 6px 10px; border-radius: var(--sv-radius-pill);
}
.mock-bar__home:hover { color: var(--sv-gold); }
.mock-flag {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--mock-ink);
  background: repeating-linear-gradient(135deg, #febd68 0 10px, #f7c98a 10px 20px);
  padding: 5px 10px; border-radius: 6px;
}
.mock-tabs {
  display: flex; gap: 4px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  padding: 2px;
}
.mock-tabs::-webkit-scrollbar { display: none; }
.mock-tab {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.16); background: transparent; color: rgba(255,255,255,.86);
  font-size: 13.5px; font-weight: 500; line-height: 1;
  padding: 9px 14px; border-radius: var(--sv-radius-pill); cursor: pointer;
}
.mock-tab:hover { color: var(--sv-gold); border-color: rgba(254,189,104,.45); }
.mock-tab[aria-selected="true"] { background: var(--sv-purple); border-color: var(--sv-purple); color: #fff; }
.mock-tab--alt { border-style: dashed; }
.mock-lang {
  flex: none; display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--sv-radius-pill);
}
.mock-lang button {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 12px; letter-spacing: 1px;
  padding: 6px 10px; border-radius: var(--sv-radius-pill);
}
.mock-lang button[aria-pressed="true"] { background: #fff; color: var(--sv-navy); }
.mock-lang__hint { font-size: 12px; color: rgba(255,255,255,.62); flex: none; }
@media (max-width: 991px) {
  .mock-bar__inner { flex-wrap: wrap; }
  .mock-tabs { order: 3; flex-basis: 100%; }
  .mock-lang__hint { display: none; }
}
@media (max-width: 479px) {
  .mock-bar__inner { padding: 6px 10px; gap: 8px; }
  .mock-bar__home span { display: none; }
  .mock-flag { font-size: 10px; letter-spacing: .8px; }
  .mock-tab { font-size: 13px; padding: 8px 12px; }
}

/* Notes de maquette (annotations internes, jamais visibles en production) */
.mock-note {
  font-size: 13.5px; line-height: 1.5;
  border: 1px dashed rgba(115, 93, 208, 0.6);
  background: rgba(115, 93, 208, 0.07);
  color: #2c2366;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.mock-note__label {
  display: inline-block; margin-right: 6px;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 10.5px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--mock-ink); background: #febd68; padding: 2px 7px; border-radius: 4px;
}
.sv-sky .mock-note, .sv-nebula .mock-note, .sv-form-card .mock-note, .sv-on-dark .mock-note {
  color: #ddd7ff; background: rgba(115, 93, 208, 0.14); border-color: rgba(185, 170, 255, 0.5);
}
.mock-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500;
  color: inherit; background: transparent; cursor: pointer;
  border: 1px dashed currentColor; border-radius: var(--sv-radius-pill);
  padding: 6px 12px; opacity: .85;
}
.mock-btn:hover { opacity: 1; color: var(--sv-gold); }
.sv-section--light .mock-btn:hover, .rp .mock-btn:hover { color: var(--sv-purple); }

/* États (onglets) */
.state { min-height: calc(100vh - var(--mock-h)); }
.state:focus { outline: none; }

/* --------------------------------------------------------------------------
   5. Fonds : ciel étoilé, horizon, nébuleuse (tout en CSS)
   -------------------------------------------------------------------------- */
.sv-sky, .sv-nebula { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background-color: var(--sv-navy); color: var(--sv-white); }
.sv-sky::before, .sv-nebula::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 131px 97px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 207px 23px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 61px 181px, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1px 1px at 245px 199px, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 173px 251px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 97px 301px, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 311px 131px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1px 1px at 331px 311px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 11px 263px, rgba(255,255,255,.35) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 283px 61px, rgba(255,255,255,.9) 50%, transparent 52%);
  background-size: 347px 347px, 347px 347px, 347px 347px, 347px 347px, 347px 347px, 347px 347px,
                   419px 419px, 419px 419px, 419px 419px, 419px 419px, 523px 523px;
  opacity: .8;
}
.sv-nebula::before { opacity: .45; }
.sv-sky::after {
  /* voile bleu nuit + lueur haute */
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(60% 45% at 30% 18%, rgba(40, 58, 110, 0.55), transparent 70%),
    radial-gradient(50% 50% at 85% 60%, rgba(115, 93, 208, 0.16), transparent 70%),
    linear-gradient(180deg, #030d14 0%, var(--sv-navy) 55%, #061a24 100%);
}
.sv-horizon {
  /* courbe de la Terre, comme le hero du site */
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: 0; width: 180%; aspect-ratio: 1 / 1;
  transform: translate(-50%, 91%);
  border-radius: 50%;
  background: radial-gradient(closest-side, #04111a 90%, #0b2430 96%, #3f5a3a 99.2%, rgba(140, 170, 120, 0) 100%);
  box-shadow: 0 -8px 40px rgba(122, 160, 110, 0.28), 0 -40px 140px rgba(70, 110, 190, 0.22), 0 -120px 240px rgba(115, 93, 208, 0.12);
}
.sv-flare {
  position: absolute; z-index: -1; pointer-events: none;
  width: 260px; height: 260px; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0 2px, rgba(220,230,255,.55) 4px, rgba(160,180,255,.15) 26px, transparent 70px),
    linear-gradient(90deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%) center / 100% 1.5px no-repeat,
    linear-gradient(0deg, transparent 25%, rgba(255,255,255,.45) 50%, transparent 75%) center / 1.5px 70% no-repeat;
  filter: blur(.2px);
  opacity: .9;
}

@media (max-width: 767px) { .sv-flare { opacity: .5; width: 170px; height: 170px; } }
.sv-nebula {
  background:
    radial-gradient(55% 60% at 78% 42%, rgba(115, 93, 208, 0.42), transparent 70%),
    radial-gradient(40% 50% at 12% 82%, rgba(115, 93, 208, 0.22), transparent 70%),
    radial-gradient(35% 35% at 30% 20%, rgba(254, 189, 104, 0.07), transparent 70%),
    linear-gradient(162deg, transparent 32%, rgba(115, 93, 208, 0.22) 50%, transparent 68%),
    var(--sv-navy);
}

/* --------------------------------------------------------------------------
   6. En-tête pilule du site
   -------------------------------------------------------------------------- */
.sv-nav-wrap {
  position: sticky; top: var(--mock-h); z-index: 900;
  display: flow-root; height: 0; padding-inline: var(--sv-gutter);
}
.sv-nav {
  position: relative;
  max-width: 1360px; margin: 14px auto 0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--sv-navy-nav); color: #fff;
  border-radius: var(--sv-radius-pill);
  padding: 7px 8px 7px 22px;
}
.sv-nav__logo { flex: none; display: block; width: 128px; }
.sv-nav > a:first-child { flex: none; display: block; }
.sv-nav__links { display: flex; align-items: center; gap: 32px; list-style: none; }
.sv-nav__links a, .sv-nav__links span {
  font-weight: 500; font-size: var(--sv-fs-15); letter-spacing: var(--sv-ls-caps);
  text-decoration: none; color: #fff; transition: color var(--sv-dur-color);
  display: inline-flex; align-items: center; gap: 8px;
}
.sv-nav__links a:hover { color: var(--sv-gold); }
.sv-nav__right { display: flex; align-items: center; gap: 22px; }
.sv-flag-fr {
  width: 20px; height: 14px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, #1b4fd8 0 33.3%, #fff 33.3% 66.6%, #e5322d 66.6%);
}
.sv-flag-en {
  width: 20px; height: 14px; border-radius: 2px; flex: none;
  background:
    linear-gradient(90deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 38%, #c8102e 38% 62%, transparent 62%),
    linear-gradient(90deg, transparent 36%, #fff 36% 64%, transparent 64%),
    linear-gradient(0deg, transparent 30%, #fff 30% 70%, transparent 70%),
    #012169;
}
.sv-burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  position: relative; border-radius: 12px;
}
.sv-burger span, .sv-burger span::before, .sv-burger span::after {
  position: absolute; left: 8px; width: 28px; height: 2.5px; background: #fff; border-radius: 2px; content: "";
}
.sv-burger span { top: 21px; }
.sv-burger span::before { top: -9px; left: 0; }
.sv-burger span::after { top: 9px; left: 0; }
.sv-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px);
  background: var(--sv-navy-nav); border-radius: var(--sv-radius-pill);
  padding: 24px; display: grid; gap: 16px;
}
.sv-menu a { color: #fff; text-decoration: none; font-weight: 500; letter-spacing: 1px; }
@media (max-width: 991px) {
  :root { --nav-h: 62px; }
  .sv-nav .sv-nav__links, .sv-nav .sv-nav__cta { display: none; }
  .sv-burger { display: block; }
  .sv-nav { padding-inline: 20px 12px; }
}

/* --------------------------------------------------------------------------
   7. Boutons (pilule à bord dégradé + cercle-flèche), relevé A/B
   -------------------------------------------------------------------------- */
.sv-btn {
  --fill: var(--sv-navy);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: var(--sv-btn-height);
  padding: 3px 3px 2px 18px;
  border: var(--sv-btn-border) solid transparent;
  border-radius: var(--sv-radius-pill);
  background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--sv-gradient) border-box;
  font-family: var(--sv-font-title); font-weight: 700;
  font-size: var(--sv-fs-small); line-height: 1.5;
  letter-spacing: var(--sv-ls-caps); text-transform: uppercase;
  color: var(--sv-white); text-decoration: none; cursor: pointer;
  text-align: left;
}
.sv-btn__arrow {
  flex: none;
  width: var(--sv-btn-arrow-size); height: var(--sv-btn-arrow-size);
  display: grid; place-items: center;
  border: var(--sv-btn-border) solid transparent; border-radius: var(--sv-radius-circle);
  background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--sv-gradient-vertical) border-box;
  color: var(--sv-gold);
}
.sv-btn__arrow svg { width: 15px; height: 15px; }
.sv-btn:hover .sv-btn__label {
  background: var(--sv-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sv-btn--nav { --fill: var(--sv-navy-nav); }
.sv-btn--light { --fill: var(--sv-white); color: var(--sv-navy); }
.sv-btn--gray { --fill: #f2f4f8; color: var(--sv-navy); }
.sv-btn--ink { --fill: var(--mock-ink); }
.sv-btn--block { width: 100%; }
.sv-btn--lg { min-height: 48px; font-size: 14.5px; padding-left: 22px; }
.sv-btn--lg .sv-btn__arrow { width: 38px; height: 38px; }
.sv-btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 767px) {
  .sv-actions .sv-btn, .sv-cta .sv-btn { width: 100%; }
}
.sv-textbtn {
  border: 0; background: none; padding: 6px 0; cursor: pointer;
  font-family: var(--sv-font-title); font-weight: 700; font-size: var(--sv-fs-small);
  letter-spacing: var(--sv-ls-caps); text-transform: uppercase; color: inherit;
}
.sv-textbtn:hover { background: var(--sv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sv-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sv-sky .sv-link:hover, .sv-nebula .sv-link:hover, .sv-form-card .sv-link:hover, .sv-footer .sv-link:hover { color: var(--sv-gold); }
.sv-section--light .sv-link:hover, .rp .sv-link:hover { color: var(--sv-purple); }

/* --------------------------------------------------------------------------
   8. Hero des pages outils
   -------------------------------------------------------------------------- */
.sv-hero { padding-top: calc(var(--nav-h) + 28px + 88px); padding-bottom: 150px; }
.sv-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 56px 72px; align-items: start;
}
.sv-hero__text { padding-top: 24px; }
@media (min-width: 992px) { .sv-hero__text { position: sticky; top: calc(var(--mock-h) + 110px); } }
.sv-hero__text .sv-h1 { margin-block: 22px 22px; }
.sv-hero__text .sv-lead { color: rgba(255,255,255,.9); }
@media (max-width: 1199px) { .sv-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; } }
@media (max-width: 991px) {
  .sv-hero { padding-top: calc(var(--nav-h) + 28px + 64px); padding-bottom: 110px; }
  .sv-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-hero__text { padding-top: 0; }
}

/* Fait daté du surtitre */
.sv-fact {
  display: inline-flex; align-items: flex-start; gap: 10px;
  max-width: 38em;
  padding: 10px 16px 10px 12px;
  border-radius: var(--sv-radius-card);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92);
}
.sv-fact__dot {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--sv-gradient-vertical);
  display: grid; place-items: center; color: var(--sv-navy);
  font-family: var(--sv-font-title); font-weight: 700; font-size: 12px;
}
.sv-source { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.62); }

/* Badges certifications (tuiles blanches comme sur le hero du site, sans logo tiers) */
.sv-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 32px; }
.sv-certs { display: flex; gap: 12px; }
.sv-cert {
  width: 92px; height: 64px; border-radius: 10px;
  background: #fff; color: var(--sv-navy);
  display: flex; flex-direction: column; justify-content: center;
  padding: 8px 10px; line-height: 1.1;
}
.sv-cert small { font-size: 10.5px; font-weight: 500; color: #3f4a55; letter-spacing: .2px; }
.sv-cert strong { font-family: var(--sv-font-title); font-weight: 700; font-size: 13px; margin-top: 4px; }
.sv-cert strong em { font-style: normal; color: #0b7a6c; }
.sv-trust__text { font-size: 15px; color: rgba(255,255,255,.86); max-width: 20em; }

/* --------------------------------------------------------------------------
   9. Formulaire (carte sombre, champs étiquetés)
   -------------------------------------------------------------------------- */
.sv-form-card {
  position: relative;
  color: #fff;
  border-radius: var(--sv-radius-card);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(7, 4, 28, 0.9), rgba(7, 4, 28, 0.9)) padding-box,
    linear-gradient(140deg, rgba(254,189,104,.65), rgba(115,93,208,.65) 45%, rgba(255,255,255,.08) 80%) border-box;
  -webkit-backdrop-filter: var(--sv-blur-glass); backdrop-filter: var(--sv-blur-glass);
  padding: 28px 28px 24px;
}
@media (max-width: 479px) { .sv-form-card { padding: 22px 18px 20px; } }
.sv-form__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sv-form__stepline { font-family: var(--sv-font-title); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sv-gold); }
.sv-progress { display: grid; grid-auto-flow: column; gap: 6px; margin-bottom: 20px; }
.sv-progress span { height: 3px; border-radius: 3px; background: rgba(255,255,255,.16); }
.sv-progress span.is-on { background: var(--sv-gradient); }
.sv-form__title { font-size: 24px; line-height: 1.2; margin-bottom: 20px; }
.sv-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.sv-field { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.sv-label, .sv-field > legend {
  display: block; padding: 0; margin-bottom: 8px;
  font-weight: 500; font-size: 15px; line-height: 1.35; color: #fff;
}
.sv-opt { font-weight: 400; color: rgba(255,255,255,.66); }
.sv-help { font-size: 13.5px; line-height: 1.45; color: var(--text-muted-dark); margin-top: 7px; }
.sv-help--above { margin: -2px 0 10px; }
.sv-input {
  width: 100%; height: 44px;
  padding: 0 18px;
  border-radius: var(--sv-radius-pill);
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.02);
  color: #fff;
  font-family: var(--sv-font-text); font-size: 15px;
}
.sv-input::placeholder { color: rgba(255,255,255,.55); }
.sv-input:focus { border-color: #fff; }
.sv-input:focus-visible { outline: 2px solid var(--sv-purple); outline-offset: 2px; }
.sv-input[aria-invalid="true"] { border-color: var(--error-dark); }
.sv-input-suffix { position: relative; max-width: 160px; }
.sv-input-suffix .sv-input { padding-right: 40px; }
.sv-input-suffix span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.75); pointer-events: none; }
.sv-error {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--error-dark);
}
.sv-error::before {
  content: "!"; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 500;
  background: var(--error-dark); color: var(--mock-ink);
}
.sv-warn { display: flex; gap: 8px; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--sv-gold); }
.sv-warn::before { content: "i"; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 500; border: 1px solid currentColor; }

/* Pilules de choix (radio / cases) : tranches, profils, marketplaces */
.sv-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-choice { position: relative; display: inline-flex; }
.sv-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sv-choice > span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 7px 15px;
  border: 1px solid rgba(255,255,255,.38); border-radius: var(--sv-radius-pill);
  font-size: 14px; line-height: 1.25; color: #fff;
  transition: background-color .15s, border-color .15s;
  pointer-events: none;
}
.sv-choice input[type="checkbox"] + span::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; flex: none;
  border: 1.5px solid rgba(255,255,255,.7);
}
.sv-choice input:hover + span { border-color: rgba(255,255,255,.8); }
.sv-choice input:checked + span { background: var(--sv-purple); border-color: var(--sv-purple); }
.sv-choice input[type="checkbox"]:checked + span::before {
  border-color: #fff; background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23735dd0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.sv-choice input:focus-visible + span { outline: 2px solid #b8a9ff; outline-offset: 3px; }
.sv-choice input:disabled { cursor: not-allowed; }
.sv-choice input:disabled + span { opacity: .6; border-style: dashed; }
.sv-soon {
  font-family: var(--sv-font-title); font-weight: 700; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--mock-ink); background: var(--sv-gold); padding: 2px 7px; border-radius: 20px;
}
fieldset.sv-field[aria-invalid="true"] .sv-choice > span { border-color: rgba(255,180,168,.7); }

/* Bascule segmentée (P1 : lien / marque) */
.sv-seg {
  display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; max-width: 100%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--sv-radius-pill);
}
.sv-seg label { position: relative; }
.sv-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sv-seg span { display: block; padding: 8px 16px; border-radius: var(--sv-radius-pill); font-size: 14px; font-weight: 500; pointer-events: none; }
.sv-seg input:checked + span { background: var(--sv-purple); }
.sv-seg input:focus-visible + span { outline: 2px solid #b8a9ff; outline-offset: 2px; }
@media (max-width: 479px) { .sv-seg { display: grid; width: 100%; border-radius: 22px; } .sv-seg span { text-align: center; border-radius: 18px; } }

/* Case de consentement */
.sv-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.9); cursor: pointer; }
.sv-check input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 1px 0 0;
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.8); background: transparent; cursor: pointer;
}
.sv-check input:checked {
  background: var(--sv-purple)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--sv-purple);
}
.sv-check input[aria-invalid="true"] { border-color: var(--error-dark); }

.sv-form__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.sv-form__nav .sv-btn { flex: 1 1 auto; }
.sv-back { border: 0; background: none; color: rgba(255,255,255,.8); cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.sv-back:hover { color: var(--sv-gold); }
/* Profile remembered on this device (D22): « Envoi à Camille · camille@… » replaces the folded fields. */
.sv-known { margin: 0 0 20px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); }
.sv-known__who { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.9); overflow-wrap: anywhere; }
.sv-known__who strong { color: #fff; font-weight: 500; }
.sv-known__who + .sv-known__from { margin-top: 4px; }
.sv-known__from { font-size: 13.5px; line-height: 1.45; color: var(--text-muted-dark); }
.sv-known__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.sv-known__actions .sv-back { padding: 4px 0; }
.sv-under { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted-dark); }
.sv-under a { color: #fff; }
.sv-privacy {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(115, 93, 208, 0.16); border: 1px solid rgba(185, 170, 255, 0.35);
  font-size: 13.5px; line-height: 1.5; color: #fff;
}
.sv-privacy svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--sv-gold); }

/* Zone de dépôt (P2) */
.sv-drop {
  position: relative;
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 26px 18px 22px;
  border: 1.5px dashed rgba(255,255,255,.45); border-radius: var(--sv-radius-card);
  background: rgba(255,255,255,.025);
  transition: border-color .15s, background-color .15s;
}
.sv-drop.is-over { border-color: var(--sv-gold); background: rgba(254,189,104,.07); }
.sv-drop__icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--mock-ink), var(--mock-ink)) padding-box, var(--sv-gradient-vertical) border-box;
  color: var(--sv-gold);
}
.sv-drop__icon svg { width: 20px; height: 20px; }
.sv-drop__main { font-size: 15.5px; font-weight: 500; }
.sv-drop__pick { color: var(--sv-gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.sv-drop__sub { font-size: 13px; color: var(--text-muted-dark); max-width: 30em; }
.sv-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sv-file-ok {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--sv-gradient-success); color: #fff; font-size: 14px; font-weight: 500;
}
.sv-file-ok__check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--sv-purple); display: grid; place-items: center; font-size: 13px; }

/* Saisie par étiquettes (P1 : 3 recherches max) */
.sv-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 5px 6px 5px 8px; border-radius: 22px; border: 1px solid rgba(255,255,255,.72); }
.sv-tags:focus-within { border-color: #fff; outline: 2px solid var(--sv-purple); outline-offset: 2px; }
.sv-tags input { flex: 1 1 140px; min-width: 120px; height: 32px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; padding: 0 8px; outline: none; }
.sv-tags input::placeholder { color: rgba(255,255,255,.55); }
.sv-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px; border-radius: var(--sv-radius-pill);
  background: var(--sv-purple); color: #fff; font-size: 14px;
}
.sv-tag button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; line-height: 1; font-size: 14px; }
.sv-tag button:hover { background: rgba(255,255,255,.35); }

/* Panneau déroulant (module DSP) */
.sv-panel {
  margin: 4px 0 20px; padding: 18px; border-radius: var(--sv-radius-card);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
}
.sv-panel__title { font-family: var(--sv-font-title); font-weight: 500; font-size: 20px; margin-bottom: 8px; }
.sv-panel__chapo { font-size: 14px; color: var(--text-muted-dark); margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   10. Cartes, preuves, étiquettes
   -------------------------------------------------------------------------- */
.sv-card { background: var(--sv-gray); border-radius: var(--sv-radius-card); padding: 28px; }
.sv-card--white { background: #fff; border: 1px solid var(--line-light); }
.sv-card--dark { background: var(--sv-card-dark); border: 1px solid var(--sv-card-dark-border); color: #fff; }
.sv-card--glass {
  color: #fff; border-radius: var(--sv-radius-card);
  background: rgba(30, 41, 59, 0.55); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: var(--sv-blur-glass); backdrop-filter: var(--sv-blur-glass);
}

.sv-feature { display: flex; flex-direction: column; gap: 12px; }
.sv-feature__n {
  font-family: var(--sv-font-title); font-weight: 700; font-size: 44px; line-height: 1;
  background: var(--sv-gradient-stat); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}
.sv-feature h3 { font-size: 21px; line-height: 1.2; }
.sv-feature p { font-size: var(--sv-fs-15); line-height: 1.45; color: #25323d; }
.sv-feature--wide { grid-column: 1 / -1; }

.sv-tag-fict {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 6px;
  color: #5b45bf; background: rgba(115,93,208,.1); border: 1px dashed rgba(115,93,208,.6);
}
.sv-sky .sv-tag-fict, .sv-nebula .sv-tag-fict, .sv-on-dark .sv-tag-fict, .sv-example .sv-tag-fict { color: var(--sv-gold); background: rgba(254,189,104,.08); border-color: rgba(254,189,104,.55); }
/* Étiquette « gabarit » (priorités P2 : règle de génération, pas un texte final) */
.rp-gabarit {
  display: inline-block; margin: 0 8px 6px 0; vertical-align: middle;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
  color: #5b45bf; background: rgba(115,93,208,.1); border: 1px dashed rgba(115,93,208,.6);
}
.rp-prio__rule { display: block; margin-top: 8px; font-size: 13.5px; color: var(--text-muted-light); }

/* Horodatage : pastille « relevé du … » (élément signature des 3 outils) */
.sv-stamp {
  display: inline-block; max-width: 100%;
  padding: 7px 14px 7px 12px; border-radius: 18px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  font-size: 14px; font-weight: 500; line-height: 1.3; color: #fff;
}
.sv-stamp__dot { position: relative; display: inline-block; vertical-align: 1px; margin-right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-gold); }
.sv-stamp__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--sv-gold);
  animation: sv-ping 2.4s var(--ease-out) infinite;
}
.sv-stamp--light { background: #f2f4f8; border-color: var(--line-light); color: var(--sv-navy); }
.sv-stamp--light .sv-stamp__dot { background: var(--sv-purple); }
.sv-stamp--light .sv-stamp__dot::after { border-color: var(--sv-purple); }
@keyframes sv-ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

/* Bloc exemple (aperçu étiqueté) */
.sv-example {
  position: relative; border-radius: 24px; padding: 32px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(7,4,28,.88), rgba(7,4,28,.88)) padding-box,
    var(--sv-gradient) border-box;
  color: #fff;
}
.sv-example__head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 22px; }
@media (max-width: 479px) { .sv-example { padding: 22px 18px; } }

/* Grand chiffre en dégradé */
.sv-bignum {
  margin: 0 0 .12em;
  font-family: var(--sv-font-title); font-weight: 700; line-height: 1; letter-spacing: -1px;
  font-size: clamp(44px, 7vw, 76px);
  background: var(--sv-gradient-stat); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}

/* Étapes « Comment ça marche » */
.sv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; position: relative; }
.sv-steps::before {
  content: ""; position: absolute; top: 31px; left: 16.6%; right: 16.6%; height: 1px;
  background: var(--sv-gradient); opacity: .7;
}
.sv-step-item { position: relative; text-align: center; padding: 0 12px; }
.sv-step-item__n {
  width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--sv-navy), var(--sv-navy)) padding-box, var(--sv-gradient-vertical) border-box;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 22px; color: var(--sv-gold);
}
.sv-step-item h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
.sv-step-item p { color: var(--text-muted-dark); font-size: var(--sv-fs-15); max-width: 22em; margin-inline: auto; }
@media (max-width: 767px) {
  .sv-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sv-steps::before { top: 31px; bottom: 60px; left: 31px; right: auto; width: 1px; height: auto; background: var(--sv-gradient-vertical); }
  .sv-step-item { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 0 18px; text-align: left; padding: 0; }
  .sv-step-item__n { margin: 0; grid-row: span 2; }
  .sv-step-item p { margin: 0; }
}

/* Tutoriel (P2) */
.sv-tuto { counter-reset: tuto; display: grid; gap: 12px; list-style: none; }
.sv-tuto > li {
  counter-increment: tuto;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  background: var(--sv-gray); border-radius: var(--sv-radius-card); padding: 20px 24px 20px 18px;
}
.sv-tuto > li::before {
  content: counter(tuto);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sv-navy); color: var(--sv-gold);
  font-family: var(--sv-font-title); font-weight: 700; font-size: 16px;
}
.sv-tuto h3 { font-size: 19px; line-height: 1.3; margin: 7px 0 6px; }
.sv-tuto p, .sv-tuto li li { font-size: var(--sv-fs-15); color: #25323d; }
.sv-tuto ul { padding-left: 18px; display: grid; gap: 4px; margin-top: 4px; }
.sv-ui { font-weight: 500; background: #fff; border: 1px solid var(--line-light); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.sv-video-slot {
  aspect-ratio: 16 / 9; min-width: 0; border-radius: var(--sv-radius-video);
  display: grid; place-items: center; text-align: center; padding: 24px; gap: 10px;
  background: linear-gradient(160deg, #0b1f2b, #1b1846);
  color: #fff; border: 1px solid rgba(255,255,255,.08);
}
.sv-play { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--sv-navy); margin-inline: auto; }
.sv-play svg { width: 22px; height: 22px; margin-left: 3px; }

/* --------------------------------------------------------------------------
   11. FAQ en accordéon (style page service B : items bleu nuit, rayon 20px)
   -------------------------------------------------------------------------- */
.sv-faq { display: grid; gap: 20px; max-width: 710px; margin: 0 auto; }
.sv-faq details { background: var(--sv-navy); color: #fff; border-radius: var(--sv-radius-card); border: 1px solid var(--sv-navy-nav); }
.sv-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 24px 24px 24px;
  font-family: var(--sv-font-title); font-weight: 500; font-size: 20px; line-height: 1.3;
  border-radius: var(--sv-radius-card);
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background:
    linear-gradient(#fff, #fff) center / 20px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 20px no-repeat;
  transition: transform .25s var(--ease-out);
}
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq summary:hover { color: var(--sv-gold); }
.sv-faq__a { padding: 0 24px 24px; color: rgba(255,255,255,.84); font-size: 16px; line-height: 1.55; }
@media (max-width: 479px) { .sv-faq summary { font-size: 17.5px; padding: 20px; } .sv-faq__a { padding: 0 20px 20px; } }

/* --------------------------------------------------------------------------
   12. CTA final (blanc) et pied de page
   -------------------------------------------------------------------------- */
.sv-cta { text-align: center; }
.sv-cta__title { font-size: var(--sv-fs-cta); line-height: 1.2; max-width: 22em; margin: 0 auto 18px; text-wrap: balance; }
.sv-cta p { color: var(--text-muted-light); font-size: var(--sv-fs-medium); max-width: 34em; margin: 0 auto 36px; }

.sv-footer { background: var(--sv-navy); color: #fff; padding: 56px 0 40px; }
.sv-footer__rule { height: 1px; background: var(--sv-gradient); margin-bottom: 44px; }
.sv-footer__main { display: grid; grid-template-columns: 1.3fr 1fr 1.6fr; gap: 40px; align-items: start; }
.sv-footer__logo { width: 220px; margin-bottom: 22px; }
.sv-socials { display: flex; gap: 10px; list-style: none; }
.sv-socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sv-gold); color: var(--sv-navy); transition: background-color var(--sv-dur-color);
}
.sv-socials a:hover { background: var(--sv-purple); color: #fff; }
.sv-socials svg { width: 18px; height: 18px; }
.sv-footer__badge { display: grid; gap: 4px; justify-items: start; padding-top: 6px; }
.sv-footer__badge strong { font-family: var(--sv-font-title); font-weight: 700; font-size: 20px; line-height: 1.1; }
.sv-footer__badge span { font-size: 14px; color: rgba(255,255,255,.75); }
.sv-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; list-style: none; }
.sv-footer__links a { font-size: var(--sv-fs-15); text-decoration: none; color: #fff; transition: color var(--sv-dur-color); }
.sv-footer__links a:hover { color: var(--sv-gold); }
.sv-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; font-size: var(--sv-fs-14); }
.sv-footer__bottom a { color: #fff; text-decoration: none; }
.sv-footer__bottom a:hover { color: var(--sv-gold); }
@media (max-width: 991px) { .sv-footer__main { grid-template-columns: 1fr 1fr; } .sv-footer__links { grid-column: 1 / -1; } }
@media (max-width: 767px) { .sv-footer__main { grid-template-columns: 1fr; } .sv-footer__bottom { flex-direction: column; } }

/* --------------------------------------------------------------------------
   13. État ② Attente
   -------------------------------------------------------------------------- */
.st-center { padding-top: calc(var(--nav-h) + 28px + 72px); padding-bottom: 140px; }
.wait-card { max-width: 680px; margin: 0 auto; }
.wait-card .sv-h2 { text-align: left; font-size: clamp(30px, 4vw, 44px); margin: 16px 0 28px; }
.wait-steps { list-style: none; display: grid; gap: 4px; margin-bottom: 28px; }
.wait-steps li {
  --d: calc(var(--i) * 1.5s + .4s);
  display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 16.5px; color: rgba(255,255,255,.55);
}
.wait-steps li::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent center / 13px no-repeat;
}
.is-running .wait-steps li { animation: wait-text .01s linear var(--d) forwards; }
.is-running .wait-steps li::before { animation: wait-dot .45s var(--ease-out) var(--d) forwards; }
@keyframes wait-text { to { color: #fff; } }
@keyframes wait-dot {
  0% { transform: scale(.7); }
  100% {
    transform: scale(1); border-color: transparent;
    background-color: var(--sv-purple);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
.wait-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.wait-bar span { display: block; height: 100%; width: 0; background: var(--sv-gradient); border-radius: 6px; }
.is-running .wait-bar span { animation: wait-fill 6.4s cubic-bezier(.4,.1,.3,1) forwards; }
@keyframes wait-fill { to { width: 100%; } }
.wait-under { margin-top: 14px; color: var(--text-muted-dark); font-size: 15px; }
.wait-aside { margin-top: 28px; padding: 18px 20px; }
.st-variants { display: grid; gap: 12px; margin-top: 40px; }
.st-variants__title { font-family: var(--sv-font-title); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.st-variant { padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); font-size: 15px; color: rgba(255,255,255,.88); }
.st-variant b { display: block; font-size: 12.5px; letter-spacing: .4px; color: var(--sv-gold); margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   14. État ③ Aperçu immédiat
   -------------------------------------------------------------------------- */
.pv-card { max-width: 820px; margin: 0 auto; }
.pv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 26px; }
.pv-title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; margin-bottom: 28px; }
.pv-constats { display: grid; gap: 14px; margin-bottom: 26px; }
.pv-constat { padding: 22px 24px; }
.pv-constat__label { display: block; font-family: var(--sv-font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sv-gold); margin-bottom: 10px; }
.pv-constat p { font-size: 18px; line-height: 1.45; }
/* P1 « Votre fiche » (28/09): one short line per point, tighter than the sentences of the other cards */
.pv-constat--list p { font-size: 16px; margin: 4px 0 0 !important; }
.pv-sent {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: var(--sv-radius-card);
  background: var(--sv-gradient-success); color: #fff; font-weight: 500; font-size: 15.5px; line-height: 1.45;
  margin-bottom: 26px;
}
.pv-sent svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }

/* Jauges et barres en CSS (aperçus et rapports) */
.sv-dots { display: inline-flex; gap: 6px; vertical-align: middle; }
.sv-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; }
.sv-dots i.on { background: var(--sv-gradient-vertical); border-color: transparent; opacity: 1; }
.sv-meter { display: grid; gap: 8px; }
.sv-meter__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sv-bar { height: 10px; border-radius: 10px; background: var(--line-light); overflow: hidden; position: relative; }
.sv-on-dark .sv-bar, .sv-sky .sv-bar, .sv-nebula .sv-bar { background: rgba(255,255,255,.12); }
.sv-bar > span {
  display: block; height: 100%; width: var(--v, 0%); border-radius: inherit;
  background: var(--sv-gradient);
  transform-origin: left center;
  animation: sv-grow .9s var(--ease-out) both;
}
.sv-bar--muted > span { background: #9aa6b4; }
.sv-bar--purple > span { background: var(--sv-purple); }
.sv-bar__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; left: var(--m); background: var(--sv-navy); border-radius: 2px; }
@keyframes sv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv-split { display: flex; height: 14px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.12); }
.sv-split span { display: block; height: 100%; }

/* --------------------------------------------------------------------------
   15. État ④ Rapport (page privée, claire, imprimable)
   -------------------------------------------------------------------------- */
.rp { background: #fff; color: var(--sv-navy); }
.rp-top { border-bottom: 1px solid var(--line-light); background: #fff; }
.rp-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 16px; }
.rp-top__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rp-top__logo { width: 136px; }
.rp-private { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-muted-light); padding: 6px 12px; border-radius: var(--sv-radius-pill); background: #f2f4f8; }
.rp-private svg { width: 14px; height: 14px; }
.rp-top__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--sv-radius-pill); border: 1px dashed rgba(115,93,208,.6); }
.rp-seg button { border: 0; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: var(--sv-radius-pill); color: #2c2366; }
.rp-seg button[aria-pressed="true"] { background: var(--sv-purple); color: #fff; }

.rp-band { padding-block: 44px 84px; }
.rp-band__kicker { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 22px; }
/* En-tête du rapport comme le hero des pages outils (design 28/09) : sourcil, certifications, titre, tampons, sommaire */
.rp-band__top { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.rp-band__top .sv-eyebrow { color: var(--sv-gold); max-width: 34em; }
.rp-band .sv-certs { flex: none; }
.rp-band h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -1px; margin-bottom: 22px; font-weight: 500; text-wrap: balance; }
.rp-band__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-band__meta .sv-stamp { font-weight: 400; }
.rp-band__meta b { font-weight: 500; }
.rp-toc { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.rp-toc__label { font-family: var(--sv-font-title); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.rp-toc ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; counter-reset: toc; }
.rp-toc li { counter-increment: toc; }
.rp-toc a {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px;
  border-radius: var(--sv-radius-pill); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  color: #fff; font-size: 13.5px; line-height: 1.3; text-decoration: none; transition: border-color .2s, background-color .2s;
}
.rp-toc a::before {
  content: counter(toc, decimal-leading-zero); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 11px; color: var(--sv-navy); background: var(--sv-gradient);
}
.rp-toc a:hover, .rp-toc a:focus-visible { border-color: rgba(254,189,104,.65); background: rgba(255,255,255,.08); }
@media (max-width: 767px) {
  .rp-band { padding-block: 32px 64px; } .rp-band__top { margin-bottom: 18px; } .rp-band .sv-certs { display: none; }
  /* une rangée qui défile plutôt qu'une pile de pastilles */
  .rp-toc ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
  .rp-toc ol::-webkit-scrollbar { display: none; }
  .rp-toc li { flex: none; scroll-snap-align: start; }
}

.rp-body { padding-block: 56px 88px; }
.rp-section { position: relative; padding-block: 52px; border-top: 1px solid var(--line-light); }
.rp-section::before { content: ""; position: absolute; left: 0; top: -1px; width: 72px; height: 2px; border-radius: 2px; background: var(--sv-gradient); }
.rp-section:first-child { border-top: 0; padding-top: 0; }
.rp-section:first-child::before { display: none; }
.rp-kicker { font-family: var(--sv-font-title); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sv-purple); margin-bottom: 10px; display: block; }
.rp-h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.5px; margin-bottom: 20px; text-wrap: balance; scroll-margin-top: 24px; }
/* Parties numérotées : le grand chiffre dégradé des cartes « 01 » à « 06 » des pages outils, dessiné par la CSS */
.rp-head { margin-bottom: 22px; }
.rp-head .rp-h2 { margin-bottom: 0; }
.rp-section--part .rp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: end; }
.rp-section--part .rp-head::before {
  content: attr(data-n); grid-row: 1 / span 2; align-self: center;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 68px; line-height: .9; letter-spacing: -3px;
  background: var(--sv-gradient-stat); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.rp-section--part .rp-kicker, .rp-section--part .rp-h2 { grid-column: 2; }
@media (max-width: 479px) { .rp-section--part .rp-head { column-gap: 14px; } .rp-section--part .rp-head::before { font-size: 46px; letter-spacing: -2px; } }
.rp-constat {
  position: relative; padding: 16px 20px 16px 22px; margin-bottom: 22px;
  border-radius: 14px; background: #f2f4f8; font-size: 17px; line-height: 1.5;
}
.rp-constat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--sv-gradient-vertical); }
.rp-constat b { font-weight: 500; }
.rp-meaning { margin-top: 20px; font-size: 16px; line-height: 1.6; max-width: 46em; }
.rp-meaning strong { display: block; font-family: var(--sv-font-title); font-weight: 500; font-size: 17px; margin-bottom: 4px; }
.rp-brief { display: grid; gap: 10px; list-style: none; margin-top: 22px; }
.rp-brief li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; font-size: 17px; line-height: 1.5; }
.rp-brief li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 8px; background: var(--sv-gradient-vertical); }

.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.rp-kpi { position: relative; background: #fff; border: 1px solid var(--line-light); border-radius: var(--sv-radius-card); padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(4,19,28,.04), 0 10px 26px -18px rgba(4,19,28,.18); }
.rp-kpi:not(.rp-kpi--accent)::before { content: ""; position: absolute; left: 20px; top: -1px; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--sv-gradient); }
.rp-kpi__n { font-family: var(--sv-font-title); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.5px; }
.rp-kpi__n small { font-size: 18px; font-weight: 500; letter-spacing: 0; }
.rp-kpi__l { font-size: 14px; line-height: 1.4; color: #25323d; }
.rp-kpi--accent { background: var(--sv-navy); color: #fff; position: relative; overflow: hidden; border-color: var(--sv-card-dark-border); }
.rp-kpi--accent::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(115,93,208,.55), transparent); }
.rp-kpi--accent .rp-kpi__n { background: var(--sv-gradient-stat); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
.rp-kpi--accent .rp-kpi__l { color: rgba(255,255,255,.82); }
@media (max-width: 991px) { .rp-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 479px) { .rp-kpis { grid-template-columns: minmax(0,1fr); } }

/* Tableaux */
.sv-table-wrap { border: 1px solid var(--line-light); border-radius: 16px; overflow: hidden; }
.sv-table { font-size: 15px; }
.sv-table caption { text-align: left; padding: 14px 18px; font-size: 13.5px; color: var(--text-muted-light); caption-side: bottom; border-top: 1px solid var(--line-light); }
.sv-table th {
  text-align: left; font-weight: 500; font-size: 13px; color: #3f4a55;
  background: #f7f8fb; padding: 12px 16px; border-bottom: 1px solid var(--line-light); white-space: nowrap;
}
.sv-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-light); vertical-align: middle; }
.sv-table tbody tr:last-child td { border-bottom: 0; }
.sv-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-table tr.is-you td { background: rgba(115,93,208,.07); }
.sv-table tr.is-you td:first-child { box-shadow: inset 3px 0 0 var(--sv-purple); }
.sv-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 20px;
}
.sv-pill--ad { background: rgba(254,189,104,.26); color: #6b3f00; }
.sv-pill--you { background: var(--sv-purple); color: #fff; }
.sv-pill--nat { background: #e9f4ee; color: #1d5b3a; }
.sv-pill--muted { background: #eef0f4; color: #3f4a55; }
.sv-cellbar { display: grid; grid-template-columns: minmax(60px, 1fr) auto; gap: 10px; align-items: center; }
.sv-cellbar .sv-bar { height: 8px; }
@media (max-width: 767px) {
  .sv-table--stack thead { display: none; }
  .sv-table--stack, .sv-table--stack tbody, .sv-table--stack tr, .sv-table--stack td { display: block; width: 100%; }
  .sv-table--stack { display: flex; flex-direction: column; }
  .sv-table--stack caption { order: 2; display: block; width: 100%; }
  .sv-table--stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line-light); }
  .sv-table--stack tbody tr:last-child { border-bottom: 0; }
  .sv-table--stack td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 42% minmax(0,1fr); gap: 10px; text-align: left !important; white-space: normal !important; }
  .sv-table--stack td::before { content: attr(data-label); font-size: 12.5px; font-weight: 500; color: #56616d; }
  .sv-table--stack tr.is-you td:first-child { box-shadow: none; }
  .sv-table--stack tr.is-you { box-shadow: inset 3px 0 0 var(--sv-purple); background: rgba(115,93,208,.07); }
  .sv-table--stack .sv-cellbar { grid-template-columns: 1fr auto; }
}

/* Tableaux du rapport : en-têtes au style des sourcils de la marque, carte à ombre douce (design 28/09) */
.rp .sv-table-wrap { border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(4,19,28,.04), 0 12px 30px -20px rgba(4,19,28,.2); }
.rp .sv-table th { font-family: var(--sv-font-title); font-weight: 700; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: #56616d; background: #f2f4f8; }
.rp .sv-table tbody tr:hover td { background: rgba(115,93,208,.035); }
.rp .sv-table tbody tr.is-you:hover td { background: rgba(115,93,208,.09); }

/* Bande de résultats (places 1 à n) */
.serp { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0,1fr)); gap: 6px; }
.serp__slot {
  border-radius: 12px; padding: 10px 8px 9px; min-height: 76px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  background: #f2f4f8; font-size: 12.5px; line-height: 1.25; border: 1px solid var(--line-light);
}
.serp__slot b { font-family: var(--sv-font-title); font-weight: 700; font-size: 18px; line-height: 1; }
.serp__slot--ad { background: #fff4e3; border-color: #f6d7a8; }
.serp__slot--you { background: var(--sv-purple); color: #fff; border-color: var(--sv-purple); }
.serp__slot--youad { background: #ece8fb; border-color: #cbc1f3; }
.serp__slot--other { background: #f7f8fb; color: #56616d; }
.serp__slot--nat { background: #e9f4ee; border-color: #cfe6d8; }
.serp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--text-muted-light); }
.serp-legend span { display: inline-flex; gap: 6px; align-items: center; }
.serp-legend i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line-light); }
@media (max-width: 767px) { .serp { grid-template-columns: repeat(3, minmax(0,1fr)); } .serp.serp--10 { grid-template-columns: repeat(5, minmax(0,1fr)); } }

/* Cartes de recherche (P1, P3) */
.rp-search { background: #fff; border: 1px solid var(--line-light); border-radius: var(--sv-radius-card); padding: 22px; display: grid; gap: 16px; }
.rp-search__q { font-family: var(--sv-font-title); font-weight: 500; font-size: 20px; line-height: 1.25; }
.rp-search__meta { font-size: 13.5px; color: var(--text-muted-light); }
.rp-search dl { display: grid; gap: 14px; margin: 0; }
.rp-search dt { font-size: 13px; font-weight: 500; color: #56616d; margin-bottom: 6px; }
.rp-search dd { margin: 0; font-size: 15px; }
.rp-brands { display: grid; gap: 8px; }
.rp-brands div { display: grid; grid-template-columns: 110px minmax(0,1fr) 24px; gap: 10px; align-items: center; font-size: 14px; }
.rp-brands .is-you { color: var(--sv-purple); font-weight: 500; }

/* Priorités */
.rp-prio { list-style: none; display: grid; gap: 12px; counter-reset: prio; }
.rp-prio li {
  counter-increment: prio; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 18px;
  background: #f2f4f8; border-radius: var(--sv-radius-card); padding: 22px 24px 22px 20px; font-size: 16px; line-height: 1.55;
}
.rp-prio li::before {
  content: counter(prio); width: 52px; height: 52px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center; border: 2px solid transparent;
  background: linear-gradient(var(--sv-navy), var(--sv-navy)) padding-box, var(--sv-gradient-vertical) border-box;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 22px; color: var(--sv-gold);
}
.rp-prio strong { display: block; font-family: var(--sv-font-title); font-weight: 500; font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
/* Mobile : pastille plus petite, le texte des priorités garde la largeur (revue du 25/09) */
@media (max-width: 479px) {
  .rp-prio li { grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding: 18px 16px 18px 14px; }
  .rp-prio li::before { width: 36px; height: 36px; font-size: 17px; }
  .rp-prio strong { font-size: 18px; }
}

/* Méthode et limites */
.rp-method { background: #f7f8fb; border: 1px solid var(--line-light); border-radius: var(--sv-radius-card); padding: 28px; }
.rp-method h2 { font-size: 22px; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; }
.rp-method h2 svg { width: 22px; height: 22px; color: var(--sv-purple); }
.rp-method ul { list-style: none; display: grid; gap: 12px; }
.rp-method li { font-size: 15px; line-height: 1.55; padding-left: 18px; position: relative; }
.rp-method li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-purple); }
.rp-method li b { font-weight: 500; }

/* Bloc audit (sombre) + cas client */
.rp-audit { border-radius: 24px; padding: 44px; }
.rp-audit h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; margin-bottom: 16px; max-width: 18em; }
.rp-audit p { color: rgba(255,255,255,.86); max-width: 40em; font-size: 16.5px; }
.rp-audit .sv-btn { margin-top: 26px; }
.rp-case { margin-top: 32px; padding: 20px 22px; border-radius: var(--sv-radius-card); border: 1px solid transparent; background: linear-gradient(rgba(12,26,36,.92), rgba(12,26,36,.92)) padding-box, var(--sv-gradient-gold-frame) border-box; }
.rp-audit .rp-case p { margin: 0; color: #fff; font-size: 16px; max-width: none; }
.rp-case small { display: block; margin-top: 8px; font-size: 13px; font-style: italic; color: rgba(255,255,255,.72); }
@media (max-width: 479px) { .rp-audit { padding: 28px 20px; } }
/* vidéo de présentation, au-dessus du bouton de réservation (28/09) */
.rp-video { margin: 28px 0 0; max-width: 640px; }
.rp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--sv-radius-card); background: #0c1a24; border: 1px solid rgba(255,255,255,.16); }
.rp-video figcaption { margin-top: 10px; font-size: 14.5px; color: rgba(255,255,255,.86); }
.rp-video figcaption small { display: block; margin-top: 4px; font-size: 12.5px; font-style: italic; color: rgba(255,255,255,.66); }
.rp-guide { border-radius: 24px; padding: 40px; background: #f2f4f8; border: 1px solid var(--line-light); }
.rp-guide h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; }
.rp-guide p { max-width: 40em; }
.rp-foot { background: var(--sv-navy); color: rgba(255,255,255,.78); padding: 0 0 44px; font-size: 14.5px; line-height: 1.55; }
.rp-foot__rule { height: 1px; background: var(--sv-gradient); margin-bottom: 30px; }
.rp-foot__inner { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.rp-foot__inner img { width: 136px; height: auto; flex: none; }
.rp-foot__inner p { margin: 0; max-width: 44em; }

/* Verdicts DSP */
.dsp-verdict { border-radius: var(--sv-radius-card); padding: 26px; border: 1px solid var(--line-light); background: #fff; }
.dsp-verdict__badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sv-font-title); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; margin-bottom: 14px; }
.dsp-verdict--yes .dsp-verdict__badge { background: #e2f3ea; color: #155a36; }
.dsp-verdict--wait .dsp-verdict__badge { background: #fff1db; color: #7a4a06; }
.dsp-verdict--no .dsp-verdict__badge { background: #fde8e6; color: #8f1d15; }
.dsp-verdict h3 { font-size: 24px; margin-bottom: 10px; }
.dsp-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--sv-radius-pill); background: #f2f4f8; margin-bottom: 16px; flex-wrap: wrap; }
.dsp-tabs button { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--sv-radius-pill); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--sv-navy); }
.dsp-tabs button[aria-pressed="true"] { background: var(--sv-purple); color: #fff; }

/* --------------------------------------------------------------------------
   16. État ⑤ Emails
   -------------------------------------------------------------------------- */
.em { background: #eef1f6; color: var(--sv-navy); padding-block: 48px 96px; }
.em-overview { background: #fff; border-radius: var(--sv-radius-card); padding: 24px; margin-bottom: 28px; border: 1px solid var(--line-light); }
.em-overview dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 8px 20px; margin: 0; font-size: 14.5px; }
.em-overview dt { font-weight: 500; color: #3f4a55; }
.em-overview dd { margin: 0; }
@media (max-width: 479px) { .em-overview dl { grid-template-columns: minmax(0,1fr); gap: 2px; } .em-overview dd { margin-bottom: 8px; } }
.em-timeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 28px; position: relative; }
.em-timeline a {
  display: grid; gap: 4px; text-decoration: none; padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line-light); font-size: 13.5px; height: 100%;
}
.em-timeline a:hover { border-color: var(--sv-purple); }
.em-timeline b { font-family: var(--sv-font-title); font-weight: 700; font-size: 15px; }
.em-timeline span { color: var(--text-muted-light); }
@media (max-width: 767px) { .em-timeline { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.em-list { display: grid; gap: 28px; }
.em-mail { background: #fff; border-radius: var(--sv-radius-card); border: 1px solid var(--line-light); overflow: hidden; scroll-margin-top: calc(var(--mock-h) + 20px); }
.em-mail__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: #f7f8fb; border-bottom: 1px solid var(--line-light); }
.em-mail__when { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #3f4a55; }
.em-mail__when b { font-family: var(--sv-font-title); font-weight: 700; color: var(--sv-navy); background: #fff; border: 1px solid var(--line-light); padding: 2px 9px; border-radius: 20px; }
.em-mail__head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line-light); display: grid; gap: 6px; font-size: 14px; }
.em-mail__subject { font-family: var(--sv-font-title); font-weight: 500; font-size: 22px; line-height: 1.25; margin-bottom: 6px; }
.em-mail__row { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 10px; color: #3f4a55; }
.em-mail__row span:first-child { color: #6a7580; }
.em-mail__row span:last-child { overflow-wrap: anywhere; }
.em-mail__pre { color: #56616d; font-style: italic; }
.em-mail__body { padding: 28px 24px 8px; max-width: 640px; font-size: 16px; line-height: 1.6; }
.em-mail__body ul { padding-left: 20px; margin: 0 0 1em; display: grid; gap: 4px; }
.em-mail__body .sv-btn { margin: 6px 0 22px; }
.em-sign { margin: 22px 0 0; line-height: 1.5; }
.em-mail__foot { margin: 20px 24px 24px; padding-top: 16px; border-top: 1px solid var(--line-light); font-size: 12.5px; line-height: 1.55; color: #56616d; max-width: 640px; }
.em-variant { margin: 0 0 1em; padding: 12px 14px; border-radius: 12px; background: #f7f8fb; border: 1px solid var(--line-light); font-size: 15px; }
.em-variant__label { display: block; font-size: 12px; font-weight: 500; color: var(--sv-purple); margin-bottom: 4px; }
.em-changed { background: rgba(254,189,104,.18); border-radius: 8px; padding: 10px 12px; margin: 0 0 1em; box-shadow: inset 3px 0 0 #e7a649; }
.em-disclaimer { font-size: 13.5px; font-style: italic; color: #56616d; }

/* --------------------------------------------------------------------------
   17. Variante routage
   -------------------------------------------------------------------------- */
.rt { background: #fff; padding-block: 56px 96px; }
.rt-intro { max-width: 820px; margin-bottom: 36px; }
.rt-intro .sv-h2 { text-align: left; margin-bottom: 16px; font-size: clamp(30px, 4vw, 44px); }
.rt-blocks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.rt-block { border-radius: var(--sv-radius-card); padding: 26px; background: #f2f4f8; border: 1px solid var(--line-light); display: flex; flex-direction: column; gap: 12px; }
.rt-block__v { font-family: var(--sv-font-title); font-weight: 700; font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--sv-purple); }
.rt-block h3 { font-size: 22px; }
.rt-block p { font-size: 15px; line-height: 1.55; }
.rt-block .sv-btn { margin-top: auto; align-self: flex-start; }
.rt-block--reco { background: #fff; border: 1.5px solid var(--sv-purple); }
@media (max-width: 991px) { .rt-blocks { grid-template-columns: minmax(0,1fr); } }
.rt-h3 { font-size: 24px; margin: 56px 0 16px; }

/* --------------------------------------------------------------------------
   18. Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .sv-stamp__dot::after { display: none; }
}

/* --------------------------------------------------------------------------
   19. Impression : seul le rapport (état ④) sort, en version claire
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #fff !important; }
  .mock-bar, .sv-nav-wrap, .state, .rp-top__right, .no-print, .mock-note, .skip-link { display: none !important; }
  .state--report { display: block !important; min-height: 0; }
  .state--report[hidden] { display: block !important; }
  .rp-top { border: 0; }
  .rp-band { background: #fff !important; color: var(--sv-navy) !important; padding: 12px 0 20px; border-bottom: 2px solid #735dd0; }
  .rp-band::before, .rp-band::after, .rp-band .sv-horizon, .rp-band .sv-flare { display: none !important; }
  .rp-band .sv-stamp { background: #fff; border-color: #cfd6e0; color: var(--sv-navy); }
  .rp-band .sv-tag-fict { color: #5b45bf; background: #fff; border-color: #735dd0; }
  .rp-band .sv-muted { color: #3f4a55 !important; }
  .rp-body { padding-top: 24px; }
  /* un bloc court ne se coupe pas ; une partie entière peut se couper (sinon pages presque vides, revue du 28/09) */
  .rp-kpi, .rp-search, .rp-prio li, .rp-method, .sv-table tr, .rp-audit, .rp-guide, .dsp-verdict, .rp-constat, .rp-callout, .neg-card { break-inside: avoid; }
  .rp-head, .rp-h2, .rp-sub, .neg-card h3 { break-after: avoid; }
  /* tableaux : la largeur imprimable (environ 700 px) déclenche la version mobile ; on garde de vrais tableaux */
  .sv-table--stack { display: table !important; }
  .sv-table--stack thead { display: table-header-group !important; }
  .sv-table--stack tbody { display: table-row-group !important; }
  .sv-table--stack tr { display: table-row !important; padding: 0 !important; box-shadow: none !important; background: none !important; }
  .sv-table--stack td { display: table-cell !important; width: auto !important; padding: 8px 10px !important; border-bottom: 1px solid var(--line-light) !important; }
  .sv-table--stack td::before { content: none !important; }
  .sv-table--stack td.r { text-align: right !important; white-space: nowrap !important; }
  .sv-table--stack caption { display: table-caption !important; }
  .rp .sv-table th, .rp .sv-table td { font-size: 11.5px; padding: 7px 9px; }
  /* texte en dégradé : couleur pleine à l'impression (le PDF dessinait un cadre autour) */
  .rp .sv-grad, .rp-kpi--accent .rp-kpi__n { background: none !important; -webkit-text-fill-color: #735dd0 !important; color: #735dd0 !important; }
  .kpi-hero__legend { color: #3f4a55 !important; }
  .kpi-hero .sv-split { background: #e4e9f1 !important; }
  .rp-section { padding-block: 22px; }
  .rp-audit { background: #fff !important; color: var(--sv-navy) !important; border: 1.5px solid #735dd0; }
  .rp-audit::before, .rp-audit::after { display: none !important; }
  .rp-audit p, .rp-case p { color: var(--sv-navy) !important; }
  .rp-case { background: #fff !important; border: 1px solid #c9a05f; }
  .rp-case small { color: #3f4a55 !important; }
  .rp-toc, .rp-video { display: none !important; }
  .rp-band__top .sv-eyebrow { color: #5b45bf !important; }
  .rp-section::before, .rp-kpi::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-section--part .rp-head::before { background: none; -webkit-text-fill-color: #735dd0; color: #735dd0; }
  .rp-kpi, .rp .sv-table-wrap { box-shadow: none; }
  .rp-body { padding-bottom: 8px !important; }
  .rp-foot { background: #fff !important; color: var(--sv-navy) !important; padding: 0 0 4px; font-size: 12px; break-inside: avoid; }
  .rp-foot__rule { margin-bottom: 10px; }
  .rp-foot__inner { gap: 16px; flex-wrap: nowrap; }
  .rp-foot__inner img { filter: brightness(0); width: 80px; }
  .rp-body .rp-section:last-child { padding-bottom: 0; }
  .rp-kpi--accent { background: #f2f4f8 !important; color: var(--sv-navy) !important; }
  .rp-kpi--accent::after { display: none; }
  .rp-kpi--accent .rp-kpi__l { color: #25323d !important; }
  .sv-btn { background: #fff !important; color: var(--sv-navy) !important; border: 1.5px solid #735dd0 !important; }
  .sv-btn__arrow { display: none; }
  .sv-bar > span, .sv-dots i.on, .rp-constat::before, .rp-brief li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; }
  .sv-table-wrap { overflow: visible; }
  a { text-decoration: none; }
}

/* --------------------------------------------------------------------------
   20. Bascules pilotées par JS (langue, segment, module DSP)
   -------------------------------------------------------------------------- */
body:not(.lang-en) [data-l="en"], body.lang-en [data-l="fr"] { display: none !important; }
body.is-unqualified [data-seg-show="q"], body:not(.is-unqualified) [data-seg-show="u"] { display: none !important; }
body.no-dsp [data-if="dsp"] { display: none !important; }
.sv-choice input[aria-disabled="true"] { cursor: not-allowed; }
.sv-choice input[aria-disabled="true"] + span { opacity: .62; border-style: dashed; }
.sv-choice input[aria-disabled="true"]:hover + span { border-color: rgba(255,255,255,.38); }