/* ============================================================================
   Cartano — feuille de style de la landing.

   Mêmes jetons que le studio (`apps/ui/src/index.css`) : « warm paper », accent
   ambre, Space Grotesk + IBM Plex Mono. Un visiteur qui passe du site à
   l'application ne doit pas avoir l'impression de changer de produit.

   Pas de framework, pas d'étape de build : la landing est du HTML statique
   servi directement par nginx. Un site vitrine qui exige une chaîne de
   compilation est un site qu'on n'ose plus corriger.
   ========================================================================= */

:root {
  --bg: #f2eee7;
  --panel: #fffdf9;
  --panel2: #f8f4ed;
  --ink: #1b1815;
  --ink2: #736b60;
  --line: #e3dbd1;
  --line2: #cbc1b4;
  --accent: #c2761f;
  --accent-soft: #f7ecdc;
  --ok: #2f7d4f;
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1140px;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141210;
    --panel: #1e1b17;
    --panel2: #262219;
    --ink: #f1ece3;
    --ink2: #968d7e;
    --line: #302c25;
    --line2: #433d33;
    --accent: #e0a04a;
    --accent-soft: #33291c;
    --ok: #6fbf8e;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/*
  `height: auto` est INDISPENSABLE dès qu'une image porte ses attributs
  `width`/`height`. Sans lui, `max-width: 100%` réduit la largeur et laisse la
  hauteur à la valeur déclarée : l'image est écrasée. Constaté le 08/08 sur la
  fiche du héros — 700 × 650 rendue en 348 × 650, soit la moitié de sa largeur.

  Le défaut ne s'était jamais vu parce que la seule image du site était
  `mark.svg` à 26 × 26, jamais contrainte. Il est apparu avec les captures.
*/
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.row { display: flex; align-items: center; gap: 18px; }

/* ── Bandeau de trajectoire ──────────────────────────────────────────
   En tête de page, avant la barre de navigation. Il défile avec le contenu
   (c'est la barre qui colle) : une annonce permanente qui occupe le haut de
   l'écran en permanence devient du décor qu'on ne lit plus.
   ────────────────────────────────────────────────────────────────────── */
.topbanner {
  background: var(--ink); color: var(--bg);
  font-size: 13.5px; line-height: 1.45;
}
.topbanner .wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block: 9px;
}
.topbanner .now {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 5px;
}
@media (prefers-color-scheme: dark) { .topbanner .now { color: #171310; } }
.topbanner .txt { opacity: .88; }
.topbanner .txt b { opacity: 1; font-weight: 600; }
.topbanner .jalon { white-space: nowrap; }
.topbanner .sep { opacity: .4; }
.topbanner a {
  margin-left: auto; color: var(--accent);
  font-weight: 600; white-space: nowrap;
}
.topbanner a:hover { text-decoration: underline; }

/* ── Choix de la langue ──────────────────────────────────────────────
   Ici, et PAS dans la barre de navigation. Celle-ci a été mesurée le 04/08 :
   il fallait 1127 px pour 1092 disponibles, et le rattrapage (gap et
   rembourrage resserrés) n'a rendu que 21 px de marge. Un commutateur de
   plus la ferait repasser à la ligne — le `flex-wrap` la rattraperait sans
   la rendre présentable.

   Le bandeau, lui, a de la place et vit sur toutes les pages, légales
   comprises. La langue COURANTE reste affichée en clair au lieu de
   disparaître : un commutateur qui ne montre que l'autre langue oblige à
   deviner celle qu'on lit.

   ⚠️ `margin-left: 0` est obligatoire — sans lui, la règle `.topbanner a`
   ci-dessus donnerait un second `auto` et les deux blocs se sépareraient
   au lieu de rester groupés à droite.
   ────────────────────────────────────────────────────────────────────── */
.topbanner .lang {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em;
}
.topbanner .lang a,
.topbanner .lang .on {
  margin-left: 0; padding: 3px 7px; border-radius: 5px;
  color: var(--bg); white-space: nowrap;
}
.topbanner .lang .on { background: color-mix(in srgb, var(--bg) 20%, transparent); }
.topbanner .lang a { opacity: .6; }
.topbanner .lang a:hover { opacity: 1; background: color-mix(in srgb, var(--bg) 12%, transparent); text-decoration: none; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* min-height et NON height : à hauteur figée, une navigation qui passe à la
   ligne déborde du cadre au lieu de le pousser — c'est ce qui se voyait le
   04/08. Le filet ne remplace pas la mesure ci-dessous, il évite qu'un futur
   lien de plus repasse inaperçu. */
.topbar .row { min-height: 64px; }
.brand {
  font-weight: 700; font-size: 18px; letter-spacing: .12em;
  display: flex; align-items: center; gap: 10px;
}
/* La marque est une image, plus une lettre dans un carré : c'est le dessin
   réduit de Cartano (arc du C + nœud ambré), lisible jusqu'à 16 px. Le logo
   complet, lui, ne tient pas en dessous de 48 px — mesuré le 04/08. */
.brand .mark {
  width: 26px; height: 26px; display: block; flex: 0 0 auto;
}
/* Mesuré le 04/08 à 1280px : il fallait 1127px pour 1092 disponibles — la
   barre est plafonnée par --wrap (1140px), donc élargir la fenêtre n'y changeait
   RIEN, elle débordait à 1280 comme à 2560. Le gap et le rembourrage des liens
   ont été resserrés de 56px au total, ce qui rend 21px de marge. */
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-link {
  padding: 8px 9px; border-radius: 9px; font-size: 14.5px; color: var(--ink2);
}
.nav-link:hover { color: var(--ink); background: var(--panel2); }
.nav-signin { color: var(--ink); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primary { color: #171310; } }
.btn-ghost { border-color: var(--line2); color: var(--ink); }
.btn-ghost:hover { background: var(--panel2); }

/* ── Héros ───────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 64px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
h1 {
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; margin: 0 0 20px;
  letter-spacing: -.02em; font-weight: 700;
}
h1 .glow { color: var(--accent); }
.lede { font-size: 18px; color: var(--ink2); margin: 0 0 28px; max-width: 58ch; }
.lede b { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.trust {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 13.5px; color: var(--ink2); font-family: var(--font-mono);
}
.trust b { color: var(--ink); }
.trust .sep { color: var(--line2); }

/* ── Mockup signature : une fiche d'asset ────────────────────────────── */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0,0,0,.07);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel2);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink2);
}
.tag {
  margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 11px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.tag.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.card-body { padding: 18px 16px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 16px; }
.kv .k { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); text-transform: uppercase; letter-spacing: .05em; }
.kv .v { font-size: 14.5px; font-weight: 500; }
.issues { border-top: 1px solid var(--line); padding-top: 14px; }
.issue { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 5px 0; }
.issue code { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }
.issue .txt { color: var(--ink2); }

/* ── Sections ────────────────────────────────────────────────────────── */
section { padding: 68px 0; }
section.alt { background: var(--panel2); border-block: 1px solid var(--line); }
h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; letter-spacing: -.015em; }
.sub { color: var(--ink2); font-size: 17px; margin: 0 0 36px; max-width: 64ch; }

