/* ==========================================================================
   VirtuoseAI
   Agents IA sur-mesure pour la maitrise d'oeuvre et l'architecture

   Dials : DESIGN_VARIANCE 5 / MOTION_INTENSITY 3 / VISUAL_DENSITY 3
   Theme lock : sombre uniquement. Aucune variante claire.
   Accent unique : le violet de la marque, en ponctuation seulement.
   Rayons (regle documentee) : interactif = pilule, conteneur = 16px, interne = 10px
   ========================================================================== */

/* --- 01. POLICES AUTO-HEBERGEES (aucun appel a un tiers, conformite RGPD) --- */
@font-face{
  font-family:"Geist";
  src:url("../fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("../fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* --- 02. TOKENS --- */
:root{
  /* socle graphite froid, jamais de noir pur */
  --ink:#0b0c0f;
  --ink-3:#1b1f26;   /* bandeau de contraste, unique variation de fond */

  /* filets */
  --line:rgba(190,198,214,.14);
  --line-soft:rgba(190,198,214,.07);
  --line-strong:rgba(190,198,214,.22);

  /* texte */
  --paper:#eef0f3;
  --muted:#9aa3b2;
  --muted-2:#767e8d;

  /* accent unique : violet de marque, en ponctuation */
  --violet:#7c3cff;
  --violet-soft:rgba(124,60,255,.14);
  --violet-line:rgba(124,60,255,.34);

  /* typographie */
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* mesures */
  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --r:16px;      /* conteneurs */
  --r-in:10px;   /* elements internes */
  --bez:7px;     /* ecart du double lisere */
  --ease:cubic-bezier(.22,.8,.26,1);

  /* echelle z, pas de 9999 arbitraire */
  --z-decor:1;
  --z-content:2;
  --z-nav:50;
  --z-menu:60;
  --z-bar:70;

  color-scheme:dark;
}

/* --- 03. RESET ET BASE --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.975rem,.93rem + .22vw,1.0625rem);
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:4px;
}

::selection{background:var(--violet-soft);color:var(--paper)}

/* defilement bloque quand le menu mobile est ouvert */
body.is-locked{overflow:hidden}

.skip{
  position:absolute;left:-9999px;top:0;z-index:calc(var(--z-bar) + 1);
  padding:12px 20px;background:var(--paper);color:var(--ink);
  border-radius:0 0 var(--r-in) 0;font-weight:600;font-size:.9rem;
}
.skip:focus{left:0}

/* --- 04. TYPOGRAPHIE --- */
.h1,.h2,.h3{margin:0;font-weight:600;letter-spacing:-.035em;text-wrap:balance}

.h1{
  font-size:clamp(2.3rem,1.5rem + 3.7vw,3.95rem);
  line-height:1.03;
  letter-spacing:-.042em;
  font-weight:500;
}
/* emphase par la graisse dans la MEME famille, jamais par un serif injecte */
.h1 strong,.h2 strong{font-weight:700;letter-spacing:-.045em}

.h2{
  font-size:clamp(1.8rem,1.25rem + 2.3vw,2.8rem);
  line-height:1.07;
  font-weight:500;
}

.h3{
  font-size:clamp(1.0625rem,1rem + .3vw,1.2rem);
  line-height:1.28;
  letter-spacing:-.025em;
  font-weight:600;
}

.lead{
  margin:20px 0 0;
  max-width:62ch;
  font-size:clamp(1.02rem,.97rem + .28vw,1.16rem);
  line-height:1.62;
  color:var(--muted);
  font-weight:300;
}

p{margin:0 0 1em;max-width:65ch;text-wrap:pretty}
p:last-child{margin-bottom:0}

/* etiquette monospace : index de section, durees, libelles techniques */
.mono{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}

/* mention de donnee illustrative, sobre et discrete */
.note{
  display:block;margin-top:14px;
  font-size:.775rem;line-height:1.5;color:var(--muted-2);
  max-width:58ch;
}
/* --- 05. GABARIT --- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.section{
  position:relative;
  padding-block:clamp(84px,10vw,148px) clamp(92px,11vw,158px);
}
.section__head{max-width:72ch;margin-bottom:clamp(44px,5vw,72px)}
.section__head .lead{margin-top:18px}

/* --- 06. DECORS --- */
/* grain fixe : casse la platitude numerique sans surcharger */
.grain{
  position:fixed;inset:0;z-index:var(--z-decor);pointer-events:none;
  opacity:.03;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* filet de progression, pilote par la timeline de scroll CSS, zero JS */
.scroll-progress{display:none}
@supports (animation-timeline:scroll()){
  .scroll-progress{
    position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-bar);
    display:block;background:var(--line-soft);
  }
  .scroll-progress span{
    display:block;height:100%;width:100%;
    transform:scaleX(0);transform-origin:left center;
    background:var(--violet);
    animation:barGrow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes barGrow{to{transform:scaleX(1)}}
}

/* sentinelle observee par l'IntersectionObserver, remplace tout ecouteur scroll */
.nav-sentinel{position:absolute;top:0;left:0;width:1px;height:48px;pointer-events:none}

/* --- 07. NAVIGATION : ilot flottant en verre --- */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);pointer-events:none}
.nav__inner{
  pointer-events:auto;
  width:max-content;max-width:calc(100% - 32px);
  margin:18px auto 0;padding:9px 10px 9px 18px;
  display:flex;align-items:center;gap:28px;
  border-radius:999px;
  border:1px solid var(--line-soft);
  background:rgba(16,18,23,.62);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 46px -22px rgba(0,0,0,.92);
  transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.nav.is-stuck .nav__inner{
  background:rgba(11,12,15,.86);
  border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 54px -20px rgba(0,0,0,.96);
}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__mark{width:26px;height:26px;flex:0 0 auto}
.brand__name{font-size:1.02rem;font-weight:600;letter-spacing:-.03em;white-space:nowrap}

.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{
  position:relative;font-size:.875rem;color:var(--muted);
  transition:color .3s var(--ease);white-space:nowrap;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--violet);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{transform:scaleX(1)}
/* la section a l'ecran est signalee dans la navigation */
.nav__links a.is-current{color:var(--paper)}
.nav__links a.is-current::after{transform:scaleX(1);background:var(--violet)}
.mobile-menu a.is-current{color:var(--paper)}

.nav__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.burger{
  display:none;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line-soft);
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  background:rgba(255,255,255,.03);
}
.burger i{display:block;width:15px;height:1.5px;background:var(--paper);transition:transform .3s var(--ease),opacity .3s}
.burger.is-open i:nth-child(1){transform:translateY(2.75px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-2.75px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:82px 0 0;z-index:var(--z-menu);
  display:none;flex-direction:column;
  padding:26px var(--pad) 40px;
  background:rgba(11,12,15,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  overflow-y:auto;
}
.mobile-menu.is-open{display:flex}
/* le nav interieur est l'unique enfant flex : il doit empiler a son tour,
   sans quoi les liens se suivent en ligne comme du texte courant */
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu a:not(.btn){
  padding:15px 0;font-size:1.28rem;font-weight:500;letter-spacing:-.03em;
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu .btn{margin-top:26px;justify-content:center}

/* --- 08. BOUTONS --- */
/* Le CTA principal est en encre inversee (papier sur graphite), pas en violet plein :
   contraste maximal, et on evite le bouton violet a halo qui signe les templates IA. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:13px 22px;border-radius:999px;
  font-size:.925rem;font-weight:550;letter-spacing:-.015em;
  border:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),
             color .35s var(--ease),transform .18s var(--ease);
}
.btn--primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--primary:hover{background:#fff;border-color:#fff}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--line-strong)}
.btn--ghost:hover{background:rgba(255,255,255,.05);border-color:var(--paper)}
.btn--sm{padding:10px 17px;font-size:.855rem;gap:9px}
.btn--lg{padding:16px 30px;font-size:1rem}
/* retour tactile a la pression */
.btn:active{transform:scale(.978)}

/* bouton dans le bouton : pastille d'icone imbriquee */
.btn__ico{
  width:25px;height:25px;border-radius:50%;flex:0 0 auto;margin-right:-11px;
  display:grid;place-items:center;
  background:rgba(11,12,15,.12);
  border:1px solid rgba(11,12,15,.14);
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.btn__ico svg{width:11px;height:11px;transition:transform .4s var(--ease)}
.btn--ghost .btn__ico{background:var(--violet-soft);border-color:var(--violet-line)}
.btn:hover .btn__ico{transform:scale(1.07)}
.btn:hover .btn__ico svg{transform:translate(2px,-2px)}
.btn--sm .btn__ico{width:21px;height:21px;margin-right:-8px}
.btn--sm .btn__ico svg{width:10px;height:10px}
.btn--lg .btn__ico{width:28px;height:28px;margin-right:-14px}
.btn--lg .btn__ico svg{width:12px;height:12px}

/* --- 09. PASTILLE D'INTITULE (maximum 3 sur la page, regle de layout) --- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 22px;padding:6px 15px 6px 11px;
  border-radius:999px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03);
  font-family:var(--mono);font-size:.675rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--violet);box-shadow:0 0 8px rgba(124,60,255,.9);
}

/* --- 10. REVELATIONS (MOTION_INTENSITY 3 : fondu et montee courte, sans flou) --- */
.js .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.07s}
.js .reveal[data-delay="2"]{transition-delay:.14s}
.js .reveal[data-delay="3"]{transition-delay:.21s}
.js .reveal[data-delay="4"]{transition-delay:.28s}
.js .reveal[data-delay="5"]{transition-delay:.35s}

/* ==========================================================================
   BLOC 1 : HERO
   Famille de layout : split asymetrique 58/42
   ========================================================================== */
.hero{
  position:relative;
  min-height:100dvh;          /* jamais 100vh : evite le saut de la barre iOS */
  display:flex;align-items:center;
  padding-block:clamp(108px,13vh,142px) clamp(52px,6vh,78px);
  overflow:hidden;
}

/* trame de plan en fond, heritee de l'ancien visuel, recoloree */
.hero__grid-bg{
  position:absolute;inset:0;pointer-events:none;
  opacity:.42;
  mask-image:radial-gradient(118% 88% at 76% 30%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(118% 88% at 76% 30%,#000 0%,transparent 70%);
}
.hero__grid-bg svg{width:100%;height:100%}

.hero__inner{
  position:relative;z-index:var(--z-content);
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(32px,4.5vw,68px);align-items:center;width:100%;
}

.hero__kicker{
  display:block;margin:0 0 20px;max-width:48ch;
  font-family:var(--mono);font-size:.775rem;line-height:1.55;
  letter-spacing:.015em;color:var(--muted);
}
.hero .lead{max-width:54ch;margin-top:22px}
.hero__copy,.hero__aside{min-width:0}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;
  font-family:var(--mono);font-size:.695rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);
}
.hero__trust li{display:flex;align-items:center;gap:8px}
.hero__trust li::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--violet);flex:0 0 auto;
}

/* --- maquette de conversation : le message du hero, rendu concret --- */
.convo{
  position:relative;
  border-radius:calc(var(--r) + var(--bez));
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.016);
  padding:var(--bez);
}
.convo__inner{
  border-radius:var(--r);
  border:1px solid var(--line-soft);
  background:linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,.008));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
  overflow:hidden;
}
.convo__bar{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.022);
}
.convo__avatar{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--violet-soft);border:1px solid var(--violet-line);
}
.convo__avatar svg{width:14px;height:14px}
.convo__who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.convo__who b{font-size:.845rem;font-weight:600;letter-spacing:-.02em}
.convo__who span{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.convo__live{
  margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);
}
.convo__live i{width:5px;height:5px;border-radius:50%;background:var(--violet);flex:0 0 auto}

