/* NOVA — vitrine enyanova.ai (design.md §11). Tokens copied from packages/tokens at build time.
   V2 « Le fil du jour » (2026-09-02, planches marketing/vitrine-v2). Direction « Aurore » (2026-08-20) : the brand gradients leave the blurred orbs and become
   the warm signal of the marketing site — CTA, wordmark, section tints, pricing accents.
   Flat everywhere: no bevels, no drop shadows except the modal sheet and card lift on hover.
   No images, one stylesheet, one small script (site.js). */
@import url("tokens.css?v=a77352567c");

/* ---- fonts (self-hosted, OFL) ------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Inter-Black.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PlayfairDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/PlayfairDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/PlayfairDisplay-Medium.woff2") format("woff2"); }

/* ---- marketing tokens (site only — never in the app, emails or documents) - */
:root {
  --lav: 202, 179, 245;   /* #cab3f5 */
  --amb: 255, 202, 128;   /* #ffca80 */
  --sky: 162, 186, 255;   /* #a2baff */
  --mint: 162, 255, 209;  /* #a2ffd1 */
  --sky2: 162, 243, 255;  /* #a2f3ff */
  --grn: 194, 255, 162;   /* #c2ffa2 */
  --aurora: linear-gradient(100deg,
    #cab3f5 0%, #d7c2f2 10%, #ffca80 30%, #ffe0a2 40%,
    #a2baff 60%, #a2f3ff 72%, #c2ffa2 84%, #cab3f5 100%);
  --radius-card: 14px;
  --radius-sheet: 20px;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lift: 0 18px 40px -26px rgba(1, 11, 19, 0.45);
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg-surface); color: var(--fg-primary); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: 3px; border-radius: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; background: var(--bg-ink); color: var(--fg-on-ink); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); z-index: 100; }
.skip-link:focus { top: var(--space-4); }

/* ---- the aurora (one animation, reused everywhere) ------------------------ */
@keyframes aurora-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* les deux mouvements de la maquette : une entrée qui monte, un point qui respire */
@keyframes nova-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nova-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---- typography ----------------------------------------------------------- */
.eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-secondary); margin-bottom: var(--space-4); }
/* La pastille de section est claire et bordée ; l'aurore pleine reste au hero,
   un seul remplissage d'aurore par écran (charte §2.5 règle 2). */
.eyebrow-pill { display: flex; width: fit-content; align-items: center; height: 28px; padding: 0 13px; border-radius: var(--radius-pill); background: var(--bg-highlight); border: 1px solid var(--border-subtle); color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow-pill--aurora { height: 30px; padding: 0 14px; border: 0; color: var(--fg-primary); background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }
/* Le rythme d'en-tête, valable partout : pastille → titre → chapô → corps. */
.eyebrow-pill + .h1, .eyebrow-pill + .h2 { margin-top: var(--space-6); }
.h1 + .lead, .h2 + .lead, .h1 + p, .h2 + p { margin-top: var(--space-4); }
.lead + p, .lead + .hero-say { margin-top: var(--space-4); }
.h1 { font-weight: 900; font-size: clamp(44px, 8.4vw, 78px); line-height: 1.0; letter-spacing: -0.042em; text-transform: uppercase; }
.h2 { font-weight: 900; font-size: clamp(24px, 4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; max-width: 26ch; }
.h3 { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.lead { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.45; color: var(--fg-secondary); max-width: 34em; }
.serif { font-family: var(--font-serif); font-style: italic; color: var(--fg-secondary); }
.muted { color: var(--fg-secondary); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.prose .h2 { max-width: none; }
.prose ul, .prose ol { padding-left: 1.2em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.prose th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-secondary); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* ---- layout --------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container-site); margin: 0 auto; padding: 0 var(--space-6); }
.narrow { max-width: 780px; }
.section { position: relative; padding: var(--space-16) 0; isolation: isolate; }
.section[id], [id].page-head { scroll-margin-top: 76px; }
.section--alt { background: var(--bg-canvas); }
.section--rule { border-top: 1px solid var(--border-subtle); }
.section-head--split { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; } }
.section-head--split .aside { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); max-width: 34ch; }
.section--tight { padding: var(--space-12) 0; }
@media (min-width: 900px) { .section { padding: var(--space-24) 0; } .section--tight { padding: var(--space-16) 0; } }
.section-head { margin-bottom: var(--space-8); }
@media (min-width: 900px) { .section-head { margin-bottom: var(--space-12); } }
.section-head .lead { font-size: 18px; }
.lead--wide { max-width: 44em; }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .grid { gap: var(--space-6); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.two-col { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-16); } }
.two-col .h2 { margin-bottom: var(--space-5); }
.two-col .lead { margin: 0 0 var(--space-8); }

/* ---- colour on the edges (left / right tints, one per section) ------------ */
.tint { overflow: hidden; }
.tint::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tint-a::before { background-image: radial-gradient(circle at 96% 40%, rgba(var(--sky2), 0.34), transparent 42%); }
.tint-b::before { background-image: radial-gradient(circle at 4% 30%, rgba(var(--grn), 0.30), transparent 40%); }
.tint-c::before { background-image: radial-gradient(circle at 92% 20%, rgba(176, 162, 255, 0.30), transparent 40%); }
.tint-d::before { background-image: radial-gradient(circle at 6% 12%, rgba(255, 224, 162, 0.34), transparent 40%); }
.tint-e::before { background-image: radial-gradient(circle at 12% 70%, rgba(255, 194, 102, 0.34), transparent 44%), radial-gradient(circle at 88% 30%, rgba(var(--mint), 0.30), transparent 42%); }
.section > .container { position: relative; z-index: 1; }

/* ---- buttons -------------------------------------------------------------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 50px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 1px solid var(--border-strong); text-decoration: none; font-weight: 700; font-size: 12.5px; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform 200ms var(--ease-soft), background-color 200ms ease, color 200ms ease, box-shadow 240ms ease, border-color 200ms ease; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--bg-ink); color: var(--fg-on-ink); border-color: var(--bg-ink); }
.btn-primary:hover { background: #000; border-color: #000; box-shadow: var(--lift); }
.btn-secondary { background: transparent; color: var(--fg-primary); }
.btn-secondary:hover { background: var(--bg-highlight); box-shadow: var(--lift); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
/* Sur un téléphone, deux boutons de largeurs différentes l'un sous l'autre
   cassent la colonne : ils la prennent en entier. */
@media (max-width: 640px) { .btn-row { flex-direction: column; align-items: stretch; } .btn-row .btn { width: 100%; } }
/* La réserve de deux lignes n'a de sens que lorsque les cartes sont côte à côte. */
@media (min-width: 720px) { .profile .h3 { min-height: 2.6em; } }

/* The one warm button of the site: the aurora fills it and drifts, a soft twin
   glows behind it. Ink text on pastel keeps AA contrast (≥ 9:1 on every stop). */
.btn-cta { color: var(--fg-primary); border-color: transparent; background-image: var(--aurora); background-size: 280% 100%; background-position: 0% 50%; animation: aurora-drift 16s ease-in-out infinite alternate; }
.btn-cta::before { content: ""; position: absolute; inset: -7px -9px; z-index: -1; border-radius: inherit; background-image: var(--aurora); background-size: 280% 100%; background-position: 0% 50%; filter: blur(14px); opacity: 0.55; animation: aurora-drift 16s ease-in-out infinite alternate; transition: opacity 260ms ease; }
.btn-cta:hover { box-shadow: 0 10px 30px -14px rgba(1, 11, 19, 0.4); }
.btn-cta:hover::before { opacity: 0.85; }
.btn-cta:focus-visible { outline-offset: 4px; }

