/* =========================================================
   POLICES — hébergées en local
   Clash Display et Satoshi : ITF Free Font License (Fontshare),
   auto-hébergement autorisé. JetBrains Mono : SIL OFL 1.1.
   Servies depuis le même domaine : pas de connexion tierce, pas de
   requête DNS supplémentaire, et surtout les fichiers arrivent avant
   la première peinture — c'est ce qui met le CLS à zéro.
   ========================================================= */
@font-face{ font-family:"Clash Display"; src:url("fonts/clash-display-600.woff2") format("woff2");
            font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Clash Display"; src:url("fonts/clash-display-700.woff2") format("woff2");
            font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Satoshi"; src:url("fonts/satoshi-400.woff2") format("woff2");
            font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Satoshi"; src:url("fonts/satoshi-500.woff2") format("woff2");
            font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Satoshi"; src:url("fonts/satoshi-700.woff2") format("woff2");
            font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("fonts/jetbrains-mono-500.woff2") format("woff2");
            font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("fonts/jetbrains-mono-700.woff2") format("woff2");
            font-weight:700; font-style:normal; font-display:swap; }

/* =========================================================
   Opti'biz — landing page
   HTML / CSS / JS vanilla. Aucune dépendance.
   ========================================================= */

:root{
  --ink-900:#08131E;
  --ink-800:#0E1F2E;
  --ink-700:#16324A;
  /* Aucun blanc pur sur les grandes surfaces : le contraste avec le bleu
     nuit était trop dur. Deux crèmes proches, l'une pour le fond de
     section, l'autre — un cran plus claire — pour les cartes posées
     dessus. La carte se détache sans avoir besoin d'un trait franc. */
  --paper:#F1EFE7;
  --chalk:#FAF8F2;
  --slate:#8A9AA8;
  --stone:#55636E;
  /* Azur du logo. Trois valeurs, parce qu'une seule ne peut pas tenir
     les trois usages :
       --signal    fond de bouton et texte sur fond sombre  (12,6:1 sur --ink-900)
       --signal-h  survol du bouton : reste clair, le texte sombre reste lisible
       --signal-d  texte, icônes et filets sur fond clair    (5,4:1 sur --paper)
     L'azur sur du crème ne fait que 1,3:1 : ne jamais l'utiliser en
     texte sur fond clair, toujours passer par --signal-d. */
  --signal:#9FDCFC;
  --signal-h:#7FCEF8;
  --signal-d:#146893;
  --green:#17835A;
  /* le vert de base ne fait que 4,46:1 sur le crème : variante foncée */
  --green-d:#126B4A;
  --red:#C0483C;

  --line-dark:rgba(255,255,255,.08);
  --line-light:rgba(8,19,30,.10);
  --glass:rgba(255,255,255,.035);

  --sh:0 1px 2px rgba(8,19,30,.06), 0 16px 40px -12px rgba(8,19,30,.22);
  --sh-lg:0 2px 4px rgba(8,19,30,.08), 0 32px 70px -20px rgba(8,19,30,.34);

  --r-card:20px;
  --r-btn:14px;
  --r-pill:999px;

  --pad:24px;
  --gap-s:80px;

  /* Arial en 3e position, pas system-ui : `Clash fallback` est un @font-face,
     il lui faut un tick pour se résoudre, et le tout premier rendu partait
     donc sur system-ui — plus large que Clash Display, donc une ligne de
     titre en plus, donc un décalage. Arial est installée, disponible tout
     de suite, et plus étroite. */
  --f-title:"Clash Display","Clash fallback",Arial,Helvetica,sans-serif;
  --f-body:"Satoshi","Satoshi fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Polices de repli calées sur la chasse réelle des woff2 Fontshare.
   Valeurs mesurées au navigateur, pas estimées : sans ça le titre
   passe de 5 à 7 lignes quand la police arrive, et tout le hero
   se décale — c'était la totalité du CLS. */
@font-face{
  font-family:"Clash fallback";
  src:local("Arial"),local("Helvetica");
  size-adjust:114%;
}
@font-face{
  font-family:"Satoshi fallback";
  src:local("Arial"),local("Helvetica");
  size-adjust:98.2%;
}

@media (min-width:900px){
  :root{ --pad:40px; --gap-s:140px; }
}

*,*::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(--paper);
  color:var(--ink-900);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--f-title); font-weight:600; margin:0; text-wrap:balance; }
/* le crénage négatif rétrécit aussi l'espace mot : on le compense */
h1{ font-size:clamp(2.75rem,6.5vw,4.5rem); line-height:.95; letter-spacing:-.03em; word-spacing:.12em; font-weight:700; }
h2{ font-size:clamp(2rem,4vw,3.125rem); line-height:1.05; letter-spacing:-.02em; word-spacing:.08em; }
h3{ font-size:1.375rem; line-height:1.2; letter-spacing:-.01em; word-spacing:.04em; }
p{ margin:0; }

.eyebrow{
  font-size:.8125rem; text-transform:uppercase; letter-spacing:.12em;
  font-weight:700; font-family:var(--f-body);
}

a{ color:inherit; }

::selection{ background:var(--signal); color:var(--ink-900); }

/* ---------- accessibilité ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--ink-900);
  padding:14px 20px; border-radius:0 0 var(--r-btn) 0; font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--signal-d);
  outline-offset:3px;
  border-radius:4px;
}
/* fonds sombres : l azur ressort, le bleu foncé non */
.s--ink :focus-visible,
.hero :focus-visible,
.subhero :focus-visible,
.nav :focus-visible,
.foot :focus-visible,
.final :focus-visible,
.nextcard:focus-visible{ outline-color:var(--signal); }

/* =========================================================
   LAYOUT
   ========================================================= */
