/* Stokelya — site vitrine (public, statique). Réutilise la foundation visuelle de
   l'app (canvas blanc, hairline, neutres graphite, type Geist, border-first) et sa
   marque : les 3 arrêts du dégradé sont reportés à la main de
   ~/stokelya-v2/apps/web/app/assets/css/main.css (§ Signature de marque), qui en est
   la source de vérité. Aucun token de marque inventé ici. Mise en page propre au
   marketing (hero, grille de features, tarifs). Zéro JS inline (CSP-safe). */

/* Geist — self-hosted, servi depuis ./fonts/ (site autonome, pas de Google Fonts). */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Neutres — la foundation graphite de l'app, à l'identique. */
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #171717;
  --muted: #737373;
  --line: #e5e5e5;
  --mist: #f2f2f2;
  --white: #fff;
  --ok: #1f9d57;

  /* ---- Marque — LES 3 ARRÊTS DU DÉGRADÉ ----------------------------------------
     Report manuel de la signature de l'app. Source de vérité :
     ~/stokelya-v2/apps/web/app/assets/css/main.css, bloc « Signature de marque ».
     Ces trois hex sont les SEULS de ce fichier à porter la couleur du produit — tout
     ce qui suit en dérive, et aucune règle n'écrit une couleur de marque. Rejouer le
     report = relire ces trois lignes là-bas. Pas de mécanisme d'import : site
     statique autonome, assumé. L'échelle typographique, elle, ne se reporte PAS
     (le marketing lit plus grand que l'outil — cf. --fs-* plus bas). */
  --brand-violet: #4b10af;   /* arrêt sombre — l'encre `secondary` de l'app (10,5:1 sur blanc) */
  --brand-magenta: #b720c5;  /* arrêt central — l'encre `primary` de l'app (5,2:1 sur blanc) */
  --brand-pink: #e400c1;     /* arrêt clair */

  /* L'encre PLATE, pour ce qu'un dégradé ne peut pas peindre : un filet, une coche,
     un anneau de focus. C'est l'arrêt central, exactement comme --ui-primary de
     l'app ; le survol descend sur l'autre bout de la signature. */
  --brand: var(--brand-magenta);
  --brand-d: var(--brand-violet);
  --link: var(--brand-magenta);

  /* Deux forces d'un seul dégradé (les deux que ce site utilise ; l'app en a trois).
     Elles lisent les mêmes arrêts, elles ne peuvent donc pas diverger. */
  --grad-angle: 130deg;
  --brand-grad: linear-gradient(var(--grad-angle),
    var(--brand-violet) 0%, var(--brand-magenta) 50%, var(--brand-pink) 100%);
  /* Le même, fondu dans le papier (12 %, la valeur de l'app) : un fond de soutien qui
     doit rester lisible SOUS de l'encre — la puce d'icône d'une carte. */
  --brand-grad-wash: linear-gradient(var(--grad-angle),
    color-mix(in srgb, var(--brand-violet) 12%, transparent) 0%,
    color-mix(in srgb, var(--brand-magenta) 12%, transparent) 50%,
    color-mix(in srgb, var(--brand-pink) 12%, transparent) 100%);
  --sheen: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  --focus-ring: color-mix(in srgb, var(--brand-magenta) 22%, transparent);

  /* L'encre de marque POSÉE SUR LE VERRE SOMBRE de la section IA (eyebrow, tagline).
     L'arrêt rose nu y rend 2,1:1 — le verre se composite à ~#4c4c4f sur le papier
     blanc, il n'est pas noir. Éclairci d'un tiers il repasse au-dessus de 5:1 (AA sur
     du 13px), sans quitter la signature. La DÉCORATION du panneau (halos, contour
     survolé, puce d'icône) garde les arrêts nus : rien à y lire. */
  --brand-on-glass: color-mix(in srgb, var(--brand-pink) 32%, var(--white));

  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
  --radius-card: 14px;
  --radius-pill: 9999px;

  /* Rythme marketing — plus aéré que l'app, mais discipliné. */
  --container: 1120px;
  --section-y: 96px;
  --shadow-pop: 0 6px 24px rgba(20,25,40,.10), 0 2px 6px rgba(20,25,40,.06);

  /* Échelle typographique — même discipline que l'app (un pas = un RÔLE, nommé par sa
     valeur px), mais échelle PROPRE : le marketing lit plus grand que l'outil (base 16
     contre 14) et s'autorise une typo fluide sur les titres d'accroche. Jamais une valeur
     en dur dans une règle — surtout pas un demi-pixel : 12.5/13.5/14.5 étaient du bruit,
     ils tombent sur le pas le plus proche.
       12  micro capitales : badge d'offre, titre de colonne du pied, puce dégradée
       13  petit : note du hero, points, eyebrow, label de champ, mentions, bas de pied
       14  liens (nav, pied), features de l'offre, descriptif d'offre, bouton compact
       15  corps de carte/étape, bouton, champ de saisie, nom de l'offre
       16  base (body)
       18  titre de carte/étape/IA + chapô de section et du bandeau CTA
       46  le prix
     Fluide (clamp) — les accroches, qui doivent tenir du mobile au grand écran. */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-46: 46px;
  --fs-hero: clamp(38px, 5.2vw, 56px);
  --fs-hero-sub: clamp(17px, 2vw, 20px);
  --fs-h2: clamp(30px, 4vw, 44px);
  --fs-cta: clamp(28px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--brand-d); }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---- Boutons (système .btn-* de l'app, géométrie & graisse identiques) -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: var(--fs-15); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-sm { height: 38px; padding: 0 14px; font-size: var(--fs-14); }
.btn .ic { width: 17px; height: 17px; }

/* Primaire = le dégradé de marque, animé (sheen) — la seule surface haute emphase. */
.btn-primary {
  position: relative; overflow: hidden; color: var(--white); font-weight: 600;
  border-color: transparent;
  background-image: var(--sheen), var(--brand-grad);
  background-size: 220% 100%, auto; background-position: 200% 0, 0 0;
  background-repeat: no-repeat; background-origin: border-box;
  animation: brand-sheen 7s ease-in-out infinite;
}
.btn-primary:hover { color: var(--white); filter: brightness(1.07); }
@keyframes brand-sheen {
  0%, 64% { background-position: 200% 0, 0 0; }
  86%, 100% { background-position: -120% 0, 0 0; }
}

.btn-outline { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--muted); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--mist); color: var(--ink); }
.btn-light { background: var(--white); color: var(--ink); font-weight: 600; }
.btn-light:hover { filter: brightness(.96); color: var(--ink); }
/* Bouton contour posé sur une surface de marque (bandeau CTA dégradé). */
.btn-on-brand { background: transparent; border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-on-brand:hover { background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary { animation: none; }
  .btn { transition: none; }
}

/* ---- En-tête sticky ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 24px; height: 68px; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: 12px; }
.nav-links a { color: var(--muted); font-size: var(--fs-14); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-burger {
  display: none; margin-left: auto; width: 42px; height: 42px; align-items: center;
  justify-content: center; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; color: var(--ink);
}
/* Le menu déroulé n'existe que sur le rail étroit (révélé par la media query). */
.mobile-menu { display: none; }

/* ---- Hero -------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 92px 0 72px; text-align: center; }
.hero::before {
  content: ''; position: absolute; inset: -30% 0 auto 0; height: 720px; z-index: -1;
  background:
    radial-gradient(620px 320px at 50% 0%, color-mix(in srgb, var(--brand-violet) 16%, transparent), transparent 70%),
    radial-gradient(520px 360px at 16% 18%, color-mix(in srgb, var(--brand-pink) 12%, transparent), transparent 70%),
    radial-gradient(560px 360px at 86% 12%, color-mix(in srgb, var(--brand-magenta) 12%, transparent), transparent 72%);
  filter: blur(2px);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 75%);
  opacity: .5;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px;
  border: 1px solid var(--line); background: var(--white); border-radius: var(--radius-pill);
  font-size: var(--fs-13); font-weight: 500; color: var(--ink); box-shadow: var(--shadow-pop);
}
.pill .tag {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill);
  background-image: var(--brand-grad); color: var(--white); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
}
.hero h1 {
  margin: 26px auto 0; max-width: 760px; text-wrap: balance;
  font-size: var(--fs-hero); letter-spacing: -0.04em; line-height: 1.07;
}
.grad-text {
  background-image: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .lead {
  margin: 22px auto 0; max-width: 60ch; font-size: var(--fs-hero-sub); color: var(--muted);
}
.hero-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: var(--fs-13); color: var(--muted); }

/* Bandeau de confiance / signaux */
.trust { margin-top: 56px; }
.trust-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 14px; color: var(--muted); font-size: var(--fs-13);
}
.trust-row .chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--white);
  font-weight: 500; color: var(--ink);
}
.trust-row .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---- Section générique ------------------------------------------------------- */
section { scroll-margin-top: 84px; }
.section { padding: var(--section-y) 0; }
.section-head { max-width: 64ch; margin: 0 auto 48px; text-align: center; }
.section-eyebrow {
  display: inline-block; margin-bottom: 14px; font-size: var(--fs-13); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--brand);
}
.section-head h2 { font-size: var(--fs-h2); letter-spacing: -0.035em; }
.section-head p { margin-top: 16px; font-size: var(--fs-18); color: var(--muted); }

