/* Learnya — landing premium (calme / épurée).
   Marque conservée : orange WorkStreams (#c97a23 / #f3a752), Space Grotesk (display) + Inter (texte),
   logo « chip Ly », croix suisse = repère de souveraineté uniquement.
   Sans dépendance externe (CSP stricte) — fonts auto-hébergées. */

/* ── Fonts auto-hébergées ────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/fonts/SpaceGrotesk.woff2") format("woff2");
}

/* ── Tokens (clair par défaut) ──────────────────────────────────────────────── */
:root {
  /* neutres chauds — pas de gris pur */
  --bg: #f8f6f0;            /* fond de page (blanc cassé chaud) */
  --surface: #ffffff;       /* cartes / éléments surélevés */
  --surface-2: #fcfbf6;     /* fond secondaire subtil */
  --ink: #1b1712;           /* texte fort */
  --ink-soft: #4a4237;      /* texte courant secondaire */
  --muted: #6d6659;         /* texte discret (AA) */
  --line: #e8e2d6;          /* filet fin */
  --line-2: #ddd5c6;        /* filet un peu plus marqué */

  /* accent marque WorkStreams */
  --accent: #c97a23;        /* orange WS foncé — filets, bordures, aplats */
  /* Accent EN PETIT TEXTE. `--accent` mesure 3,09:1 sur --bg : il échoue le
     seuil AA (4,5) partout où il sert de couleur de caractères, ce qui est
     précisément l'usage des kickers et des étiquettes. Vérifié : 4,82:1 sur
     --bg, 5,21 sur --surface, 5,03 sur --surface-2. */
  --accent-text: #9c5e1a;
  --accent-strong: #a9621a; /* focus / hover (AA sur clair) */
  --cta: #f3a752;           /* orange WS clair — fond des CTA */
  --cta-ink: #1b1712;       /* texte sombre sur orange */
  --cta-hover: #ef9a3e;

  /* bande sombre « souveraineté » */
  --band: #14110d;
  --band-ink: #f6f2ea;
  --band-soft: #d8d1c2;
  --band-muted: #a89f8d;
  --band-line: rgba(255, 255, 255, .11);

  --swiss: #da291c;         /* croix suisse — repère souveraineté */
  --chip-bg: #020202;       /* fond du logo chip en thème clair */

  /* ombres (teintées chaud, très douces) */
  --shadow-sm: 0 1px 2px rgba(27, 20, 10, .05);
  --shadow: 0 6px 20px -12px rgba(27, 20, 10, .18);
  --shadow-lg: 0 42px 90px -48px rgba(27, 20, 10, .42), 0 16px 40px -30px rgba(27, 20, 10, .20);

  --r-sm: 9px;
  --r: 14px;
  --r-lg: 22px;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 68px);

  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-synthesis-weight: none;
}

/* dark auto (système) — ne s'applique pas si l'utilisateur a forcé clair */
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --bg: #0c0b09; --surface: #151310; --surface-2: #1b1813;
    --ink: #f4f1ea; --ink-soft: #d3ccbd; --muted: #9a927f;
    --line: #262117; --line-2: #322c20;
    --accent: #f3a752; --accent-strong: #f6bc7a; --accent-text: #f3a752;
    --cta: #f3a752; --cta-ink: #1b1712; --cta-hover: #f6bc7a;
    --band: #131009; --band-ink: #f4f1ea; --band-soft: #cfc8ba; --band-muted: #9a927f;
    --band-line: rgba(255, 255, 255, .08);
    --swiss: #ff5148; --chip-bg: transparent;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 8px 24px -14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 50px 100px -50px rgba(0, 0, 0, .75), 0 18px 44px -30px rgba(0, 0, 0, .5);
  }
}
/* dark forcé (bouton) — gagne dans les deux sens */
:root[data-theme="dark"] {
  --bg: #0c0b09; --surface: #151310; --surface-2: #1b1813;
  --ink: #f4f1ea; --ink-soft: #d3ccbd; --muted: #9a927f;
  --line: #262117; --line-2: #322c20;
  --accent: #f3a752; --accent-strong: #f6bc7a; --accent-text: #f3a752;
  --cta: #f3a752; --cta-ink: #1b1712; --cta-hover: #f6bc7a;
  --band: #131009; --band-ink: #f4f1ea; --band-soft: #cfc8ba; --band-muted: #9a927f;
  --band-line: rgba(255, 255, 255, .08);
  --swiss: #ff5148; --chip-bg: transparent;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 8px 24px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 50px 100px -50px rgba(0, 0, 0, .75), 0 18px 44px -30px rgba(0, 0, 0, .5);
}

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

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.62;
  font-feature-settings: "cv05" 1, "ss01" 1; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); letter-spacing: -0.028em; line-height: 1.06; }
h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.012em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 640; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 3px;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: var(--r-sm); font-weight: 560; }
.skip:focus { left: 14px; top: 14px; }

/* ── Utilitaires ────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-body); font-size: .74rem; font-weight: 640;
  letter-spacing: .15em; text-transform: uppercase; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: .55rem;
}

/* ── Logo chip « Ly » ───────────────────────────────────────────────────────── */
.chip { display: inline-grid; place-items: center; flex: none; border-radius: 8px; padding: 3px; background: var(--chip-bg); box-sizing: border-box; }
.chip svg { display: block; width: 100%; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 1.22rem; color: var(--ink); }

/* ── Croix suisse (repère souveraineté) ─────────────────────────────────────── */
.swiss { display: inline-block; width: 1em; height: 1em; background: var(--swiss); position: relative; border-radius: 2px; flex: none; }
.swiss::before, .swiss::after { content: ""; position: absolute; background: #fff; }
.swiss::before { left: 50%; top: 20%; width: 20%; height: 60%; transform: translateX(-50%); }
.swiss::after  { top: 50%; left: 20%; height: 20%; width: 60%; transform: translateY(-50%); }

/* ── Boutons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .93rem; font-weight: 560; line-height: 1;
  padding: .68rem 1.1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .08s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); font-weight: 640; }
.btn-accent:hover { background: var(--cta-hover); border-color: var(--cta-hover); box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--cta) 70%, transparent); }
.btn-lg { padding: .92rem 1.6rem; font-size: 1.02rem; border-radius: calc(var(--r-sm) + 1px); }

/* ── Segmented (langue / devise / facturation / thème) ──────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.seg button { font: inherit; font-size: .82rem; font-weight: 560; padding: .42rem .68rem; background: transparent; color: var(--muted); border: 0; cursor: pointer; transition: background .14s ease, color .14s ease; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--ink); background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line); }
.hdr .row { display: flex; align-items: center; gap: 1.3rem; height: 68px; }
.nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav a.link { color: var(--ink-soft); font-size: .92rem; font-weight: 520; transition: color .14s ease; }
.nav a.link:hover { color: var(--ink); }
.nav-links { display: flex; gap: 1.5rem; }

/* Nav mobile : hamburger (caché sur desktop) + panneau replié. */
.burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mmenu { display: none; flex-direction: column; gap: .1rem; padding: .7rem 1.25rem 1.35rem; background: color-mix(in srgb, var(--bg) 96%, transparent); border-bottom: 1px solid var(--line); position: sticky; top: 68px; z-index: 39; backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); }
.mmenu.open { display: flex; }
.mmenu .mm-link { padding: .8rem .1rem; color: var(--ink-soft); font-size: 1.02rem; font-weight: 520; border-bottom: 1px solid var(--line); }
.mmenu .mm-link:hover { color: var(--ink); }
.mmenu .mm-seg { align-self: flex-start; margin: .95rem 0 .35rem; flex-wrap: wrap; }
.mmenu .btn { width: 100%; justify-content: center; margin-top: .55rem; }

/* Sélecteur de langue : <select> stylé (remplace le segmented list « trop liste »). */
.lang { appearance: none; -webkit-appearance: none; font: inherit; font-size: .86rem; font-weight: 560; line-height: 1.1; color: var(--ink); background-color: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .5rem 2.05rem .5rem .74rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a927f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .62rem center; transition: border-color .14s ease, background-color .14s ease; }
.lang:hover { border-color: var(--ink); background-color: var(--surface-2); }
.lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang option { color: #17140f; background: #fff; }   /* menu déroulant natif lisible sur les 2 thèmes */
.mm-lang { width: 100%; box-sizing: border-box; margin: .95rem 0 .35rem; }
.btn { white-space: nowrap; }                          /* « Se connecter » ne passe plus à la ligne */

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav .lang { display: none; }             /* sélecteur de langue déplacé dans le menu */
  .nav .btn:not(.btn-accent) { display: none; } /* « Se connecter » déplacé dans le menu */
  .burger { display: flex; }
}
@media (max-width: 620px) {
  .hdr .row { gap: .7rem; }
  .nav { gap: .6rem; }
  .nav .btn:not(.btn-accent) { display: none; } /* masque « Se connecter » sur mobile étroit */
}