.convo__thread{display:flex;flex-direction:column;gap:11px;padding:17px 15px 19px}

.bubble{
  max-width:88%;padding:12px 14px;border-radius:var(--r-in);
  font-size:.855rem;line-height:1.55;
}
.bubble--out{
  align-self:flex-end;
  background:rgba(255,255,255,.075);
  border:1px solid var(--line-soft);
  border-bottom-right-radius:4px;
}
.bubble--in{
  align-self:flex-start;
  background:rgba(124,60,255,.085);
  border:1px solid var(--violet-line);
  border-bottom-left-radius:4px;
}
.bubble p{margin:0;max-width:none}
.bubble__time{
  display:block;margin-top:6px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  color:var(--muted-2);text-align:right;font-variant-numeric:tabular-nums;
}

/* devis chiffre dans la bulle de reponse */
.quote-lines{margin:9px 0 0;border-top:1px solid var(--violet-line);padding-top:9px}
.quote-lines li{
  display:flex;justify-content:space-between;gap:16px;
  padding:3.5px 0;font-size:.785rem;color:var(--muted);
}
.quote-lines li b{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:500;color:var(--paper);white-space:nowrap;
}
.quote-lines li.is-total{
  margin-top:7px;padding-top:9px;border-top:1px solid var(--violet-line);
  color:var(--paper);font-weight:600;font-size:.845rem;
}
.quote-lines li.is-total b{font-weight:700}