/* ---- Grille de features ------------------------------------------------------ */
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 24px; transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--brand); transform: translateY(-2px); }
/* Puce d'icône : le dégradé fondu dans le papier, sous une icône à l'encre profonde
   (les deux bouts de la signature) — le pendant de la puce d'une tuile KPI de l'app. */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: var(--radius); background-image: var(--brand-grad-wash); color: var(--brand-violet);
  margin-bottom: 16px;
}
.icon-chip svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--fs-18); letter-spacing: -0.02em; }
.card p { margin-top: 8px; color: var(--muted); font-size: var(--fs-15); }

/* ---- Section IA (verre dépoli sombre — l'IA est la signature) ---------------- */
/* Panneau verre dépoli sur la page : fond translucide + flou d'arrière-plan sous le
   graphite ; le texte blanc reste lisible. */
.ai {
  background: rgba(13,13,17,.74); color: var(--white); position: relative; overflow: hidden;
  -webkit-backdrop-filter: blur(7px) saturate(150%);
  backdrop-filter: blur(7px) saturate(150%);
}
.ai::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 320px at 82% -10%, color-mix(in srgb, var(--brand-pink) 28%, transparent), transparent 65%),
    radial-gradient(620px 360px at 8% 110%, color-mix(in srgb, var(--brand-violet) 30%, transparent), transparent 62%);
}
.ai .container { position: relative; z-index: 1; }
.ai .section-eyebrow { color: var(--brand-on-glass); }
.ai .section-head h2 { color: var(--white); }
.ai .section-head p { color: rgba(255,255,255,.66); }
.ai-card {
  position: relative;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-card); padding: 26px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ai-card:hover {
  border-color: color-mix(in srgb, var(--brand-pink) 55%, transparent);
  background: rgba(255,255,255,.06); transform: translateY(-2px);
}
.ai-card .icon-chip {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-violet) 30%, transparent),
    color-mix(in srgb, var(--brand-pink) 30%, transparent));
  color: var(--white); border: 1px solid rgba(255,255,255,.14);
}
.ai-card h3 { color: var(--white); font-size: var(--fs-18); }
.ai-card p { color: rgba(255,255,255,.66); margin-top: 10px; font-size: var(--fs-15); }
.ai-card .ai-tagline {
  display: inline-block; margin-top: 16px; font-size: var(--fs-13); font-weight: 600;
  letter-spacing: .02em; color: var(--brand-on-glass);
}