.wrap{ width:100%; max-width:1160px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--nar{ max-width:1000px; }

.s{ position:relative; padding-block:var(--gap-s); }
.s--tight{ padding-top:0; }

.s--paper{ background:var(--paper); color:var(--ink-900); }
/* Second ton clair, un cran plus lumineux. Sert quand deux sections claires
   se suivent : la césure se voit sans qu'on ait à remettre du bleu nuit. */
.s--chalk{ background:var(--chalk); color:var(--ink-900); }
.s--chalk .shead .eyebrow{ color:var(--stone); }
.s--chalk .factor{ background:var(--paper); }
.s--ink{
  background:var(--ink-900); color:#E8EEF3;
  background-image:radial-gradient(90% 60% at 50% 0%, rgba(22,50,74,.55), transparent 70%);
}
.s--ink h2, .s--ink h3{ color:#fff; }
.s--ink .eyebrow{ color:var(--slate); }

/* grain très léger sur les fonds sombres */
.s--ink::before, .hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- en-têtes de section ---------- */
/* Mesure exprimée en px : `ch` se calcule sur la police du parent (17 px)
   et donnait un titre bien trop étroit pour un h2 de 50 px. */
.shead{ margin-bottom:56px; max-width:620px; }
.shead .eyebrow{ color:var(--stone); margin-bottom:14px; display:block; }
/* Même spécificité que `.shead .eyebrow`, mais déclarée après : sans ça
   l'eyebrow des sections sombres retombait en --stone, à 3,0:1. */
.s--ink .shead .eyebrow, .s--ink .shead__aside{ color:var(--slate); }
.shead--mid{ max-width:740px; }
.shead--row{
  max-width:none; display:flex; flex-wrap:wrap; gap:24px 48px;
  align-items:flex-end; justify-content:space-between;
}
.shead__aside{
  color:var(--stone); max-width:34ch; font-size:1rem;
  padding-bottom:6px;
}
@media (min-width:900px){ .shead{ margin-bottom:72px; } }

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 24px;
  border-radius:var(--r-btn); border:1px solid transparent;
  font-family:var(--f-body); font-size:1rem; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease,
             color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn svg{ flex:none; }
.btn--sm{ min-height:44px; padding:0 18px; font-size:.9375rem; }
.btn--lg{ min-height:60px; padding:0 30px; font-size:1.0625rem; }
.btn--full{ width:100%; }

.btn--signal{
  background:var(--signal); color:var(--ink-900);
  box-shadow:0 1px 2px rgba(8,19,30,.10), 0 14px 30px -16px rgba(159,220,252,.45);
}
.btn--sm.btn--signal{ box-shadow:0 1px 2px rgba(8,19,30,.14); }
.btn--signal:hover{ background:var(--signal-h); transform:translateY(-1px); }
.btn--signal:active{ transform:translateY(0); }

.btn--ghost{
  background:rgba(255,255,255,.04); color:#fff;
  border-color:rgba(255,255,255,.22);
}
.btn--ghost:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.40); }

.btn--outline{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.20);
}
.btn--outline:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.38); }

/* Cible tactile de 44 px obtenue par un calque invisible : la zone
   cliquable grandit sans que le soulignement s'éloigne du texte. */
.tap{ position:relative; }
.tap::after{
  content:""; position:absolute; left:-6px; right:-6px;
  top:50%; height:44px; transform:translateY(-50%);
}

/* liens fléchés */
/* `flex-end` : si le libellé passe sur deux lignes, la flèche reste
   collée à la dernière ligne au lieu de flotter au milieu. */
.link{
  display:inline-flex; align-items:flex-end; gap:7px;
  font-weight:700; font-size:.9375rem; text-decoration:none;
  color:var(--ink-900); position:relative;
  border-bottom:1.5px solid var(--line-light);
  padding-bottom:3px; min-height:24px;
  transition:border-color .15s ease, color .15s ease, gap .15s ease;
}
.link::after{
  content:""; position:absolute; left:-6px; right:-6px;
  top:50%; height:44px; transform:translateY(-50%);
}
.link:hover{ border-color:var(--ink-900); gap:11px; }
.link--lg{ font-size:1.0625rem; margin-top:12px; }
/* remonte la flèche du demi-interligne, pour la caler sur la ligne de base */
.link svg{ flex:none; margin-bottom:4px; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav__in{
  width:100%; max-width:1160px; margin-inline:auto;
  padding:14px var(--pad);
  display:flex; align-items:center; gap:20px;
}
.nav.is-stuck{
  background:rgba(8,19,30,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line-dark);
}

.logo{
  display:inline-flex; align-items:center; gap:9px; position:relative;
  min-height:44px;
  text-decoration:none; color:#fff;
  font-family:var(--f-title); font-weight:700; font-size:1.25rem;
  letter-spacing:-.02em; word-spacing:.04em; margin-right:auto;
}
/* L'emblème (repère + couronne d'étoiles) en version claire, posé directement
   sur le fond nuit : plus de pastille, le logo se suffit. Le mot « Opti'biz »
   reste du texte à côté — dans le logo d'origine il ne ferait que 6 px de haut
   à cette échelle et serait illisible. Le logo complet est au pied de page,
   là où il a la place de se lire. */
.logo__emb{ height:34px; width:auto; display:block; flex:none; }
@media (min-width:900px){ .logo__emb{ height:38px; } }

.logo__full{ height:96px; width:auto; display:block; }
@media (min-width:900px){ .logo__full{ height:118px; } }
.logo__ap{ color:var(--signal); }

.nav__links{ display:none; gap:30px; }
.nav__links a{
  text-decoration:none; color:#C6D2DB; font-size:.9375rem; font-weight:500;
  padding:10px 0; transition:color .15s ease;
}
.nav__links a:hover{ color:#fff; }
@media (min-width:860px){ .nav__links{ display:flex; } }

/* =========================================================
   HERO
   ========================================================= */
/* Le halo est peint sur la section elle-même. En élément séparé et
   dimensionné en %, il couvrait tout l'écran et transformait le
   moindre changement de hauteur du hero en gros score de CLS. */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink-900); color:#E8EEF3;
  background-image:
    radial-gradient(42% 46% at 18% 32%, rgba(159,220,252,.12), transparent 68%),
    radial-gradient(46% 42% at 82% 22%, rgba(23,131,90,.16), transparent 70%);
  padding-top:120px; padding-bottom:88px;
}
@media (min-width:900px){ .hero{ padding-top:168px; padding-bottom:130px; } }

.hero__grid{
  position:relative; z-index:1;
  width:100%; max-width:1160px; margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:64px;
}
@media (min-width:1000px){
  .hero__grid{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    align-items:center; gap:40px;
  }
}