/* ==========================================================================
   BLOC 2 : LE PROBLEME
   Famille de layout : liste editoriale en deux colonnes decalees
   ========================================================================== */
.pains{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(34px,5vw,80px);
}
/* le decalage vertical de la colonne de droite casse la symetrie sans chaos */
.pains__col:last-child{padding-top:clamp(28px,5vw,72px)}

.pain{
  display:grid;grid-template-columns:auto 1fr;
  gap:16px;padding:22px 0;
  border-top:1px solid var(--line-soft);
  transition:border-color .4s var(--ease);
}
.pain:hover{border-top-color:var(--line-strong)}
.pain__ico{
  width:30px;height:30px;border-radius:var(--r-in);flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.028);
  color:var(--muted);
}
.pain__ico svg{width:15px;height:15px}
.pain__txt{min-width:0}
.pain__n{
  display:block;margin-bottom:5px;
  font-family:var(--mono);font-size:.655rem;letter-spacing:.14em;
  color:var(--violet);font-variant-numeric:tabular-nums;
}
.pain__txt p{margin:0;font-size:.95rem;line-height:1.56;color:var(--muted);max-width:44ch}

.pains__close{
  margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--line);
  max-width:46ch;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem);
  line-height:1.34;letter-spacing:-.03em;font-weight:500;color:var(--paper);
}

