/* ══════════════════════════════════════════════════════════════════════════
   SOLTIAZ — feuille de style commune du site (pages /fr/ et /en/).
   Couleurs : les jetons de l'application (app/index.html, :root), rien d'autre.
   Sur fond encre, les teintes sont des jetons de l'application ou du blanc
   en transparence — aucune couleur propre au site.
   Police : Inter seule, auto-hébergée (les mêmes fichiers que l'application).
   ══════════════════════════════════════════════════════════════════════════ */

/* Noms versionnés : /assets/ est en cache un an (voir _headers). Une police
   modifiée = -v2 dans le nom du fichier ET ici. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/inter-latin-300-v1.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-latin-400-v1.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-latin-500-v1.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/inter-latin-600-v1.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Jetons de l'application */
  --canvas:#FAFBFD; --surface:#FFFFFF; --surface-2:#F4F6FA;
  --line:#E9ECF2; --line-2:#DDE2EB;
  --ink:#0D1526; --ink-2:#3E4A61; --ink-3:#6B7688; --ink-4:#98A1B2;
  --accent:#2947CC; --accent-soft:#EDF1FE; --accent-line:#C9D5F8;
  --up:#0E7A55; --down:#BE4237; --teal:#119C86; --gold:#C98A1E;
  --p1:#1E337E; --p2:#2A4CB4; --p3:#4771E2; --p4:#83A2F0; --p5:#B7C8F7;   /* rampe catégorielle de l'application */
  --purple:#7C6EF0; --purpleb:#EEEBFE;   /* réservé à l'IA (copilote) */
  --r-card:14px; --r-ctl:9px; --r-pill:999px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Sur fond encre : jetons de l'application et blanc en transparence.
     Contrastes sur --ink : --canvas 17,6 ; --ink-4 7,0 ; --p4 7,3. */
  --on-ink:var(--canvas);
  --on-ink-2:var(--ink-4);
  --on-ink-accent:var(--p4);
  --on-ink-line:rgba(255,255,255,.13);
  --on-ink-fill:rgba(255,255,255,.05);

  /* Graisse des grands titres (h1, h2) : un seul endroit à changer. */
  --w-titre:300;

  --wrap:1120px;
  --gutter:clamp(20px,4vw,32px);
  --hd-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sz-on-ink :focus-visible{outline-color:var(--on-ink-accent)}

/* Chiffres alignés : même police que le texte, chasse fixe. */
.sz-num{font-variant-numeric:tabular-nums}
/* Un montant ne se coupe jamais. */
.sz-nb{white-space:nowrap}

.sz-wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.sz-skip{
  position:absolute;left:var(--gutter);top:-80px;z-index:50;
  background:var(--surface);color:var(--ink);font-weight:500;font-size:15px;
  padding:10px 16px;border-radius:var(--r-ctl);border:1px solid var(--line-2);
}
.sz-skip:focus{top:10px}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.sz-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.2;
  padding:13px 22px;border-radius:var(--r-ctl);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;
}
.sz-btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Survol : on assombrit le jeton plutôt que d'introduire une teinte hors système. */
.sz-btn--accent:hover{filter:brightness(.9)}
.sz-on-ink .sz-btn--accent{border-color:var(--p3)}
.sz-btn--ghost{border-color:var(--line-2);color:var(--ink)}
.sz-on-ink .sz-btn--ghost{border-color:var(--on-ink-line);color:var(--on-ink)}
.sz-on-ink .sz-btn--ghost:hover{border-color:var(--on-ink-2)}
.sz-btn--sm{font-size:14px;padding:10px 16px}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.sz-site-hd{
  position:sticky;top:0;z-index:30;
  background:rgba(13,21,38,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--on-ink-line);color:var(--on-ink);
}
.sz-hd{display:flex;align-items:center;gap:20px;min-height:var(--hd-h)}
/* Marque (un seul composant, en-tête et pied de page de toutes les pages ; trousse : docs/marque/soltiaz-logo-kit/).
   Le symbole est une image (128 × 114, affichée 34 px de haut) ; le lettrage est vectoriel, intégré, et prend la
   couleur du texte (currentColor) ; sa hauteur de capitale vaut le tiers du symbole (100 unités = 34/3 px).
   Sur fond sombre (.sz-on-ink) : symbole seul, lettrage blanc. Sur fond clair : le symbole reste dans sa pastille
   bleu nuit (#050B1A, 34 px, rayon 10/34, symbole sur 26/34 de la largeur) et le lettrage prend la couleur du texte.
   Dimensions fixes partout : aucun saut de mise en page. */
.sz-brand{display:inline-flex;align-items:center;gap:10px;flex:none;color:var(--ink)}
.sz-on-ink .sz-brand{color:#FFFFFF}
.sz-brand-sym{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:10px;background:#050B1A}
.sz-brand-sym img{display:block;width:26px;height:auto}
.sz-on-ink .sz-brand-sym{width:auto;background:none;border-radius:0}
.sz-on-ink .sz-brand-sym img{width:auto;height:34px}
.sz-brand-word{display:block;flex:none;width:107.96px;height:11.56px;color:inherit}

.sz-hd-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.sz-hd-nav a{font-size:15px;color:var(--on-ink-2);padding:8px 0}
.sz-hd-nav a:hover{color:var(--on-ink)}
.sz-hd-r{display:flex;align-items:center;gap:12px;flex:none}

.sz-lang{display:inline-flex;border:1px solid var(--on-ink-line);border-radius:8px;overflow:hidden;flex:none}
.sz-lang a{font-size:13px;font-weight:500;line-height:1;padding:9px 11px;color:var(--on-ink-2)}
.sz-lang a:hover{color:var(--on-ink)}
.sz-lang a[aria-current]{background:var(--on-ink-fill);color:var(--on-ink)}

.sz-navtoggle{
  display:none;width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;
  border:1px solid var(--on-ink-line);border-radius:8px;background:none;color:var(--on-ink);cursor:pointer;
}
.sz-navtoggle svg{display:block}
.sz-navtoggle .sz-ic-x{display:none}
.sz-navtoggle[aria-expanded="true"] .sz-ic-x{display:block}
.sz-navtoggle[aria-expanded="true"] .sz-ic-m{display:none}
.sz-hd-nav .sz-lang{display:none}

@media (max-width:860px){
  .sz-hd{flex-wrap:wrap;gap:0 12px;min-height:0;padding-top:11px;padding-bottom:11px}
  .sz-hd-nav{margin-top:11px}
  .sz-hd-r{margin-left:auto}
  .sz-hd-nav{
    order:5;flex-basis:100%;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:4px 0 14px;border-top:1px solid var(--on-ink-line);
  }
  .sz-hd-nav a{padding:13px 0;font-size:16px;color:var(--on-ink)}
  /* Avec JavaScript, le menu se replie derrière le bouton ; sans JavaScript,
     il reste déplié sous l'en-tête : tout reste joignable. */
  .sz-js .sz-navtoggle{display:inline-flex}
  .sz-js .sz-hd-nav{display:none}
  .sz-js .sz-hd-nav.sz-open{display:flex}
}
@media (max-width:480px){
  /* Écran étroit : le sélecteur de langue passe dans le menu (et reste au
     pied de page) pour laisser le bouton « Liste d'attente » toujours visible. */
  .sz-hd-r > .sz-lang{display:none}
  .sz-hd-nav .sz-lang{display:inline-flex;align-self:flex-start;margin-top:10px}
  .sz-hd-nav .sz-lang a{padding:10px 14px;font-size:14px}
  .sz-hd-r{gap:8px}
}
/* Sous 386 px, le logo complet (154 px) ne tient plus sur la ligne de l'en-tête avec le bouton et le menu
   (mesuré : 346 px nécessaires, 350 disponibles à 390 px) : l'en-tête garde le symbole seul, le pied de page garde
   le logo complet. */
@media (max-width:385px){
  .sz-site-hd .sz-brand-word{display:none}
}
@media (max-width:350px){
  .sz-btn--sm{padding:9px 11px;font-size:13px}
  .sz-hd{gap:10px}
  .sz-brand{gap:8px}
  .sz-hd-r{gap:6px}
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sz-sec{padding:clamp(64px,8vw,112px) 0}
.sz-sec--canvas{background:var(--canvas)}
.sz-sec--surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sz-on-ink{background:var(--ink);color:var(--on-ink)}

/* Format de section : sur-titre court en accent, grand titre, sous-texte gris. */
/* Aucune fin de phrase orpheline : titres, sur-titres et sous-titres sont
   équilibrés (lignes de longueur voisine) ; le texte courant évite le mot seul.
   En renfort, les deux derniers mots sont liés par une espace insécable dans le HTML. */
.sz-kicker,.sz-lede,.sz-trust,.sz-ft-legal,.sz-bal{text-wrap:balance}
p,li,summary{text-wrap:pretty}
.sz-kicker{font-size:14px;font-weight:500;letter-spacing:.005em;color:var(--accent);margin-bottom:18px}
.sz-on-ink .sz-kicker{color:var(--on-ink-accent)}
h1,h2{font-weight:var(--w-titre);text-wrap:balance}
h1{font-size:clamp(2.4rem,5.3vw,4.1rem);line-height:1.05;letter-spacing:-.035em}
h2{font-size:clamp(1.95rem,3.6vw,2.8rem);line-height:1.12;letter-spacing:-.028em;max-width:22ch}
h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
/* --ink-3 ne passe le contraste AA que sur blanc (4,6) : sur --canvas (4,4)
   le sous-texte prend --ink-2. */
.sz-lede{margin-top:22px;max-width:58ch;font-size:18px;line-height:1.6;color:var(--ink-2)}
.sz-sec--surface .sz-lede{color:var(--ink-3)}
.sz-on-ink .sz-lede{color:var(--on-ink-2)}

/* ── 1. Héros ────────────────────────────────────────────────────────────────
   Une grille à une colonne et quatre rangées empile trois calques :
   .sz-hero-bg  — fond encre + image du cockpit en vol (de la bande jusqu'à la première moitié de la maquette) ;
   .sz-hero-txt — sur-titre, titre, sous-titre, boutons (rangée du texte) ;
   .sz-vg       — maquette « Vue globale », à cheval : les deux rangées 1fr se partagent sa hauteur à parts
               égales, la première sur l'image, la seconde sur la section claire — quelle que soit sa hauteur.
   --band vaut 0 sur écran large (le texte est posé sur la zone sombre de l'image) et une hauteur de bande
   sur écran étroit (l'image passe au-dessus du texte, jamais dessous). */
.sz-hero{
  --band:0px;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--band) auto 1fr 1fr auto;
  /* Sous l'image, un gris clair de l'application : la carte blanche de la maquette s'en détache nettement. */
  background:var(--surface-2);
}
.sz-hero > *{grid-column:1}
.sz-hero-bg{grid-row:1 / 4;position:relative;overflow:hidden;background:var(--ink)}
/* L'image ne dépasse jamais sa largeur d'origine (2096 px) ; au-delà, elle reste calée à droite sur fond encre. */
.sz-hero-bg img{
  position:absolute;right:0;top:0;height:100%;width:min(100%,2096px);max-width:none;
  object-fit:cover;object-position:right center;
}
/* Voile : encre pleine sous la colonne de texte, puis dégagement vers le pare-brise ; léger assombrissement
   en bas, là où se pose la maquette. Les arrêts sont calés sur la colonne de texte, pas sur la fenêtre. */
.sz-hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  --col:max(var(--gutter),(100% - var(--wrap))/2);
  background:
    linear-gradient(90deg,
      rgba(13,21,38,1) 0,
      rgba(13,21,38,.94) calc(var(--col) + 500px),
      rgba(13,21,38,.42) calc(var(--col) + 700px),
      rgba(13,21,38,.08) calc(var(--col) + 940px),
      rgba(13,21,38,0) 100%),
    linear-gradient(180deg,rgba(13,21,38,.22) 0,rgba(13,21,38,0) 38%,rgba(13,21,38,.5) 100%);
}
.sz-hero-txt{grid-row:2;position:relative;width:100%;background:none;padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(36px,4.6vw,56px)}
.sz-hero-txt .sz-lede{font-size:clamp(17px,1.5vw,19px);max-width:50ch;color:var(--on-ink)}
/* La première phrase de la promesse reste claire ; les deux suivantes sont un ton plus discrètes. */
.sz-hero-txt .sz-lede2{margin-top:12px;max-width:54ch;font-size:16px;line-height:1.55;color:var(--on-ink-2);text-wrap:balance}
.sz-hero-txt .sz-appel{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sz-hero-txt .sz-trust{margin-top:22px;font-size:14px;line-height:1.55;color:var(--on-ink-2);max-width:46ch}
/* Le titre reste dans la zone sombre de l'image (colonne de gauche) : il passe sur trois lignes équilibrées
   plutôt que de déborder sur le pare-brise. */
@media (min-width:901px){ .sz-hero-txt h1{max-width:9.2em} }

/* Écran étroit : l'image devient une bande au-dessus du texte, recadrée sur le pare-brise, la ville et
   l'horizon (moitié droite, partie haute), sans descendre jusqu'aux écrans de bord. */
@media (max-width:900px){
  .sz-hero{--band:min(50vw,400px)}
  .sz-hero-bg img{width:165%;height:auto}
  .sz-hero-bg::after{
    background:linear-gradient(180deg,rgba(13,21,38,.12) 0,rgba(13,21,38,0) calc(var(--band)*.45),var(--ink) var(--band));
  }
  .sz-hero-txt{padding-top:22px}
}

/* ── Maquette « Vue globale » ────────────────────────────────────────────────
   Carte claire, comme l'application. Les montants ne se coupent jamais (.sz-nb) ; le point de statut et son
   texte sont deux éléments d'une même ligne flexible, séparés par un espacement fixe : le point ne peut pas
   recouvrir le texte, à aucune largeur. */
/* La figure ne contient en hauteur que la carte : c'est elle que les deux rangées se partagent. Les mentions
   suivent dans leur propre rangée (.sz-hero-notes), dans le flux. */
.sz-vg{grid-row:3 / 5;position:relative;width:100%}
.sz-vg-card{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(13,21,38,.28),0 1px 2px rgba(13,21,38,.04);
}
.sz-vg-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;
  padding:14px 22px;border-bottom:1px solid var(--line);
}
.sz-vg-lbl{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.sz-vg-live{display:inline-flex;align-items:center;gap:8px;flex:none;font-size:13px;color:var(--ink-3);white-space:nowrap}
.sz-vg-dot{
  flex:none;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,var(--p3) 0 3px,rgba(71,113,226,.2) 3.5px 7px);
}
.sz-vg-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
@media (max-width:900px){ .sz-vg-gauges{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:439px){ .sz-vg-gauges{grid-template-columns:minmax(0,1fr)} }
.sz-vg-gauge{background:var(--surface);padding:20px 22px 22px}
.sz-vg-gauge .sz-g-lbl{font-size:13px;color:var(--ink-3);margin-bottom:8px}
.sz-vg-gauge .sz-g-val{font-size:25px;font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.sz-vg-gauge .sz-g-sub{font-size:13px;margin-top:7px;color:var(--ink-3)}
.sz-vg-gauge .sz-g-up{color:var(--up)}
.sz-vg-gauge .sz-g-down{color:var(--down)}
/* Annotation hors du cadre de la maquette, posée juste au-dessus. */
.sz-vg-ann{position:absolute;bottom:100%;left:var(--gutter);right:var(--gutter);margin-bottom:12px;font-size:13.5px;color:var(--on-ink-2)}
/* Mention sous chaque visuel de données. */
.sz-mock-note{margin-top:14px;font-size:13px;color:var(--ink-3);text-wrap:balance}
/* Sur --surface-2, --ink-3 ne passe plus le contraste AA : la mention prend --ink-2. */
.sz-hero-notes{grid-row:5;width:100%;padding-top:12px}
.sz-hero-notes .sz-mock-note{margin-top:0;color:var(--ink-2)}
/* « Soltiaz est en développement… » : sous la maquette du héros et dans la section de l'offre. */
.sz-dev-note{font-size:13px;line-height:1.55;color:var(--ink-2);text-wrap:balance}
.sz-hero-notes .sz-dev-note{margin-top:4px}

/* ── 2. Bandeau de crédibilité ───────────────────────────────────────────── */
.sz-strip{background:var(--surface-2);border-bottom:1px solid var(--line-2);padding:clamp(22px,2.6vw,30px) 0 clamp(26px,3vw,34px)}
.sz-strip ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.sz-strip li{
  font-size:15px;font-weight:500;line-height:1.45;color:var(--ink-2);text-wrap:balance;
  padding:4px clamp(16px,2.4vw,32px);border-left:1px solid var(--line-2);
}
.sz-strip li:first-child{border-left:0;padding-left:0}
@media (max-width:900px){
  .sz-strip ul{grid-template-columns:minmax(0,1fr)}
  .sz-strip li{border-left:0;padding:12px 0;border-top:1px solid var(--line)}
  .sz-strip li:first-child{border-top:0;padding-top:4px}
}

/* ── 3. Le problème ──────────────────────────────────────────────────────── */
.sz-pains{list-style:none;margin-top:clamp(34px,4.4vw,52px);max-width:860px;border-top:1px solid var(--line-2)}
.sz-pains li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line-2);
  font-size:clamp(18px,1.7vw,21px);line-height:1.45;color:var(--ink);
}
.sz-pains li::before{content:"";width:18px;height:2px;background:var(--accent);transform:translateY(-.32em)}
.sz-pains li span{text-wrap:balance}
.sz-closing{margin-top:clamp(30px,3.6vw,44px);max-width:52ch;font-size:19px;line-height:1.5;font-weight:500;color:var(--ink);text-wrap:balance}

/* ── 4. Comment ça marche ────────────────────────────────────────────────── */
.sz-steps{
  list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(12px,1.8vw,22px);align-items:stretch;margin-top:clamp(36px,4.6vw,56px);
}
.sz-step{background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--r-card);padding:26px 26px 28px}
.sz-step .sz-n{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:600;margin-bottom:16px;
}
.sz-step h3{font-size:21px}
.sz-step p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2);text-wrap:balance}
.sz-step-arrow{align-self:center;color:var(--accent);line-height:0}
@media (max-width:900px){
  .sz-steps{grid-template-columns:minmax(0,1fr)}
  .sz-step-arrow{justify-self:center;transform:rotate(90deg);padding:6px 0}
}

/* ── 5. Fonctionnalités : six cartes, trois par rangée ───────────────────────
   Grille à quatre colonnes : les deux cartes à maquette en occupent deux, les quatre autres une. Chaque
   rangée compte donc trois cartes, dans l'ordre de lecture. Deux colonnes sur tablette, une sur mobile.
   Le 300 est réservé aux grands titres : les titres de cartes sont en 600. */
.sz-cards{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);margin-top:clamp(36px,4.6vw,56px)}
/* Le texte en haut, le visuel en bas : les maquettes s'alignent d'une carte à l'autre. */
.sz-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-card);padding:26px 24px 24px;min-width:0;display:flex;flex-direction:column}
/* La maquette occupe tout l'espace restant de sa carte et ses lignes se répartissent : aucun vide, et les
   bas de maquettes sont alignés sur toute la rangée. */
.sz-card{grid-column:span 3}
.sz-card.sz-s4{grid-column:span 4}
.sz-card.sz-s5{grid-column:span 5}
.sz-card.sz-s6{grid-column:span 6}
.sz-card .sz-mock{flex:1 1 auto;display:flex;flex-direction:column;margin-top:0;padding-top:20px}
.sz-card .sz-mock-frame{flex:1 1 auto;display:flex;flex-direction:column}
.sz-card .sz-mock-scroll{flex:1 1 auto;display:flex}
.sz-card .sz-mock-scroll > table{flex:1 1 auto}
.sz-card .sz-mm-dl,.sz-card .sz-mm-scores,.sz-card .sz-rep,.sz-card .sz-alloc-rows,.sz-card .sz-goal-rows,.sz-card .sz-al-rows,.sz-card .sz-dv-rows,.sz-card .sz-pl-list{flex:1 1 auto;display:flex;flex-direction:column}
.sz-card .sz-mm-dl > div,.sz-card .sz-mm-scores li,.sz-card .sz-rep li,.sz-card .sz-alloc-rows li,.sz-card .sz-goal-rows li,.sz-card .sz-al-rows li,.sz-card .sz-dv-rows li,.sz-card .sz-pl-list li{flex:1 1 auto}
.sz-card .sz-mock > .sz-tower{flex:1 1 auto}
.sz-card .sz-mm-dl > .sz-stack{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0}
.sz-card .sz-chat{flex:1 1 auto;display:flex;flex-direction:column}
.sz-card .sz-chat-src{margin-top:auto}
.sz-card h3{font-size:20px;letter-spacing:-.015em}
.sz-card > p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2);text-wrap:balance}
@media (max-width:1000px){
  .sz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sz-card,.sz-card.sz-s4,.sz-card.sz-s5,.sz-card.sz-s6{grid-column:auto}
}
@media (max-width:760px){ .sz-cards{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .sz-card{padding:22px 18px 20px} }
.sz-soon{margin-top:clamp(26px,3vw,36px);max-width:74ch;padding-left:16px;border-left:2px solid var(--line-2);font-size:15.5px;line-height:1.6;color:var(--ink-2);text-wrap:balance}

/* Maquettes dans les cartes. Le cadre mesure sa propre largeur (container) : étroit, le tableau des stratégies
   resserre ses marges et le calendrier se resserre ; s'il manque encore de place, le tableau
   défile dans son cadre — la page ne déborde jamais. */
.sz-mock{margin-top:20px;container-type:inline-size}
.sz-mock-frame{border:1px solid var(--line-2);border-radius:12px;background:var(--surface);overflow:hidden}
.sz-mock-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sz-up{color:var(--up)}
.sz-down{color:var(--down)}

.sz-st{width:100%;min-width:286px;border-collapse:collapse;font-size:13px;line-height:1.35}
.sz-st th,.sz-st td{padding:10px 9px;text-align:right;white-space:nowrap;font-weight:400}
.sz-st thead th{white-space:normal;vertical-align:bottom}
.sz-st th:first-child{text-align:left;padding-left:14px;white-space:normal}
.sz-st th:last-child,.sz-st td:last-child{padding-right:14px}
.sz-st thead th{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--surface-2)}
.sz-st tbody tr,.sz-st tfoot tr{border-top:1px solid var(--line)}
.sz-st .sz-s-name{display:block;font-weight:600;color:var(--ink)}
.sz-st .sz-s-tick{display:block;font-size:12px;color:var(--ink-3)}
.sz-st tfoot th,.sz-st tfoot td{background:var(--surface-2);font-weight:600}
.sz-st tfoot .sz-s-tick{color:var(--ink-2);font-weight:400}

.sz-cal-hd,.sz-cal-ft{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:11px 14px;font-size:13px}
.sz-cal-hd{border-bottom:1px solid var(--line)}
.sz-cal-ft{border-top:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.sz-cal-mo{font-weight:600;font-size:14px}
.sz-cal-tot{color:var(--ink-3);white-space:nowrap}
.sz-cal-hd b,.sz-cal-ft b{font-weight:600;color:var(--up)}
.sz-cal-sub{white-space:nowrap}
.sz-cal{width:100%;min-width:266px;border-collapse:collapse;table-layout:fixed}
.sz-cal th{padding:7px 0 6px;font-size:11px;font-weight:500;color:var(--ink-3);text-align:center}
.sz-cal td{height:42px;vertical-align:top;padding:5px 6px;border-top:1px solid var(--line);border-left:1px solid var(--line);line-height:1.25}
.sz-cal td:first-child{border-left:0}
.sz-cal .sz-d{display:block;font-size:11px;color:var(--ink-3)}
.sz-cal .sz-a{display:block;font-size:11.5px;font-weight:600;color:var(--up);white-space:nowrap}
.sz-cal .sz-n{display:block;font-size:10.5px;color:var(--ink-2)}
.sz-cal .sz-on{background:var(--accent-soft)}
.sz-cal .sz-on .sz-d{color:var(--ink-2)}
.sz-cal .sz-roll{background:var(--surface-2)}
.sz-cal .sz-roll .sz-a,.sz-cal .sz-roll .sz-d{color:var(--ink-2)}
/* Mini-maquettes des cartes simples : trois à cinq lignes, pensées pour la largeur d'une carte. */
.sz-mm-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:10px 14px;font-size:13px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.sz-mm-hd .sz-t{font-weight:600}
.sz-mm-hd .sz-m{color:var(--ink-2);white-space:nowrap}
.sz-chip.sz-chip--plain{color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);font-weight:500;padding:2px 9px}
.sz-mm-dl > div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.4}
.sz-mm-dl > div:first-child{border-top:0}
.sz-mm-dl > .sz-stack{display:block}
.sz-mm-dl dt{color:var(--ink-3)}
.sz-mm-dl dd{font-weight:500;color:var(--ink)}
.sz-mm-dl .sz-stack dd{margin-top:2px;text-wrap:balance}
/* Copilote : le violet de l'application, réservé à l'IA. */
.sz-chat{display:grid;gap:10px;padding:12px 14px;font-size:13.5px;line-height:1.5}
.sz-chat-who{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.sz-chat-q{background:var(--surface-2);border-radius:10px;padding:8px 11px}
.sz-chat-a{background:var(--purpleb);border-left:2px solid var(--purple);border-radius:0 10px 10px 0;padding:8px 11px}
.sz-chat-src{font-size:12px;color:var(--ink-3)}
.sz-mm-scores{list-style:none}
.sz-mm-scores li{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:13.5px}
.sz-mm-scores li:first-child{border-top:0}
.sz-mm-scores .sz-s{font-weight:600}
.sz-mm-scores .sz-bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.sz-mm-scores .sz-bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.sz-mm-scores .sz-v{text-align:right;font-weight:600}
.sz-mm-ft{padding:9px 14px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12px;line-height:1.45;color:var(--ink-2)}
.sz-cards-note{margin-top:14px}

/* ── Visuels des dix tuiles, simplifiés à partir des composants de l'application ───────────────────────── */
/* Où est ton argent : onglets, barre segmentée, lignes avec pourcentage et montant. */
/* La devise des montants est dite une seule fois par maquette, dans son en-tête. */
.sz-chip.sz-usd{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:2px 7px;vertical-align:1px}
.sz-tabs{list-style:none;display:flex;flex-wrap:wrap;gap:1px;padding:10px 9px 0;font-size:11.5px;line-height:1.2}
.sz-bar-row{display:flex;align-items:center;gap:10px;margin:11px 14px 5px}
.sz-tabs li{padding:5px 6px;border-radius:6px;color:var(--ink-3);white-space:nowrap}
.sz-tabs li[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.sz-stackbar{flex:1 1 auto;display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden}
.sz-stackbar i{display:block;height:100%}
.sz-c1{background:var(--p1)}.sz-c2{background:var(--p2)}.sz-c3{background:var(--p3)}.sz-c4{background:var(--p4)}.sz-c5{background:var(--p5)}
.sz-alloc-rows{list-style:none}
.sz-alloc-rows li{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 14px;border-top:1px solid var(--line);font-size:13px}
.sz-alloc-rows li:first-child{border-top:0}
.sz-alloc-rows .sz-dot{width:8px;height:8px;border-radius:2px}
.sz-alloc-rows .sz-p{color:var(--ink-3);text-align:right}
.sz-alloc-rows .sz-v{min-width:70px;font-weight:600;text-align:right}
/* Objectifs : ligne du temps, barres de progression (le trait marque l'attendu), rythme mensuel. */
.sz-tl{list-style:none;position:relative;display:flex;justify-content:space-between;gap:8px;margin:14px 14px 8px;padding-top:16px;font-size:11.5px;line-height:1.3;color:var(--ink-2)}
.sz-tl::before{content:"";position:absolute;left:4px;right:4px;top:4px;height:2px;background:var(--line-2)}
.sz-tl li{position:relative;display:flex;flex-direction:column}
.sz-tl li::before{content:"";position:absolute;top:-16px;left:0;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-sizing:border-box}
.sz-tl li:first-child::before{background:var(--accent)}
.sz-tl li:nth-child(2){align-items:center;text-align:center}
.sz-tl li:nth-child(2)::before{left:calc(50% - 5px)}
.sz-tl li:last-child{align-items:flex-end;text-align:right}
.sz-tl li:last-child::before{left:auto;right:0}
.sz-tl small{font-size:11px;color:var(--ink-3)}
.sz-goal-rows{list-style:none}
.sz-goal-rows li{padding:10px 14px;border-top:1px solid var(--line)}
.sz-g-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;font-size:13px}
.sz-g-n{font-weight:600}
.sz-g-p{font-size:12px;color:var(--ink-2);white-space:nowrap}
.sz-pbar{position:relative;height:8px;margin:7px 0 6px;border-radius:4px;background:var(--surface-2)}
.sz-pbar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.sz-pbar b{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink)}
.sz-g-sub{font-size:12px;line-height:1.4;color:var(--ink-2)}
/* Ligne de prix du plan : axe, bandes baissière / zone d'achat / haussière, repères triés par prix. */
.sz-pl-body{position:relative;padding:32px 18px 32px}
.sz-pl-axis{position:relative;height:10px;border-radius:5px;background:var(--surface-2)}
.sz-pl-axis i{position:absolute;top:0;height:100%}
.sz-pl-axis .sz-bear{background:rgba(190,66,55,.3);border-radius:5px 0 0 5px}
.sz-pl-axis .sz-buy{background:rgba(41,71,204,.26)}
.sz-pl-axis .sz-bull{background:rgba(14,122,85,.3);border-radius:0 5px 5px 0}
.sz-pl-marks{list-style:none;position:absolute;left:18px;right:18px;top:32px;height:10px}
.sz-pl-marks li{position:absolute;top:-4px;width:2px;height:18px;margin-left:-1px;background:var(--ink)}
.sz-pl-marks b{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;line-height:1;white-space:nowrap;color:var(--ink)}
.sz-pl-marks .sz-hi b{bottom:23px}
.sz-pl-marks .sz-lo b{top:23px}
.sz-pl-marks .sz-now{width:3px;background:var(--accent)}
.sz-pl-marks .sz-now b{color:var(--accent)}
.sz-pl-marks .sz-first b{left:-6px;transform:none}
.sz-pl-marks .sz-last b{left:auto;right:-6px;transform:none}
.sz-pl-list{list-style:none;border-top:1px solid var(--line)}
.sz-pl-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
.sz-pl-list .sz-k{color:var(--ink-2)}
.sz-pl-list .sz-k b{display:inline-block;min-width:38px;font-weight:600;color:var(--ink)}
.sz-pl-legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;padding:9px 14px;font-size:12px;color:var(--ink-2);background:var(--surface-2)}
.sz-pl-legend li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;vertical-align:-1px}
.sz-pl-legend .sz-bear::before{background:rgba(190,66,55,.45)}
.sz-pl-legend .sz-buy::before{background:rgba(41,71,204,.4)}
.sz-pl-legend .sz-bull::before{background:rgba(14,122,85,.45)}
/* Dividendes : reçus et attendus, historique par mois, prochains versements par titre. */
.sz-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.sz-kpis > div{background:var(--surface);padding:10px 14px}
.sz-kpis dt{font-size:12px;line-height:1.3;color:var(--ink-3)}
.sz-kpis dd{margin-top:3px;font-size:17px;font-weight:600}
.sz-mm-sub{padding:10px 14px 0;font-size:12px;color:var(--ink-3)}
.sz-mm-sub--rule{margin-top:8px;padding-top:9px;padding-bottom:4px;border-top:1px solid var(--line)}
.sz-months,.sz-months-l{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;padding:0 14px}
.sz-months{align-items:end;height:48px;margin-top:8px}
.sz-months i{display:block;border-radius:2px 2px 0 0;background:var(--accent)}
.sz-months .sz-fut{background:none;border:1px dashed var(--accent);border-bottom:0}
.sz-months-l{padding-top:3px;font-size:10px;color:var(--ink-3);text-align:center}
.sz-dv-rows{list-style:none}
.sz-dv-rows li{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--line);font-size:13px}
.sz-dv-rows li:first-child{border-top:0}
.sz-dv-rows .sz-d{color:var(--ink-3)}
.sz-dv-rows .sz-v{font-weight:600;text-align:right}
/* Tour de contrôle : le calendrier et les alertes, côte à côte quand la tuile est assez large. */
.sz-tower{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container (min-width:580px){ .sz-tower{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.sz-al-rows{list-style:none}
.sz-al-rows li{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:13px;line-height:1.35}
.sz-al-rows li:first-child{border-top:0}
/* Le niveau est écrit (« Attention », « Info ») : la teinte ne fait que le souligner. */
.sz-chip.sz-chip--warn{color:var(--ink);background:rgba(201,138,30,.2)}
.sz-chip.sz-chip--info{color:var(--ink-2);background:var(--surface-2)}
/* Grand livre : la colonne du compte se retire quand la place manque. */
.sz-st.sz-lg{min-width:240px}
@container (max-width:340px){ .sz-lg .sz-opt{display:none} }

@container (max-width:470px){
  .sz-st th,.sz-st td{padding:9px 6px}
  .sz-st th:first-child{padding-left:12px}
  .sz-st th:last-child,.sz-st td:last-child{padding-right:12px}
  .sz-cal td{height:40px;padding:4px 3px}
  .sz-cal .sz-a{font-size:10px}
  .sz-cal .sz-n{display:none}
}
@container (max-width:300px){
  .sz-st,.sz-st.sz-lg{min-width:0;font-size:12px}
  .sz-st thead th{font-size:11px}
  .sz-st th,.sz-st td{padding-left:4px;padding-right:4px}
  .sz-st th:first-child{padding-left:10px}
  .sz-st th:last-child,.sz-st td:last-child{padding-right:10px}
  .sz-cal{min-width:0}
  .sz-cal td{padding:4px 2px}
  .sz-cal .sz-a{font-size:9px;letter-spacing:-.02em}
}

/* Étiquette « En développement » : le mot est écrit, la teinte ne fait que le souligner. */
.sz-chip.sz-chip--dev{color:var(--ink);background:rgba(201,138,30,.22);font-size:11.5px;font-weight:600;letter-spacing:0;vertical-align:2px;margin-left:4px}
.sz-soon .sz-chip--dev{margin-left:0;margin-right:4px}
/* Bande « Tout le tableau de bord » : les noms des instruments, sans visuel. */
.sz-pa{margin-top:clamp(26px,3.2vw,40px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line-2)}
.sz-pa h3{font-size:18px}
/* Phrase sur la personnalisation, en tête de la bande (formulation du fondateur, 5 oct. 2026). */
.sz-pa-intro{margin-top:8px;max-width:62ch;font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.sz-pa-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sz-pa-list li{font-size:14px;line-height:1.3;padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink)}
.sz-pa-dev{margin-top:12px;font-size:14px;color:var(--ink-2)}

/* ── Section 5 sur téléphone : forme compacte (une colonne) ──────────────────
   Objectif : six écrans ou moins à 390 px de large. Rien n'est caché derrière un clic : les visuels sont
   simplement allégés (marges resserrées, ligne du temps et graphique mensuel retirés, calendrier réduit aux
   semaines actives, niveaux du plan sur deux colonnes). */
@media (max-width:760px){
  .sz-cards{gap:10px;margin-top:28px}
  .sz-card{padding:18px 16px 16px}
  .sz-card h3{font-size:19px}
  .sz-card > p{margin-top:7px;font-size:15px;line-height:1.5}
  .sz-card .sz-mock{padding-top:13px}
  .sz-mm-hd{padding:8px 12px}
  .sz-alloc-rows li{padding:6px 12px}
  .sz-tl{display:none}
  .sz-goal-rows li{padding:9px 12px}
  .sz-pl-body{padding:28px 16px 28px}
  .sz-pl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sz-card .sz-pl-list{display:grid}
  .sz-pl-list li{flex-direction:column;align-items:flex-start;gap:0;padding:5px 12px}
  .sz-pl-list li:nth-child(odd){border-right:1px solid var(--line)}
  .sz-pl-legend{padding:7px 12px}
  .sz-st th,.sz-st td{padding-top:7px;padding-bottom:7px}
  .sz-months,.sz-months-l,.sz-mm-sub:not(.sz-mm-sub--rule){display:none}
  .sz-mm-sub--rule{margin-top:0;border-top:0}
  .sz-dv-rows li{padding:7px 12px}
  .sz-cal-hd,.sz-cal-ft{padding:7px 12px}
  .sz-cal tbody tr:nth-child(1),.sz-cal tbody tr:nth-child(4),.sz-cal tbody tr:nth-child(6){display:none}
  .sz-al-rows li{padding:7px 12px}
  .sz-mm-scores li{padding:6px 12px}
  .sz-mm-ft{padding:7px 12px}
  .sz-chat{gap:8px;padding:10px 12px}
  .sz-rep li{padding:7px 12px}
  .sz-cards-note{margin-top:10px}
  .sz-pa{margin-top:18px;padding-top:16px}
  .sz-pa-intro{margin-top:4px;font-size:14px;line-height:1.5}
  .sz-pa-list{display:block;margin-top:8px;font-size:14px;line-height:1.6}
  .sz-pa-list li{display:inline;padding:0;border:0;border-radius:0;background:none;font-size:inherit;line-height:inherit;white-space:nowrap}
  .sz-pa-list li:not(:last-child)::after{content:"\00a0·";color:var(--ink-3)}
  .sz-pa-dev{margin-top:10px;font-size:13px}
}

/* ── 6. Ce que Soltiaz ne fait pas ───────────────────────────────────────── */
.sz-nots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,60px)}
.sz-not{border-top:2px solid var(--on-ink-accent);padding-top:20px}
.sz-not h3{font-size:20px;color:var(--on-ink)}
.sz-not p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--on-ink-2);text-wrap:balance}
@media (max-width:820px){ .sz-nots{grid-template-columns:minmax(0,1fr)} }

