/* ═══════════════════════════════════════════════════════════════════════
   MANDAT DIRECT — Design tokens v3
   Source : swipe file « Design SaaS B2B » p.17 (structure Linear, chaleur Attio),
   arbitré avec les couleurs du logo : marine #16324F (action) · or #EFB033 (accent).
   Règle : aucune couleur, taille, espacement ou rayon hors de ces tokens.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Surfaces & texte — thème clair (défaut : application, tarifs) */
  --bg:#FFFFFF;        --surface:#F2F5F9;    --surface-2:#E7EBF1;
  --text:#15171A;      --text-2:#5F6B7A;     --text-3:#98A2B3;
  --line:rgba(15,23,42,.08);  --line-2:rgba(15,23,42,.14);

  /* Marque */
  --brand:#16324F;     --brand-2:#2E5C87;    --brand-soft:#E9EEF5;
  --accent:#EFB033;    --accent-hover:#C98D18; --accent-soft:#FDF3DC;
  --success:#16A34A;   --warn:#D97706;       --danger:#DC2626;

  /* Bouton primaire : marine avec un liseré plus clair (relief Attio) */
  --btn-bg:#16324F;    --btn-text:#FFFFFF;   --btn-border:#2E5C87;

  /* Ombres en couches : une ombre de contact courte + une ombre de portée longue.
     C'est ce qui décolle un élément du fond au lieu de le poser dessus. */
  --shadow-sm:0 1px 2px rgba(0,22,62,.06), 0 0 0 1px rgba(0,22,62,.04);
  --shadow-md:0 1px 2px rgba(0,22,62,.05), 0 6px 16px -6px rgba(0,22,62,.12), 0 0 0 1px rgba(0,22,62,.05);
  --shadow-lg:0 2px 4px rgba(0,22,62,.04), 0 12px 28px -8px rgba(0,22,62,.14), 0 40px 80px -24px rgba(0,22,62,.22);

  /* Profondeur : liseré intérieur, panneau dégradé, halos, filet dégradé. */
  --liseré:inset 0 1px 0 rgba(255,255,255,.9);
  --pane:linear-gradient(180deg, #FFFFFF, #FBFCFD);
  --pane-accent:linear-gradient(160deg, var(--brand-soft), rgba(255,255,255,0) 60%);
  --halo-brand:radial-gradient(60% 60% at 50% 0%, rgba(46,92,135,.16), transparent 70%);
  --halo-accent:radial-gradient(50% 50% at 50% 0%, rgba(239,176,51,.18), transparent 70%);
  --filet:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);

  /* Typo : Satoshi pour l'affichage (titres, chiffres, marque), Inter pour l'interface.
     Satoshi est le grotesque géométrique le plus proche des références du swipe file ;
     Inter garde les tableaux et les formulaires parfaitement lisibles. */
  --font:"Inter","Inter-repli",-apple-system,"Segoe UI",sans-serif;
  --titre:"Satoshi","Satoshi-repli","Inter",-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --h1-size:clamp(2.875rem,2rem + 2.6vw,4rem);  --h1-lh:1;    --h1-track:-.038em;   /* 46→64 px */
  --h2-size:clamp(2rem,1.5rem + 1.55vw,2.75rem); --h2-lh:1.06; --h2-track:-.032em;   /* 32→44 px */
  --h3-size:1.3125rem;                          --h3-lh:1.25; --h3-track:-.022em;   /* 21 px : le palier manquant */
  --lead:400 1.125rem/1.5 var(--font);  --body:400 1rem/1.55 var(--font);  --small:400 .8125rem/1.45 var(--font);
  --eyebrow:500 .75rem/1 var(--font);   --eyebrow-track:.08em;

  /* Espacement (grille 8) & gabarit */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;   /* entre sections */
  --container:1200px; --container-wide:1360px; --gutter:24px; --nav-h:64px;

  /* Rayons : boutons & champs = md · cartes = lg · média = xl */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* Mouvement */
  --ease:cubic-bezier(.16,1,.3,1); --t-fast:150ms; --t-base:220ms; --t-slow:480ms;

  /* ═══ v4 « Signal » — ajout du 09/09/2026 ═══════════════════════════════
     Rampe de neutres à quatorze marches et ombres à keyline, sur le modèle du
     système de Stripe (relevé dans leur feuille de style publique). Le trait
     d'un pixel devient une OMBRE : il se superpose à l'ombre portée sans jamais
     décaler la mise en page, et deux traits ne s'additionnent plus en gris sale. */
  --n0:#FFFFFF;  --n25:#FAFAF9; --n50:#F5F6F8; --n100:#EBEDF1; --n150:#E1E4EA;
  --n200:#CFD4DD; --n300:#A9B0BE; --n400:#8B93A3; --n500:#6C7484; --n600:#535B69;
  --n700:#3E4553; --n800:#2A303B; --n900:#1A1F27; --n950:#0E1116;
  --marine-nuit:#101F31; --marine-2b:#22496F;
  --marine-25:#F4F7FA; --marine-100:#D3DEEB;
  --or-25:#FEFAF0; --or-100:#F9E4B6;
  --vert:#0F8A4D;  --vert-50:#E6F5EC;
  --rouge:#C4362B; --rouge-50:#FCEDEB;
  --violet:#6D4AC4; --violet-50:#F0EBFB;
  --keyline:0 0 0 1px rgba(26,31,39,.07);
  --keyline-2:0 0 0 1px rgba(26,31,39,.14);
  --o1:0 1px 1px rgba(14,17,22,.10), 0 2px 5px rgba(26,31,39,.06);
  --o2:0 2px 4px rgba(14,17,22,.08), 0 7px 14px rgba(26,31,39,.07);
  --o3:0 5px 15px rgba(14,17,22,.10), 0 15px 35px rgba(26,31,39,.10);
  --o4:0 5px 15px rgba(14,17,22,.10), 0 15px 35px rgba(26,31,39,.10), 0 50px 100px rgba(26,31,39,.10);
  --anneau:0 0 0 3px rgba(46,92,135,.28);
  --courbe:cubic-bezier(0,.09,.4,1);
  --flanc-l:248px; --entete-h:56px; --contenu:1220px;
}
/* Thème sombre — héros marketing, écrans immersifs (carte) */
[data-theme="dark"]{
  --bg:#08090A;        --surface:#0E1013;    --surface-2:#15171B;
  --text:#F2F4F6;      --text-2:#9BA3AE;     --text-3:#6B727C;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --brand-soft:rgba(46,92,135,.28); --accent-soft:rgba(239,176,51,.16);
  --btn-bg:#F2F3F5;    --btn-text:#08090A;   --btn-border:transparent;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -12px rgba(0,0,0,.7), 0 48px 90px -30px rgba(0,0,0,.9);
  --liseré:inset 0 1px 0 rgba(255,255,255,.08);
  --pane:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --pane-accent:linear-gradient(160deg, rgba(46,92,135,.30), rgba(255,255,255,.02) 65%);
  --halo-brand:radial-gradient(60% 60% at 50% 0%, rgba(46,92,135,.42), transparent 70%);
  --halo-accent:radial-gradient(50% 50% at 50% 0%, rgba(239,176,51,.22), transparent 70%);
  --filet:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 18%, rgba(255,255,255,.16) 82%, transparent);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ -webkit-text-size-adjust:100%; }