/* ---- header / footer ------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(238, 237, 235, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border-subtle); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -26px rgba(1, 11, 19, 0.8); }
.site-header .container { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.site-header .wordmark { font-size: 16px; }
/* les actions se tiennent à droite, le CTA aurore en dernier — un seul par écran.
   Sous 900px elles disparaissent avec la nav : le menu compact les reprend toutes
   les deux, sinon leurs `white-space: nowrap` poussent la page hors de l'écran. */
.header-actions { display: none; margin-left: auto; align-items: center; gap: var(--space-3); flex: none; }
@media (min-width: 900px) { .header-actions { display: flex; } }
.header-actions .btn { min-height: 40px; padding: 0 var(--space-5); font-size: 11.5px; }
/* le halo du CTA appartient au corps de la page : dans un header de 64px il bave */
.header-actions .btn-cta::before, .nav-mobile .btn-cta::before { display: none; }
.nav.nav-desktop { display: none; }
.nav-mobile { margin-left: auto; flex: none; }
.nav-mobile summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; transition: border-color 200ms ease; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary:hover { border-color: var(--border-strong); }
.nav-mobile[open] summary { background: var(--bg-ink); color: var(--fg-on-ink); border-color: var(--bg-ink); }
/* le panneau se déroule sur toute la largeur, sous le filet du header */
.nav-mobile:not([open]) .nav { display: none; }
.nav-mobile .nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--bg-highlight); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-6) var(--space-5); display: grid; gap: 0; animation: nova-rise 200ms var(--ease-soft) both; }
.nav-mobile .nav a { display: flex; min-height: 52px; align-items: center; font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--border-subtle); }
.nav-mobile .nav a:last-of-type { border-bottom: 0; }
.nav-mobile .nav .btn { margin-top: var(--space-4); width: 100%; border-bottom: 0; }
/* sur téléphone il prend l'écran, sur fond encre — comme la maquette 390 × 800 */
@media (max-width: 640px) {
  .nav-mobile .nav { position: fixed; top: 64px; bottom: 0; background: var(--bg-ink); border: 0; padding: var(--space-6); align-content: start; overflow-y: auto; }
  .nav-mobile .nav a { color: var(--fg-on-ink); font-size: 24px; letter-spacing: -0.02em; min-height: 60px; border-bottom-color: rgba(255, 255, 255, 0.14); }
  .nav-mobile .nav .btn-secondary { color: var(--fg-on-ink); border-color: rgba(255, 255, 255, 0.4); }
}
@media (min-width: 900px) { .nav.nav-desktop { display: flex; } .nav-mobile { display: none; } }
/* ---- le lettrage : le point NOVA (charte de marque, 22/08/2026) ------------
   Le O du mot devient un disque d'aurore. Décidé par Tanguy le 22/08 sur la
   proposition de la charte : le signe est DANS le mot (jamais une pastille
   autour), il tient à 16 px et se détache seul en favicon — ce que le lettrage
   au dégradé, remplacé ici, ne savait pas faire.
   Trois déclinaisons, et trois seulement (charte §01) : aurore sur le site,
   encre dans les maquettes produit, blanc sur fond encre. Jamais une couleur
   d'état, jamais une autre graisse qu'Inter 900.
   Accessibilité : les quatre lettres sont décoratives (`aria-hidden`), le mot
   est porté par l'`aria-label` du lien ou du `role="img"` qui les entoure. */
.wordmark { display: inline-flex; align-items: center; gap: 0.17em; flex: none; font-weight: 900; font-size: 15px; line-height: 1; letter-spacing: 0; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--fg-primary); }
.wordmark i { width: 0.72em; height: 0.72em; flex: none; border-radius: var(--radius-pill); background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }
.wordmark:hover { text-decoration: none; }
/* encre — maquettes produit, espace client, documents : l'aurore ne sort pas du site */
.wordmark--ink i { background-image: none; background-color: currentColor; animation: none; }
/* sur fond encre — le pied de page, les bandeaux sombres */
.wordmark--on-ink { color: var(--fg-on-ink); }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.nav.nav-desktop { margin-left: var(--space-2); }
.nav a { text-decoration: none; font-size: 13.5px; font-weight: 600; padding: var(--space-2) 0; min-height: 44px; display: inline-flex; align-items: center; position: relative; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 14px; height: 2px; border-radius: 2px; background-image: var(--aurora); background-size: 280% 100%; transition: right 260ms var(--ease-soft); }
.nav a:hover { text-decoration: none; }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav .btn { min-height: 42px; padding: 0 var(--space-5); font-size: 11.5px; }
.nav .btn::after { display: none; }
.nowrap { white-space: nowrap; }
/* le pied de page passe sur l'encre (maquette 22/08) : c'est le seul aplat sombre du site */
.site-footer { position: relative; background: var(--bg-ink); color: rgba(255, 255, 255, 0.85); padding: var(--space-12) 0 var(--space-8); font-size: 14px; }
.site-footer .container { display: grid; gap: var(--space-8); }
.site-footer .foot-top { display: grid; gap: var(--space-8); }
@media (min-width: 720px) { .site-footer .foot-top { grid-template-columns: 1fr auto; align-items: start; gap: var(--space-12); } }
.site-footer .wordmark { font-size: 18px; }
.site-footer .serif { font-size: 17px; color: rgba(255, 255, 255, 0.75); margin-top: var(--space-4); display: block; }
.site-footer .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-12); }
.site-footer .links > div { display: flex; flex-direction: column; gap: var(--space-1); }
.site-footer .links .eyebrow { color: rgba(255, 255, 255, 0.45); margin-bottom: var(--space-2); }
.site-footer .links a { color: rgba(255, 255, 255, 0.85); min-height: 34px; display: inline-flex; align-items: center; text-decoration: none; transition: color 180ms ease; }
.site-footer .links a:hover { color: var(--fg-on-ink); text-decoration: underline; }
.site-footer .foot-legal { padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); }
.site-footer .foot-legal a { color: rgba(255, 255, 255, 0.75); }
.site-footer :focus-visible { outline-color: var(--fg-on-ink); }


/* ---- le filet de progression du header (V2) : 2 px d'aurore qui disent où on en est */
.site-header { view-transition-name: site-header; }
.site-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left center; transform: scaleX(var(--progress, 0)); background-image: var(--aurora); background-size: 280% 100%; pointer-events: none; }