/* ==========================================================================
   BLOC 3 : POURQUOI LES SOLUTIONS CLASSIQUES NE MARCHENT PAS
   Famille de layout : comparatif en lignes empilees a filets, aucune carte
   ========================================================================== */
.compare{border-top:1px solid var(--line)}
.compare__row{
  display:grid;grid-template-columns:minmax(200px,.3fr) 1fr;
  gap:clamp(18px,3.5vw,54px);
  padding:clamp(26px,3.5vw,40px) 0;
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.compare__row:hover{background:rgba(255,255,255,.014)}
.compare__label{display:flex;flex-direction:column;gap:10px}
.compare__label .mono{color:var(--violet)}
.compare__label h3{color:var(--paper)}
.compare__body p{margin:0;color:var(--muted);max-width:68ch}

/* ==========================================================================
   BLOC 4 : LA SOLUTION VIRTUOSEAI
   Famille de layout : escalier vertical, grands chiffres, aucun filet
   ========================================================================== */
.pillars{display:flex;flex-direction:column;gap:clamp(44px,6vw,84px)}
.pillar{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(20px,3vw,44px);align-items:start;
}
/* l'indentation progressive cree l'escalier */
.pillar:nth-child(2){margin-left:clamp(0px,4vw,72px)}
.pillar:nth-child(3){margin-left:clamp(0px,8vw,144px)}

.pillar__n{
  font-family:var(--mono);
  font-size:clamp(2.4rem,1.6rem + 3.2vw,4.1rem);
  line-height:.88;font-weight:300;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--violet-line);
  font-variant-numeric:tabular-nums;
}
.pillar__body{max-width:56ch}
.pillar__ico{
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;
  border-radius:var(--r-in);border:1px solid var(--line-soft);
  background:rgba(255,255,255,.028);color:var(--muted);
}
.pillar__ico svg{width:18px;height:18px}
.pillar__body h3{
  font-size:clamp(1.28rem,1.1rem + .8vw,1.72rem);
  letter-spacing:-.035em;font-weight:600;margin-bottom:12px;
}
.pillar__body p{color:var(--muted);margin:0}