/* ── Sections (rythme vertical ample + filets fins) ─────────────────────────── */
section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec-head { max-width: 46ch; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.sec-head h2 { margin-top: .85rem; }
.sec-head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.05rem; }
.divide { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 62% at 82% 4%, color-mix(in srgb, var(--cta) 22%, transparent), transparent 68%),
    radial-gradient(40% 50% at 96% 32%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.hero .grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2.4rem, 5vw, 4.6rem); align-items: center; }
@media (max-width: 940px) { .hero .grid { grid-template-columns: 1fr; gap: 3rem; } }
.hero h1 { margin-top: 1.3rem; }
.hero .sub { margin-top: 1.5rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink-soft); max-width: 34ch; line-height: 1.5; }
.hero .cta { margin-top: 2.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.hero .fineprint { margin-top: 1.25rem; font-size: .84rem; color: var(--muted); }

/* ── Mock produit (illustration honnête d'une interface d'agent) ────────────── */
.mock {
  position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-lg);
}
.mock::after { /* liseré interne subtil (surtout visible en sombre) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
.mock .bar { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.mock .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mock .addr { margin-left: .55rem; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.mock .addr::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #35b06a; flex: none; }
.mock .body { padding: 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; font-size: .88rem; }
.msg { padding: .68rem .9rem; border-radius: 12px; max-width: 86%; line-height: 1.5; }
.msg.u { align-self: flex-end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 5px; }
.msg.a { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.tool { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; font-size: .77rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .34rem .7rem; background: var(--surface); }
.tool .tool-ico { display: inline-flex; color: var(--accent); }
.tool .tool-ico svg { display: block; width: 13px; height: 13px; }
.tool b { color: var(--ink-soft); font-weight: 620; }
/* faux tableau comparatif (décoratif, sous la réponse) */
.mock-table { align-self: flex-start; width: 86%; margin-top: .1rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.mt-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: .55rem; padding: .5rem .65rem; align-items: center; }
.mt-row + .mt-row { border-top: 1px solid var(--line); }
.mt-row i { height: 6px; border-radius: 3px; background: var(--line-2); display: block; }
.mt-row.mt-head i { background: color-mix(in srgb, var(--ink) 32%, var(--line-2)); height: 5px; }
.mt-row.mt-hi { background: color-mix(in srgb, var(--cta) 14%, transparent); }
.mt-row.mt-hi i { background: color-mix(in srgb, var(--accent) 62%, var(--line-2)); }
.mocklabel { text-align: center; font-size: .74rem; color: var(--muted); margin-top: .85rem; letter-spacing: .01em; }

/* ── Trust strip ────────────────────────────────────────────────────────────── */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.trust .row { display: flex; flex-wrap: wrap; gap: .7rem 2.2rem; padding: 1.15rem 0; font-size: .85rem; color: var(--muted); align-items: center; }
.trust .row span { display: inline-flex; align-items: center; gap: .5rem; }

/* ── Produit (features) ─────────────────────────────────────────────────────── */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (max-width: 860px) { .feats { grid-template-columns: 1fr; } }
.feat { background: var(--surface); padding: 1.9rem 1.75rem; transition: background .18s ease; }
.feat:hover { background: var(--surface-2); }
.feat .k { font-family: var(--font-body); font-size: .72rem; font-weight: 640; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-text); }
.feat h3 { margin: .75rem 0 .55rem; font-size: 1.14rem; }
.feat p { color: var(--muted); font-size: .94rem; line-height: 1.55; }

/* ── Souveraineté (bande sombre) ────────────────────────────────────────────── */
.band { position: relative; background: var(--band); color: var(--band-ink); overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 60% at 88% 0%, color-mix(in srgb, var(--cta) 14%, transparent), transparent 70%); }
.band .wrap { position: relative; }
.band .eyebrow { color: var(--band-soft); }         /* kicker dérivé de band-ink, pas de l'accent */
.band .sec-head { max-width: 42ch; }
.band h2 { color: var(--band-ink); }
.band .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 2.6rem; }
@media (max-width: 860px) { .band .cols { grid-template-columns: 1fr; gap: 1.5rem; } }
.band .col { padding-top: 1.4rem; border-top: 1px solid var(--band-line); }
.band .col h3 { color: var(--band-ink); display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.band .col p { color: var(--band-muted); font-size: .94rem; margin-top: .55rem; line-height: 1.55; }

/* ── Sécurité & conformité ──────────────────────────────────────────────────── */
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (max-width: 760px) { .sec-grid { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.55rem; background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; }
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: .5rem; font-size: 1.1rem; }
.card p { color: var(--muted); font-size: .93rem; line-height: 1.55; }
.card .pending { font-size: .72rem; color: var(--accent-text); font-weight: 640; text-transform: uppercase; letter-spacing: .06em; }

/* ── Tarifs ─────────────────────────────────────────────────────────────────── */
.pricing { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin-bottom: 2.4rem; }
.pricing-controls .lbl { font-size: .8rem; color: var(--muted); font-weight: 560; }
/* Mention fiscale : lisible sans crier. Elle doit être lue avant le prix,
   donc placée juste au-dessus des cartes, pas reléguée en pied de page. */
.pricing-tax { font-size: .82rem; color: var(--muted); margin: -1.6rem 0 2rem; }

/* ── Témoignages ─────────────────────────────────────────────────────────
   `.is-template` marque un contenu de démonstration : trame diagonale
   discrète + badge. L'apparence doit rendre la substitution ÉVIDENTE, pour
   qu'un gabarit oublié se voie au premier coup d'œil au lieu de passer pour
   un avis authentique. */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote { position: relative; margin: 0; border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.7rem; background: var(--surface); display: flex; flex-direction: column; gap: .9rem; }
.quote blockquote { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink-soft); }
/* Guillemets par langue — `app.js` tient à jour `documentElement.lang`, donc
   `:lang()` suit le sélecteur de langue sans JavaScript supplémentaire. Le
   chevron français dans une citation anglaise trahit une traduction faite à
   la va-vite ; sur un site qui vend de la rigueur suisse, ça se remarque. */
.quote blockquote::before { content: "«\00a0"; color: var(--muted); }
.quote blockquote::after { content: "\00a0»"; color: var(--muted); }
.quote:lang(en) blockquote::before, .quote:lang(pt) blockquote::before { content: "\201C"; }
.quote:lang(en) blockquote::after,  .quote:lang(pt) blockquote::after  { content: "\201D"; }
.quote:lang(de) blockquote::before { content: "\00AB\00a0"; }
.quote:lang(de) blockquote::after  { content: "\00a0\00BB"; }
.quote:lang(it) blockquote::before, .quote:lang(es) blockquote::before { content: "\00AB"; }
.quote:lang(it) blockquote::after,  .quote:lang(es) blockquote::after  { content: "\00BB"; }
.quote figcaption { font-size: .82rem; color: var(--muted); margin-top: auto; }
.quotes.is-template .quote {
  /* 18 % et non 7 % : mesurée au pixel, la trame à 7 % rendait 1,10:1 en
     clair comme en sombre — invisible. Or son unique fonction est d'être vue :
     un gabarit oublié doit sauter aux yeux au lieu de passer pour un vrai
     témoignage. Bordure à 2 px pour la même raison. */
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--muted) 18%, transparent) 8px 11px),
    var(--surface);
  border-style: dashed;
  border-width: 2px;
}
.quote__badge { align-self: flex-start; font-size: .66rem; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .2rem .55rem; }
.quotes:not(.is-template) .quote__badge { display: none; }
.quotes-note { font-size: .85rem; color: var(--muted); margin-top: 1.4rem; }

/* Terme défini ailleurs sur la page : souligné en pointillé, comme une
   entrée de glossaire. Le lien mène à sa définition dans la FAQ — « 5 runs »
   ne veut rien dire tant qu'on ne sait pas ce qu'est un run. */