/* ---- hero V2 (planche Main) : le titre en deux voix à gauche, le soleil et la pile de lettres à droite */
@keyframes letter-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero { position: relative; overflow: hidden; background: var(--bg-surface); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 8% 18%, rgba(var(--lav), 0.42), transparent 46%), radial-gradient(circle at 92% 6%, rgba(255, 224, 162, 0.40), transparent 44%), radial-gradient(circle at 78% 92%, rgba(var(--sky), 0.32), transparent 46%); }
/* (02/09) le grain de la planche a été retiré : une image de fond sur toute la section devenait l'élément LCP (4,0 s mesurés) */
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; padding-top: 56px; padding-bottom: 48px; }
@media (min-width: 960px) { .hero .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: auto 1fr; gap: 0 48px; padding-top: 96px; padding-bottom: 72px; } .hero-stage { grid-column: 2; grid-row: 1 / span 2; } .hero .cue { grid-column: 1; grid-row: 2; align-self: start; } }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 960px) { .hero-copy { padding-top: 24px; } }
.hero .h1 { font-size: clamp(46px, 5.15vw, 74px); line-height: 0.96; letter-spacing: -0.042em; }
/* la cascade est courte (480 ms au total) : le titre est l'élément LCP, il ne reste pas invisible */
@keyframes word-in { from { translate: 0 0.35em; opacity: 0.001; } to { translate: 0 0; opacity: 1; } }
.hero .h1 .w { display: inline-block; animation: word-in 360ms var(--ease-soft) both; }
.hero .h1 span:nth-of-type(2) { animation-delay: 40ms; } .hero .h1 span:nth-of-type(3) { animation-delay: 80ms; } .hero .h1 span:nth-of-type(4) { animation-delay: 120ms; }
/* la seconde voix DANS le titre : Playfair italique à la même taille (charte, change log du 02/09) */
.hero .h1 .soft { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; }
.hero .lead { font-size: clamp(18px, 2.2vw, 21px); max-width: 44ch; }
.hero .hero-say { font-size: 17px; line-height: 1.6; max-width: 50ch; }
.hero .btn-row { margin-top: 32px; }
.hero .btn-row .btn { min-height: 52px; padding: 0 30px; }
.hero .note { margin-top: var(--space-5); font-size: 13.5px; line-height: 1.6; color: var(--fg-secondary); max-width: 46ch; }
.cue { display: flex; align-items: center; gap: 12px; margin-top: 36px; width: fit-content; font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--fg-secondary); text-decoration: none; }
@media (min-width: 960px) { .cue { margin-top: 56px; } }
/* 24. la note courte sur téléphone (planche Mobile) */
@media (max-width: 640px) { .hero .note .desk-only { display: none; } .hero-copy .btn-row { align-self: stretch; } }
.cue i { display: block; width: 12px; height: 12px; border-radius: var(--radius-pill); background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }
.cue b { font-family: var(--font-sans); font-style: normal; font-weight: 600; }
.cue:hover { text-decoration: none; color: var(--fg-primary); }
/* le point NOVA, grand : le soleil de l'aurore derrière l'échange (charte §1.5, change log du 02/09) */
.hero-stage { position: relative; z-index: 1; min-height: 560px; }
@media (min-width: 960px) { .hero-stage { min-height: 640px; } }
/* même cadence que tout le site (16 s), mais par transform sur une couche de 280 % : composée par le GPU, aucune repeinture */
@keyframes sun-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-64.3%, 0, 0); } }
.sun { position: absolute; width: 360px; height: 360px; border-radius: var(--radius-pill); right: -120px; top: -40px; overflow: hidden; opacity: 0.95; pointer-events: none; contain: paint; }
.sun::before { content: ""; position: absolute; inset: 0; width: 280%; background-image: var(--aurora); animation: sun-drift 16s ease-in-out infinite alternate; will-change: transform; }
.sun-glow { position: absolute; width: 700px; height: 700px; border-radius: var(--radius-pill); right: -90px; top: 40px; background-image: var(--aurora); background-size: 280% 100%; background-position: 40% 50%; filter: blur(70px); opacity: 0.45; pointer-events: none; display: none; }
@media (min-width: 960px) { .sun { width: 600px; height: 600px; right: -40px; top: 90px; } .sun-glow { display: block; } }
/* la pile de lettres : demande, accusé, réponse — trois temps, rejouables */
.fan { position: relative; height: 600px; margin-top: 8px; }
@media (min-width: 960px) { .fan { height: 600px; } }
/* « Rejouer » : sous la pile sur téléphone (la ligne d'appel est juste au-dessus), au-dessus sur bureau */
.letter { position: absolute; left: 0; right: 0; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sheet); box-shadow: var(--shadow-float); padding: 18px 20px; animation: letter-in 620ms var(--ease-soft) both; transition: rotate 320ms var(--ease-soft); }
.letter p { font-size: 15.5px; line-height: 1.5; }
.letter .meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--fg-secondary); margin-top: 8px; flex-wrap: wrap; }
.letter .meta--you { justify-content: flex-end; }
.letter--you { top: 0; left: 40px; right: 0; background: var(--bg-canvas); rotate: 1.2deg; animation-delay: 300ms; }
.letter--ack { top: 96px; left: 0; right: 40px; background: var(--bg-surface-alt); rotate: -1deg; animation-delay: 900ms; }
.letter--ack p { font-size: 14px; color: var(--fg-secondary); }
.letter--reply { top: 176px; padding: 22px 24px; animation-delay: 1500ms; }
@media (min-width: 960px) {
  .letter--you { left: auto; right: 0; width: 380px; rotate: 1.6deg; }
  .letter--ack { top: 124px; left: 0; right: auto; width: 360px; rotate: -1.4deg; }
  .letter--reply { top: 214px; left: auto; right: 0; width: 452px; }
}
/* au survol, les lettres se redressent */
.fan:hover .letter { rotate: 0deg; }
.doc { display: flex; align-items: center; gap: 10px; background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); border-left: 3px solid var(--doc-devis); border-radius: var(--radius-md); padding: 9px 11px; margin-top: var(--space-3); }
.doc .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; background: var(--doc-devis); }
.doc--photo { border-left-color: var(--doc-autre); } .doc--photo .dot { background: var(--doc-autre); }
.doc .n { font-family: var(--font-mono); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc .s { font-size: 12.5px; color: var(--fg-secondary); }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.chip-ok { color: var(--status-ok); }
.chip-neutral { color: var(--fg-secondary); }
/* le signal d'attente est un aplat (charte §2.4) */
.chip-signal { color: var(--signal-ink); background: var(--signal); border-color: var(--signal); }
.letter--reply .meta--wait { margin-top: 16px; }
.letter--reply .ask { margin-top: 10px; }
.letter--reply .meta--foot { margin-top: 14px; }
.letter .yes { display: flex; gap: 12px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.letter .yes .btn { min-height: 44px; padding: 0 22px; font-size: 12.5px; }
.letter .yes span { font-size: 13px; color: var(--fg-secondary); }
.letter .sent { display: flex; align-items: center; gap: var(--space-2); margin-top: 14px; color: var(--status-ok); font-size: 13.5px; font-weight: 600; animation: nova-rise 400ms var(--ease-soft) both; }
@media (prefers-reduced-motion: reduce) { .hero .h1 .w, .letter { animation: none; opacity: 1; } }

/* ---- l'en-tête de section (charte §4.2 : pastille → 24 → titre → 16 → chapô) — inchangé, rappel */
.head { display: flex; flex-direction: column; align-items: flex-start; }

/* ---- cards (partagées) ---------------------------------------------------- */
.card { position: relative; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-6); min-width: 0; transition: transform 260ms var(--ease-soft), box-shadow 260ms ease, border-color 260ms ease; }
.card > * + * { margin-top: var(--space-3); }
.card .h3 { margin-top: 0; }
.card .serif { font-size: 15px; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(1, 11, 19, 0.08); border-color: var(--border-subtle); }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); }
.list-dash { display: grid; gap: var(--space-2); }
.list-dash li { padding-left: 1.5em; position: relative; }
.list-dash li::before { content: "—"; position: absolute; left: 0; color: var(--fg-secondary); }