/* ── 7. Pour qui / pas pour qui ──────────────────────────────────────────────
   Le sens ne repose ni sur la couleur ni sur le pictogramme : chaque liste est rattachée à son titre
   (aria-labelledby), que le lecteur d'écran annonce ; les pictogrammes sont décoratifs. */
.sz-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px);align-items:start}
.sz-fit .sz-t2{font-weight:var(--w-titre);font-size:clamp(1.95rem,3.6vw,2.8rem);line-height:1.12;letter-spacing:-.028em;color:var(--ink-2);text-wrap:balance}
/* Le titre de droite s'aligne sur celui de gauche, qui est précédé de son sur-titre. */
.sz-fit-col--no{padding-top:calc(14px*1.6 + 18px)}
.sz-fit ul{list-style:none;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line-2)}
.sz-fit li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:17px 0;border-bottom:1px solid var(--line-2);font-size:18px;line-height:1.45}
.sz-fit li svg{margin-top:3px}
.sz-fit li span{text-wrap:balance}
.sz-fit-col--yes svg{color:var(--up)}
.sz-fit-col--no svg{color:var(--down)}
.sz-fit-col--no li{color:var(--ink-2)}
@media (max-width:820px){
  .sz-fit{grid-template-columns:minmax(0,1fr)}
  .sz-fit-col--no{padding-top:0}
}

/* ── 8. Trois vérifications ──────────────────────────────────────────────── */
.sz-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,44px);margin-top:clamp(36px,4.6vw,56px)}
.sz-check{border-top:2px solid var(--accent);padding-top:20px;min-width:0}
.sz-check h3{font-size:20px}
.sz-check > p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.sz-check strong{font-weight:600;color:var(--ink)}
@media (max-width:900px){ .sz-checks{grid-template-columns:minmax(0,1fr)} }
.sz-rep-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 14px;font-size:13px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.sz-rep-hd .sz-t{font-weight:600}
.sz-rep-hd .sz-m{color:var(--ink-2);white-space:nowrap}
.sz-rep{list-style:none}
.sz-rep li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:13.5px}
.sz-rep li:first-child{border-top:0}
/* L'état est écrit (« prêt ») : la couleur et la coche ne font que le souligner. */
.sz-chip{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12px;font-weight:600;color:var(--up);background:rgba(14,122,85,.1);border-radius:var(--r-pill);padding:3px 10px 3px 8px;white-space:nowrap}

/* ── 9. Offre fondateur ──────────────────────────────────────────────────── */
.sz-offre{max-width:780px}
.sz-offre .sz-lede strong{font-weight:600;color:var(--ink)}
.sz-deadline{margin-top:26px;font-size:17px;font-weight:600;line-height:1.45;color:var(--ink);text-wrap:balance}
.sz-deadline sup{font-size:.7em;line-height:0}
.sz-mech{margin-top:8px;max-width:62ch;font-size:14.5px;line-height:1.55;color:var(--ink-2);text-wrap:balance}
.sz-terms{margin-top:22px;max-width:74ch;font-size:14px;line-height:1.6;color:var(--ink-2);text-wrap:balance}
.sz-terms.sz-dev-note{margin-top:8px;font-size:14px;line-height:1.6}