.deflink { color: inherit; text-decoration: underline dotted; text-underline-offset: .22em; text-decoration-color: var(--muted); }
.deflink:hover { text-decoration-color: var(--accent); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.9rem 1.7rem; background: var(--surface); display: flex; flex-direction: column; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.plan:hover { box-shadow: var(--shadow); }
.plan.pop { border-color: color-mix(in srgb, var(--cta) 70%, var(--line-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cta) 70%, transparent), var(--shadow); }
.plan .tag { align-self: flex-start; font-family: var(--font-body); font-size: .68rem; font-weight: 680; letter-spacing: .1em; text-transform: uppercase; color: var(--cta-ink); background: var(--cta); padding: .28rem .6rem; border-radius: 999px; margin-bottom: .6rem; }
.plan h3 { font-size: 1.3rem; margin: 0 0 .1rem; }
.plan .price { font-family: var(--font-display); font-size: 2.7rem; font-weight: 600; letter-spacing: -.035em; margin: .7rem 0 .1rem; font-variant-numeric: tabular-nums; line-height: 1; }
.plan .price .cur { font-size: .95rem; font-weight: 520; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; }
.plan .per { font-size: .82rem; color: var(--muted); }
.plan .desc { font-size: .92rem; color: var(--ink-soft); margin: .9rem 0 1.1rem; min-height: 2.6em; line-height: 1.5; }
.plan ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: .58rem; font-size: .9rem; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-soft); }
.plan li::before {
  content: ""; width: 16px; height: 16px; margin-top: .16em; flex: none; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan .price + .per { margin-bottom: 0; }
.plan .btn { margin-top: auto; width: 100%; }

.band-strip { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.7rem 1.7rem; margin-top: 1.1rem; background: var(--surface); }
.band-strip .bs-side { text-align: right; }
@media (max-width: 760px) { .band-strip { grid-template-columns: 1fr; } .band-strip .bs-side { text-align: left; } }
.band-strip h3 { font-size: 1.2rem; }
.band-strip p { color: var(--muted); font-size: .92rem; margin-top: .35rem; line-height: 1.5; max-width: 62ch; }
.band-strip .price-sm { font-size: 1.2rem; font-weight: 620; font-variant-numeric: tabular-nums; font-family: var(--font-display); letter-spacing: -.02em; }
.band-strip .price-sm .cur { font-family: var(--font-body); font-weight: 520; color: var(--muted); font-size: .85rem; }
.band-strip .per { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.band-strip .btn { margin-top: .9rem; }
.pr-vat { font-size: .82rem; margin-top: 1.6rem; }

/* ── FAQ ────────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 62rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); transition: color .14s ease; }
.faq summary:hover { color: var(--accent-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.4rem; line-height: 1; transition: transform .18s ease; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin-top: .85rem; font-size: .96rem; max-width: 68ch; line-height: 1.6; }

/* ── CTA final ──────────────────────────────────────────────────────────────── */
.final { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.final .box { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: clamp(2.6rem, 5vw, 4.4rem); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); text-align: center; }
.final .box::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 50% -10%, color-mix(in srgb, var(--cta) 18%, transparent), transparent 66%); }
.final .box > * { position: relative; }
.final .eyebrow { justify-content: center; }
.final h2 { max-width: 22ch; margin-inline: auto; }
.final .final-h2 { margin-top: 1.1rem; }
.final .final-sub { margin-top: .85rem; }
.final .cta { margin-top: 1.8rem; display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: clamp(3rem, 5vw, 4rem) 0 2.8rem; background: var(--surface-2); }
footer .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
footer .foot-tag { margin-top: .85rem; font-size: .9rem; max-width: 26ch; line-height: 1.5; }
footer .colh { font-size: .74rem; font-weight: 640; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .95rem; }
footer a.fl { display: block; color: var(--ink-soft); font-size: .9rem; padding: .24rem 0; transition: color .14s ease; }
footer a.fl:hover { color: var(--ink); }
footer .base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: clamp(2.4rem, 4vw, 3.4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
footer .base span { display: inline-flex; align-items: center; gap: .5rem; }

/* ── Scroll reveal (opt-in via app.js ; désactivé si mouvement réduit) ──────── */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── Formulaires (contact + newsletter) ─────────────────────────────────────── */
/* accessibilité : label masqué mais lu par les lecteurs d'écran */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* honeypot : hors écran, non focusable — jamais visible ni lu */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.input {
  font: inherit; font-size: .95rem; color: var(--ink); width: 100%;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .7rem .85rem;
  appearance: none; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input::placeholder { color: var(--muted); }
.input:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--line-2)); }
.input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea.input { resize: vertical; min-height: 6.6em; line-height: 1.55; }
select.input {
  cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238a8275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .82rem center; background-size: 16px;
}