/* En-tête de section sur deux colonnes : titre à gauche, chapeau à droite. */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 20px 56px; align-items: end; margin-bottom: 40px;
}
.sec-head h2 { margin: 0; }
.sec-head .sub { margin: 0; max-width: none; }
.sec-head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-head.center .sub { max-width: 66ch; }
.grid { display: grid; gap: 20px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.feat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.feat h3 { margin: 0 0 8px; font-size: 17.5px; }
.feat p { margin: 0; color: var(--ink2); font-size: 14.8px; }
.feat .ico {
  width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; margin-bottom: 14px;
  font-size: 17px;
}

/* ── Chiffres ────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; padding: 18px; }
.stat .n { font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1; }
.stat .l { font-size: 13.5px; color: var(--ink2); margin-top: 8px; }

/* ── Notations ───────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-family: var(--font-mono); font-size: 12.5px; padding: 7px 13px;
  border: 1px solid var(--line2); border-radius: 999px; color: var(--ink2);
  background: var(--panel);
}

/* ── Tarifs ──────────────────────────────────────────────────────────── */
/* Quatre paliers : la grille se resserre, les marges intérieures aussi.
   À 1140 px de large, quatre colonnes laissent ~250 px chacune — au-delà de
   26 px de marge, le texte se met à casser à chaque mot. */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.tier {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px; position: relative;
  display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--accent); box-shadow: 0 14px 40px rgba(194,118,31,.14); }