/* ---- trois gestes V2 : trois bandes qui s'empilent au défilement (planche Main, mouvement 05) */
.stack { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .stack { gap: 20px; margin-top: 48px; } }
.step { position: relative; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sheet); padding: 28px 22px 22px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.step--1::before { background-image: linear-gradient(100deg, #cab3f5, #b0a2ff); }
.step--2::before { background-image: linear-gradient(100deg, #ffe0a2, #ffc266); }
.step--3::before { background-image: linear-gradient(100deg, #a2f3ff, #c2ffa2); }
.step-num { display: flex; align-items: baseline; gap: 14px; }
.step-num b { font-weight: 900; font-size: 56px; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.step-num .eyebrow { margin: 0; }
.step .h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.step p { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); max-width: 46ch; }
.artefact { background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px; font-size: 13.5px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.artefact .eyebrow { font-size: 11px; margin: 0; }
.artefact .name { font-weight: 700; font-size: 16px; }
.artefact .eyebrow--code { margin-top: 6px; }
.artefact .doc { margin-top: 2px; }
.artefact .row { display: flex; gap: 8px; align-items: center; }
.artefact .row .muted { font-size: 12.5px; }
.artefact .kv { display: flex; gap: 8px; }
.artefact .kv span:first-child { width: 52px; color: var(--fg-secondary); }
.artefact .typing { border-top: 1px solid var(--border-subtle); padding-top: 8px; color: var(--fg-secondary); }
.artefact .typing i { display: inline-block; width: 2px; height: 14px; background: var(--fg-primary); vertical-align: -2px; animation: caret 1s steps(1) infinite; }
.cells { display: flex; gap: 6px; }
.cells i { display: block; width: 30px; height: 40px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-highlight); }
.cells i:nth-child(5) { margin-left: 6px; }
@media (min-width: 900px) {
  .step { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 40px; align-items: center; padding: 36px 40px 36px 36px; }
  .step-num { flex-direction: column; align-items: flex-start; gap: 10px; }
  .step-num b { font-size: 112px; }
  .step .h3 { font-size: 26px; }
  .step p { font-size: 16px; margin-top: 10px; }
  .artefact { margin-top: 0; padding: 16px; }
  /* l'empilement : chaque bande se fixe sous le header, la suivante glisse par-dessus */
  .stack--sticky .step { position: sticky; }
  .stack--sticky .step--1 { top: 88px; }
  .stack--sticky .step--2 { top: 112px; }
  .stack--sticky .step--3 { top: 136px; }
}
@media (prefers-reduced-motion: reduce) { .stack--sticky .step { position: relative; top: auto; } }
@media (max-width: 899px) { .step--1 .artefact, .step--2 .artefact { display: none; } }

/* ---- la journée V2 : un ruban horizontal de moments, épinglé et scrubbé par ScrollTrigger (mouvement 06),
   défilement horizontal natif en repli (sans script, sans GSAP, mouvement réduit) */
/* < 900 px : un fil vertical à gauche, sept cartes pleine largeur (planche Mobile) ; ≥ 900 px : le ruban horizontal */
.day-wrap { position: relative; margin: 36px 0 0; padding-left: 26px; }
@media (min-width: 900px) { .day-wrap { margin: 56px calc(50% - 50vw) 0; padding-left: 0; width: 100vw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; } }
.day-wrap::-webkit-scrollbar { display: none; }
.day-wrap.is-pinned { overflow: hidden; }
.day-line { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background-image: linear-gradient(180deg, #cab3f5 0%, #ffca80 30%, #a2baff 60%, #c2ffa2 100%); }
@media (min-width: 900px) { .day-line { left: 0; right: 0; top: 19px; bottom: auto; width: auto; height: 2px; border-radius: 0; background-image: var(--aurora); background-size: 280% 100%; } }
.day-rail { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) { .day-rail { flex-direction: row; gap: 24px; padding: 0 max(16px, calc(50vw - 536px)); width: max-content; } }
.moment { position: relative; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .moment { width: 300px; flex: none; gap: 12px; scroll-snap-align: start; } }
.moment .time { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-secondary); }
@media (min-width: 900px) { .moment .time { height: 40px; } }
.moment .time b { display: block; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--fg-primary); border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--fg-primary); flex: none; position: absolute; left: -26px; top: 3px; }
@media (min-width: 900px) { .moment .time b { position: static; } }
.moment .time b.wait { background: var(--signal); box-shadow: 0 0 0 1.5px var(--status-wait); }
.moment .time span { background: var(--bg-surface); padding: 0 8px 0 4px; border-radius: var(--radius-pill); }
.moment .card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: none; }
@media (min-width: 900px) { .moment .card { padding: 18px 20px; min-height: 178px; gap: 10px; } }
.moment .card:hover { transform: none; box-shadow: none; }
.moment .card > * + * { margin-top: 0; }
.moment .from { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-secondary); }
.moment .from .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; background: var(--doc-devis); }
/* les quatre stops de l'aurore en couleurs plates : le type d'un document (charte §2.4) */
.dot--courrier { background: var(--doc-courrier) !important; } .dot--facture { background: var(--doc-facture) !important; } .dot--autre { background: var(--doc-autre) !important; }
.moment .card p { font-size: 14.5px; line-height: 1.5; }
.moment .card .foot { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.moment .oui { font-weight: 900; font-size: 28px; letter-spacing: -0.02em; }
.moment .card .muted { font-size: 13.5px; }
.moment--you .card { background: var(--bg-canvas); }
.ruban { display: none; align-items: center; margin: 44px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ruban { display: flex; } }
.day-wrap:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: -2px; }
@media (min-width: 900px) { .ruban { margin-top: 44px; } }
.ruban .jalon { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-secondary); white-space: nowrap; }
.ruban .jalon i { display: block; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--fg-primary); flex: none; }
.ruban .jalon i.held { background: var(--signal); box-shadow: 0 0 0 1.5px var(--status-wait); }
.ruban .jalon i.todo { background: transparent; border: 1px solid var(--border-subtle); }
.ruban .link { flex: 1; min-width: 16px; height: 1px; background: var(--border-subtle); margin: 0 14px; }

/* ---- pour qui V2 : quatre pastilles, un panneau, la demande qui se tape (mouvement 07).
   Sans script, les quatre panneaux se lisent l'un sous l'autre. */
.who-head { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .who-head { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } .who-head .aside { padding-top: 52px; } }
.who-head .aside { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); max-width: 34ch; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
@media (min-width: 900px) { .pills { gap: 10px; margin-top: 40px; } }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: transparent; font-size: 13px; font-weight: 600; color: var(--fg-primary); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
@media (min-width: 900px) { .pill { padding: 0 20px; } }
.pill:hover { background: var(--bg-highlight); }
.pill[aria-pressed="true"] { background: var(--bg-ink); color: var(--fg-on-ink); border-color: var(--bg-ink); }
.who-panel { margin-top: 16px; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sheet); overflow: hidden; box-shadow: var(--shadow-card); display: grid; }
.who-panel + .who-panel { margin-top: var(--space-4); }
@media (min-width: 900px) { .who-panel { margin-top: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.who-panel > div { padding: 22px; }
@media (min-width: 900px) { .who-panel > div { padding: 36px 40px; } }
.who-panel > div + div { border-top: 1px solid var(--border-subtle); background: var(--bg-surface-alt); }
@media (min-width: 900px) { .who-panel > div + div { border-top: 0; border-left: 1px solid var(--border-subtle); } }
.who-panel .eyebrow { margin-bottom: 0; }
.who-panel .h3 { font-size: 24px; letter-spacing: -0.02em; margin-top: 12px; }
.who-panel .list-dash { margin-top: 20px; font-size: 16px; }
.typed { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--fg-primary); margin-top: 12px; min-height: 2.7em; }
@media (min-width: 900px) { .typed { font-size: 28px; margin-top: 16px; } }
.typed i { display: inline-block; width: 2px; height: 0.95em; background: var(--fg-primary); vertical-align: -0.12em; margin-left: 3px; animation: caret 1s steps(1) infinite; }
.who-panel .after { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle); font-size: 14.5px; color: var(--fg-secondary); line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; }
.who-panel .after .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; margin-top: 7px; background: var(--doc-devis); }
.js .who-panel[hidden] { display: none; }
@media (max-width: 899px) {
  .who-head .aside, .who-panel .h3, .who-panel .after { display: none; }
  .who-panel > div:first-child { order: 2; background: var(--bg-surface-alt); border-top: 1px solid var(--border-subtle); }
  .who-panel > div + div { background: transparent; border-top: 0; }
  .who-panel .list-dash { margin-top: 14px; font-size: 15px; }
}