/* Formulaire de liste d'attente — un composant, deux emplacements (offre, CTA final). */
.sz-wl{margin-top:28px;max-width:560px;position:relative}
.sz-wl-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}
.sz-wl-row{display:flex;flex-wrap:wrap;gap:10px}
.sz-wl-input{
  flex:1 1 230px;min-width:0;font-family:var(--sans);font-size:16px;line-height:1.3;
  padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);
}
.sz-wl-input::placeholder{color:var(--ink-3);opacity:1}
.sz-wl-input[aria-invalid="true"]{border-color:var(--down)}
.sz-wl .sz-btn[disabled]{opacity:.65;cursor:progress}
/* Champ contre les robots (celui de Mailchimp) : hors écran, hors tabulation. */
.sz-wl-hp{position:absolute;left:-5000px;top:0}
.sz-wl-msg{margin-top:12px;font-size:15px;font-weight:500;line-height:1.45}
.sz-wl-msg:empty{display:none}
.sz-wl[data-state="ok"] .sz-wl-msg,.sz-wl[data-state="already"] .sz-wl-msg{color:var(--up)}
.sz-wl[data-state="invalid"] .sz-wl-msg,.sz-wl[data-state="error"] .sz-wl-msg{color:var(--down)}
.sz-wl-mention{margin-top:12px;max-width:60ch;font-size:13px;line-height:1.5;color:var(--ink-2)}
.sz-wl-mention a{text-decoration:underline;text-underline-offset:2px}
/* Sur fond encre, le vert et le rouge ne passent pas le contraste : le message reste clair, son texte dit l'état. */
.sz-on-ink .sz-wl-input{background:rgba(255,255,255,.07);border-color:var(--on-ink-line);color:var(--on-ink)}
.sz-on-ink .sz-wl-input::placeholder{color:var(--on-ink-2)}
.sz-on-ink .sz-wl-input[aria-invalid="true"]{border-color:var(--on-ink)}
.sz-on-ink .sz-wl .sz-wl-msg{color:var(--on-ink)}
.sz-on-ink .sz-wl-mention{color:var(--on-ink-2)}

/* ── FAQ : <details>, utilisable sans JavaScript ─────────────────────────── */
.sz-faq{max-width:840px;margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line-2)}
.sz-faq details{border-bottom:1px solid var(--line-2)}
.sz-faq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;
  padding:19px 0;font-size:18px;font-weight:600;line-height:1.4;
}
.sz-faq summary .sz-q{min-width:0;text-wrap:balance}
.sz-faq summary::-webkit-details-marker{display:none}
.sz-faq summary::after{content:"+";flex:none;font-size:22px;font-weight:400;line-height:1;color:var(--accent)}
.sz-faq details[open] summary::after{content:"\2212"}
.sz-faq details p{padding:0 0 22px;max-width:66ch;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.sz-faq details a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ── CTA final : l'arrivée ───────────────────────────────────────────────────
   Écran large : le texte est posé sur le tiers gauche, sous un voile marqué ; la piste (centre) et le soleil
   (droite) restent dégagés. Écran étroit : le texte d'abord, sur fond encre, puis l'image en bande dessous. */
.sz-final{position:relative;display:flex;flex-direction:column}
.sz-final-txt{position:relative;z-index:1;width:100%;padding-top:clamp(64px,7.5vw,104px);padding-bottom:clamp(64px,7.5vw,104px)}
.sz-final-col{max-width:470px}
.sz-final .sz-lede{color:var(--on-ink);max-width:40ch}
.sz-final-note{margin-top:22px;font-size:14px;line-height:1.55;color:var(--on-ink-2);text-wrap:balance}
.sz-final-bg{position:absolute;inset:0;overflow:hidden}
.sz-final-bg img{position:absolute;right:0;top:0;height:100%;width:min(100%,2096px);max-width:none;object-fit:cover;object-position:center 32%}
.sz-final-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  --col:max(var(--gutter),(100% - var(--wrap))/2);
  background:linear-gradient(90deg,
    rgba(13,21,38,.96) 0,
    rgba(13,21,38,.9) calc(var(--col) + 400px),
    rgba(13,21,38,.5) calc(var(--col) + 560px),
    rgba(13,21,38,.12) calc(var(--col) + 740px),
    rgba(13,21,38,0) calc(var(--col) + 900px)),
    /* Le bas de l'image (écrans de bord) est assombri : le regard reste sur la piste et le soleil. */
    linear-gradient(180deg,rgba(13,21,38,0) 46%,rgba(13,21,38,.78) 100%);
}
@media (max-width:900px){
  .sz-final-txt{padding-bottom:clamp(36px,6vw,52px)}
  .sz-final-col{max-width:560px}
  /* Bande recadrée sur la piste et le soleil (partie haute, deux tiers droits), sans les écrans de bord. */
  .sz-final-bg{position:relative;inset:auto;height:min(46vw,400px)}
  .sz-final-bg img{right:-4%;width:150%;height:auto}
  .sz-final-bg::after{background:linear-gradient(180deg,var(--ink) 0,rgba(13,21,38,0) 34%)}
}

/* ── Pages 404 et repli de la racine ─────────────────────────────────────── */
.sz-h1{font-weight:var(--w-titre);font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.sz-notfound + .sz-notfound{border-top:1px solid var(--line-2)}
.sz-nf-links{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.sz-nf-links li a:not(.sz-btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.sz-nf-note{margin-top:28px;max-width:60ch;font-size:15px;color:var(--ink-2);text-wrap:balance}
.sz-nf-note a{text-decoration:underline;text-underline-offset:2px}
.sz-lang--always{display:inline-flex!important}
.sz-hd-r--fin{margin-left:auto}
.sz-root-choice{padding:clamp(72px,10vw,140px) 0;min-height:56vh;background:var(--ink)}
.sz-root-choice .sz-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,88px)}
.sz-root-choice .sz-wrap{align-items:start}
.sz-root-choice .sz-rc p:not(.sz-h1){margin-top:28px}
@media (max-width:760px){ .sz-root-choice .sz-wrap{grid-template-columns:minmax(0,1fr)} }
.sz-ft-bot--seul{margin-top:0;padding-top:0;border-top:0}

/* ── Pages légales : le texte, tel quel, dans l'habillage du site ─────────── */
.sz-legal{max-width:760px;padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,96px)}
.sz-legal .sz-back{margin-bottom:26px;font-size:15px}
.sz-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.sz-legal .sz-back a{text-decoration:none}
/* Mention des pages anglaises : hors du texte légal, avant le titre. */
.sz-legal .sz-lang-note{margin:0 0 26px;padding:12px 16px;border-left:2px solid var(--line-2);background:var(--surface);font-size:15px;line-height:1.55}
.sz-legal h1{font-size:clamp(2rem,4vw,2.8rem);max-width:none}
.sz-legal .sz-updated{margin-top:10px;font-size:14px;color:var(--ink-2)}
.sz-legal .sz-intro{margin-top:22px;font-size:18px;line-height:1.6;color:var(--ink-2)}
.sz-legal h2{margin-top:44px;font-size:1.4rem;font-weight:600;line-height:1.3;letter-spacing:-.015em;max-width:none}
.sz-legal h3{margin-top:26px;font-size:17px}
.sz-legal p,.sz-legal ul{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.sz-legal ul{padding-left:22px}
.sz-legal li{margin-top:8px}
.sz-legal strong{font-weight:600;color:var(--ink)}
.sz-legal .sz-note{margin-top:40px;padding:16px 18px;border-left:2px solid var(--line-2);background:var(--surface);font-size:15px}

/* ── Pied de page ────────────────────────────────────────────────────────── */
.sz-site-ft{padding:clamp(40px,5vw,60px) 0 clamp(32px,4vw,44px);border-top:1px solid var(--on-ink-line)}
.sz-ft-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.sz-ft-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.sz-ft-links a{font-size:15px;color:var(--on-ink-2);padding:6px 0}
.sz-ft-links a:hover{color:var(--on-ink)}
.sz-ft-bot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--on-ink-line);
}
.sz-ft-id{font-size:14px;color:var(--on-ink-2)}
.sz-ft-legal{margin-top:18px;font-size:13px;line-height:1.55;color:var(--on-ink-2);max-width:70ch}