.tier .badge {
  position: absolute; top: -11px; left: 18px; background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  letter-spacing: .04em;
}
@media (prefers-color-scheme: dark) { .tier .badge { color: #171310; } }
.tier h3 { margin: 0 0 4px; font-size: 19px; }
.tier .who { color: var(--ink2); font-size: 13.5px; margin: 0 0 16px; min-height: 56px; }
.price { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.price small { font-size: 12.5px; font-weight: 500; color: var(--ink2); display: block; margin-top: 2px; }
.price-note { font-size: 12.5px; color: var(--ink2); margin: 4px 0 20px; font-family: var(--font-mono); }
.tier ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.tier li { padding: 6px 0 6px 22px; position: relative; font-size: 13.8px; color: var(--ink2); }
.tier li::before {
  content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.tier li.no { color: var(--line2); }
.tier li.no::before { content: '—'; color: var(--line2); }
.tier .btn { width: 100%; margin-top: auto; }

/* ── Formulaire / contact ────────────────────────────────────────────── */
.form { display: grid; gap: 14px; max-width: 520px; }
.field label {
  display: block; font-size: 13px; color: var(--ink2); margin-bottom: 6px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px; border-radius: 10px; font: inherit; font-size: 15px;
  background: var(--panel); border: 1px solid var(--line2); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
}
.form-note { font-size: 13px; color: var(--ink2); }
.calendly-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); min-height: 640px; overflow: hidden;
}

/* ── Pied de page ────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line); padding: 40px 0 56px;
  color: var(--ink2); font-size: 14px;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin: 0 0 12px; }
footer a { display: block; padding: 4px 0; }
footer a:hover { color: var(--accent); }
.legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }

/* ── Contenu long (pages légales) ────────────────────────────────────── */
.prose { max-width: 88ch; }
.prose h2 { font-size: 21px; margin: 34px 0 10px; }
.prose p, .prose li { color: var(--ink2); font-size: 16px; line-height: 1.7; }
.prose strong { color: var(--ink); }
.prose table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: var(--panel2); color: var(--ink); }

/* ── Illustrations de canevas ─────────────────────────────────────────
   Des SVG en ligne, pas des captures d'écran. Trois raisons, dans l'ordre :
     1. une capture du studio réel montrerait NOTRE référentiel — nos serveurs,
        nos domaines, nos adresses. Publier son infrastructure sur sa propre
        page d'accueil est une mauvaise idée ;
     2. un SVG suit le thème clair/sombre, une image PNG non ;
     3. il pèse deux kilo-octets et reste net sur un écran à haute densité.
   Les couleurs sont prises aux variables : le visuel ne peut pas diverger de
   l'identité du produit sans qu'on s'en aperçoive.
   ────────────────────────────────────────────────────────────────────── */
.canvas-fig {
  display: block; width: 100%; height: auto;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.canvas-fig .box { fill: var(--panel); stroke: var(--line2); stroke-width: 1; }
.canvas-fig .box-acc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.canvas-fig .band { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.canvas-fig .line { stroke: var(--line2); stroke-width: 1.4; fill: none; }
.canvas-fig .line-acc { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.canvas-fig .t { fill: var(--ink); font-family: var(--font-sans); font-size: 11px; font-weight: 600; }
.canvas-fig .t2 { fill: var(--ink2); font-family: var(--font-mono); font-size: 9.2px; }
.canvas-fig .t-acc { fill: var(--accent); font-family: var(--font-mono); font-size: 9.2px; font-weight: 600; }
.canvas-fig .sep { stroke: var(--line); stroke-width: .8; }
.canvas-fig .dot { fill: var(--accent); }

/* Galerie de canevas.
   `.gallery` en 3 colonnes sert d'aperçu sur l'accueil. `.gallery.large` en
   2 colonnes est réservé à la page dédiée : une figure rendue sur 275 px pour
   un viewBox de 400 réduit le texte d'un tiers, et une illustration qu'on ne
   peut pas lire ne démontre rien. */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery.large { grid-template-columns: repeat(2, 1fr); gap: 26px; }
.cv {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cv:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.09); }
.cv-body { padding: 16px 18px 20px; }
.cv .nota {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em;
}
.cv h3 { margin: 6px 0 7px; font-size: 16.5px; }
.cv p { margin: 0; color: var(--ink2); font-size: 14px; }
.cv .tranche {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink2);
}
.cv .tranche b { color: var(--ink); font-weight: 600; }

/* Cartes SANS figure — les familles qu'on ÉNUMÈRE plutôt que d'illustrer.
   Dessiner vingt-six figures à la main donnerait vingt-six illustrations dont
   la moitié n'apprendrait rien : un registre de risques et un journal de
   décisions se ressemblent à l'écran, c'est leur RÈGLE qui diffère. On montre
   donc la règle, et on garde les figures pour ce qui se lit d'un coup d'œil. */
.gallery.compact { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery.compact .cv-body { padding: 15px 17px 17px; }
.gallery.compact .cv h3 { font-size: 15.5px; }
.gallery.compact .cv p { font-size: 13.4px; line-height: 1.55; }
.gallery.compact .cv .tranche { margin-top: 10px; padding-top: 9px; font-size: 12.6px; }

/* ── Pastille de version ──────────────────────────────────────────────
   Annoncer l'alpha n'est pas un aveu, c'est un contrat : le visiteur sait ce
   qu'il achète, et personne ne découvre en réunion que le produit est jeune.
   ────────────────────────────────────────────────────────────────────── */
.pill {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 6px;
  background: var(--accent); color: #fff;
  white-space: nowrap; line-height: 1.35;
}
@media (prefers-color-scheme: dark) { .pill { color: #171310; } }
.brand .pill { margin-left: 4px; letter-spacing: .08em; }

/* ── Trajectoire ─────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.step {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; position: relative;
}
.step.now { border-color: var(--accent); box-shadow: 0 14px 40px rgba(194,118,31,.13); }
.step .when {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink2);
}
.step.now .when { color: var(--accent); }
.step h3 { margin: 8px 0 10px; font-size: 19px; }
.step p { margin: 0 0 14px; color: var(--ink2); font-size: 14.6px; }
.step ul { list-style: none; padding: 0; margin: 0; }
.step li { padding: 5px 0 5px 20px; position: relative; font-size: 13.8px; color: var(--ink2); }
.step li::before { content: '·'; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }

/* Capture large (atelier d'agents) */
.shot {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
  box-shadow: 0 22px 54px rgba(0,0,0,.10);
}
.shot-bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  background: var(--panel2); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink2);
}
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); display: block; }

/* Fiche d'asset du héros — reprend l'enveloppe de `.card` qu'elle remplace,
   pour que la colonne droite du héros garde exactement le même poids visuel. */
.fiche-hero {
  /* 350 px pour une image de 700 : exactement 2×. Sans ce plafond, la colonne
     du héros étirait la capture à ~470 px — elle écrasait le titre, et le
     texte d'interface passait au-dessus de sa résolution native. */
  margin: 0 0 0 auto; max-width: 320px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
  box-shadow: 0 22px 54px rgba(0,0,0,.10);
}
@media (max-width: 900px) { .fiche-hero { margin-inline: auto; } }

/* ── Preuves produit — captures réelles ───────────────────────────────
   Une colonne, pas une grille. Ces captures portent du texte d'interface de
   11 à 13 px : à deux par ligne elles descendent sous 560 px de large et
   deviennent illisibles — donc décoratives, donc inutiles. Une preuve qu'on
   ne peut pas lire ne prouve rien.

   `--shot-max` borne la largeur : au-delà de ~1000 px l'image est agrandie
   au-dessus de sa résolution native et le texte devient flou.
   ────────────────────────────────────────────────────────────────────── */
.preuves { display: grid; gap: 46px; }
/* `min-width: 0` n'est pas cosmétique : un enfant de grille vaut `min-width:
   auto` par défaut, donc il refuse de devenir plus étroit que son contenu. Le
   cadre défilant ci-dessous n'aurait alors jamais défilé — c'est la PAGE qui
   se serait élargie à la capture, et le corps du texte serait sorti de
   l'écran à droite. Mesuré : 1018 px de large pour un écran de 390. */
.preuve { margin: 0; max-width: 820px; margin-inline: auto; width: 100%; min-width: 0; }
.preuve figcaption {
  margin-top: 14px; color: var(--ink2); font-size: 15px; line-height: 1.65; max-width: 70ch;
}
.preuve figcaption b { color: var(--ink); }
.ok-txt { color: var(--ok); font-weight: 600; }

/* ── Les captures sur écran étroit ────────────────────────────────────
   Réduites à 350 px de large, ces images ne se lisent plus : le texte
   d'interface tombe sous 4 px. Une capture illisible n'est pas une preuve
   affaiblie, c'est une décoration — et elle coûte 40 Ko à télécharger pour
   rien.

   On les laisse donc à leur TAILLE NATIVE et on fait défiler le cadre. Le
   lecteur promène l'écran, comme il le ferait sur une carte. C'est le seul
   arrangement qui garde l'image lisible ; la réduire ne le fait pas.

   `overflow-x` remplace le `overflow: hidden` de `.shot`, dont le seul rôle
   est d'écrêter les coins arrondis. `overscroll-behavior-inline: contain`
   évite que le geste emporte la page entière une fois le bord atteint.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .preuve .shot { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
  .preuve .shot img { max-width: none; }
  .preuve .shot-bar { position: sticky; left: 0; }
  .preuve figcaption::before {
    content: '↔ faites glisser la capture pour la lire';
    display: block; margin-bottom: 8px;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--accent);
  }
}

/* ── Apparition douce ─────────────────────────────────────────────────
   ⚠️ L'animation n'est armée QUE si JavaScript a posé `.js` sur <html>.
   Écrire `.fade { opacity: 0 }` sans condition rend tout le contenu invisible
   dès que le script ne s'exécute pas — script bloqué, erreur, robot
   d'indexation qui ne l'attend pas. Une page vitrine dont le texte dépend de
   JavaScript pour EXISTER est un mauvais pari : le défaut doit être visible,
   et l'animation un bonus.
   ────────────────────────────────────────────────────────────────────── */
.js .fade { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .fade { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Adaptatif ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid, .g3, .g2, .stats, .foot-grid, .gallery, .gallery.large, .sec-head {
    grid-template-columns: 1fr;
  }
  /* En une colonne, le chapeau se recolle sous son titre. */
  .sec-head { gap: 12px; align-items: start; }
  .stats, .tiers { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 48px 0 40px; }
  .nav { gap: 2px; }
  .nav-link { padding: 7px 9px; font-size: 13.5px; }
}

/* ── Étroit ──────────────────────────────────────────────────────────
   L'en-tête collait en haut AVEC une hauteur fixe de 64 px, alors que la
   navigation passait à la ligne : la barre débordait par-dessus le contenu et
   masquait le titre. Constaté à 390 px, puis À NOUVEAU à ~1050 px après
   l'ajout d'une entrée — d'où un seuil porté à 1080 px : la largeur à laquelle
   ça casse dépend du NOMBRE d'entrées, qui bouge. Mieux vaut basculer trop tôt
   que de refaire le constat à chaque ajout. Deux corrections, pas une :
     · la hauteur devient libre — une barre qui contient plus doit être
       plus haute, pas déborder ;
     · elle cesse de coller — une barre haute qui suit le défilement mange
       la moitié d'un petit écran.
   ────────────────────────────────────────────────────────────────────── */
/* ── La bande 1081-1139 px ────────────────────────────────────────────
   Mesuré le 04/08 : la barre a besoin de 1072 px de contenu, et `--wrap`
   (1140 px) n'en libère 1092 qu'à partir d'une fenêtre de 1140. Entre le seuil
   de repli existant (1080) et cette largeur, elle passait donc à deux lignes
   SANS le traitement prévu — d'où l'appel à l'action relégué sous la
   navigation, sur un écran de bureau ordinaire.

   Règle distincte, et non seuil du bloc suivant déplacé : celui-ci porte aussi
   les grilles de contenu (tarifs en une colonne, marges de section). Le monter
   à 1140 aurait changé la mise en page de tout le site pour corriger une barre.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1139px) {
  .topbar .row { flex-wrap: wrap; row-gap: 6px; padding: 9px 0; }
  .nav { margin-left: 0; width: 100%; justify-content: flex-start; }
  .nav .btn { margin-left: auto; }
}

@media (max-width: 1080px) {
  .topbar { position: static; }
  .topbar .row { height: auto; min-height: 56px; padding: 10px 0; flex-wrap: wrap; row-gap: 4px; }
  .nav { margin-left: 0; width: 100%; justify-content: flex-start; }
  .nav .btn { margin-left: auto; }
  section { padding: 46px 0; }
  .tiers { grid-template-columns: 1fr; }
  /*
    Défaut PRÉEXISTANT, mesuré le 08/08 en portant les captures : la frise de
    la trajectoire restait à `repeat(3, 1fr)` à toutes les tailles. Un enfant
    de grille valant `min-width: auto`, les trois colonnes refusaient de
    descendre sous leur contenu — 545 px de frise dans 354 px d'écran, et
    TOUTE la page d'accueil défilait latéralement sur un téléphone. Le
    visiteur le rencontre avant d'avoir lu une phrase.
  */
  .steps { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
  .prose table { display: block; overflow-x: auto; }
}

/* ── Piège à robots ─────────────────────────────────────────────────────
   Le champ `website` du formulaire de contact. Il doit être invisible à
   l'œil ET au lecteur d'écran, sans recourir à `type="hidden"` — que les
   automates savent reconnaître et éviter. `position:absolute` hors cadre
   plutôt que `display:none`, pour la même raison.
   ────────────────────────────────────────────────────────────────────── */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Les trois portes ───────────────────────────────────────────────────
   La douleur est en italique atténué, le bénéfice en corps plein : le
   visiteur doit se reconnaître dans la première ligne AVANT de lire l'offre.
   Sans ce contraste, les trois cartes se lisent comme trois paragraphes
   identiques et la section ne trie personne.
   ────────────────────────────────────────────────────────────────────── */
.porte { display: flex; flex-direction: column; }
.porte .douleur {
  font-style: italic;
  color: var(--ink2);
  border-left: 2px solid var(--line, rgba(0, 0, 0, .12));
  padding-left: 12px;
  margin: 0 0 12px;
}
.porte-cta {
  margin-top: auto;
  padding-top: 12px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.porte-cta:hover { text-decoration: underline; }

/* ── La boucle en cinq temps ────────────────────────────────────────────
   Numérotée à la main : le compteur CSS permet de styler le chiffre, ce que
   `list-style` ne laisse pas faire. Le chiffre est l'ancre de lecture — il
   doit se voir avant la phrase.
   ────────────────────────────────────────────────────────────────────── */
.boucle {
  counter-reset: pas;
  list-style: none;
  padding: 0;
  margin: 0 0 38px;
  display: grid;
  gap: 14px;
}
.boucle li {
  counter-increment: pas;
  position: relative;
  padding-left: 44px;
  color: var(--ink2);
  line-height: 1.55;
}
.boucle li::before {
  content: counter(pas);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.boucle li b { color: var(--ink); }

/* ── Encadré de clôture ─────────────────────────────────────────────── */
.encadre {
  margin-top: 34px;
  padding: 22px 26px;
  border-left: 3px solid var(--accent);
  background: rgba(194, 118, 31, .06);
  border-radius: 0 8px 8px 0;
}
.encadre h3 { margin: 0 0 8px; }
.encadre p { margin: 0; color: var(--ink2); }

/* ── La chaîne, en pas visibles ─────────────────────────────────────────
   Les chevrons sont posés en `::after` et non dans le texte : un lecteur
   d'écran énoncerait sinon « supérieur » entre chaque étape. Le dernier pas
   n'en porte pas — d'où le `:last-child`.
   ────────────────────────────────────────────────────────────────────── */
.chaine-pas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 4px;
}
.chaine-pas li {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  border-radius: 999px;
  font-size: 15px;
  white-space: nowrap;
  background: var(--bg, transparent);
}
.chaine-pas li::after {
  content: "→";
  margin-left: 14px;
  margin-right: -6px;
  color: var(--accent);
}
.chaine-pas li:last-child { border-color: var(--accent); }
.chaine-pas li:last-child::after { content: none; }

/* ── Formulaire : deux champs sur une ligne, et la case à cocher ────────
   Prénom/Nom tiennent sur une ligne au-dessus de 560 px, et repassent l'un
   sous l'autre en dessous — sinon deux champs de 8 caractères de large.
   ────────────────────────────────────────────────────────────────────── */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 14px;
  color: var(--ink2);
}
/* `flex-shrink: 0` : sans lui, la case s'écrase à mesure que le libellé
   s'allonge, et devient un rectangle de 3 px impossible à viser. */
.field-check input { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; }
.field-check a { color: var(--accent); }

/* Emplacement Turnstile — ne réserve de la place que s'il est actif. */
.cf-turnstile:not(:empty) { margin: 4px 0 16px; }