/* ---- le diptyque V2 : ce qu'il sait faire, ce qu'il ne fait jamais sans vous — avec le cachet OUI */
.duo { display: grid; gap: var(--space-5); align-items: stretch; }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 900px) { .duo--tarifs { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.duo--tarifs { margin-top: 22px; }
.duo--tarifs .compare-note { margin-top: auto; padding-top: var(--space-5); }
.duo--tarifs .nevers-list { margin-bottom: var(--space-6); }
.duo--tarifs .btn-block { margin-top: auto; flex: none; }
.btn-block { width: 100%; margin-top: 26px; }
.panel { position: relative; display: flex; flex-direction: column; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sheet); padding: 28px 24px; }
@media (min-width: 900px) { .panel { padding: 36px 40px; } }
.panel--alt { background: var(--bg-surface-alt); }
.panel > .eyebrow { margin-bottom: 0; flex: none; }
.panel .h2 { font-size: clamp(22px, 2.6vw, 26px); margin-top: 16px; max-width: 18ch; }
.panel .quote { margin-top: auto; padding-top: 24px; font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--fg-secondary); }
.duo--tarifs .panel > .eyebrow { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-2); margin-bottom: 18px; }
.can { display: grid; gap: var(--space-3); margin-top: 24px; }
.can li { display: flex; gap: var(--space-3); font-size: 16px; line-height: 1.5; }
.can li::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); margin-top: 7px; flex: none; background-image: var(--aurora); background-size: 280% 100%; }
.nevers-list { display: grid; gap: var(--space-3); }
.panel .nevers-list { margin-top: 24px; }
.nevers-list li { display: flex; gap: var(--space-3); font-size: 16px; line-height: 1.5; }
.nevers-list li::before { content: "—"; color: var(--fg-secondary); flex: none; }
/* le cachet OUI : la seule bordure > 1 px du site, un tampon, pas une boîte */
.stamp { position: absolute; right: 20px; top: 20px; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px; border: 2.5px solid var(--fg-primary); border-radius: var(--radius-pill); font-weight: 900; font-size: 26px; letter-spacing: -0.02em; rotate: -8deg; color: var(--fg-primary); pointer-events: none; }
@media (min-width: 900px) { .stamp { right: 36px; top: 28px; height: 64px; padding: 0 26px; font-size: 34px; } }

/* ---- sécurité V2 : six entrées sur un filet, sans boîtes */
.assur { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 720px) { .assur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1000px) { .assur { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 48px; } }
.assur > div { border-top: 1px solid var(--border-strong); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.assur .h3 { font-size: 18px; }
.assur p { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); }

/* ---- pricing -------------------------------------------------------------- */
.pricing-head { display: grid; gap: var(--space-6); align-items: start; margin-bottom: 36px; }
@media (min-width: 900px) { .pricing-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-bottom: 48px; } }
.pricing-head p { font-size: 15.5px; line-height: 1.6; color: var(--fg-secondary); max-width: 56ch; }
.pricing-head .head > p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--fg-primary); max-width: 50ch; }
.pricing { display: grid; gap: var(--space-5); align-items: stretch; }
@media (min-width: 860px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.price-card { position: relative; overflow: hidden; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sheet); padding: calc(28px + 4px) 28px 28px; display: flex; flex-direction: column; gap: var(--space-5); transition: border-color 260ms ease, box-shadow 260ms ease; }
@media (min-width: 900px) { .price-card { padding: calc(32px + 4px) 32px 32px; } }
/* la carte qui convient au volume choisi prend la bordure forte, l'autre s'efface (mouvement 08) */
.price-card--fit { border-color: var(--border-strong); }
.price-card--dim { border-color: var(--border-subtle); box-shadow: none; }
.price-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background-image: var(--aurora); background-size: 280% 100%; opacity: 0.45; }
/* la recommandée porte la bordure encre, l'aurore pleine et le seul relief */
.price-card--recommended { border-color: var(--border-strong); }
.price-card--recommended::before { opacity: 1; animation: aurora-drift 16s ease-in-out infinite alternate; }
.price-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.price-head .qualifier { font-size: 13px; color: var(--fg-secondary); }
.price-card .name { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; text-transform: uppercase; }
.badge { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-primary); background-image: var(--aurora); background-size: 280% 100%; }
.badge--quiet { background: none; border: 1px solid var(--border-subtle); color: var(--fg-secondary); animation: none; }
.price-card .price { font-weight: 900; font-size: clamp(38px, 5vw, 52px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-card .price small { font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--fg-secondary); margin-left: 8px; text-transform: none; }
.price-card .list-dash { font-size: 15px; flex: 1; }
.price-card .list-dash li { line-height: 1.5; }
.price-card .btn { width: 100%; margin-top: auto; }
.price-note { font-size: 13.5px; line-height: 1.6; color: var(--fg-secondary); min-height: calc(2 * 1.6 * 13.5px); }

/* the one difference between packs, drawn: an hour, and the requests inside it */
.cadence { display: grid; gap: 10px; margin: 0; }
.cadence-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 13px; color: var(--fg-secondary); }
.cadence-label { font-size: 13px; color: var(--fg-secondary); }
.cadence-head b { color: var(--fg-primary); font-variant-numeric: tabular-nums; }
/* 8 segments = une journée (24/08 : Essentiel 4, Pro 8 ; la formule se compte
   au jour depuis le 21/08). Essentiel en allume un sur deux, Pro les allume
   tous — le double se lit sans compter. Chaque segment allumé porte sa propre
   tranche de l'aurore : la journée traverse le dégradé de bout en bout. */
.rail { display: flex; align-items: center; gap: 4px; }
.rail i { flex: 1; min-width: 3px; height: 10px; border-radius: var(--radius-pill); background: var(--border-subtle); border: 1px solid transparent; }
.rail i.on { border-color: transparent; background-image: var(--aurora); background-size: 800% 100%; }
.rail i:nth-child(1).on { background-position: 0.0% 50%; }
.rail i:nth-child(2).on { background-position: 14.3% 50%; }
.rail i:nth-child(3).on { background-position: 28.6% 50%; }
.rail i:nth-child(4).on { background-position: 42.9% 50%; }
.rail i:nth-child(5).on { background-position: 57.1% 50%; }
.rail i:nth-child(6).on { background-position: 71.4% 50%; }
.rail i:nth-child(7).on { background-position: 85.7% 50%; }
.rail i:nth-child(8).on { background-position: 100.0% 50%; }

.setup { margin-top: 24px; position: relative; border: 1px solid var(--border-subtle); border-left: 4px solid transparent; background-image: linear-gradient(var(--bg-highlight), var(--bg-highlight)), var(--aurora); background-origin: border-box; background-clip: padding-box, border-box; border-radius: var(--radius-sheet); padding: 28px 32px; display: grid; gap: var(--space-4); align-items: center; }
/* un filet vertical d'aurore, comme une tranche de la journée posée debout */
.setup::before { content: none; }
@media (min-width: 720px) { .setup { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); } }
.setup p { font-size: 15.5px; line-height: 1.6; max-width: 62ch; margin-top: 8px; }
.setup .price { font-weight: 900; font-size: clamp(34px, 4vw, 44px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.setup .price small { font-weight: 400; font-size: 13px; letter-spacing: 0; color: var(--fg-secondary); margin-left: 6px; }
.pricing-note { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--fg-secondary); max-width: 80ch; }
.pricing-note + .pricing-note { margin-top: 8px; }
.pricing-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* 28/08 — les packs publicité : la même grille, sans cadence (pas de « demandes par jour ») */
.pricing--pubs .price-card { gap: var(--space-4); }
/* 28/08 — « budget publicitaire compris » : la ligne qui doit se voir avant la liste */
/* 02/09 — le budget compris devient un aplat chaud (stop « courrier » de l'aurore, encre dessus, 10,4:1) */
.budget { margin: -4px 0 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--doc-courrier); display: grid; gap: 2px; font-size: 14px; line-height: 1.5; }
.budget strong { font-weight: 700; }
.budget span { color: var(--fg-secondary); font-size: 13.5px; }
.option b { font-weight: 700; }


/* ---- le curseur de volume V2 : le chiffre en grand, le rail d'aurore, la formule qui se désigne (mouvement 08) */
.volume { background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sheet); padding: 24px 24px 22px; min-width: min(360px, 100%); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .volume { padding: 28px 32px; } }
.volume > .eyebrow { margin: 0; }
.volume-value { display: flex; align-items: baseline; gap: 12px; margin: 0; }
/* --signal-strong : numéraux ≥ 24 px seulement (charte §2.4) */
.volume-value output { font-weight: 900; font-size: clamp(56px, 6vw, 72px); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; line-height: 0.9; color: var(--signal-strong); }
.volume-value span { font-size: 16px; color: var(--fg-secondary); }
.volume input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.volume input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(to right, transparent, transparent) var(--border-subtle); background-image: linear-gradient(90deg, #cab3f5 0%, #ffca80 40%, #a2baff 70%, #c2ffa2 100%); background-size: var(--fill, 29%) 100%; background-repeat: no-repeat; background-color: var(--border-subtle); }
.volume input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--border-subtle); }
.volume input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background-image: linear-gradient(90deg, #cab3f5 0%, #ffca80 40%, #a2baff 70%, #c2ffa2 100%); }
.volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: var(--radius-pill); background: var(--bg-ink); border: 3px solid var(--bg-highlight); box-shadow: var(--shadow-float); }
.volume input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--bg-ink); border: 3px solid var(--bg-highlight); box-shadow: var(--shadow-float); }
.volume input[type="range"]:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: 3px; }
.volume-advice { font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--fg-secondary); margin: 0; min-height: 2.6em; }
/* les segments au-delà de la formule : un contour d'attente, pas un allumage */
.rail i.over { border-color: var(--status-wait); background: var(--bg-highlight); }

/* ---- « Ce que ça remplace, au mois » — trois barres, la nôtre la plus courte */
.compare { display: grid; gap: var(--space-4); }
.compare li { display: grid; gap: 7px; grid-template-columns: 1fr auto; align-items: baseline; }
.compare .cl { font-size: 14px; }
.compare li.is-us .cl { font-weight: 600; }
.compare .cv { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--fg-secondary); }
.compare .cbar { grid-column: 1 / -1; height: 14px; border-radius: var(--radius-xs); overflow: hidden; }
.compare .cbar i { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--border-subtle); transform-origin: left center; transition: transform 900ms var(--ease-soft); }
.compare li.is-us .cbar i { background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }
.compare .w-100 i { width: 100%; }
.compare .w-56 i { width: 56%; }
.compare .w-18 i { width: 18%; }
.reveal .cbar i { transform: scaleX(0); }
.reveal.is-in .cbar i { transform: scaleX(1); }
.compare-note { margin-top: var(--space-5); font-size: 13px; line-height: 1.6; color: var(--fg-secondary); }

/* comparison table (outside .prose) */
.compare-table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; }
.compare-table th, .compare-table td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.compare-table thead th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-on-ink); font-weight: 600; background: var(--bg-ink); border-bottom: 0; }
.compare-table thead th + th { text-align: center; }
.compare-table tbody tr:nth-child(even) td { background: var(--bg-surface-alt); }
.compare-table tbody td + td { text-align: center; font-variant-numeric: tabular-nums; }
.compare-table .yes { color: var(--status-ok); font-weight: 700; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover td { background: var(--bg-surface-alt); }
.compare-table td:first-child { font-weight: 600; }
.compare-table strong.num { font-size: 20px; font-weight: 900; }

/* ---- FAQ : le titre tient la colonne gauche, les questions la droite ------
   `<details>` en production : l'accordéon fonctionne sans une ligne de script. */
.faq-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; } }
.faq details { border-bottom: 1px solid var(--border-subtle); }
.faq details:first-of-type summary { padding-top: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 2px; font-size: 16.5px; font-weight: 600; min-height: 44px; transition: opacity 200ms ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { opacity: 0.7; }
/* la pastille d'aurore porte le signe, à gauche de la question */
.faq-grid .head .lead { font-size: 18px; }
.faq summary::before { content: "+"; flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: 16px; font-weight: 700; line-height: 1; color: var(--fg-primary); background-image: var(--aurora); background-size: 280% 100%; }
.faq details[open] summary::before { content: "–"; }
.faq .answer { padding: 0 2px 20px 42px; font-size: 15.5px; line-height: 1.65; color: var(--fg-secondary); max-width: 66ch; }
.faq .answer p + p { margin-top: var(--space-3); }


.form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 16px; min-height: 48px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--border-strong); outline: none; box-shadow: 0 0 0 3px rgba(var(--lav), 0.45); }
.form .hint, .hint { font-size: 13px; color: var(--fg-secondary); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* ---- contact V2 : le soleil revient en bas de page, la carte se pose sur l'ombre douce */
.section--contact { overflow: hidden; }
.section--contact .sun { width: 420px; height: 420px; left: -180px; right: auto; top: auto; bottom: -160px; opacity: 0.9; z-index: 0; }
.contact-grid { position: relative; z-index: 1; display: grid; gap: var(--space-8); align-items: stretch; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } }
.contact-grid > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.contact-grid .btn-row { margin-top: 28px; }
.contact-grid .h2 { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.02em; }
.contact-grid .h2 + p { font-size: 16px; line-height: 1.6; max-width: 52ch; }
.contact-aside { display: flex; flex-direction: column; gap: 6px; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-sheet); padding: 32px; font-size: 15px; box-shadow: var(--shadow-card); }
.contact-aside .eyebrow { margin: 0; }
.contact-aside .big { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; margin-top: 8px; }
.contact-aside .mono { display: block; font-size: 15px; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; }
.contact-aside .tel { display: block; font-size: 14px; color: var(--fg-secondary); margin-top: 8px; }
.contact-aside .serif { display: block; margin-top: auto; padding-top: 20px; font-size: 16px; line-height: 1.55; }

/* ---- option cards (shared: modal + /demande.html) ------------------------- */
.option-grid { display: grid; gap: var(--space-3); }
.option { position: relative; display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--bg-highlight); padding: 14px 46px 14px 18px; min-height: 56px; cursor: pointer; font-size: 15.5px; font-weight: 500; line-height: 1.35; transition: transform 200ms var(--ease-soft), border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.option:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 10px 24px -20px rgba(1, 11, 19, 0.6); }
.option:active { transform: scale(0.994); }
/* the mark: an empty ring that fills with the aurora once chosen */
.option::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-subtle); transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.option:has(input:checked) { border-color: var(--border-strong); background: var(--bg-surface-alt); box-shadow: inset 0 0 0 1px var(--border-strong); }
.option:has(input:checked)::after { border-color: transparent; background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; box-shadow: inset 0 0 0 1px rgba(1, 11, 19, 0.16); }
.option:has(input:checked)::before { content: "✓"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; z-index: 1; font-size: 12px; font-weight: 700; line-height: 1; color: var(--fg-primary); }
.option:has(input:focus-visible) { outline: 2px solid var(--fg-primary); outline-offset: 3px; }
.hint-line { font-size: 14px; }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- demande — full page fallback (/demande.html, works without JS) ------- */
.demande-form fieldset { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-6); margin: 0; display: grid; gap: var(--space-4); background: var(--bg-surface-alt); min-width: 0; }
.demande-form legend { font-weight: 900; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 14px; margin-left: -6px; border-radius: var(--radius-pill); background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }

/* V2 : la touche du clavier dans l'option — après le libellé dans le DOM (nom accessible intact), première à l'œil */
.option .lbl { flex: 1; min-width: 0; }
.option .key { order: -1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); background: var(--bg-surface-alt); font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--fg-secondary); flex: none; font-variant-numeric: tabular-nums; }
.option:has(input:checked) .key { background: var(--bg-ink); color: var(--fg-on-ink); border-color: var(--bg-ink); }
.option .sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--fg-secondary); margin-top: 2px; }
.option .sub b { font-weight: 700; color: var(--fg-primary); }
.option--pack { align-items: flex-start; }
.option--pack .key { margin-top: 2px; }

/* ---- la feuille « Faire une demande » V2 — « La lettre à Tanguy » (planches DemandeQ1-Q5, Merci, Mobile) ----
   À gauche la question, à droite la lettre qui s'écrit. Bureau : 960 px, deux colonnes ;
   téléphone : feuille du bas plein écran, en-tête et pied collants, la lettre repliée sous le ruban. */
.modal-open, .modal-open body { overflow: hidden; }
.demande-modal { position: relative; border: 0; padding: 0; width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: hidden; border-radius: var(--radius-sheet); background: var(--bg-highlight); color: var(--fg-primary); box-shadow: 0 40px 90px -40px rgba(1, 11, 19, 0.55), 0 2px 10px -4px rgba(1, 11, 19, 0.2); }
.demande-modal::backdrop { background: rgba(1, 11, 19, 0.42); }
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .demande-modal::backdrop { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(1, 11, 19, 0.3); }
}
@keyframes dm-in { from { opacity: 0; translate: 0 14px; scale: 0.985; } }
@keyframes dm-backdrop-in { from { opacity: 0; } }
.demande-modal[open] { animation: dm-in 320ms var(--ease-soft); }
.demande-modal[open]::backdrop { animation: dm-backdrop-in 320ms ease-out; }
.dm { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: calc(100dvh - 32px); }
.demande-modal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }
@media (min-width: 900px) { .demande-modal.is-merci { width: min(600px, calc(100vw - 24px)); } }
.dm-top { display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px; border-bottom: 1px solid var(--border-subtle); }
@media (min-width: 900px) { .dm-top { gap: 16px; padding: 18px 20px 12px 24px; } }
.dm-ghost { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--fg-secondary); flex: none; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.dm-ghost:hover { background: var(--bg-surface-alt); border-color: var(--border-subtle); color: var(--fg-primary); }
.dm-back[hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; }
/* le ruban : cinq jalons nommés reliés par un fil ; le courant en aurore, les passés en encre */
.dm-ruban { display: flex; align-items: center; flex: 1; min-width: 0; }
.dm-ruban .jalon { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-secondary); white-space: nowrap; }
.dm-ruban .jalon i { display: block; width: 10px; height: 10px; border-radius: var(--radius-pill); border: 1px solid var(--fg-secondary); background: var(--bg-highlight); transition: width 300ms var(--ease-soft), background-color 300ms ease; }
.dm-ruban .jalon.done { color: var(--fg-primary); } .dm-ruban .jalon.done i { background: var(--fg-primary); border-color: var(--fg-primary); }
.dm-ruban .jalon.on { color: var(--fg-primary); } .dm-ruban .jalon.on i { width: 26px; border-color: transparent; background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }
.dm-ruban b { flex: 1; min-width: 8px; height: 1px; background: var(--border-subtle); margin: 0 6px; }
.dm-ruban b.done { background: var(--fg-primary); }
.dm-ruban .jalon em { font-style: normal; }
@media (max-width: 899px) { .dm-ruban .jalon em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dm-ruban .jalon i { width: 8px; height: 8px; } .dm-ruban .jalon.on i { width: 22px; } }
@media (min-width: 900px) { .dm-ruban b { margin: 0 10px; } }
.dm-count { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-secondary); white-space: nowrap; flex: none; }
.dm-count--foot { display: none; }
@media (max-width: 899px) { .dm-count--foot { display: block; margin-right: auto; } }
@media (max-width: 899px) { .dm-top .dm-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* la lettre repliée (téléphone) : une ligne sous le ruban, un bouton qui la déplie */
.dm-strip { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); font-size: 13px; color: var(--fg-secondary); cursor: pointer; text-align: left; width: calc(100% - 32px); }
.dm-strip i { display: block; width: 10px; height: 10px; border-radius: var(--radius-pill); background-image: var(--aurora); background-size: 280% 100%; flex: none; }
.dm-strip .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-serif); font-style: italic; }
.dm-strip .chev { font-size: 12px; transition: rotate 200ms ease; }
.dm-strip[aria-expanded="true"] .chev { rotate: 180deg; }
@media (min-width: 900px) { .dm-strip { display: none; } }
.dm-body { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
@media (min-width: 900px) { .dm-body { grid-template-columns: minmax(0, 1fr) 420px; } }
.dm-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.dm-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scroll-padding-bottom: 24px; }
.dm-view { overflow: hidden; height: auto; transition: height 380ms var(--ease-soft); }
.dm-track { display: flex; align-items: flex-start; width: 500%; transform: translateX(0); transition: transform 460ms var(--ease-soft); }
.dm-panel { width: 20%; flex: none; opacity: 0.2; transition: opacity 320ms ease; border: 0; margin: 0; padding: 16px 16px 12px; min-width: 0; display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) { .dm-panel { padding: 28px 28px 16px 32px; gap: 16px; } }
.dm-panel.is-active { opacity: 1; }
/* une legend se pose au-dessus du padding du fieldset : l'air vient de la legend elle-même */
.dm-q { font-weight: 900; font-size: 22px; line-height: 1.12; letter-spacing: -0.025em; padding: 12px 0 0; display: block; }
@media (min-width: 900px) { .dm-q { font-size: 26px; padding-top: 24px; } }
.dm-hint { font-size: 15.5px; margin-top: -4px; }
.dm-panel .option-grid { gap: 10px; }
@media (min-width: 900px) { .dm-panel .option-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dm-panel .option { min-height: 52px; padding: 10px 46px 10px 10px; font-size: 15px; gap: 12px; }
@media (min-width: 900px) { .dm-panel .option { min-height: 56px; padding: 12px 52px 12px 12px; font-size: 15.5px; gap: 14px; } }
.dm-panel .option::after { width: 24px; height: 24px; right: 14px; }
.dm-panel .option:has(input:checked)::before { right: 14px; width: 24px; height: 24px; }
.dm-panel .field label { font-size: 12.5px; letter-spacing: 0.02em; color: var(--fg-secondary); }
.dm-panel .field textarea { min-height: 76px; resize: none; }
.dm-panel .field-row { gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-error { display: none; font-size: 13px; color: var(--accent-alert); font-weight: 600; }
.field.is-invalid .dm-error { display: block; }
.field.is-invalid input { border-color: var(--accent-alert); }
/* le pied du panneau : l'aide clavier, Continuer, puis Envoyer — jamais désactivé */
.dm-foot { display: grid; gap: 10px; padding: 10px 16px 16px; background: var(--bg-highlight); border-top: 1px solid var(--border-subtle); }
@media (min-width: 900px) { .dm-foot { padding: 12px 28px 22px 32px; border-top: 0; } }
.dm-foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.dm-kbd { display: none; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--fg-secondary); min-width: 0; }
@media (min-width: 900px) and (hover: hover) { .dm-kbd { display: flex; } }
.dm-kbd kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); background: var(--bg-surface-alt); font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; color: var(--fg-primary); }
.dm-next { flex: none; min-height: 46px; padding: 0 22px; font-size: 12px; margin-left: auto; }
.dm-submit { width: 100%; min-height: 54px; }
.dm-status { font-size: 13px; color: var(--fg-secondary); }
.dm-legal { font-size: 11.5px; color: var(--fg-secondary); line-height: 1.45; }
/* la lettre, à droite : ce que Tanguy recevra, mot pour mot */
.dm-lettre { background: var(--bg-surface-alt); border-top: 1px solid var(--border-subtle); padding: 16px; display: none; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; }
.dm-lettre.is-open { display: flex; }
@media (min-width: 900px) { .dm-lettre { display: flex; border-top: 0; border-left: 1px solid var(--border-subtle); padding: 28px 28px 24px; } }
.dm-lettre .head { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-secondary); }
.dm-lettre .head i { display: block; width: 12px; height: 12px; border-radius: var(--radius-pill); background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; flex: none; }
.paper { background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.6; flex: 1; }
.paper .salut { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--fg-primary); margin-bottom: 4px; }
.paper .l { color: var(--fg-primary); }
.paper .l.todo { color: var(--fg-secondary); opacity: 0.8; }
.paper .v { font-weight: 700; border-bottom: 2px solid transparent; border-image: var(--aurora) 1; border-image-slice: 0 0 1 0; border-image-width: 0 0 2px 0; padding-bottom: 1px; }
.paper .blank { display: inline-block; min-width: 96px; border-bottom: 1px dotted var(--fg-secondary); vertical-align: baseline; height: 1em; opacity: 0.7; }
.paper .caret { display: inline-block; width: 2px; height: 0.95em; background: var(--fg-primary); vertical-align: -0.12em; margin-left: 2px; animation: caret 1s steps(1) infinite; }
.paper .sign { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 14.5px; color: var(--fg-secondary); }
.dm-lettre .note { font-size: 12.5px; line-height: 1.5; color: var(--fg-secondary); }
/* l'accusé « Bien reçu », dans la feuille */
.dm-merci { padding: 40px 24px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; overflow-y: auto; max-height: calc(100dvh - 32px); }
@media (min-width: 900px) { .dm-merci { padding: 40px 40px 32px; } }
.dm-merci .disc { width: 40px; height: 40px; border-radius: var(--radius-pill); background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; }
.dm-merci .h2 { font-size: clamp(30px, 4vw, 36px); letter-spacing: -0.03em; line-height: 1.05; margin-top: 8px; max-width: none; }
.dm-merci .lead { font-size: 18px; max-width: 40ch; }
.dm-merci .paper { flex: none; width: 100%; font-size: 14.5px; }
.dm-merci .btn-row { margin-top: 8px; }
@media (max-width: 640px) { .dm-merci .btn-row { align-self: stretch; } }
.dm-merci:focus-visible, .dm-merci .h2:focus-visible { outline: none; }
/* téléphone : la feuille du bas */
@media (max-width: 899px) {
  .demande-modal { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; height: calc(100dvh - 44px); max-height: calc(100dvh - 44px); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-sheet); }
  .demande-modal[open] { animation: dm-up 360ms var(--ease-soft); }
  .dm { height: calc(100dvh - 44px); max-height: calc(100dvh - 44px); }
  .dm:not(.is-last) .dm-legal { display: none; }
  .dm.is-last .dm-strip { display: none; }
  .dm.is-last .dm-lettre { background: transparent; border-top: 0; padding: 12px 0 0; }
  .dm:has(.dm-panel input:focus, .dm-panel textarea:focus) .dm-lettre { max-height: 28vh; }
  .dm-handle { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--border-subtle); margin: 10px auto 0; }
  /* la lettre (quand elle est dépliée) prend la première rangée, le panneau la seconde qui s'étire jusqu'au pied */
  .dm-body { grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .dm-lettre { grid-row: 1; max-height: 44vh; }
  .dm-main { grid-row: 2; }
  .dm-lettre .head, .dm-lettre .note { display: none; }
  .dm-lettre .paper { padding: 14px 16px; font-size: 13.5px; gap: 3px; line-height: 1.5; margin: 0 16px; }
  .dm-lettre .paper .salut { font-size: 17px; margin-bottom: 2px; }
  .dm-lettre .paper .sign { margin-top: 4px; padding-top: 8px; }
  .dm-merci { max-height: calc(100dvh - 44px); }
}
@keyframes dm-up { from { opacity: 0; translate: 0 40px; } }
@media (min-width: 900px) { .dm-handle { display: none; } }
@media (prefers-reduced-motion: reduce) { .demande-modal[open] { animation: none; } }

/* ---- misc ----------------------------------------------------------------- */
.notice { position: relative; background: var(--bg-highlight); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); font-size: 15px; overflow: hidden; }
.notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-image: var(--aurora); background-size: 100% 300%; }
.todo { color: var(--accent-alert); font-weight: 600; }
.page-head { position: relative; padding: 72px 0 40px; background: var(--bg-surface); overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 10% 20%, rgba(var(--lav), 0.38), transparent 44%), radial-gradient(circle at 90% 10%, rgba(255, 224, 162, 0.36), transparent 42%); }
.page-head .h1 { font-size: clamp(34px, 5.4vw, 52px); line-height: 1; }
.page-head .container { position: relative; }
.page-head .lead { font-size: 18px; }
.kv { display: grid; gap: var(--space-2); }
.kv div { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: 15px; }
.kv dt { color: var(--fg-secondary); font-size: 13px; padding-top: 2px; }


/* ---- reveal on scroll -----------------------------------------------------
   The .reveal class is added by site.js, and only to what sits below the fold
   at load: without JS (or above the fold) nothing is ever hidden. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease-soft), transform 620ms var(--ease-soft); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media print { .reveal { opacity: 1 !important; transform: none !important; } .reveal .cbar i { transform: none !important; } }

/* tarifs — renvoi « annonceurs & tiers » sous les packs publicitaires */
.pubs-tiers { margin-top: 20px; max-width: 68ch; }

/* ---- entre les pages : View Transitions natives, en CSS seul (0 ko) ; le header reste, le contenu fond */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease-soft); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---- le point NOVA qui suit la souris (mouvement 04) : pointeur fin seulement, jamais au doigt ni au clavier */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: var(--radius-pill); background-image: var(--aurora); background-size: 280% 100%; animation: aurora-drift 16s ease-in-out infinite alternate; box-shadow: 0 0 0 2px var(--bg-highlight); pointer-events: none; opacity: 0; transition: opacity 240ms ease, width 220ms var(--ease-soft), height 220ms var(--ease-soft), margin 220ms var(--ease-soft); display: none; }
@media (hover: hover) and (pointer: fine) { .js.has-cursor .cursor { display: block; } }
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { .cursor { display: none !important; } }