/* ════════════════════════════════════════════════════════════════
   NOVALYS — SITE VITRINE
   Direction « E » validée par le fondateur le 20/07/2026 et devenue
   l'identité officielle du site. Méthode empruntée aux meilleurs SaaS
   français : beaucoup d'air, texte jamais noir mais bleu-nuit de marque,
   un seul accent chaud employé avec parcimonie, aplat de couleur sur la
   moitié du hero, capture produit qui déborde, rayons généreux.
   L'identité (bleu de travail + safran) reste celle de Novalys.
   Partagé par TOUTES les pages, y compris légales et contact.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Encre : jamais #000 — le bleu-nuit de la marque fait office de noir. */
  --ink:          #12233F;
  --ink-2:        #4A5B78;
  --ink-3:        #4A5B78;
  --paper:        #FFFFFF;
  --paper-2:      #F7F4EF;      /* crème des sections alternées */
  --tint:         #EEF4FF;
  --azur:         #DDE9FF;      /* aplat du hero */
  --card-tint:    #EEF4FF;
  --card-line:    #DCE4F6;
  --line:         #E7E2D9;
  --bleu:         #1F4BC4;
  --bleu-deep:    #17389A;
  --bleu-border:  #C9D4EC;
  --safran:       #F0B143;      /* accent vif, rare : soulignement, puces */
  --safran-ink:   #D9962B;
  --vert:         #1E7A54;
  --navy:         #12233F;
  --on-navy:      #C7D0E2;
  --font-ui:      "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", Consolas, monospace;
  --r:            16px;

  /* Alias de la grammaire E : ses composants ont ete ecrits avec ces noms.
     On les fait pointer sur les jetons du site plutot que de renommer 200
     lignes — une seule source de verite, deux vocabulaires. */
  --encre:        var(--ink);
  --encre-2:      var(--ink-2);
  --blanc:        var(--paper);
  --creme:        var(--paper-2);
  --azur-2:       var(--tint);
  --signal:       var(--safran);
  --signal-d:     var(--safran-ink);
  --f:            var(--font-ui);
  --shadow-card:  0 1px 2px rgba(18, 35, 63, .04), 0 10px 28px rgba(18, 35, 63, .07);
  --shadow-shot:  0 30px 70px rgba(18, 35, 63, .16);
  --wrap:         1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font: 500 16px/1.6 var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto est obligatoire : sans lui, l'attribut height="" du HTML reste
   applique en dur et deforme l'image des que max-width la retrecit
   (incident 20/07 : capture 1280x832 rendue en 708x800 sur l'accueil). */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(47, 79, 158, .18); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 28px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

h1, h2, h3 { letter-spacing: -.02em; text-wrap: balance; }

/* ── Nav ─────────────────────────────────────────────── */
.nav-bar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253, 251, 246, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: center; gap: 26px;
}
.logo {
  font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--ink);
  display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px;
}
.logo svg { width: 22px; height: 22px; flex: none; }
.logo svg path { fill: var(--bleu); }
.nav-links { display: flex; gap: 6px; margin-left: 8px; }
.nav-links a {
  text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  padding: 12px 10px; border-radius: 8px; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--bleu); background: rgba(47, 79, 158, .06); }
.nav-links a[aria-current="page"] { color: var(--bleu); }
.nav-cta {
  margin-left: auto; background: var(--bleu); color: #fff; text-decoration: none;
  padding: 11px 18px; border-radius: 9px; font-size: 13px; font-weight: 700;
  transition: background .15s, transform .15s; min-height: 44px; display: inline-flex; align-items: center;
}
.nav-cta:hover { background: var(--bleu-deep); transform: translateY(-1px); }
.nav-burger {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none;
  cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile {
  display: none; position: fixed; inset: 61px 0 0; z-index: 55; background: var(--paper);
  padding: 22px 28px; flex-direction: column; gap: 4px; overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  text-decoration: none; font-size: 17px; font-weight: 600; color: var(--ink);
  padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.nav-mobile-cta {
  margin-top: 18px; background: var(--bleu); color: #fff !important; text-align: center;
  border-radius: 10px; padding: 15px !important; border-bottom: none !important; font-weight: 700;
}

/* ── Boutons ─────────────────────────────────────────── */
.btn-main {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bleu); color: #fff; text-decoration: none;
  padding: 14px 24px; border-radius: 10px; font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 22px rgba(47, 79, 158, .28);
  transition: background .15s, transform .15s, box-shadow .15s; min-height: 48px;
}
.btn-main:hover { background: var(--bleu-deep); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(47, 79, 158, .34); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bleu); text-decoration: none; border: 1.5px solid var(--bleu-border);
  padding: 13px 22px; border-radius: 10px; font-weight: 600; font-size: 14px;
  transition: border-color .15s, background .15s; min-height: 48px;
}
.btn-ghost:hover { border-color: var(--bleu); background: rgba(47, 79, 158, .05); }