/* ~ la moitié de la largeur du conteneur (1160 px) sur desktop */
.hero h1{ color:#fff; margin:0; max-width:700px; }
/* Le titre tient un nombre de lignes connu à chaque palier. On réserve la
   hauteur en em (l'interligne vaut .95) pour que rien ne bouge pendant le
   chargement de la police. À remesurer si le texte du h1 change. */
.hero h1{ min-height:5.7em; }                              /* 6 lignes */
@media (min-width:390px){ .hero h1{ min-height:4.75em; } } /* 5 lignes */
@media (min-width:412px){ .hero h1{ min-height:3.8em; } }  /* 4 lignes */
@media (min-width:600px){ .hero h1{ min-height:2.85em; } } /* 3 lignes */
@media (min-width:1000px){ .hero h1{ min-height:3.8em; } } /* 4 lignes */
.hero h1 em{ font-style:normal; color:var(--signal); }

/* « VOUS » dans le sous-titre : même accent que le titre, sans italique */
.hero__sub em{ font-style:normal; font-weight:700; color:var(--signal); }

.hero__sub{
  margin-top:26px; max-width:38ch;
  font-size:1.1875rem; line-height:1.55; color:#B7C5D0;
}
@media (min-width:900px){ .hero__sub{ font-size:1.3125rem; } }
/* la carte « pack local » remonte dans la colonne de texte : le
   paragraphe et la mention doivent s.arrêter avant elle */
@media (min-width:1000px){ .hero__sub, .hero__note{ max-width:520px; } }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero__note{
  margin-top:20px; font-size:.875rem; color:var(--slate); letter-spacing:.01em;
}

/* ---------- visuel : téléphones + carte pack local ---------- */
.hero__vis{ position:relative; }
@media (min-width:1000px){
  /* léger débord à droite, sans amputer les maquettes */
  .hero__vis{ margin-right:calc(var(--pad) * -1 - 8px); }
}

.phones{ position:relative; height:392px; }
@media (min-width:640px){ .phones{ height:440px; } }
@media (min-width:1000px){ .phones{ height:500px; } }

.phone{
  position:absolute; margin:0;
  width:196px; border-radius:30px; padding:7px;
  background:linear-gradient(160deg,#26384a,#101d2a);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--sh-lg);
}
.phone img{
  width:100%; border-radius:24px; display:block;
  aspect-ratio:390/844; object-fit:cover; object-position:top center;
  background:var(--ink-800);
}
.phone::after{
  content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:56px; height:5px; border-radius:99px; background:rgba(0,0,0,.5);
}
.phone--front{
  top:78px; right:0; transform:rotate(4deg); z-index:2;
}
@media (min-width:640px){
  .phone{ width:224px; }
  .phone--front{ right:4%; }
}
@media (min-width:1000px){
  .phone{ width:250px; }
  .phone--front{ top:36px; right:-6%; }
}

/* La carte « pack local » et sa mention légale voyagent ensemble :
   la mention reste dans le flux, plus de collision avec les maquettes. */
.packwrap{
  position:relative; z-index:3;
  width:min(330px,100%);
  margin:-104px 0 0;
}
@media (min-width:1000px){
  .packwrap{ position:absolute; left:-96px; bottom:-8px; width:302px; margin:0; }
}

.packcard{
  background:rgba(11,25,38,.94);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px; padding:14px;
  box-shadow:var(--sh-lg);
}

.packcard__hd{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin-bottom:12px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark);
  color:var(--slate); font-size:.8125rem;
}
.packcard__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.packcard__list li{
  display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px;
  padding:9px 11px; border-radius:11px;
  border:1px solid transparent; font-size:.8125rem; color:#AEBECB;
}
.packcard__list .rk{
  font-family:var(--f-mono); font-size:.75rem; font-weight:700;
  color:var(--slate); text-align:center;
}
.packcard__list .nm{ font-weight:500; }
.packcard__list .st{ font-family:var(--f-mono); font-size:.6875rem; color:var(--slate); }
.packcard__list li:first-child{
  background:rgba(159,220,252,.10); border-color:rgba(159,220,252,.34);
  color:#fff;
}
.packcard__list li:first-child .rk,
.packcard__list li:first-child .st{ color:var(--signal); }
.packcard__list li:first-child .nm{ font-weight:700; }

.packcard__legal{
  margin-top:10px; padding-left:2px;
  font-size:.75rem; line-height:1.4; color:var(--slate); opacity:.9;
}

/* =========================================================
   RÉALISATIONS
   ========================================================= */
/* ---------- cartes de résultat de fiche Google ---------- */
.results{ display:grid; gap:24px; }
@media (min-width:880px){ .results{ grid-template-columns:1fr 1fr; gap:28px; } }

.result{
  display:flex; flex-direction:column;
  background:var(--chalk); border:1px solid var(--line-light);
  border-radius:var(--r-card); padding:30px 28px 32px;
  box-shadow:var(--sh);
  transition:transform .2s ease, box-shadow .2s ease;
}
.result:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
@media (min-width:900px){ .result{ padding:36px 34px 38px; } }

.result__meta{ margin-top:8px; color:var(--stone); font-size:.9375rem; }

/* Le chiffre porte la carte : il doit se lire avant le nom du client. */
.result__big{
  margin:26px 0; padding:22px 0;
  border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
  display:flex; flex-direction:column; gap:6px;
}
.result__n{
  font-family:var(--f-mono); font-weight:700;
  font-size:clamp(3rem,7vw,4.25rem); line-height:.9;
  letter-spacing:-.04em; color:var(--ink-900);
}
.result__n sup{ font-size:.42em; vertical-align:super; letter-spacing:0; }
.result__l{ font-size:.9375rem; color:var(--stone); line-height:1.45; }

.result__pts{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.result__pts li{
  position:relative; padding-left:26px;
  font-size:1rem; line-height:1.5; color:var(--stone);
}
.result__pts b{ color:var(--ink-900); }
.result__pts sup{ font-size:.7em; }
.result__pts li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:2px;
  background:var(--signal-d); border:1px solid rgba(8,19,30,.14);
}

/* ---------- carte de site, seule ---------- */
.work{
  margin-top:24px; display:grid;
  background:var(--chalk); border:1px solid var(--line-light);
  border-radius:var(--r-card); overflow:hidden;
  box-shadow:var(--sh);
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (min-width:880px){
  .work--solo{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch; margin-top:28px; }
}
.work:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }

/* Les captures sont au format téléphone : on les présente dans une
   maquette qui déborde par le bas, plutôt que de les recadrer en paysage. */
.work__shot{
  display:flex; justify-content:center; align-items:flex-start;
  position:relative; overflow:hidden; height:280px;
  padding-top:34px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(165deg,var(--ink-800),var(--ink-900));
  border-bottom:1px solid var(--line-light);
}
@media (min-width:880px){
  .work--solo .work__shot{ height:auto; min-height:340px; border-bottom:0; border-right:1px solid var(--line-light); }
}
/* hauteur volontairement > au cadre : la maquette sort par le bas,
   qui est rogné par l'overflow du parent. Le haut reste intact. */
.work__frame{
  width:186px; height:430px; flex:none;
  border-radius:26px; padding:6px;
  background:linear-gradient(160deg,#2b3d50,#15242f);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 -2px 4px rgba(0,0,0,.2), 0 24px 50px -18px rgba(0,0,0,.7);
  transition:transform .4s ease;
}
@media (min-width:900px){ .work--solo .work__frame{ width:212px; height:480px; } }
.work__frame img{
  width:100%; height:100%; display:block;
  border-radius:21px;
  object-fit:cover; object-position:top center;
  background:var(--ink-800);
}
.work:hover .work__frame{ transform:translateY(-7px); }

.work__body{ padding:28px 26px 32px; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:900px){ .work__body{ padding:36px 38px 38px; } }
.work__body .eyebrow{ color:var(--signal-d); display:block; margin-bottom:12px; }
.work__meta{ margin-top:8px; color:var(--stone); font-size:.9375rem; }

.stat{ margin-top:22px; display:flex; flex-direction:column; gap:2px; }
/* En chasse fixe l'espace avant % ou € est énorme : on le resserre. */
.stat__n{
  font-family:var(--f-mono); font-weight:700;
  font-size:clamp(2rem,4.4vw,2.75rem); line-height:1;
  letter-spacing:-.03em; word-spacing:-.34em; color:var(--ink-900);
}
.stat__l{ font-size:.875rem; color:var(--stone); line-height:1.4; }
.work .link{ margin-top:22px; align-self:flex-start; }

/* ---------- témoignage ---------- */
.testi{ margin:64px 0 0; background:var(--ink-900); color:#DCE5EC; }
@media (min-width:900px){ .testi{ margin-top:88px; } }
.testi__in{
  display:flex; align-items:flex-start; gap:18px;
  padding-block:32px;
}
.testi__q{ flex:none; color:var(--signal); opacity:.75; margin-top:2px; }
.testi blockquote{ margin:0; }
.testi p{
  font-family:var(--f-title); font-weight:600;
  font-size:clamp(1.125rem,2.2vw,1.5rem); line-height:1.35;
  letter-spacing:-.01em; color:#fff; max-width:56ch;
}

/* ---------- bloc de preuve : la capture Google réelle ---------- */
.proof{
  margin:56px 0 0; padding:0;
  display:grid; gap:32px; align-items:center;
}
@media (min-width:900px){
  .proof{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:56px; margin-top:72px; }
}
/* La capture vient d'une interface sombre : on la pose sur un cadre sombre
   plutôt que sur le crème, sinon elle flotte comme une vignette collée. */
.proof__shot{
  background:var(--ink-900); border:1px solid rgba(8,19,30,.14);
  border-radius:var(--r-card); padding:10px; box-shadow:var(--sh-lg);
  overflow:hidden;
}
.proof__shot img{ width:100%; height:auto; border-radius:12px; display:block; }
.proof__cap .eyebrow{ color:var(--stone); display:block; margin-bottom:14px; }
.proof__cap h3{ font-size:clamp(1.5rem,2.6vw,2rem); }
.proof__p{ margin-top:16px; color:var(--stone); font-size:1.0625rem; line-height:1.65; }
.proof__strip{
  width:100%; max-width:420px; height:auto; margin-top:26px;
  border-radius:12px; border:1px solid rgba(8,19,30,.14); box-shadow:var(--sh);
}
.proof__note{ margin-top:20px; color:var(--stone); font-size:.8125rem; line-height:1.55; max-width:46ch; }

/* =========================================================
   SANS / AVEC
   ========================================================= */
.cmp{ display:grid; gap:20px; }
/* stretch : la colonne « Avec » doit dominer, pas flotter plus courte */
@media (min-width:820px){ .cmp{ grid-template-columns:1fr 1.08fr; gap:28px; align-items:stretch; } }

.cmp__col{ border-radius:var(--r-card); padding:28px 26px 30px; }
.cmp__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.cmp__col li{
  display:grid; grid-template-columns:22px 1fr; gap:13px;
  align-items:start; font-size:1rem; line-height:1.5;
}
.cmp__hd{
  font-family:var(--f-title); font-weight:600; font-size:1.1875rem;
  margin-bottom:22px; letter-spacing:-.01em; word-spacing:.05em;
}

.cmp__col--bad{
  background:transparent; border:1px dashed rgba(8,19,30,.18);
  color:var(--stone);
}
.cmp__col--bad .cmp__hd{ color:var(--stone); }

.cmp__col--good{
  background:var(--chalk); border:1px solid var(--line-light);
  box-shadow:var(--sh); color:var(--ink-900);
  display:flex; flex-direction:column;
}
/* les puces se répartissent sur la hauteur au lieu de laisser un creux */
.cmp__col--good ul{ flex:1; align-content:space-between; }
@media (min-width:820px){ .cmp__col--good{ padding:34px 32px 36px; } }

.ic{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  margin-top:2px; flex:none;
}
.ic--x{ background:rgba(192,72,60,.10); color:var(--red); }
.ic--v{ background:rgba(18,107,74,.12); color:var(--green-d); }

/* =========================================================
   CARTES « CE QUE JE GÈRE »
   ========================================================= */
.cards3{ display:grid; gap:20px; }
@media (min-width:760px){ .cards3{ grid-template-columns:repeat(3,1fr); gap:24px; } }

.card{
  background:var(--glass); border:1px solid var(--line-dark);
  border-radius:var(--r-card); padding:30px 26px 32px;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.card:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); transform:translateY(-2px); }
.card__ic{
  display:grid; place-items:center; width:64px; height:64px;
  border-radius:18px; margin-bottom:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  color:#CFDCE6;
}
.card p{ margin-top:12px; color:#A9B9C6; font-size:1rem; line-height:1.6; }

/* =========================================================
   LES DEUX MÉTIERS
   Deux cartes larges, volontairement plus massives que la grille
   de trois au-dessus : c'est ce qui sépare l'aperçu du détail.
   ========================================================= */
.duo{ display:grid; gap:24px; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; gap:32px; } }

.duo__card{
  display:flex; flex-direction:column;
  background:var(--chalk); border:1px solid var(--line-light);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh);
  transition:transform .15s ease, box-shadow .15s ease;
}
.duo__card:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }

.duo__vis{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-light);
  background:#E8E5DB;
}
.duo__vis--map .duomap{ display:block; width:100%; height:auto; }

/* Le téléphone est rogné par le bas : on montre le haut de la page,
   c'est la partie qui porte l'information. */
.duo__vis--site{
  background:
    radial-gradient(120% 90% at 50% 0%, #16324A, #08131E 70%);
  aspect-ratio:420/260;
  padding-inline:24px;
  display:flex; justify-content:center; align-items:flex-end;
}
/* Hauteur bornée + overflow : l'image est ancrée en haut, donc on voit
   le HAUT du site du client. Sans ça, le cadre prend la hauteur de
   l'image et c'est le bas de la page qui reste visible. */
.duo__phone{
  width:min(168px,46%); height:80%;
  border:6px solid #05101A; border-bottom:0;
  border-radius:22px 22px 0 0; overflow:hidden;
  box-shadow:0 -2px 0 rgba(255,255,255,.06) inset, 0 22px 44px -14px rgba(0,0,0,.7);
  align-self:flex-end;
}
.duo__phone img{ width:100%; height:auto; display:block; }

.duo__body{ padding:28px 26px 30px; display:flex; flex-direction:column; flex:1; }
@media (min-width:900px){ .duo__body{ padding:34px 34px 36px; } }

.duo__n{
  font-family:var(--f-mono); font-size:.8125rem; font-weight:700;
  color:var(--signal-d); letter-spacing:.08em; margin-bottom:10px;
}
.duo__lede{ margin-top:14px; color:var(--stone); font-size:1.0625rem; line-height:1.6; }

.duo__pts{ list-style:none; margin:22px 0 28px; padding:0; display:grid; gap:11px; }
.duo__pts li{
  position:relative; padding-left:26px;
  font-size:1rem; line-height:1.5; color:var(--ink-900);
}
.duo__pts li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:2px;
  background:var(--signal-d); border:1px solid rgba(8,19,30,.14);
}
/* `auto` colle le lien en bas : les deux cartes alignent leur lien
   même quand un texte fait une ligne de plus que l'autre. */
.duo__card .link{ margin-top:auto; align-self:flex-start; }

/* =========================================================
   ÉTAPES
   ========================================================= */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:32px; position:relative;
}
@media (min-width:820px){
  .steps{ grid-template-columns:repeat(4,1fr); gap:28px; }
  /* la ligne s'arrête à la dernière pastille, elle ne file pas dans le vide */
  .steps::before{
    content:""; position:absolute; top:17px; left:17px;
    right:calc(25% + 7px);
    height:1px; background:rgba(8,19,30,.16);
  }
}
.step{ position:relative; }
.step__n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--ink-900); color:#fff;
  font-family:var(--f-mono); font-size:.8125rem; font-weight:700;
  margin-bottom:18px; position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--paper);
}
.step h3{ font-size:1.1875rem; }
.step p{ margin-top:9px; color:var(--stone); font-size:.9688rem; line-height:1.55; }

/* =========================================================
   OFFRES
   ========================================================= */
.plans{ display:grid; gap:20px; }
/* stretch : sinon les trois cartes se décalent en escalier, ce qui a
   l'air d'un bug plutôt que d'une mise en avant. */
@media (min-width:900px){
  .plans{ grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
}

.plan{
  position:relative;
  background:var(--glass); border:1px solid var(--line-dark);
  border-radius:var(--r-card); padding:32px 26px 30px;
  display:flex; flex-direction:column;
}
.plan h3{ font-size:1.25rem; }
.plan__price{ margin-top:18px; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.plan__amt{
  font-family:var(--f-mono); font-weight:700; font-size:2.25rem;
  line-height:1; letter-spacing:-.03em; word-spacing:-.34em; color:#fff;
}
.plan__per{ font-size:.9375rem; color:var(--slate); }
.plan__term{
  margin-top:12px; display:inline-block; align-self:flex-start;
  padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark);
  font-size:.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate);
}
.plan__list{
  list-style:none; margin:26px 0 0; padding:24px 0 0;
  border-top:1px solid var(--line-dark);
  display:grid; gap:11px; font-size:.9688rem; color:#B0C0CD;
}
.plan__list li{ display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:start; }
.plan__list li::before{
  content:""; width:16px; height:16px; margin-top:5px; border-radius:50%;
  background:rgba(23,131,90,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338B98A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px; background-repeat:no-repeat; background-position:center;
}
.plan__extra{
  margin-top:16px; font-size:.8125rem; line-height:1.45; color:var(--slate);
}
/* `auto` seul collait le bouton à la dernière puce quand la carte
   n'avait pas de hauteur restante : on garde un écart plancher. */
.plan .btn{ margin-top:auto; padding-top:0; }
.plan__list, .plan__extra{ margin-bottom:28px; }
.plan__extra{ margin-bottom:24px; }

.plan--reco{
  background:rgba(255,255,255,.055);
  border-color:rgba(159,220,252,.42);
  box-shadow:0 2px 4px rgba(8,19,30,.18), 0 34px 70px -22px rgba(159,220,252,.30);
}
@media (min-width:900px){
  .plan--reco{ transform:translateY(-22px); padding-block:40px 36px; }
}
.plan__tag{
  position:absolute; top:-13px; left:26px;
  padding:5px 14px; border-radius:var(--r-pill);
  background:var(--signal); color:var(--ink-900);
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.plan--reco .plan__amt{ color:var(--signal); }

/* ---------- comparatif : ce que la formule intégrée fait gagner ---------- */
.saving{
  margin-top:44px; display:grid; gap:28px;
  border:1px solid rgba(159,220,252,.30);
  border-radius:var(--r-card);
  background:rgba(159,220,252,.05);
  padding:30px 26px 32px;
}
@media (min-width:900px){
  .saving{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:48px; align-items:center; margin-top:56px; padding:40px 40px 42px;
  }
}
.saving .eyebrow{ color:var(--signal); display:block; margin-bottom:12px; }
.saving h3{ color:#fff; font-size:clamp(1.375rem,2.6vw,1.75rem); }
.saving__p{ margin-top:14px; color:#A9B9C6; font-size:1rem; line-height:1.6; }

.saving__calc{ display:grid; gap:2px; }
.saving__row{
  display:grid; grid-template-columns:1fr auto; gap:4px 16px;
  align-items:baseline;
  padding:14px 16px; border-radius:10px;
  background:rgba(255,255,255,.035);
}
.saving__nm{ font-weight:700; font-size:.9375rem; color:#D3DEE7; }
/* le calcul en chasse fixe : les chiffres s'alignent d'une ligne à l'autre */
.saving__op{
  grid-column:1; font-family:var(--f-mono); font-size:.8125rem;
  color:var(--slate); letter-spacing:-.02em;
}
.saving__tot{
  grid-column:2; grid-row:1 / span 2;
  font-family:var(--f-mono); font-weight:700; font-size:1.375rem;
  letter-spacing:-.03em; word-spacing:-.3em; color:#fff; align-self:center;
}
/* sous 420 px, « 1 000 € + (199 € × 12) » passait à la ligne */
@media (max-width:420px){ .saving__op{ font-size:.75rem; } }
.saving__row--res{ background:var(--signal); margin-top:8px; }
.saving__row--res .saving__nm{ color:var(--ink-900); }
.saving__row--res .saving__op{ color:rgba(8,19,30,.68); }
.saving__row--res .saving__tot{ color:var(--ink-900); font-size:1.625rem; }

.plans__foot{
  margin-top:40px; text-align:center; font-size:.9375rem; color:var(--slate);
}
@media (min-width:900px){ .plans__foot{ margin-top:40px; } }

/* =========================================================
   QUI JE SUIS
   ========================================================= */
.me{ display:grid; gap:44px; }
@media (min-width:860px){
  .me{ grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:76px; align-items:center; }
}

.me__ph{ position:relative; margin:0; max-width:340px; }
/* décalée hors grille, aplat jaune franchement visible derrière */
@media (min-width:860px){ .me__ph{ margin-left:-72px; max-width:none; } }
.me__ph::before{
  content:""; position:absolute; inset:26px -26px -26px 26px;
  background:var(--signal); border-radius:var(--r-card); z-index:0;
}
.me__ph img{
  position:relative; z-index:1; width:100%;
  aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-card); box-shadow:var(--sh);
}

.me__txt .eyebrow{ color:var(--stone); display:block; margin-bottom:14px; }
.me__txt h2{ margin-bottom:22px; }
.me__txt p + p{ margin-top:16px; }
.me__txt p{ color:var(--stone); font-size:1.0625rem; line-height:1.65; max-width:46ch; }

/* =========================================================
   ZONES
   ========================================================= */
.zones{ display:grid; gap:2px; background:var(--line-dark); border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line-dark); }
@media (min-width:760px){ .zones{ grid-template-columns:repeat(3,1fr); } }
.zone{ background:var(--ink-900); padding:30px 26px; }
.zone h3{ font-size:1.1875rem; }
.zone p{ margin-top:10px; color:var(--slate); font-size:.9375rem; line-height:1.6; }
.zones__foot{
  margin-top:34px; padding-top:28px;
  border-top:1px solid var(--line-dark);
  color:var(--slate); font-size:.9375rem; line-height:1.6;
  display:grid; gap:14px; max-width:760px;
}
/* La ligne « ailleurs aussi » ne doit pas concurrencer les trois
   départements : même taille, mais un cran plus discrète. */
.zones__wide{ color:#71838F; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--line-light); }
.faq details{ border-bottom:1px solid var(--line-light); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 4px; min-height:44px;
  font-family:var(--f-title); font-weight:600; font-size:1.125rem;
  line-height:1.3; letter-spacing:-.01em; word-spacing:.05em;
  transition:color .15s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--stone); }
.faq__a{ padding:0 4px 26px; max-width:64ch; }
.faq__a p{ color:var(--stone); font-size:1rem; line-height:1.65; }

.chev{
  position:relative; width:14px; height:14px; flex:none;
  transition:transform .2s ease;
}
.chev::before,.chev::after{
  content:""; position:absolute; top:50%; left:50%;
  width:13px; height:1.8px; background:currentColor; border-radius:2px;
  transform:translate(-50%,-50%);
}
.chev::after{ transform:translate(-50%,-50%) rotate(90deg); transition:opacity .2s ease, transform .2s ease; }
details[open] > summary .chev::after{ opacity:0; transform:translate(-50%,-50%) rotate(0); }

/* =========================================================
   CONTACT FINAL
   ========================================================= */
.final{ overflow:hidden; text-align:center; }
.final__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(48% 62% at 50% 8%, rgba(159,220,252,.12), transparent 68%);
}
.final__in{ position:relative; z-index:1; }
.final__h{ margin-inline:auto; max-width:16ch; }
.final__h .ul{
  position:relative; white-space:nowrap;
}
/* sous la ligne de base, pas au travers des jambages */
.final__h .ul::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-.1em; height:.1em;
  background:var(--signal); border-radius:99px;
}
.final__sub{
  margin:24px auto 0; max-width:52ch; color:#B0C0CD; font-size:1.0625rem;
}
.final__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:38px; }
.final__mail{ margin-top:26px; font-size:.9375rem; color:var(--slate); }
.final__mail a{
  position:relative; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px;
}
.final__mail a::after{
  content:""; position:absolute; left:-8px; right:-8px;
  top:50%; height:44px; transform:translateY(-50%);
}
.final__mail a:hover{ border-color:var(--slate); }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.foot{
  background:var(--ink-900); color:var(--slate);
  border-top:1px solid var(--line-dark);
  padding-block:48px 40px;
}
.foot__top{
  display:flex; flex-wrap:wrap; gap:24px 40px;
  align-items:center; justify-content:space-between;
  padding-bottom:28px; border-bottom:1px solid var(--line-dark);
}
.logo--foot{ margin-right:0; font-size:1.125rem; }
.logo--foot .logo__mark{ width:30px; height:30px; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:12px 26px; }
.foot__nav a{
  display:inline-flex; align-items:center;
  text-decoration:none; font-size:.9375rem; color:var(--slate);
  min-height:44px; transition:color .15s ease;
}
.foot__nav a:hover{ color:#fff; }

.legal{ margin-top:26px; }
.legal summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  font-size:.875rem; font-weight:700; padding:10px 0; min-height:44px;
  color:var(--slate); transition:color .15s ease;
}
.legal summary::-webkit-details-marker{ display:none; }
.legal summary:hover{ color:#fff; }
.legal__body{ padding-bottom:8px; max-width:80ch; }
.legal__body p{ font-size:.8125rem; line-height:1.7; color:#8B9AA6; }
.legal__body p + p{ margin-top:10px; }

.foot__cr{ margin-top:20px; font-size:.8125rem; color:#7E8E9B; }

/* =========================================================
   PAGES INTÉRIEURES — fiche-google.html / site-web.html
   ========================================================= */

/* ---------- sous-hero ---------- */
.subhero{
  position:relative; overflow:hidden;
  background:var(--ink-900); color:#E8EEF3;
  background-image:
    radial-gradient(50% 55% at 12% 30%, rgba(159,220,252,.10), transparent 70%),
    radial-gradient(48% 46% at 88% 12%, rgba(23,131,90,.14), transparent 72%);
  padding-top:112px; padding-bottom:76px;
}
.subhero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
@media (min-width:900px){ .subhero{ padding-top:152px; padding-bottom:112px; } }
.subhero__in{ position:relative; z-index:1; }
.subhero .eyebrow{ color:var(--signal); display:block; margin-bottom:16px; }
/* Un cran sous le h1 d'accueil : c'est une page de second niveau,
   la hiérarchie doit s'entendre. */
.subhero h1{
  color:#fff; max-width:760px;
  font-size:clamp(2.375rem,5.4vw,3.75rem);
}
.subhero__lede{
  margin-top:22px; max-width:660px;
  color:#B9C7D2; font-size:1.1875rem; line-height:1.6;
}
.subhero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.crumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.875rem; color:var(--slate); margin-bottom:26px;
}
.crumb a{ color:var(--slate); text-decoration:none; border-bottom:1px solid transparent; }
.crumb a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.4); }
.crumb [aria-current]{ color:#DCE6ED; }

/* ---------- deux colonnes texte + visuel ---------- */
.split{ display:grid; gap:44px; align-items:center; }
@media (min-width:960px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:72px; }
  .split--rev .split__txt{ order:2; }
  .split--rev .split__vis{ order:1; }
}
.split__txt .eyebrow{ color:var(--stone); display:block; margin-bottom:14px; }
.split__txt h2{ max-width:16ch; }

.prose{ margin-top:24px; display:grid; gap:16px; color:var(--stone); font-size:1.0625rem; line-height:1.7; }
.prose--dark{ color:#A9B9C6; }
.prose--center{ max-width:760px; margin-inline:auto; margin-top:44px; text-align:left; }
.prose b{ color:var(--ink-900); }
.prose--dark b{ color:#fff; }

/* Capture d'écran réelle : même langage que les cartes (rayon, filet, ombre),
   sinon l'image brute jure au milieu de sections toutes arrondies. */
.shot{
  margin:0; border-radius:var(--r-card); overflow:hidden;
  border:1px solid var(--line-light); box-shadow:var(--sh);
  max-width:420px;
}
.shot img{ width:100%; height:auto; display:block; }

.viz__legal{ margin-top:12px; font-size:.75rem; color:var(--slate); }
.s--paper .viz__legal{ color:var(--stone); }

/* ---------- démonstration du pack local ---------- */
.packdemo{ display:grid; gap:40px; align-items:center; }
@media (min-width:960px){ .packdemo{ grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:64px; } }
.packdemo__card .packcard{ position:static; transform:none; max-width:none; }

/* ---------- les critères ---------- */
.factors{ display:grid; gap:20px; }
@media (min-width:820px){ .factors{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.factor{
  background:var(--chalk); border:1px solid var(--line-light);
  border-radius:var(--r-card); padding:28px 26px 30px; box-shadow:var(--sh);
}
.s--ink .factor{
  background:var(--glass); border-color:rgba(255,255,255,.10); box-shadow:none;
}
.factor__n{
  display:block; font-family:var(--f-mono); font-size:.8125rem; font-weight:700;
  color:var(--signal-d); letter-spacing:.08em; margin-bottom:14px;
}
.factor h3{ margin-bottom:12px; }
.factor p{ color:var(--stone); font-size:1rem; line-height:1.6; }
.factor p + p{ margin-top:14px; }
.factor__do{ padding-top:14px; border-top:1px solid var(--line-light); font-size:.9375rem !important; }
.factor__do b{ color:var(--ink-900); }
.factors__foot{
  margin-top:32px; color:var(--stone); font-size:.9375rem;
  max-width:640px; line-height:1.6;
}

/* ---------- listes à cocher ---------- */
.checks{ display:grid; gap:20px; }
@media (min-width:760px){ .checks{ grid-template-columns:1fr 1fr; gap:24px; } }
.checkcol{
  background:var(--glass); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-card); padding:28px 26px 30px;
}
.checkcol__hd{
  font-family:var(--f-body); font-size:.8125rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--signal);
  margin-bottom:20px;
}
.checkcol ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.checkcol li{
  position:relative; padding-left:30px;
  font-size:1rem; line-height:1.5; color:#D3DEE7;
}
.checkcol li::before{
  content:""; position:absolute; left:0; top:.18em;
  width:18px; height:18px; border-radius:50%;
  background:rgba(23,131,90,.20); border:1px solid rgba(23,131,90,.55);
}
.checkcol li::after{
  content:""; position:absolute; left:5px; top:.52em;
  width:8px; height:4px; border-left:2px solid #3FC08C; border-bottom:2px solid #3FC08C;
  transform:rotate(-45deg);
}

/* ---------- encadré ---------- */
.callout{
  margin-top:36px; padding:28px 30px;
  border:1px solid rgba(159,220,252,.30);
  border-left:3px solid var(--signal);
  border-radius:0 var(--r-card) var(--r-card) 0;
  background:rgba(159,220,252,.06);
}
.callout p{ color:#D3DEE7; font-size:1.0625rem; line-height:1.65; }
.callout b{ color:#fff; }
.callout .link{ margin-top:18px; }
.callout--light{
  border-color:rgba(20,104,147,.35); border-left-color:var(--signal-d);
  background:rgba(20,104,147,.10);
}
.callout--light p{ color:var(--ink-900); }
.callout--light b{ color:var(--ink-900); }
.link--dark{ color:#fff; border-bottom-color:rgba(255,255,255,.28); }
.link--dark:hover{ border-bottom-color:var(--signal); color:var(--signal); }

/* ---------- erreurs ---------- */
.errs{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.errs li{
  position:relative; padding:22px 24px 22px 62px;
  background:var(--chalk); border:1px solid var(--line-light);
  color:var(--stone); font-size:1rem; line-height:1.6;
}
.errs li:first-child{ border-radius:var(--r-card) var(--r-card) 0 0; }
.errs li:last-child{ border-radius:0 0 var(--r-card) var(--r-card); }
.errs li b{ display:block; color:var(--ink-900); margin-bottom:5px; font-size:1.0625rem; }
.errs li::before{
  content:""; position:absolute; left:24px; top:26px;
  width:20px; height:20px; border-radius:50%;
  background:rgba(192,72,60,.10); border:1px solid rgba(192,72,60,.40);
}
/* Le point d'exclamation dessiné en deux pseudo-éléments donnait deux
   points empilés. Le caractère lui-même est plus lisible. */
.errs li::after{
  content:"!"; position:absolute; left:24px; top:26px;
  width:20px; height:20px;
  display:grid; place-items:center;
  font-family:var(--f-body); font-weight:700; font-size:.8125rem;
  line-height:1; color:var(--red);
}

/* ---------- paire de captures ---------- */
.shotpair{ position:relative; display:flex; justify-content:center; padding-block:8px; }
.shotpair figure{ margin:0; border-radius:26px; overflow:hidden; background:var(--ink-900); }
.shotpair img{ width:100%; height:auto; display:block; }
.shotpair__a{
  width:min(230px,52%); position:relative; z-index:2;
  border:7px solid #0B1721; box-shadow:var(--sh-lg);
  transform:rotate(-4deg);
}
.shotpair__b{
  width:min(200px,45%); position:relative; z-index:1;
  border:7px solid #0B1721; box-shadow:var(--sh);
  transform:rotate(5deg) translate(-14px,26px); opacity:.96;
}
/* une seule capture : on la redresse et on l'agrandit un peu */
.shotpair--one .shotpair__a{ width:min(268px,64%); transform:rotate(-3deg); }

/* ---------- carte « page suivante » ---------- */
.nextcard{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:32px 30px; text-decoration:none;
  background:var(--ink-900); color:#E8EEF3;
  border-radius:var(--r-card); box-shadow:var(--sh);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nextcard:hover{ transform:translateY(-2px); box-shadow:var(--sh-lg); }
.nextcard .eyebrow{ color:var(--signal); display:block; margin-bottom:10px; }
.nextcard h2{ color:#fff; font-size:clamp(1.75rem,3.2vw,2.5rem); }
.nextcard__p{ margin-top:10px; color:var(--slate); font-size:1rem; max-width:44ch; }
.nextcard__ar{
  flex:none; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--signal); color:var(--ink-900);
  transition:transform .15s ease;
}
.nextcard:hover .nextcard__ar{ transform:translateX(4px); }
@media (max-width:560px){
  .nextcard{ flex-direction:column; align-items:flex-start; gap:22px; padding:28px 24px; }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
[data-anim]{ opacity:0; transform:translateY(14px); }
.hero.is-ready [data-anim],
.subhero.is-ready [data-anim]{
  animation:heroIn .5s cubic-bezier(.22,.68,.32,1) forwards;
}
.hero.is-ready [data-anim="1"],
.subhero.is-ready [data-anim="1"]{ animation-delay:0ms; }
.hero.is-ready [data-anim="2"],
.subhero.is-ready [data-anim="2"]{ animation-delay:60ms; }
.hero.is-ready [data-anim="3"],
.subhero.is-ready [data-anim="3"]{ animation-delay:120ms; }
.hero.is-ready [data-anim="4"],
.subhero.is-ready [data-anim="4"]{ animation-delay:180ms; }
.hero.is-ready [data-anim="5"],
.subhero.is-ready [data-anim="5"]{ animation-delay:240ms; }
.hero.is-ready [data-anim="6"],
.subhero.is-ready [data-anim="6"]{ animation-delay:320ms; }
.hero.is-ready [data-anim="7"],
.subhero.is-ready [data-anim="7"]{ animation-delay:400ms; }
.hero.is-ready [data-anim="8"],
.subhero.is-ready [data-anim="8"]{ animation-delay:480ms; }

@keyframes heroIn{ to{ opacity:1; transform:none; } }
/* les téléphones gardent leur rotation */
.hero.is-ready .phone--front{ animation-name:heroInFront; }
@keyframes heroInFront{ to{ opacity:1; transform:rotate(4deg); } }
.phone--front[data-anim]{ transform:rotate(4deg) translateY(14px); }

.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.68,.32,1);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-anim],.reveal{ opacity:1 !important; transform:none !important; }
  .phone--front[data-anim]{ transform:rotate(4deg) !important; }
  .dot{ animation:none; }
}