html,body{ overflow-x:clip; max-width:100%; }
body{ font:var(--body); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
img,svg,video,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
html{ scroll-padding-top:calc(var(--nav-h) + 28px); scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--brand-2); outline-offset:2px; box-shadow:0 0 0 4px rgba(46,92,135,.18); border-radius:var(--r-sm); }
.heros :focus-visible, .final :focus-visible, .sombre :focus-visible, .pied :focus-visible, .bande-image :focus-visible{
  outline-color:var(--accent); box-shadow:0 0 0 4px rgba(239,176,51,.35); }
@media(forced-colors:active){ :focus-visible{ outline:3px solid Highlight; outline-offset:2px; box-shadow:none; } }
::selection{ background:var(--accent-soft); }
[hidden]{ display:none !important; }

h1,.h1{ font-family:var(--titre); font-weight:700; font-size:var(--h1-size); line-height:var(--h1-lh); letter-spacing:var(--h1-track); text-wrap:balance; }
h2,.h2{ font-family:var(--titre); font-weight:700; font-size:var(--h2-size); line-height:var(--h2-lh); letter-spacing:var(--h2-track); text-wrap:balance; }
h3,.h3{ font-family:var(--titre); font-weight:600; font-size:var(--h3-size); line-height:var(--h3-lh); letter-spacing:var(--h3-track); }
/* Chiffres : c'est la preuve du produit, ils sont composés comme des titres. */
.chiffre{ font-family:var(--titre); font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1; }
.lead{ font:var(--lead); color:var(--text-2); max-width:520px; }
.small{ font:var(--small); } .t2{ color:var(--text-2); } .t3{ color:var(--text-3); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.eyebrow{ font:var(--eyebrow); letter-spacing:var(--eyebrow-track); text-transform:uppercase; color:var(--text-2); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-wide{ max-width:var(--container-wide); }
.section{ padding-block:var(--s-10); }
/* Sur petit écran, la respiration d'un grand écran devient du vide. */
@media(max-width:900px){ :root{ --s-9:64px; --s-10:88px; } }
@media(max-width:640px){ :root{ --s-9:48px; --s-10:64px; } }
.stack{ display:flex; flex-direction:column; } .row{ display:flex; align-items:center; }
.gap-2{ gap:var(--s-2);} .gap-3{ gap:var(--s-3);} .gap-4{ gap:var(--s-4);} .gap-5{ gap:var(--s-5);} .gap-6{ gap:var(--s-6);} .gap-8{ gap:var(--s-8);}

/* ── Boutons : une seule primaire par écran ───────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:40px; padding:0 18px; border-radius:var(--r-md); cursor:pointer;
  font:500 .875rem/1 var(--font); letter-spacing:-.005em; white-space:nowrap;
  border:1px solid transparent;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(0); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
/* Chargement : le libellé s'efface, un anneau tourne à sa place, la largeur ne bouge pas. */
.btn.charge{ color:transparent !important; pointer-events:none; }
.btn.charge::after{ content:''; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; color:var(--btn-text); opacity:.9; animation:btn-tour .7s linear infinite; }
.btn-secondary.charge::after, .btn-ghost.charge::after{ color:var(--text); }
@keyframes btn-tour{ to{ transform:rotate(360deg); } }
.btn-primary{ background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,22,62,.18); }
.btn-primary:hover{ background:var(--brand-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 4px 10px -3px rgba(0,22,62,.35); }
[data-theme="dark"] .btn-primary:hover{ background:#FFFFFF; }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-secondary:hover{ border-color:var(--text-3); background:var(--surface); }
.btn-ghost{ color:var(--text-2); padding:0 10px; } .btn-ghost:hover{ color:var(--text); background:var(--surface); transform:none; }
.btn-accent{ background:var(--accent); color:#15171A; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(120,80,0,.2); }
.btn-accent:hover{ background:var(--accent-hover); color:#fff; }
.btn-danger{ background:transparent; color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.btn-danger:hover{ background:color-mix(in srgb, var(--danger) 10%, transparent); border-color:var(--danger); }
.btn-lg{ height:48px; padding:0 24px; font-size:1rem; } .btn-sm{ height:32px; padding:0 12px; font-size:.8125rem; }
.btn-icon{ width:40px; padding:0; } .btn-icon.btn-sm{ width:32px; }

/* ── Champs ───────────────────────────────────────────────────────────── */
.input{
  height:40px; width:100%; border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:0 14px; background:var(--surface); font-size:.875rem; color:var(--text);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder{ color:var(--text-3); }
.input:hover{ border-color:var(--text-3); }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:0; background:var(--bg); }
.label{ display:block; font:500 .8125rem/1.4 var(--font); color:var(--text); margin-bottom:var(--s-2); }

/* ── Cartes, badges, nav, média ───────────────────────────────────────── */
.card{ position:relative; background:var(--pane); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5);
       box-shadow:0 1px 2px rgba(0,22,62,.05), 0 4px 10px -4px rgba(0,22,62,.10), 0 0 0 1px rgba(0,22,62,.045), var(--liseré);
       transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.card:hover{ border-color:var(--line-2); box-shadow:var(--shadow-md), var(--liseré); transform:translateY(-2px); }
.card h3{ font-family:var(--titre); font-size:var(--h3-size); font-weight:600; line-height:1.25; letter-spacing:-.02em; } .card p{ color:var(--text-2); font-size:.875rem; }
.badge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:var(--r-sm);
        font:500 .75rem/1 var(--font); letter-spacing:.02em; border:1px solid var(--line-2); color:var(--text-2); background:var(--surface); }
.badge-accent{ color:#8A5A00; background:var(--accent-soft); border-color:transparent; }
.badge-brand{ color:var(--brand); background:var(--brand-soft); border-color:transparent; }
.badge-success{ color:#0F6E36; background:#E6F6EC; border-color:transparent; }
.nav{ position:sticky; top:0; height:var(--nav-h); z-index:50; display:flex; align-items:center;
      background:color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
.nav a{ font-size:.875rem; color:var(--text-2); } .nav a:hover{ color:var(--text); }
.nav .btn{ height:32px; padding:0 12px; font-size:.8125rem; }
.media{ border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface); }
.media video,.media img{ display:block; width:100%; }
hr.line{ border:0; height:1px; background:var(--line); }

/* ── Mouvement (p.19) : apparition 12 px / 480 ms, une seule fois ─────── */
.js [data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay:var(--delay,0ms); }
.js [data-reveal].in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:0ms !important; animation:none !important; } .js [data-reveal]{ opacity:1; transform:none; } }
@media print{ .js [data-reveal]{ opacity:1 !important; transform:none !important; } }

/* Étiquettes DPE (couleurs réglementaires, seule exception à la règle « un accent ») */
.dpe{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:var(--r-sm); font:700 .8125rem/1 var(--font); color:#fff; }
.dpe-A{ background:#00A06D; } .dpe-B{ background:#52B153; } .dpe-C{ background:#A5CC3A; color:#15171A; }
.dpe-D{ background:#F2E43D; color:#15171A; } .dpe-E{ background:#F0B53F; color:#15171A; } .dpe-F{ background:#EB8235; } .dpe-G{ background:#D7221F; }

/* ── Profondeur : les trois primitives réutilisables ──────────────────────
   .halo   → nappe lumineuse derrière une section (aucun nœud ajouté)
   .filet-h→ séparateur d'un pixel qui s'efface sur les bords
   .grille → quadrillage très discret, donne une texture au fond sombre     */
.halo{ position:relative; isolation:isolate; }
.halo::before{ content:''; position:absolute; inset:0; background:var(--halo-brand); pointer-events:none; z-index:-1; }
.halo-accent::before{ background:var(--halo-accent); }
.filet-h{ height:1px; border:0; background:var(--filet); }
.grille{ position:relative; }
.grille::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
}

/* Montants : composés comme des chiffres de titre, alignés en colonne. */
.montant{ font-family:var(--titre); font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }