/* =========================================================
   Polices auto-hebergees

   Genere par telecharger.py. NE PAS MODIFIER A LA MAIN.

   Pourquoi : charger les polices depuis un service tiers
   transmet l'adresse IP de chaque visiteur a ce tiers, hors
   Union europeenne, des le chargement de la page. La
   politique de confidentialite du site affirme l'inverse.

   Polices variables : un seul fichier couvre toute la plage
   de graisses. Inutile d'en telecharger un par poids.

   Space Grotesk et Manrope sont sous licence SIL Open Font
   License 1.1, qui autorise l'hebergement et la
   redistribution. Voir LICENCES.md.
   ========================================================= */

/* Manrope - latin */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2-variations');
  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;
}

/* Manrope - latin-ext */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk - latin */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2-variations');
  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;
}

/* Space Grotesk - latin-ext */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================================================
   Agence Ladon — feuille de style unique
   Jetons : voir 00_IDENTITE/DESIGN.md.
   Ne jamais introduire de couleur, de rayon ou de durée
   qui ne figure pas dans :root.
   ========================================================= */

:root{
  /* action */
  --primary:#5B3DF5;
  --primary-deep:#4A2FD6;
  --primary-press:#3A23B0;
  --primary-soft:#7C63F8;
  --primary-pale:#EEEBFF;
  --on-primary:#FFFFFF;
  --on-primary-mute:#DCD6FF;
  --on-dark-mute:#B6B6C6;

  /* marquage : aplat uniquement, jamais de texte */
  --marker:#C8FA3C;
  --marker-pale:#F2FDDC;
  --on-marker:#0B0B0F;

  /* encre */
  --ink:#0B0B0F;
  --ink-secondary:#3C3C48;
  --ink-mute:#56606E;
  --ink-subtle:#8A8F9C;

  /* surfaces */
  --canvas:#FFFFFF;
  --canvas-soft:#F7F7F9;
  --canvas-deep:#0B0B0F;
  --hairline:#E6E6EC;
  --hairline-strong:#D2D2DA;
  --hairline-on-dark:rgba(255,255,255,.12);

  /* sémantique */
  --positive:#0A6E4A;
  --warning:#B45309;
  --negative:#C2261F;

  /* formes */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:9999px;

  /* élévation, teintée au violet */
  --e1:0 2px 8px -4px rgba(20,20,45,.10);
  --e2:0 24px 60px -30px rgba(20,20,45,.28), 0 2px 8px -4px rgba(20,20,45,.10);

  /* mouvement */
  --ease:cubic-bezier(0.32,0.72,0,1);
  --d-fast:300ms;
  --d-base:500ms;
  --d-slow:800ms;

  /* mise en page */
  --gut:clamp(20px,5vw,64px);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;font-size:17px;line-height:1.6;
  /* Explicite depuis l'auto-hebergement. Google ne servait que 500 a 800 :
     le corps demandait 400 et recevait 500. La police variable fournit
     desormais un vrai 400, plus leger. On conserve le rendu valide. */
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:0}
p{margin:0}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--ink)}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(72px,11vw,140px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:60;background:var(--ink);color:var(--on-primary);padding:12px 18px;border-radius:var(--r-sm)}

/* ---------- Focus : toujours visible ---------- */
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-xs)}
.btn:focus-visible,.nav-cta:focus-visible{outline-offset:3px;box-shadow:0 0 0 6px var(--primary-pale)}
summary:focus-visible{outline-offset:2px}
/* Sur fond sombre ou violet, le violet devient invisible : on bascule sur le vert. */
.on-dark :focus-visible,.steps :focus-visible,.why :focus-visible{outline-color:var(--marker);box-shadow:none}

/* =========================================================
   Navigation
   ========================================================= */
.nav{position:fixed;inset-inline:0;top:0;z-index:40;padding-top:18px;pointer-events:none}
.nav-in{
  pointer-events:auto;width:max-content;max-width:calc(100% - 32px);margin-inline:auto;
  display:flex;align-items:center;gap:26px;height:58px;padding:0 10px 0 22px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 10px 34px -18px rgba(20,20,45,.35);
  outline:1px solid rgba(11,11,15,.06);
}
.brand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand svg{width:26px;height:26px;flex:0 0 auto}

.nav-links{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative;display:flex;align-items:center}
.nav-links a,.nav-trigger{
  font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:600;color:var(--ink-secondary);
  background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.nav-links a:hover,.nav-trigger:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{position:relative}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--marker);
}
.nav-trigger svg{width:9px;height:9px;transition:transform var(--d-fast) var(--ease)}
.nav-drop:hover .nav-trigger svg,.nav-drop:focus-within .nav-trigger svg{transform:rotate(180deg)}

/* Le panneau déroulant. Ouvert au survol et au focus clavier. */
.nav-panel{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,10px);
  width:max-content;padding:8px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  outline:1px solid rgba(11,11,15,.07);box-shadow:var(--e2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--d-fast) var(--ease),transform var(--d-fast) var(--ease),visibility var(--d-fast);
}
.nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
/* pont invisible : évite que le panneau se ferme en traversant le vide */
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}
.nav-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nav-panel a{
  display:grid;gap:2px;padding:12px 16px;border-radius:var(--r-md);min-width:266px;
  transition:background var(--d-fast) var(--ease);
}
.nav-panel a:hover,.nav-panel a:focus-visible{background:var(--primary-pale)}
.nav-panel b{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.nav-panel span{font-size:13.5px;font-weight:500;color:var(--ink-mute);line-height:1.45}

.nav-cta{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 6px 0 18px;
  border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--on-primary);cursor:pointer;
  font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;white-space:nowrap;
  transition:transform var(--d-base) var(--ease),background var(--d-base) var(--ease);
}
.nav-cta:hover{background:#22222C;color:var(--on-primary)}
.nav-cta:active{transform:scale(.97)}
.pip{width:28px;height:28px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);display:grid;place-items:center;transition:transform var(--d-base) var(--ease)}
.nav-cta:hover .pip,.btn:hover .pip{transform:translate(2px,-1px)}
.pip svg{width:13px;height:13px}

/* Bouton d'ouverture mobile : deux barres qui se croisent */
.burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative;border-radius:var(--r-pill)}
.burger span{position:absolute;left:11px;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--d-base) var(--ease),opacity var(--d-fast) var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
body.menu-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* Panneau mobile plein écran */
.sheet{
  position:fixed;inset:0;z-index:35;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  padding:104px var(--gut) 48px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity var(--d-base) var(--ease),visibility var(--d-base);
}
body.menu-open .sheet{opacity:1;visibility:visible}
.sheet ul{list-style:none;margin:0;padding:0}
.sheet li{border-bottom:1px solid var(--hairline)}
.sheet li a{
  display:block;padding:20px 0;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:26px;letter-spacing:-.03em;color:var(--ink);
  opacity:0;transform:translateY(14px);transition:opacity var(--d-base) var(--ease),transform var(--d-base) var(--ease);
}
.sheet .sheet-cta{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--d-base) var(--ease),transform var(--d-base) var(--ease),background var(--d-base) var(--ease);
}
body.menu-open .sheet .sheet-cta{opacity:1;transform:none}
body.menu-open .sheet li a{opacity:1;transform:none}
.sheet li small{display:block;font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;color:var(--ink-mute);letter-spacing:0;margin-top:3px}
.sheet .sheet-cta{margin-top:34px;max-width:100%}

@media(max-width:940px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-in{gap:14px;padding-right:6px}
  .nav-cta{display:none}
}
@media(min-width:941px){.sheet{display:none}}

/* =========================================================
   Boutons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 8px 0 24px;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  font-family:'Manrope',sans-serif;font-size:16px;font-weight:700;white-space:nowrap;
  transition:transform var(--d-base) var(--ease),background var(--d-base) var(--ease);
}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-deep);color:var(--on-primary)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--ink);padding:0 24px;outline:1px solid var(--hairline-strong)}
.btn-ghost:hover{outline-color:rgba(11,11,15,.34)}
.btn-ghost:active{transform:scale(.98)}
.btn-light{background:var(--canvas);color:var(--ink)}
.btn-light .pip{background:var(--primary-pale)}
.btn-light:hover .pip{background:#fff}
.btn-light:hover{background:var(--primary-pale);color:var(--ink)}
.btn-light:active{transform:scale(.98)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* =========================================================
   Éléments d'écriture communs
   ========================================================= */
.tag{
  display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--marker);
  padding:8px 16px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.mark{background:var(--marker);border-radius:var(--r-xs);padding:0 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-secondary);margin-top:22px;max-width:56ch}

/* =========================================================
   Hero d'accueil
   ========================================================= */
.hero{min-height:100dvh;display:flex;align-items:center;padding-top:116px;padding-bottom:52px}
.hero-grid{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(34px,3.7vw,47px);margin-top:24px}
.hero p{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-secondary);margin-top:22px;max-width:52ch}
.panel{
  padding:8px;border-radius:var(--r-xl);background:var(--canvas-soft);
  outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e2);
}
.panel-in{
  background:var(--primary);border-radius:var(--r-lg);color:var(--on-primary);
  padding:30px 28px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.panel-in svg{width:74px;height:74px}
.panel-sig{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.15}
.panel-dom{margin-top:14px;font-size:14px;font-weight:600;color:var(--marker)}
@media(max-width:860px){
  .hero{min-height:0;padding-top:112px;padding-bottom:40px}
  .hero-grid{grid-template-columns:1fr}
  .panel-in{min-height:0;padding:26px 24px}
  .panel-in svg{width:58px;height:58px}
}

/* =========================================================
   Hero des pages intérieures
   ========================================================= */
.phero{padding-top:clamp(132px,15vw,170px);padding-bottom:clamp(44px,6vw,72px)}
.phero .crumb{font-size:13.5px;font-weight:600;color:var(--ink-subtle);margin-bottom:22px}
.phero .crumb a{color:var(--ink-mute)}
.phero .crumb a:hover{color:var(--ink)}
.phero h1{font-size:clamp(34px,4.6vw,58px);max-width:18ch}
.phero .lede{max-width:58ch}
.phero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:end}
.phero-aside{
  padding:8px;border-radius:var(--r-xl);background:var(--canvas-soft);
  outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e2);
}
.phero-aside-in{background:#fff;border-radius:var(--r-lg);padding:26px 24px}
.phero-aside dt{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.phero-aside dd{margin:6px 0 20px;font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.phero-aside dd:last-child{margin-bottom:0}
.phero-aside dd small{display:block;font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;color:var(--ink-mute);letter-spacing:0;margin-top:3px}
@media(max-width:860px){.phero-grid{grid-template-columns:1fr}}

/* =========================================================
   « Par où commencer » — segmentation du visiteur
   ========================================================= */
.start{background:var(--canvas-soft)}
.start h2{font-size:clamp(28px,3.4vw,42px);max-width:18ch}
.start>.wrap>p{color:var(--ink-secondary);margin-top:18px;max-width:56ch}
.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.start-card{
  display:flex;flex-direction:column;padding:8px;border-radius:var(--r-xl);background:#fff;
  outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e1);
  transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease);
}
.start-card:hover{transform:translateY(-4px);box-shadow:var(--e2)}
.start-card-in{display:flex;flex-direction:column;height:100%;padding:26px 24px 24px}
.start-card .quote{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;
  line-height:1.25;color:var(--ink);
}
.start-card p{color:var(--ink-secondary);font-size:16px;margin-top:14px}
.start-card .go{
  margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;color:var(--primary);
}
.start-card .go .pip{background:var(--primary-pale)}
.start-card .go .pip svg path{stroke:var(--primary)}
.start-card:hover .go .pip{transform:translate(2px,-1px)}
@media(max-width:860px){.start-grid{grid-template-columns:1fr}}

/* =========================================================
   Problème
   ========================================================= */
.problem{background:var(--canvas-soft)}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.problem h2{font-size:clamp(30px,3.6vw,46px);max-width:15ch}
.losses{display:grid;gap:30px}
.loss{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.dot{width:10px;height:10px;border-radius:var(--r-pill);background:var(--primary);margin-top:9px}
.loss b{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.02em;margin-bottom:5px}
.loss p{color:var(--ink-secondary);font-size:16px}
@media(max-width:860px){.problem-grid{grid-template-columns:1fr}}

/* =========================================================
   La chaîne
   ========================================================= */
.chain h2{font-size:clamp(30px,3.6vw,46px);max-width:19ch}
.chain>.wrap>p{color:var(--ink-secondary);margin-top:18px;max-width:58ch}
.links{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative}
.links::before{content:"";position:absolute;top:23px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,var(--primary),var(--marker));border-radius:2px}
.link{position:relative;padding-inline:14px}
.num{
  position:relative;width:46px;height:46px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-primary);
  display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;
  outline:6px solid var(--canvas);
}
.link h3{font-size:20px;margin-top:22px;min-height:2.4em}
.link p{color:var(--ink-secondary);font-size:16px;margin-top:9px}
@media(max-width:860px){
  .links{grid-template-columns:1fr;gap:38px}
  .links::before{display:none}
  .link{padding-inline:0}
}

/* =========================================================
   Arguments d'une page service : rangées alternées
   ========================================================= */
.args{display:grid;gap:clamp(56px,8vw,104px)}
.arg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.arg:nth-child(even) .arg-visual{order:-1}
.arg h2{font-size:clamp(26px,3vw,38px);max-width:17ch;margin-top:16px}
.arg p{color:var(--ink-secondary);margin-top:18px;max-width:52ch}
.arg ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.arg li{position:relative;padding-left:21px;font-size:16px;color:var(--ink-secondary)}
.arg li::before{
  content:"";position:absolute;left:0;top:10px;
  width:7px;height:7px;border-radius:var(--r-pill);background:var(--primary);
}
.arg-visual{
  padding:8px;border-radius:var(--r-xl);background:var(--canvas-soft);
  outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e2);
}
.arg-visual-in{
  border-radius:var(--r-lg);padding:32px 28px;min-height:280px;
  display:flex;flex-direction:column;justify-content:space-between;background:#fff;
}
.arg-visual-in.violet{background:var(--primary);color:var(--on-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.arg-visual-in.dark{background:var(--canvas-deep);color:var(--on-primary)}
.arg-visual .big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1.05}
.arg-visual .cap{font-size:14.5px;font-weight:600;margin-top:12px;color:var(--ink-mute)}
.arg-visual-in.violet .cap{color:var(--on-primary-mute)}
.arg-visual-in.dark .cap{color:var(--on-dark-mute)}
.arg-visual-in.violet .big,
.arg-visual-in.dark .big{color:var(--on-primary)}  /* `.arg p` (0,1,1) reprend la main sur la couleur heritee du
     panneau : la redonner dans chaque variante coloree, sinon le
     titre sort en #3C3C48 sur fond sombre ou violet. */
.arg-visual .rows{display:grid;gap:11px;margin-top:22px}
.arg-visual .row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;border-radius:var(--r-md);background:var(--canvas-soft);font-size:14.5px;font-weight:600;
}
.arg-visual-in.violet .row{background:rgba(255,255,255,.12);color:var(--on-primary)}
.arg-visual-in.dark .row{background:rgba(255,255,255,.07)}
.arg-visual .row .ok{width:18px;height:18px;border-radius:var(--r-pill);background:var(--marker);flex:0 0 auto}
@media(max-width:860px){
  .arg{grid-template-columns:1fr}
  .arg:nth-child(even) .arg-visual{order:0}
  .arg-visual-in{min-height:0}
}

/* =========================================================
   Déroulé sur fond sombre
   ========================================================= */
.steps{background:var(--canvas-deep);color:var(--on-primary)}
.steps h2{font-size:clamp(30px,3.6vw,46px);color:var(--on-primary);max-width:16ch}
.steps>.wrap>p{color:var(--on-dark-mute);margin-top:18px;max-width:56ch}
.steps-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start;margin-top:8px}
.step{padding:26px 0;border-top:1px solid var(--hairline-on-dark);display:grid;grid-template-columns:auto 1fr;gap:20px}
.step:first-child{border-top:0;padding-top:0}
.step span{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--marker);padding-top:4px}
.step b{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.step p{color:var(--on-dark-mute);font-size:16px}
.step em{font-style:normal;display:block;margin-top:10px;font-size:14px;font-weight:700;color:var(--marker)}
@media(max-width:860px){.steps-grid{grid-template-columns:1fr}}

/* =========================================================
   Offres : bento asymétrique
   ========================================================= */
.offers h2{font-size:clamp(30px,3.6vw,46px);max-width:17ch}
.offers>.wrap>p{color:var(--ink-secondary);margin-top:18px;max-width:56ch}
.bento{display:grid;grid-template-columns:1.25fr 1fr;grid-auto-rows:auto;gap:20px;margin-top:52px}
.card{padding:8px;border-radius:var(--r-xl);background:var(--canvas-soft);outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e2)}
.card-in{background:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);height:100%;display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.card.feature{grid-row:span 2;background:var(--primary);outline-color:transparent}
.card.feature .card-in{background:var(--primary);color:var(--on-primary)}
.card.feature .kicker{color:var(--marker)}
.card h3{font-size:clamp(24px,2.4vw,32px);margin-top:14px}
.card.feature h3{color:var(--on-primary)}
.card>.card-in>p{color:var(--ink-secondary);font-size:16px;margin-top:14px}
.card.feature p{color:var(--on-primary-mute)}
.price{margin-top:auto;padding-top:28px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em}
.card.feature .price{color:var(--on-primary)}
.price small{display:block;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;color:var(--ink-mute);margin-top:7px;letter-spacing:0}
.card.feature .price small{color:var(--on-primary-mute)}
/* Quatre offres : la derniere court sur les deux colonnes, sinon le bento
   laisse un trou en bas a droite qui a l'air d'un oubli. */
.card.wide{grid-column:1 / -1}
.card.wide .card-in{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:end}
.card.wide .price{margin-top:0;padding-top:0;text-align:right;white-space:nowrap}
@media(max-width:860px){.bento{grid-template-columns:1fr}.card.feature{grid-row:auto}.card.wide{grid-column:auto}.card.wide .card-in{grid-template-columns:1fr}.card.wide .price{text-align:left;padding-top:24px}}

/* Détail d'une offre, page Tarifs */
.plan{padding:8px;border-radius:var(--r-xl);background:var(--canvas-soft);outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e2);margin-top:28px}
.plan-in{background:#fff;border-radius:var(--r-lg);padding:clamp(26px,3.4vw,44px)}
.plan-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding-bottom:26px;border-bottom:1px solid var(--hairline)}
.plan h2{font-size:clamp(26px,3vw,36px);margin-top:12px}
.plan-head p{color:var(--ink-secondary);margin-top:14px;max-width:54ch}
.plan-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;text-align:right;white-space:nowrap}
.plan-price small{display:block;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;color:var(--ink-mute);margin-top:7px;letter-spacing:0}
.plan-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:28px}
.plan-cols h3{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-family:'Manrope',sans-serif}
.plan-cols ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.plan-cols li{position:relative;padding-left:20px;font-size:16px;color:var(--ink-secondary)}
.plan-cols li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:var(--r-pill);background:var(--primary)}
.plan-cols .out li::before{background:var(--hairline-strong)}
@media(max-width:860px){.plan-head{grid-template-columns:1fr}.plan-price{text-align:left}.plan-cols{grid-template-columns:1fr}}

/* =========================================================
   Pourquoi Ladon
   ========================================================= */
.why{background:var(--primary);color:var(--on-primary)}
.why-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.why-grid>svg{width:96px;height:96px;flex:0 0 auto}
.why h2{font-size:clamp(28px,3.4vw,42px);color:var(--on-primary);max-width:20ch}
.why p{color:var(--on-primary-mute);margin-top:20px;max-width:58ch}
.why strong{color:var(--on-primary);font-weight:700}
.sig{margin-top:30px;font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--marker)}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}.why-grid>svg{width:72px;height:72px}}

/* =========================================================
   FAQ
   ========================================================= */
.faq h2{font-size:clamp(30px,3.6vw,46px);max-width:14ch}
.faq-list{margin-top:44px;border-top:1px solid var(--hairline)}
details{border-bottom:1px solid var(--hairline)}
summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(17px,1.7vw,20px);letter-spacing:-.02em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--d-base) var(--ease);
}
details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
details p{color:var(--ink-secondary);font-size:16.5px;padding-bottom:26px;max-width:66ch}
details p+p{padding-top:0;margin-top:-12px}

/* =========================================================
   Liens croisés en bas de page service
   ========================================================= */
.cross{background:var(--canvas-soft)}
.cross h2{font-size:clamp(24px,2.6vw,32px);max-width:20ch}
.cross-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.cross-card{
  display:block;padding:8px;border-radius:var(--r-xl);background:#fff;
  outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e1);
  transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease);
}
.cross-card:hover{transform:translateY(-4px);box-shadow:var(--e2)}
.cross-card-in{padding:24px}
.cross-card b{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.cross-card p{color:var(--ink-secondary);font-size:16px;margin-top:9px}
@media(max-width:860px){.cross-grid{grid-template-columns:1fr}}

/* =========================================================
   Contact
   ========================================================= */
.form-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,80px);align-items:start}
.form-grid>*{min-width:0}
.form-grid form{max-width:100%}
.field{display:grid;gap:8px;margin-bottom:20px;min-width:0}
.field label{font-size:14px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;min-width:0;
  font-family:'Manrope',sans-serif;font-size:16px;color:var(--ink);
  padding:14px 16px;border:1px solid var(--hairline-strong);border-radius:var(--r-md);background:#fff;
  transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-pale);
}
.field .hint{font-size:13.5px;color:var(--ink-mute)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-width:0}
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-bottom:24px;font-size:14px;color:var(--ink-mute);min-width:0}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--primary)}
.contact-aside{padding:8px;border-radius:var(--r-xl);background:var(--canvas-soft);outline:1px solid rgba(11,11,15,.055);box-shadow:var(--e2)}
.contact-aside-in{background:#fff;border-radius:var(--r-lg);padding:28px 26px}
.contact-aside h3{font-size:20px}
.contact-aside dl{margin:22px 0 0}
.contact-aside dt{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.contact-aside dd{margin:6px 0 20px;font-size:16.5px;font-weight:600;color:var(--ink)}
.contact-aside dd small{display:block;font-size:14px;font-weight:500;color:var(--ink-mute);margin-top:4px}
.contact-aside dd:last-child{margin-bottom:0}
@media(max-width:860px){.form-grid{grid-template-columns:1fr}.field-2{grid-template-columns:1fr}}

/* =========================================================
   Pages de texte long : mentions, confidentialité
   ========================================================= */
.prose{max-width:74ch}
.prose h2{font-size:clamp(23px,2.4vw,30px);margin-top:52px}
.prose h3{font-size:19px;margin-top:32px}
.prose p,.prose li{color:var(--ink-secondary);font-size:16.5px}
.prose p{margin-top:16px}
.prose ul{margin:16px 0 0;padding-left:22px;display:grid;gap:9px}
.prose table{width:100%;border-collapse:collapse;margin-top:22px;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:top}
.prose th{font-weight:700;color:var(--ink);font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
.prose td{color:var(--ink-secondary)}
.prose strong{color:var(--ink)}

/* =========================================================
   Appel final
   ========================================================= */
.final{text-align:center}
.final h2{font-size:clamp(32px,4.4vw,56px);max-width:17ch;margin-inline:auto}
.final p{color:var(--ink-secondary);margin-top:20px;max-width:46ch;margin-inline:auto}
.final .actions{justify-content:center}

/* =========================================================
   Pied de page
   ========================================================= */
footer{border-top:1px solid var(--hairline);padding-block:56px 40px;font-size:14.5px;color:var(--ink-mute)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px}
.foot-top h4{font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.foot-top ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-top a{color:var(--ink-mute);font-weight:600}
.foot-top a:hover{color:var(--ink)}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{max-width:32ch;line-height:1.55}
.foot-bottom{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--hairline)}
.foot-legal{display:flex;flex-wrap:wrap;gap:20px}
.foot-legal a{color:var(--ink-mute);font-weight:600}
.foot-legal a:hover{color:var(--ink)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}

/* =========================================================
   Révélation au défilement
   ========================================================= */
.rise{opacity:0;transform:translateY(26px);transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
.rise.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .btn,.nav-cta,.pip,summary::after,.sheet li a,.sheet .sheet-cta,.start-card,.cross-card{transition:none}
}

/* Grille de liens croisés en trois colonnes, pour lister une famille de pages */
.cross-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.cross-grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cross-grid.three{grid-template-columns:1fr}}
.nav-drop.is-active>.nav-trigger{color:var(--ink)}
.nav-drop.is-active>.nav-trigger::after{
  content:"";position:absolute;left:0;right:14px;bottom:-7px;height:2px;border-radius:2px;background:var(--marker);
}
.nav-drop.is-active>.nav-trigger{position:relative}

/* Correctif de contraste : .hero p écrasait la couleur héritée du panneau violet,
   ce qui donnait du gris foncé sur violet. Ces deux règles reprennent la main. */
.hero .panel-sig{color:var(--on-primary)}
.hero .panel-dom{color:var(--marker)}

/* ---------- Glossaire ---------- */
.gloss{margin-top:44px;border-top:1px solid var(--hairline);max-width:78ch}
.gloss-item{padding:24px 0;border-bottom:1px solid var(--hairline);display:grid;grid-template-columns:minmax(190px,26%) 1fr;gap:28px;align-items:start}
.gloss-item dt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.gloss-item dd{margin:0;color:var(--ink-secondary);font-size:16.5px}
.gloss-item dd + dd{margin-top:10px}
.gloss-letter{padding-top:38px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--primary)}
@media(max-width:700px){.gloss-item{grid-template-columns:1fr;gap:8px}}

/* ---------- Plan du site ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:8px}
.plan-bloc h2{font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.plan-bloc ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.plan-bloc a{color:var(--ink-secondary);font-size:16px;font-weight:600}
.plan-bloc a:hover{color:var(--primary)}
.plan-bloc b{font-weight:700;color:var(--ink)}
.plan-bloc a:hover b{color:var(--primary)}
@media(max-width:900px){.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.plan-grid{grid-template-columns:1fr}}


/* ---------- Bandeau IA, au-dessus du pied de page ---------- */
.ia-band{background:var(--canvas-deep);color:var(--on-primary)}
.ia-band .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(22px,4vw,48px);align-items:center;padding-block:clamp(38px,5vw,60px)}
.ia-band .wrap>svg{width:58px;height:58px;flex:0 0 auto}
.ia-band .kicker{color:var(--marker)}
.ia-band h2{font-size:clamp(22px,2.4vw,30px);color:var(--on-primary);margin-top:10px;max-width:26ch}
.ia-band p{color:var(--on-dark-mute);font-size:16px;margin-top:10px;max-width:56ch}
@media(max-width:860px){
  .ia-band .wrap{grid-template-columns:1fr;gap:22px}
  .ia-band .wrap>svg{width:46px;height:46px}
  .ia-band .btn{width:100%;justify-content:center}
}

/* ---------- Tableau de correspondance activité / canal ---------- */
.matrix{margin-top:44px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix table{width:100%;min-width:620px;border-collapse:collapse;font-size:16px}
.matrix th{
  text-align:left;padding:0 18px 14px 0;border-bottom:1px solid var(--hairline-strong);
  font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);
}
.matrix td{padding:18px 18px 18px 0;border-bottom:1px solid var(--hairline);color:var(--ink-secondary);vertical-align:top}
.matrix tr td:first-child{color:var(--ink);width:30%}
.matrix tr:hover td{background:var(--canvas-soft)}

/* ---------- Code en ligne ---------- */
code{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.88em;padding:2px 6px;border-radius:var(--r-xs);
  background:var(--canvas-soft);color:var(--ink);
  border:1px solid var(--hairline);white-space:nowrap;
}
.arg-visual-in.violet code,.arg-visual-in.dark code,.on-dark code{
  background:rgba(255,255,255,.12);color:var(--on-primary);border-color:var(--hairline-on-dark);
}