.pillar__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.pillar__chips span{
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.028);
  font-family:var(--mono);font-size:.655rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}

/* ==========================================================================
   BLOC 5 : LES AUTOMATISATIONS TYPES
   Famille de layout : grille bento de 6 cellules, 3 / 2 / 1
   ========================================================================== */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}

/* double lisere : coque externe + coeur interne concentrique */
.agent{
  position:relative;
  padding:var(--bez);
  border-radius:calc(var(--r) + var(--bez));
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.016);
  transition:transform .45s var(--ease),border-color .4s var(--ease);
}
.agent:hover{transform:translateY(-3px);border-color:var(--line)}
.agent__in{
  height:100%;
  display:flex;flex-direction:column;
  padding:23px 21px 25px;
  border-radius:var(--r);
  border:1px solid var(--line-soft);
  background:linear-gradient(170deg,rgba(255,255,255,.046),rgba(255,255,255,.008));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
}
.agent__head{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.agent__ico{
  width:32px;height:32px;border-radius:var(--r-in);flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--violet-line);background:var(--violet-soft);
  color:var(--paper);
}
.agent__ico svg{width:16px;height:16px}
.agent__n{
  margin-left:auto;font-family:var(--mono);font-size:.715rem;
  letter-spacing:.1em;color:var(--muted-2);font-variant-numeric:tabular-nums;
}
.agent h3{margin-bottom:17px}

.agent__fact{padding-top:13px;margin-top:13px;border-top:1px solid var(--line-soft)}
.agent__fact:first-of-type{border-top:0;padding-top:0;margin-top:0}
.agent__fact dt{
  font-family:var(--mono);font-size:.645rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;
}
.agent__fact dd{font-size:.865rem;line-height:1.54;color:var(--muted)}
.agent__fact--gain{margin-top:auto}
.agent__fact--gain dt{color:var(--violet)}
.agent__fact--gain dd{color:var(--paper);font-weight:500}

.agents__close{
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3.5vw,44px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  justify-content:space-between;
}
.agents__close p{
  margin:0;max-width:52ch;
  font-size:clamp(1.05rem,.98rem + .4vw,1.28rem);
  line-height:1.42;letter-spacing:-.025em;color:var(--paper);font-weight:500;
}

/* ==========================================================================
   BLOC 6 : LA METHODE
   Famille de layout : frise horizontale a quatre jalons
   ========================================================================== */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
/* la ligne de liaison passe derriere les jalons */
.timeline::before{
  content:"";position:absolute;top:17px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,var(--violet-line),var(--line-soft));
}
.step{position:relative}
.step__dot{
  position:relative;z-index:var(--z-content);
  width:35px;height:35px;border-radius:50%;margin-bottom:20px;
  display:grid;place-items:center;
  background:var(--ink);
  border:1px solid var(--violet-line);
  font-family:var(--mono);font-size:.755rem;font-weight:500;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
.step__when{
  display:block;margin-bottom:9px;
  font-family:var(--mono);font-size:.655rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet);
}
.step h3{margin-bottom:11px}
.step p{margin:0;font-size:.88rem;line-height:1.56;color:var(--muted);max-width:36ch}

/* ==========================================================================
   BLOC 7 : CE QUE VOUS RECUPEREZ
   Famille de layout : bandeau pleine largeur a separateurs verticaux
   ========================================================================== */
.band{background:var(--ink-3);border-block:1px solid var(--line-soft)}
.band .section{padding-block:clamp(72px,8.5vw,116px)}

.gains{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(36px,4.5vw,58px);
}
.gain{
  padding:0 clamp(18px,2.4vw,34px);
  border-left:1px solid var(--line-soft);
}
.gain:first-child{padding-left:0;border-left:0}
.gain:last-child{padding-right:0}
.gain__key{
  display:block;margin-bottom:13px;
  font-family:var(--mono);font-size:.665rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);
}
.gain__fig{
  display:block;margin-bottom:11px;
  font-family:var(--mono);
  font-size:clamp(1.45rem,1.2rem + 1vw,2rem);
  line-height:1;letter-spacing:-.045em;font-weight:400;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
.gain p{margin:0;font-size:.865rem;line-height:1.58;color:var(--muted);max-width:34ch}
/* la mention porte sur les quatre chiffres : filet pleine largeur pour
   qu'elle ne se lise pas comme la suite du premier paragraphe */
.band .note{
  margin-top:clamp(26px,3vw,38px);padding-top:16px;
  border-top:1px solid var(--line-soft);max-width:none;
}

/* ==========================================================================
   BLOC 8 : FAQ
   Famille de layout : double colonne, tout ouvert, aucun accordeon
   ========================================================================== */
.faq{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(34px,5vw,80px);
}
.faq__item{padding:24px 0;border-top:1px solid var(--line-soft)}
.faq__item h3{
  display:flex;gap:11px;align-items:baseline;
  margin-bottom:11px;color:var(--paper);
}
.faq__item h3::before{
  content:"Q";flex:0 0 auto;
  font-family:var(--mono);font-size:.655rem;letter-spacing:.1em;
  color:var(--violet);
}
.faq__item p{margin:0 0 0 22px;font-size:.89rem;line-height:1.6;color:var(--muted);max-width:52ch}

/* ==========================================================================
   BLOC 9 : CTA FINAL
   Famille de layout : bandeau centre
   ========================================================================== */
.cta{position:relative;text-align:center;overflow:hidden}
.cta__halo{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:min(740px,116%);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,var(--violet-soft) 0%,transparent 66%);
  opacity:.8;
}
.cta__inner{position:relative;z-index:var(--z-content);max-width:60ch;margin-inline:auto}
.cta .lead{margin-inline:auto}
.cta .btn{margin-top:32px}

.reassure{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  margin-top:26px;
}
.reassure li{
  padding:6px 15px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.028);
  font-family:var(--mono);font-size:.665rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}

/* --- FOOTER --- */
.footer{border-top:1px solid var(--line-soft);padding-block:clamp(52px,6vw,80px) 30px}
.footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
}
.footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer__brand svg{width:26px;height:26px}
.footer__brand b{font-size:1.02rem;font-weight:600;letter-spacing:-.03em}
.footer__pitch{font-size:.875rem;color:var(--muted);max-width:38ch;margin:0}

.footer__col h2{
  margin:0 0 15px;
  font-family:var(--mono);font-size:.665rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.footer__col li{margin-bottom:9px}
.footer__col a,.footer__col span{font-size:.885rem;color:var(--muted);transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--paper)}
.footer__id{
  font-family:var(--mono);font-size:.715rem;letter-spacing:.04em;
  color:var(--muted-2);font-variant-numeric:tabular-nums;
}
.footer__base{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  margin-top:clamp(40px,5vw,64px);padding-top:24px;
  border-top:1px solid var(--line-soft);
  font-size:.785rem;color:var(--muted-2);
}
.footer__base p{margin:0;max-width:none}
.footer__base a{transition:color .3s var(--ease)}
.footer__base a:hover{color:var(--paper)}