/* Contact — grille 2 colonnes, message pleine largeur */
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.2rem; max-width: 62rem; }
@media (max-width: 640px) { .cform { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 560; color: var(--ink-soft); }
.field label .opt { color: var(--muted); font-weight: 400; }
.cform-foot { display: flex; align-items: center; gap: .6rem 1.3rem; flex-wrap: wrap; margin-top: .3rem; }

/* Message de statut (aria-live) */
.form-status { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--accent-strong); font-weight: 560; }
.form-status.is-err { color: var(--swiss); font-weight: 560; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Newsletter — bande calme avant le footer */
.news { background: var(--surface-2); border-top: 1px solid var(--line); padding: clamp(2.6rem, 5vw, 4rem) 0; }
.news-in { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: 1.4rem 2.6rem; align-items: center; }
@media (max-width: 800px) { .news-in { grid-template-columns: 1fr; } }
.news-h { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.news-copy p { color: var(--ink-soft); margin-top: .55rem; font-size: 1rem; max-width: 46ch; line-height: 1.5; }
.news-form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.news-form .input { flex: 1 1 220px; min-width: 0; }
.news-form .btn { flex: none; }
.news-form .form-status { flex-basis: 100%; margin-top: .1rem; }


/* ── Cibles tactiles ──────────────────────────────────────────────────────
   Mesuré au doigt (390 px de large) : 39 cibles sous 44×44 px — segments de
   devise et de facturation à 34,7 px de haut, boutons à 38,6, résumés de FAQ
   à 27,2, liens de pied à 31. Le seuil de 44 px n'est pas une préférence :
   c'est la taille moyenne d'une pulpe de doigt, et en dessous on vise à côté.
   `pointer: coarse` cible le tactile sans épaissir l'interface à la souris. */
@media (pointer: coarse) {
  .seg button,
  .btn,
  .lang,
  .burger,
  .faq summary,
  .foot-links a,
  footer a {
    min-height: 44px;
  }
  .seg button { min-width: 44px; }
  .faq summary { display: flex; align-items: center; }
  /* Les liens fins (définitions, pied de page) gardent leur mise en page : on
     étend la zone sensible SOUS le texte, sans déplacer un seul pixel visible. */
  .deflink,
  .foot-links a {
    position: relative;
  }
  .deflink::after,
  .foot-links a::after {
    content: "";
    position: absolute;
    inset: -11px 0;
  }
}


/* La puce de stockage n'est pas une ligne comme les autres : c'est la SEULE
   limite réellement appliquée aujourd'hui (403 à l'upload passé le quota).
   Les autres chiffres de la grille — runs par jour, nombre d'appareils,
   taille de contexte — ne sont encore appliqués nulle part. Taire celle qui
   bloque pendant qu'on annonce celles qui ne bloquent pas, c'est décrire un
   produit qui n'existe pas. On la met donc en tête de liste et en gras. */
.plan ul .fs {
  font-weight: 620;
  color: var(--ink);
}

/* Total annuel réellement débité. Vide (et donc invisible) en facturation
   mensuelle : `renderTotals()` ne le remplit qu'en annuel. Une carte qui
   annonce « 16.25 /mois » sans dire que 195 partent en une fois transforme
   son prix d'appel en mauvaise surprise à la caisse. */
.plan .per-total,
.bs-side .per-total {
  font-size: .82rem;
  color: var(--muted);
  margin-top: .25rem;
}

/* Mention d'information sur la collecte, sous le bouton d'envoi. Discrète mais
   présente AU POINT DE COLLECTE : le RGPD (art. 13) et la nLPD (art. 19)
   demandent d'informer là où la donnée est demandée, pas seulement dans une
   page annexe que personne n'ouvre avant de taper son adresse. */
.form-note {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: .6rem;
}

.form-note a { text-decoration: underline; text-underline-offset: .18em; color: var(--accent-text); }