/* ---- Badge « Bientôt disponible » (feature annoncée, pas encore active) ------- */
/* Ancré en haut à droite de la carte ; lisible sur fond clair (.step) comme sur le
   verre dépoli sombre (.ai-card, override translucide). Tokens uniquement. */
.soon {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--mist);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ai-card .soon, .step .soon { position: absolute; top: 18px; right: 18px; }
.ai-card .soon {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.82);
}

/* ---- Comment ça marche (étapes) ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--radius-pill); background-image: var(--brand-grad); color: var(--white);
  font-weight: 600; font-size: var(--fs-15); margin-bottom: 16px;
}
.step h3 { font-size: var(--fs-18); }
.step p { margin-top: 8px; color: var(--muted); font-size: var(--fs-15); }

/* ---- Tarifs ------------------------------------------------------------------ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
/* Offre unique : une seule carte, centrée et bornée (sinon elle s'étire sur 3 colonnes). */
.pricing-grid.solo { grid-template-columns: minmax(0, 440px); justify-content: center; }
.plan {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 28px;
}
.plan.featured {
  border-color: transparent; position: relative;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--brand-grad) border-box;
  border: 1.5px solid transparent; box-shadow: var(--shadow-pop);
}
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 13px; border-radius: var(--radius-pill); background-image: var(--brand-grad);
  color: var(--white); font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em;
}
.plan-name { font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.plan-desc { margin-top: 4px; color: var(--muted); font-size: var(--fs-14); min-height: 38px; }
.plan-price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount { font-size: var(--fs-46); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan.featured .plan-price .amount { background-image: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-price .per { color: var(--muted); font-size: var(--fs-14); font-weight: 500; }
.plan-cta { margin-top: 20px; }
.plan-features { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-14); color: var(--ink); }
.plan-features li svg { flex: none; width: 18px; height: 18px; color: var(--brand); margin-top: 1px; }
.plan-features li.muted { color: var(--muted); }
.plan-features li.muted svg { color: #b9b9b9; }
.pricing-foot { margin-top: 28px; text-align: center; font-size: var(--fs-14); color: var(--muted); }

/* ---- Bandeau CTA final ------------------------------------------------------- */
.cta-band { padding: 0 0 var(--section-y); }
.cta-inner {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 22px; padding: 64px 32px; color: var(--white);
  background-image: var(--brand-grad);
}
.cta-inner::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 240px at 50% -20%, rgba(255,255,255,.25), transparent 70%);
  pointer-events: none;
}
.cta-inner h2 { position: relative; font-size: var(--fs-cta); letter-spacing: -0.035em; }
/* Chapô en blanc PLEIN, pas à 86 % : l'arrêt central de la nouvelle signature est plus
   clair que celui d'avant, et un blanc translucide y tombait à 4,2:1 — sous le seuil AA
   d'un texte de 18px. La hiérarchie avec le titre tient à la taille et à la graisse. */
.cta-inner p { position: relative; margin: 14px auto 0; max-width: 52ch; color: var(--white); font-size: var(--fs-18); }
.cta-inner .hero-actions { position: relative; }

/* ---- Formulaire de contact --------------------------------------------------- */
.contact-form { max-width: 720px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); }
.field .req { color: var(--brand); margin-left: 2px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-15); color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.form-note { font-size: var(--fs-13); color: var(--muted); }
.contact-privacy { margin-top: 16px; max-width: 60ch; font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
.contact-privacy a { color: var(--brand); }
/* Piège à robots (honeypot) : hors écran, jamais présenté à un humain. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pied ------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-brand { max-width: 320px; }
.footer-brand img { height: 28px; margin-bottom: 14px; }
.footer-brand p { color: var(--muted); font-size: var(--fs-14); }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: var(--fs-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer-col a { display: block; color: var(--ink); font-size: var(--fs-14); padding: 4px 0; }
.footer-col a:hover { color: var(--brand-d); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  color: var(--muted); font-size: var(--fs-13);
}

/* ---- Révélation au scroll (piloté par app.js, dégradé gracieux sans JS) ------ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .ai-card:hover { transform: none; }
}

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-3, .steps, .pricing-grid, .form-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  :root { --section-y: 72px; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .site-header[data-open] .mobile-menu { display: block; }
  .mobile-menu {
    border-bottom: 1px solid var(--line); background: var(--white); padding: 12px 0 18px;
  }
  .mobile-menu a { display: block; padding: 12px 24px; color: var(--ink); font-weight: 500; }
  .mobile-menu a:hover { background: var(--mist); }
  .mobile-menu .btn { margin: 10px 24px 0; display: flex; }
  .hero { padding: 64px 0 56px; }
}