/* --- PAGE 404 : meme gabarit que la prose, centre --- */
.notfound{
  min-height:100dvh;display:flex;align-items:center;
  padding-block:clamp(118px,14vh,156px) clamp(52px,7vh,84px);
}
.notfound__code{
  display:block;margin-bottom:22px;
  font-family:var(--mono);font-size:clamp(3.4rem,2.4rem + 4vw,5.6rem);
  line-height:1;letter-spacing:-.05em;color:var(--violet);
  font-variant-numeric:tabular-nums;
}
.notfound p.lead{margin-top:18px}
.notfound__links{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;
  font-size:.885rem;color:var(--muted);
}
.notfound__links a{
  border-bottom:1px solid var(--violet-line);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.notfound__links a:hover{color:var(--paper);border-color:var(--violet)}

/* --- PAGES LEGALES : gabarit de prose --- */
.prose{padding-block:clamp(126px,15vh,172px) clamp(72px,9vw,116px)}
.prose__back{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:30px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  transition:color .3s var(--ease);
}
.prose__back:hover{color:var(--paper)}
.prose__back svg{width:13px;height:13px}
.prose__body{max-width:68ch;margin-top:38px}
.prose__body h2{
  margin:46px 0 14px;
  font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);
  letter-spacing:-.03em;font-weight:600;
}
.prose__body h2:first-child{margin-top:0}
.prose__body h3{margin:26px 0 10px;font-size:1.02rem;font-weight:600}
.prose__body p,.prose__body li{color:var(--muted);font-size:.93rem;line-height:1.68}
.prose__body ul{margin:0 0 1em;padding-left:20px;list-style:disc}
.prose__body li{margin-bottom:7px}
.prose__body a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--violet-line)}
.prose__body a:hover{text-decoration-color:var(--violet)}
.prose__body dt{font-weight:600;color:var(--paper);margin-top:14px;font-size:.93rem}
.prose__body dd{margin:4px 0 0;color:var(--muted);font-size:.93rem;line-height:1.68}

/* encart a relire : signale honnetement ce qui reste a valider */
.todo-box{
  margin:34px 0;padding:18px 20px;
  border:1px dashed var(--violet-line);border-radius:var(--r-in);
  background:var(--violet-soft);
}
.todo-box p{margin:0;font-size:.855rem;line-height:1.6;color:var(--paper);max-width:none}
.todo-box b{font-weight:600}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav__links{display:none}
  .burger{display:flex}
  .hero{min-height:0;padding-block:clamp(118px,15vh,148px) clamp(62px,8vh,90px)}
  .hero__inner{grid-template-columns:1fr;gap:clamp(38px,6vw,54px)}
  .hero .lead,.hero__kicker{max-width:60ch}
  .convo{max-width:520px}
  .agents{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr);row-gap:clamp(34px,5vw,52px)}
  .timeline::before{display:none}
  .gains{grid-template-columns:repeat(2,1fr);row-gap:clamp(32px,4vw,48px)}
  .gain:nth-child(3){padding-left:0;border-left:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand-col{grid-column:1 / -1}
}

@media (max-width:860px){
  .pains{grid-template-columns:1fr}
  .pains__col:last-child{padding-top:0}
  .faq{grid-template-columns:1fr}
  .compare__row{grid-template-columns:1fr;gap:14px}
  .pillar{grid-template-columns:1fr;gap:14px}
  .pillar:nth-child(2),.pillar:nth-child(3){margin-left:0}
  .pillar__n{font-size:clamp(2rem,5vw,2.6rem)}
  .agents__close{flex-direction:column;align-items:flex-start;gap:20px}
}

@media (max-width:760px){
  .nav__actions > .btn{display:none}
}

@media (max-width:620px){
  :root{--r:14px;--r-in:9px;--bez:5px}
  .nav__inner{width:calc(100% - 26px);justify-content:space-between;gap:12px;margin-top:13px;padding-left:15px}
  .mobile-menu{inset:76px 0 0}
  .agents{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .gains{grid-template-columns:1fr}
  .gain{padding:26px 0 0;border-left:0;border-top:1px solid var(--line-soft)}
  .gain:first-child{border-top:0;padding-top:0}
  .footer__grid{grid-template-columns:1fr}
  .footer__base{flex-direction:column;gap:10px}
  .bubble{max-width:94%}
  .hero__cta .btn,.cta .btn{width:100%}
}

@media (max-width:400px){
  .nav__inner{padding-left:13px;padding-right:7px;gap:8px}
  .brand__name{font-size:.95rem}
  .quote-lines li{font-size:.74rem}
}

/* ==========================================================================
   MOUVEMENT REDUIT : respecte la preference systeme, sans rien casser
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .scroll-progress{display:none}
  .btn:active{transform:none}
  .agent:hover{transform:none}
}