/* ── Hero (accueil) ──────────────────────────────────────────────────────
   L'ancien bloc `.hero` (grille contrainte a --wrap) a ete SUPPRIME le
   20/07 : il survivait a la cascade et empechait l'aplat de couleur du
   nouveau hero de couvrir toute la largeur de l'ecran. La definition qui
   fait foi est celle de la grammaire E, en bas de fichier. */
.wm {
  position: absolute; right: -140px; top: -140px; width: 460px; height: 460px;
  opacity: .06; pointer-events: none; animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Cadre « capture navigateur » ────────────────────── */
.shot {
  border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-shot);
}
.shot .bar { display: flex; gap: 5px; padding: 10px 14px; align-items: center; background: #F3F0E7; }
.shot .bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(120, 130, 150, .35); }
.shot .bar span { font: 10.5px/1 var(--font-mono); color: var(--ink-2); margin-left: 8px; }
.shot .body { padding: 22px 22px 20px; }
.shot .k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.shot .card {
  margin-top: 14px; border-radius: 10px; padding: 13px 15px; font-size: 12.5px;
  background: var(--card-tint); border: 1px solid var(--card-line);
}
.shot .card b { display: block; font-size: 13px; }
.shot .row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.shot .ok { font-size: 11px; font-weight: 700; padding: 8px 13px; border-radius: 7px; background: var(--bleu); color: #fff; white-space: nowrap; }
.shot .demo { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 12px; }
.shot > img { width: 100%; height: auto; display: block; }
/* Capture reelle sans chrome de navigateur : la legende a besoin de sa gouttiere. */
.shot > figcaption { padding: 0 16px 14px; }

/* cockpit vivant (hero accueil) */
.live .roi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.live .roi b { font-size: 30px; color: var(--vert); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.live .fcard { opacity: 0; transform: translateY(14px); animation: fin .6s ease-out forwards; position: relative; }
.live .fcard.f2 { animation-delay: .9s; }
.live .fcard.f3 { animation-delay: 1.7s; }
@keyframes fin { to { opacity: 1; transform: none; } }
.live .stamp {
  position: absolute; top: -8px; right: 10px; background: var(--vert); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; padding: 3px 9px; border-radius: 99px;
  transform: scale(0) rotate(-8deg); animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) 2.6s forwards;
}
@keyframes pop { to { transform: scale(1) rotate(-8deg); } }

/* ── Bande de chiffres ───────────────────────────────── */
.statband { background: #fff; border-block: 1px solid var(--line); padding: 20px 0; }
.statband .in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.statband b { display: block; font-size: 23px; color: var(--bleu); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.statband span { font-size: 12px; color: var(--ink-2); }

/* ── Engagements ─────────────────────────────────────── */
.proof {
  max-width: var(--wrap); margin: 0 auto; padding: 26px 28px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 13px; color: var(--ink-2);
}
.proof b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--safran-ink); }

/* ── Sections ────────────────────────────────────────── */
.band { padding: 60px 0; }
.band.tinted { background: var(--tint); }
.band .in { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.band h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.band .bl { font-size: 14.5px; max-width: 62ch; color: var(--ink-2); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.step .ic { color: var(--safran-ink); }
.step .ic svg { width: 22px; height: 22px; }
.step h3 { font-size: 15.5px; margin: 10px 0 6px; }
.step p { font-size: 13.5px; color: var(--ink-2); }

.detect { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.det { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.det h3 { font-size: 13px; margin: 0 0 5px; color: var(--bleu); }
.det p { font-size: 12px; color: var(--ink-2); margin: 0 0 10px; }
.det .ex {
  display: block; font-size: 11.5px; padding: 8px 11px; border-radius: 8px;
  background: var(--card-tint); border: 1px solid var(--card-line);
}

.spaces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 24px; }
.spc { background: var(--tint); border-radius: 10px; padding: 14px 12px; font-size: 12px; color: var(--ink-2); text-decoration: none; display: block; transition: transform .15s, background .15s; }
.spc b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 3px; }
a.spc:hover { transform: translateY(-2px); background: var(--card-tint); }
.band.tinted .spc { background: #fff; border: 1px solid var(--line); }

.pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.pg {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  text-decoration: none; display: block; color: var(--ink); transition: transform .15s, box-shadow .15s;
}
.pg:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.pg b { display: block; font-size: 14.5px; }
.pg span { font-size: 12.5px; color: var(--ink-2); display: block; margin-top: 4px; }
.pg em { display: block; font-size: 12px; font-weight: 700; margin-top: 12px; font-style: normal; color: var(--bleu); }

.marq { overflow: hidden; margin-top: 28px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq .tr {
  display: flex; gap: 38px; width: max-content; animation: mv 32s linear infinite;
  font-size: 13px; color: var(--ink-2); white-space: nowrap; padding-block: 4px;
}
@keyframes mv { to { transform: translateX(-50%); } }

/* ── Calculateur (porté de l'ancien index, restylé) ──── */
.calc-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; margin-top: 30px; align-items: stretch; }
.calc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.calc-row + .calc-row { margin-top: 24px; }
.calc-row label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.calc-row .lbl-val { font-family: var(--font-mono); font-size: 15px; color: var(--bleu); font-variant-numeric: tabular-nums; }
.calc-row input[type="range"] { width: 100%; accent-color: var(--bleu); height: 28px; cursor: pointer; }
.calc-ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }
.calc-result { background: var(--bleu); color: #fff; border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.calc-result .label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.calc-result .amount { font-size: clamp(40px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.calc-result .amount .unit { font-size: 22px; font-weight: 600; margin-left: 4px; opacity: .85; }
.calc-result .desc { font-size: 12.5px; opacity: .85; margin-top: 8px; max-width: 46ch; }
.calc-bd { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: auto; padding-top: 20px; }
.calc-bd .k { font-size: 10.5px; opacity: .75; }
.calc-bd .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.calc-foot { font-size: 11.5px; color: var(--ink-2); margin-top: 14px; max-width: 72ch; }

/* ── Tarifs (accueil + page) ─────────────────────────── */
/* L'ancien bloc `.prix / .px` a ete SUPPRIME le 20/07 : il imposait un fond
   bleu plein a la carte mise en avant, ce qui rendait son titre et son prix
   barre illisibles une fois la nouvelle grammaire appliquee. Les regles qui
   font foi sont plus bas (grammaire E) : carte blanche, filet bleu, badge. */

.mini-faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.mf { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.mf b { display: block; font-size: 13.5px; margin-bottom: 5px; }
.mf p { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.ctafin { text-align: center; padding: 26px 0 8px; }

/* ── Pages intérieures ───────────────────────────────── */
/* ── En-tête de sous-page — grammaire E ──────────────────────────────────
   Comme sur les pages internes de la référence : aplat de couleur PLEINE
   largeur, contenu centré, beaucoup d'air, et un coin inférieur arrondi qui
   rattache le bloc au blanc de la page. Le contenu qui suit peut chevaucher
   l'aplat (voir `.overlap`). */
.sub-hero {
  background: var(--azur); border-bottom: 0;
  padding: 76px 0 90px; text-align: center; position: relative; overflow: hidden;
  border-radius: 0 0 34px 34px;
}
.sub-hero .in { max-width: 900px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.sub-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--bleu); margin-bottom: 14px; }
.sub-hero h1, .sub-hero .sub-title { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; margin-top: 0; }
/* Soulignement safran — signature de la marque. Realise en degrade de fond
   plutot qu'en pseudo-element : il suit le texte meme quand le mot passe a
   la ligne, alors qu'un ::after positionne se decalait (constat 20/07). */
.sub-hero h1 em, .sub-hero .sub-title em {
  font-style: normal;
  background-image: linear-gradient(var(--safran), var(--safran));
  background-size: 100% .18em;
  background-position: 0 92%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sub-hero .lead, .sub-hero .sub-lead { margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.sub-hero .ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sub-hero .sub-meta { margin-top: 20px; }

/* Bloc qui remonte sur l'aplat de l'en-tête (cartes de prix, sommaire…). */
.overlap { margin-top: -54px; position: relative; z-index: 2; }

@media (max-width: 620px) {
  .sub-hero { padding: 52px 0 66px; border-radius: 0 0 22px 22px; }
  .sub-hero h1, .sub-hero .sub-title { font-size: clamp(27px, 7.6vw, 36px); }
  .sub-hero .lead, .sub-hero .sub-lead { font-size: 15.5px; }
  .overlap { margin-top: -40px; }
}

.feat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  padding: 44px 0;
}
.feat + .feat { border-top: 1px solid var(--line); }
.feat h2 { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 8px; }
.feat h2 .num { color: var(--safran-ink); font-family: var(--font-mono); font-size: .72em; margin-right: 8px; }
.feat p { font-size: 14px; color: var(--ink-2); max-width: 52ch; }
.feat .ck { margin-top: 14px; }
.feat.rev .txt { order: 2; }
.feat.rev .vis { order: 1; }

.ck { list-style: none; }
.ck li { font-size: 13.5px; padding: 5px 0 5px 26px; position: relative; color: var(--ink-2); }
.ck li strong { color: var(--ink); font-weight: 600; }
.ck li::before { content: "✓"; position: absolute; left: 0; top: 5px; color: var(--vert); font-weight: 800; }

.cta-band { background: var(--navy); color: #fff; padding: 52px 0; text-align: center; }
.cta-band h2 { font-size: clamp(22px, 3vw, 30px); }
.cta-band p { color: var(--on-navy); font-size: 14px; margin-top: 8px; }
.cta-band .ctas { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.cta-band .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.cta-band .note { font-size: 12px; color: var(--on-navy); margin-top: 12px; }

/* FAQ pleine page (tarifs) */
.faq-list { max-width: 780px; margin: 30px auto 0; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin-bottom: 12px; }
.faq-item h3 { font-size: 15px; margin-bottom: 8px; }
.faq-item p { font-size: 13.5px; color: var(--ink-2); }
.faq-item a { color: var(--bleu); }
.faq-item code { font-family: var(--font-mono); font-size: 12px; background: var(--card-tint); border: 1px solid var(--card-line); border-radius: 5px; padding: 1px 5px; }

/* Liste « ce qu'on ne fera jamais » — partagee entre /securite et /a-propos.
   Ces regles vivaient uniquement dans le <style> inline de securite.html ;
   remontees ici pour etre reutilisables. securite.html garde sa copie inline
   (valeurs identiques, elle prend le dessus sans changer le rendu). */
.never { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.never .nv { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--rouge, #B2452C); border-radius: var(--r); padding: 16px 18px; }
.never .nv b { display: block; font-size: 13.5px; }
.never .nv p { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
@media (max-width: 900px) { .never { grid-template-columns: 1fr; } }

/* Cartes tarifs pleine page */
.pricing3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; align-items: stretch; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 26px; display: flex; flex-direction: column; position: relative; }
.pcard.featured { border-color: var(--bleu); box-shadow: 0 14px 40px rgba(47, 79, 158, .14); }
.pcard .badge {
  position: absolute; top: -11px; left: 26px; background: var(--vert); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
}
.pcard .tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--safran-ink); font-weight: 700; }
.pcard h2 { font-size: 19px; margin-top: 8px; }
.pcard .desc { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.pcard .price { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin-top: 16px; font-variant-numeric: tabular-nums; }
.pcard .price .unit { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-left: 4px; }
.pcard .period { font-size: 12px; color: var(--ink-2); margin-top: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pcard ul { list-style: none; margin: 16px 0 22px; flex: 1; }
.pcard li { font-size: 13px; color: var(--ink-2); padding: 6px 0 6px 24px; position: relative; }
.pcard li strong { color: var(--ink); font-weight: 600; }
.pcard li.yes::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--vert); font-weight: 800; }
.pcard li.no { opacity: .75; }
.pcard li.no::before { content: "—"; position: absolute; left: 0; top: 6px; color: var(--ink-2); }
.pcard .cta-note { font-size: 11.5px; color: var(--ink-2); margin-top: 10px; text-align: center; }
.included-box {
  max-width: var(--wrap); margin: 26px auto 0; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r); padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center;
}
.included-box span { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.included-box strong { color: var(--ink); font-weight: 600; }

/* ── Footer ──────────────────────────────────────────── */
.foot { background: var(--navy); color: var(--on-navy); padding: 44px 0 28px; margin-top: 0; }
.foot .in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; font-size: 13px;
}
.foot h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; opacity: .7; font-weight: 700; }
.foot a { display: block; text-decoration: none; padding: 4px 0; color: var(--on-navy); }
.foot a:hover { color: #fff; }
.foot .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: #fff; }
.foot .brand svg { width: 20px; height: 20px; }
.foot .brand svg path { fill: var(--on-navy); }
.foot .brand-line { margin-top: 10px; font-size: 12.5px; opacity: .8; max-width: 40ch; }
.foot .legal-line {
  max-width: var(--wrap); margin: 30px auto 0; padding: 18px 28px 0; border-top: 1px solid rgba(199, 208, 226, .18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11.5px; opacity: .75;
}
.foot .legal-line a { display: inline; padding: 0; }

/* ── Apparition au défilement ─────────────────────────────────────────────
   Le masquage est porté par `.armed`, que site-fx.js pose LUI-MÊME juste
   avant d'observer. Conséquence : si le script ne tourne pas — erreur,
   fichier en cache, bloqueur, navigateur ancien — rien n'est jamais masqué.
   L'ancienne version s'appuyait sur `html.js` posé dans le <head>, donc
   AVANT de savoir si site-fx.js s'exécuterait : du texte de vente pouvait
   rester invisible en production (constat 20/07). */
/* Aucune regle de masquage : voir site-fx.js, l apparition au defilement a
   ete retiree le 20/07 apres trois incidents de contenu invisible. */

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .hero { grid-template-columns: 1fr; padding-top: 30px; gap: 32px; }
  .statband .in, .detect { grid-template-columns: 1fr 1fr; }
  .spaces { grid-template-columns: 1fr 1fr; }
  .steps, .prix, .pricing3, .calc-grid { grid-template-columns: 1fr; }
  .pages { grid-template-columns: 1fr 1fr; }
  .mini-faq { grid-template-columns: 1fr; }
  .feat, .feat.rev { grid-template-columns: 1fr; gap: 24px; padding: 34px 0; }
  .feat.rev .txt { order: 1; }
  .feat.rev .vis { order: 2; }
  .foot .in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .statband .in, .detect, .pages, .spaces { grid-template-columns: 1fr; }
  .live .roi { flex-direction: column; align-items: flex-start; gap: 2px; }
  .live .roi b { white-space: nowrap; }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wm, .marq .tr, .live .fcard, .live .stamp { animation: none; }
  .live .fcard { opacity: 1; transform: none; }
  .live .stamp { transform: scale(1) rotate(-8deg); }

  .btn-main, .btn-ghost, .nav-cta, .pg, .spc { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES LEGALES & CONTACT — migrees de styles-legal.css (theme sombre) vers
   le theme clair du site le 20/07/2026. Ces pages chargeaient leur propre
   feuille : nav, pied de page et fond differaient du reste du site.
   ═══════════════════════════════════════════════════════════════════════════ */

.sub-title { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin-top: 8px; }
.sub-title em { font-style: normal; color: var(--bleu); }
.sub-lead { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); margin-top: 14px; max-width: 62ch; }
.sub-meta { font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: 18px; }

/* Sommaire en tete des documents longs */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 26px; }
.summary-card {
  display: block; padding: 14px 16px; border-radius: var(--r); background: #fff;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font-size: 13.5px; line-height: 1.45; transition: border-color .18s, transform .18s;
}
.summary-card:hover { border-color: var(--bleu-border); transform: translateY(-2px); }
.summary-card b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--safran-ink); margin-bottom: 4px; }

/* Corps des documents longs : `.article` est le CONTENEUR, chaque `section`
   est un article numerote. Sans largeur maximale, le texte legal partait
   bord a bord (constat 20/07). */
.article { max-width: 860px; margin: 0 auto; padding: 40px 28px 60px; }
.article > section { padding: 26px 0; border-top: 1px solid var(--line); }
.article > section:first-child { border-top: none; padding-top: 8px; }
.article h2 { font-size: 19px; letter-spacing: -.01em; }
.article h3 { font-size: 15.5px; margin-top: 18px; }
.article p, .article li { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); margin-top: 10px; }
.article ul, .article ol { margin-top: 10px; padding-left: 20px; }
.article li { margin-top: 6px; }
.article strong { color: var(--ink); }
.article a { color: var(--bleu); }
.article-note { font-size: 13px; color: var(--ink-2); font-style: italic; margin-top: 12px; }

.callout {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r);
  background: var(--card-tint); border: 1px solid var(--card-line); border-left: 3px solid var(--bleu);
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.callout b { color: var(--ink); }

.meta-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.meta-table td, .meta-table th { padding: 11px 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.meta-table th { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.meta-table tr:nth-child(even) td { background: #FCFAF5; }

/* Contact — `.contact-grid` est aussi le conteneur de page : sans largeur
   maximale, la colonne de gauche partait coller au bord (constat 20/07). */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start;
  max-width: var(--wrap); margin: 0 auto; padding: 46px 28px 60px;
}
.contact-left p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin-top: 12px; }
.contact-channels { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.channel { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.channel-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.channel a { color: var(--bleu); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.channel a:hover { text-decoration: underline; }

.contact-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-card); }
.contact-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-top: 14px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; margin-top: 6px; padding: 11px 13px; font: 400 14px var(--font-ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.contact-form textarea { min-height: 130px; resize: vertical; }
.form-status { margin-top: 12px; font-size: 13px; color: var(--vert); }
.form-status[data-error] { color: #B2452C; }

.btn-contact, .btn-dl {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 20px;
  border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
  background: var(--bleu); color: #fff; border: 1px solid var(--bleu);
}
.btn-contact:hover, .btn-dl:hover { background: var(--bleu-deep); }
.btn-dl { background: #fff; color: var(--bleu); }
.btn-dl:hover { background: var(--card-tint); color: var(--bleu-deep); }

/* Programme pilote */
.pilote-hero { padding: 54px 0 8px; }
.pilote-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); margin-right: 7px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .summary-grid { grid-template-columns: 1fr; }
}


/* ===========================================================================
   GRAMMAIRE E - devenue l'identite officielle du site le 20/07/2026.
   Hero a aplat de couleur, bandeau flottant, places fondateur, le geste,
   le fondateur, objections, prix en perspective, apparition au defilement,
   menu mobile.
   =========================================================================== */
/* ══ Hero — LA signature : un APLAT DE COULEUR sur la moitie gauche de
   l'ecran, toute la hauteur du hero. Le titre s'ecrit DEDANS, dans la
   couleur de marque. La capture deborde a droite, hors du conteneur.
   (Chez la reference : bloc 720px sur 1440, menthe pale, titre vert fonce.) ══ */
.hero{position:relative;padding:0;overflow:hidden;min-height:660px;display:flex;align-items:center}
.hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:52%;
  background:var(--azur);border-radius:0 34px 34px 0;z-index:0;
}
.hero .in{
  position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:64px 28px 90px;
  display:grid;grid-template-columns:1fr 1.06fr;gap:44px;align-items:center;width:100%;
}
h1{font-size:clamp(38px,4.6vw,58px);font-weight:700;line-height:1.1;letter-spacing:-.032em;color:var(--encre)}
h1 .u{position:relative;white-space:nowrap}
h1 .u::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.01em;height:.2em;
  background:var(--signal);border-radius:3px;z-index:-1;opacity:.92;
}
.lead{margin-top:22px;font-size:18px;line-height:1.6;color:var(--encre-2);max-width:47ch;font-weight:500}
.hero .acts{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.b1{background:var(--bleu);color:#fff;padding:16px 28px;border-radius:12px;font-weight:700;font-size:15.5px;box-shadow:0 10px 26px rgba(31,75,196,.24)}
.b1:hover{background:var(--bleu-d);transform:translateY(-1px)}
.b2{padding:16px 24px;border-radius:12px;font-weight:700;font-size:15.5px;border:1.5px solid var(--line);color:var(--encre)}
.b2:hover{background:var(--creme)}
.trust{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.tr{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.tr .dot{width:9px;height:9px;border-radius:50%;background:var(--signal);flex:none}
.tr small{color:var(--encre-2);font-weight:500}

/* La capture deborde volontairement a droite : elle sort du conteneur,
   comme si l'outil ne tenait pas dans la page. */
.shotbox{position:relative;margin-right:-7vw}
.shotbox img{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 34px 80px rgba(18,35,63,.20)}
.float{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:12px 15px;box-shadow:0 14px 32px rgba(18,35,63,.13);font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.float small{display:block;font-weight:500;color:var(--encre-2);font-size:11.5px;margin-top:1px}
.f1{left:-30px;top:18%}
.f2{right:6vw;bottom:12%}
.chip{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}

/* Bandeau capacites : FLOTTANT et arrondi, chevauche le bas du hero
   (deuxieme marqueur fort de la reference). */
.strip{
  position:relative;z-index:2;background:var(--encre);color:#fff;
  max-width:1180px;margin:-58px auto 0;border-radius:20px;
  box-shadow:0 22px 50px rgba(18,35,63,.22);
}
.strip .in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;padding:24px 34px;max-width:1180px;margin:0 auto}
.strip span{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px;color:#DCE6FA}
.strip svg{width:17px;height:17px;color:var(--signal)}

/* Preuve chiffree */
.social{padding:56px 0 12px;text-align:center}
.social b{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.03em}
.social b em{font-style:normal;color:var(--bleu)}
.social p{color:var(--encre-2);margin-top:8px;font-size:15.5px}

/* Sections alternees */
.band{padding:88px 0}
.band.creme{background:var(--creme)}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu)}
h2{font-size:clamp(27px,3.4vw,40px);font-weight:700;line-height:1.16;letter-spacing:-.03em;margin-top:12px;max-width:19ch}
.band .sub{margin-top:14px;color:var(--encre-2);font-size:16.5px;max-width:56ch}
.split{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:1.08fr 1fr}
.split img{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 22px 54px rgba(18,35,63,.12)}
.ticks{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.tick{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:600}
.tick i{width:22px;height:22px;border-radius:7px;background:var(--signal);display:grid;place-items:center;flex:none;margin-top:1px}
.tick i svg{width:13px;height:13px;color:var(--encre)}
.tick small{display:block;font-weight:500;color:var(--encre-2);font-size:14px;margin-top:2px}

/* Cartes */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px}
.band.creme .card{background:#fff}
.card .ic{width:40px;height:40px;border-radius:11px;background:var(--azur-2);display:grid;place-items:center;color:var(--bleu)}
.card .ic svg{width:19px;height:19px}
.card h3{font-size:17.5px;font-weight:700;margin-top:16px;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--encre-2);margin-top:8px;font-weight:500}
.card .ex{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:var(--bleu)}

/* Prix */
/* Cartes a HAUTEUR EGALE (stretch) : avec align-items:start elles finissaient
   a 218, 321 et 218 px — trois marches d'escalier, ca ne fait pas fini. Le
   chevauchement que start corrigeait est desormais traite par la marge de
   64 px du bloc suivant. */
.prix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;align-items:stretch}
.px{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column}
/* La description occupe l'espace libre : les mentions du bas s'alignent. */
.px .d{flex:1}
/* padding-top majore : le badge se posait SUR le titre de la carte. */
.px.hot{border:2px solid var(--bleu);box-shadow:0 20px 44px rgba(31,75,196,.13);position:relative;padding-top:40px}
.px.hot::after{content:"Le plus choisi";position:absolute;top:-13px;left:26px;background:var(--bleu);color:#fff;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:20px;letter-spacing:.01em}
.px .t{font-size:15px;font-weight:700;color:var(--encre-2)}
.px .p{font-size:40px;font-weight:800;letter-spacing:-.035em;margin-top:10px}
.px .p small{font-size:15px;font-weight:600;color:var(--encre-2)}
.px .d{font-size:14.5px;color:var(--encre-2);margin-top:12px;font-weight:500}
.px .p s{font-size:22px;color:var(--encre-2);font-weight:600;text-decoration-thickness:2px;margin-right:9px;opacity:.65}
.px .founder{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--signal-d)}

/* Final */
.final{background:var(--encre);color:#fff;padding:78px 0;text-align:center}
.final h2{max-width:22ch;margin:0 auto;color:#fff}
.final p{color:#B9C8E4;margin-top:14px;font-size:16.5px}
.final .b1{margin-top:30px;display:inline-block;background:var(--signal);color:var(--encre);box-shadow:none}
.final .b1:hover{background:var(--signal-d)}
.foot{padding:30px 0 60px;font-size:13.5px;color:var(--encre-2)}

/* ── Rareté assumée : on n'a pas de foule de clients, on a des places ── */
.places{background:var(--creme);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.places .in{max-width:1180px;margin:0 auto;padding:34px 28px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.places .pill{background:var(--signal);color:var(--encre);font-size:12.5px;font-weight:800;padding:7px 14px;border-radius:20px;letter-spacing:.02em}
.places b{font-size:18.5px;font-weight:700;letter-spacing:-.02em;display:block}
.places p{color:var(--encre-2);font-size:15px;margin-top:4px;max-width:62ch}
.dots{display:flex;gap:6px;margin-left:auto}
.dots i{width:26px;height:26px;border-radius:8px;background:var(--azur);border:1px solid var(--line)}
.dots i.pris{background:var(--bleu);border-color:var(--bleu)}

/* ── Le geste : ce que la page promet, montre-le ── */
.geste{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
/* flex column + `.mini` pousse en bas : sans ca, l'encadre de la carte du
   milieu (qui porte les trois boutons) debordait sous sa carte. */
.gt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;display:flex;flex-direction:column}
.gt .n{width:26px;height:26px;border-radius:50%;background:var(--encre);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
.gt h3{font-size:16.5px;font-weight:700;margin-top:14px}
.gt p{font-size:14px;color:var(--encre-2);margin-top:7px;font-weight:500}
.gt .mini{margin-top:auto;border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:var(--creme);font-size:12.5px}
.gt p{margin-bottom:16px}
.gt .mini b{display:block;font-weight:700;font-size:13px}
.gt .mini span{color:var(--encre-2);display:block;margin-top:2px}
.gt .swipe{display:flex;gap:8px;margin-top:11px}
.gt .swipe span{flex:1;text-align:center;font-size:11.5px;font-weight:700;padding:8px;border-radius:8px;border:1px solid var(--line);color:var(--encre-2)}
.gt .swipe .ok{background:var(--bleu);color:#fff;border-color:var(--bleu)}

/* ── Le fondateur : un visage, pas une société anonyme ── */
/* Meme alignement a gauche que la FAQ, pour que les deux blocs se repondent. */
.moi{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;max-width:900px;margin:0}
.avatar{width:88px;height:88px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:29px;font-weight:800;letter-spacing:-.02em;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.moi q{font-size:17.5px;line-height:1.55;font-weight:600;quotes:none;display:block}
.moi .sig{margin-top:14px;font-size:14.5px;color:var(--encre-2);font-weight:600}
.moi .sig a{color:var(--bleu);font-weight:700}

/* ── Objections ── */
/* Aligne a GAUCHE sur le titre de la section. Centre (margin auto), le bloc
   partait 152 px plus a droite que son propre titre — c'est ce qui donnait
   l'impression d'un travail pas fini (constat fondateur, 20/07). */
.faq{max-width:900px;margin:40px 0 0;display:flex;flex-direction:column;gap:12px}
.q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.q h3{font-size:16px;font-weight:700}
.q p{font-size:14.5px;color:var(--encre-2);margin-top:7px;font-weight:500}

/* Prix — mis en perspective */
.perspective{margin-top:64px;background:var(--encre);color:#fff;border-radius:var(--r);padding:24px 28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.perspective b{font-size:17px;font-weight:700}
.perspective span{color:#B9C8E4;font-size:14.5px}

/* ── Mouvement : discret, et coupe si l'utilisateur le refuse ── */
/* L'apparition au defilement utilise le systeme DEJA en place : `site-fx.js`
   ajoute la classe `in` (regles plus haut). Un second systeme en `.vu` avait
   ete introduit ici le 20/07 — il rendait des sections invisibles, car
   `html.js .rv` (specificite 0,2,1) l'emportait sur `.rv.vu` (0,2,0). */

/* ── Burger ── */
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--encre);border-radius:2px;transition:transform .2s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{display:none;position:fixed;inset:auto 0 0;top:64px;z-index:39;background:#fff;padding:20px 24px 32px;flex-direction:column;gap:2px;overflow-y:auto}
.menu.open{display:flex}
.menu a{font-size:17px;font-weight:600;padding:14px 4px;border-bottom:1px solid var(--line)}
.menu .mcta{margin-top:16px;background:var(--bleu);color:#fff;text-align:center;border-radius:11px;padding:15px;border-bottom:0;font-weight:700}

@media(max-width:980px){
  .hero{min-height:0}
  .hero::before{width:100%;border-radius:0}
  .shotbox{margin-right:0}
  .strip{margin:-40px 18px 0;border-radius:16px}
  .strip .in{padding:20px 22px;gap:14px}
  .hero .in,.split,.split.rev{grid-template-columns:1fr;gap:40px}
  .cards,.geste{grid-template-columns:1fr 1fr}
  .prix{grid-template-columns:1fr}
  .float{display:none}
  nav a.l,.sign,.nav-r .cta{display:none}
  .burger{display:flex}
  .nav-r{margin-left:auto}
  .moi{grid-template-columns:1fr;gap:18px;padding:26px}
  .dots{margin-left:0}
}
@media(max-width:620px){
  /* Sans ca : titre qui deborde, CTA coupe, scroll horizontal (constat 20/07) */
  body{overflow-x:hidden}
  .top{font-size:12.5px;padding:10px 16px;line-height:1.45}
  .hero .in{padding:44px 20px 74px}
  h1{font-size:clamp(29px,8.4vw,38px);hyphens:auto}
  .lead{font-size:16px}
  .hero .acts{flex-direction:column;align-items:stretch}
  .hero .acts a{text-align:center}
  .trust{flex-direction:column;gap:10px;align-items:flex-start}
  .cards,.geste{grid-template-columns:1fr}
  .band{padding:58px 0}
  h2{font-size:26px}
  .wrap,.hero .in{padding-inline:20px}
  .strip .in{flex-direction:column;align-items:flex-start;gap:12px}
  .avatar{width:70px;height:70px;font-size:24px}
}


/* --- Bandeau d annonce + barre de navigation de l accueil ------------------
   Scopes sur .nav-e : les autres pages utilisent .nav-bar/.nav-in, un
   selecteur nav nu les aurait ecrasees. */
.top{background:var(--ink);color:#DCE6FA;font-size:13.5px;text-align:center;padding:11px 20px}
.top a{color:var(--safran);text-decoration:underline;text-underline-offset:3px;font-weight:600}

.nav-e{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-e .in{max-width:1200px;margin:0 auto;padding:15px 28px;display:flex;align-items:center;gap:30px}
.nav-e .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink);min-height:44px}
.nav-e .logo svg{width:26px;height:26px;flex:none}
.nav-e .logo svg path{fill:var(--bleu)}
.nav-e a.l{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.nav-e a.l:hover{color:var(--ink)}
.nav-e .nav-r{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-e .sign{font-size:14.5px;font-weight:600}
.nav-e .cta{background:var(--bleu);color:#fff;padding:12px 22px;border-radius:10px;font-size:14.5px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.nav-e .cta:hover{background:var(--bleu-deep)}
@media(max-width:980px){
  .nav-e a.l,.nav-e .sign,.nav-e .cta{display:none}
  .nav-e .burger{display:flex}
}

/* Prix barre du tarif fondateur (page Tarifs). */
.pcard .price s{font-size:.5em;color:var(--ink-2);font-weight:600;opacity:.6;margin-right:.18em;text-decoration-thickness:2px}

/* ── Barre d'action collante (mobile) ─────────────────────────────────────
   Au-dela de 980 px, la navigation porte le CTA en permanence. En dessous,
   elle le MASQUE (`.nav-e .cta{display:none}` plus haut) au profit du burger :
   un visiteur qui descend la page n'a alors plus aucun point d'entree entre
   le hero et la section tarifs. Cette barre restitue ce point d'entree.

   Injectee par site-fx.js : c'est une amelioration progressive. Le CTA du hero
   et celui de la section finale restent dans le HTML — sans JS, la page vend
   toujours.
   z-index 38 : volontairement SOUS le menu mobile (39), pour que l'ouverture
   du burger la recouvre au lieu de la traverser. */
.stickycta{
  position:fixed; left:0; right:0; bottom:0; z-index:38;
  display:none; align-items:center; gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(18,35,63,.10);
  transform:translateY(115%);
  transition:transform .24s ease-out;
}
.stickycta.show{transform:translateY(0)}
.stickycta a{
  flex:1; text-align:center; background:var(--bleu); color:#fff;
  font-weight:700; font-size:15.5px; border-radius:11px;
  padding:14px 18px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
}
.stickycta a:hover{background:var(--bleu-deep)}
.stickycta small{flex:none; font-size:12px; color:var(--ink-2); line-height:1.3; max-width:100px}
@media(max-width:980px){
  .stickycta{display:flex}
  /* Le pied de page ne doit jamais finir sous la barre. */
  html.has-stickycta body{padding-bottom:86px}
}
@media(prefers-reduced-motion:reduce){
  .stickycta{transition:none}
}

/* ── Defilement adouci (Lenis) ────────────────────────────────────────────
   Feuille minimale requise par la bibliotheque. Le smooth natif du CSS doit
   ceder la main quand Lenis est actif, sinon les deux mecanismes se battent
   sur les ancres. Ces regles ne s'appliquent QUE si le script s'est lance et
   a pose ses classes sur <html> : si vendor/lenis.min.js ne charge pas, le
   site retombe sur le defilement natif sans rien casser. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }