/* Cueflow · site
   Concept : la page est un morceau préparé. Les sections sont des hot cues (A à G),
   une forme d'onde suit la lecture. Fond clair de studio, écrans de l'app en objets sombres. */

@font-face { font-family: "Mona Sans"; font-style: normal; font-display: swap; font-weight: 200 900; font-stretch: 75% 125%; src: url(/assets/fonts/mona-sans-latin-wdth-normal.woff2) format("woff2-variations"); }

:root {
  --paper: #eceeea;
  --paper-2: #e2e5df;
  --paper-3: #d8dcd4;
  --ink: #131416;
  --grey: #5c6168;
  --line: #c9cdc5;
  --screen: #0e0f11;
  --screen-2: #17191c;
  --screen-3: #202328;
  --screen-text: #f2f3ef;
  --screen-muted: #9a9ea6;
  --a: #b1f03f; --b: #7aa7ff; --c: #f5a54a; --d: #ff7a85; --e: #c79bff; --f: #5fe0c4; --g: #f2f3ef;
  --font: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --rail: 0px;
  --hdr: 64px;
  --glass: rgba(236,238,234,.9);
  --field: #f7f8f5;
  --ink-hover: #2a2c30;
  --foot: #131416;
  --phone-edge: #131416;
  --rail-bar: #b9beb6;
  --screen-edge: transparent;
  --max: 1180px;
}
@media (min-width: 1100px) { :root { --rail: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--font); font-stretch: 100%; -webkit-font-smoothing: antialiased; }
.screen, .measure .n, .big-price { font-variant-numeric: tabular-nums; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.screen :focus-visible { outline-color: var(--a); }

.wrap { width: min(var(--max), 100% - 48px); margin-inline: auto; }
/* only the home page has the left rail (index.html, nav.rail): elsewhere no 60 px gap beside full-width blocks */
html:has(.rail) main, html:has(.rail) footer.site { padding-left: var(--rail); }

/* ---------- Typo ---------- */
h1, h2, h3, .display { margin: 0; font-weight: 760; font-stretch: 80%; letter-spacing: -.032em; line-height: .94; text-wrap: balance; }
h1 { font-size: clamp(48px, 8.2vw, 116px); }
h2 { font-size: clamp(38px, 5.4vw, 76px); }
h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 680; font-stretch: 90%; letter-spacing: -.015em; line-height: 1.12; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--grey); max-width: 34em; text-wrap: pretty; }
.lead strong, .lead b { color: var(--ink); font-weight: 600; }
.small { font-size: 14px; color: var(--grey); }
.muted { color: var(--grey); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 48px; padding: 0 20px; border-radius: 10px; font: 620 16px/1 var(--font); font-stretch: 95%; text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.btn[hidden] { display: none; }
.btn-ink, .btn-lime { background: var(--ink); color: var(--paper); }
.btn-ink:hover, .btn-lime:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-line, .btn-ghost { background: transparent; color: var(--ink); }
.btn-line:hover, .btn-ghost:hover { background: var(--paper-2); }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14.5px; border-radius: 8px; }
.btn-lg { height: 56px; padding: 0 24px; font-size: 17px; }
.screen .btn-a { background: var(--a); color: var(--ink); border-color: var(--a); }
.btn .price { font-weight: 450; opacity: .75; }

/* ---------- En-tête ---------- */
/* Le menu mobile (tiroir) est dans <header class="nav"> (copié par pnpm --filter site layout) : un backdrop-filter
   sur .nav ferait de l'en-tête le repère de son position: fixed. Le flou passe donc sur un pseudo-élément. */
.nav { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-in { height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 760; font-stretch: 85%; font-size: 20px; letter-spacing: -.02em; flex: none; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 22px; margin-left: 12px; }
.nav-links a { text-decoration: none; font-size: 15px; font-weight: 520; color: var(--grey); white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nav-burger { display: none; width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 8px; background: none; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
/* Offrir et Ambassadeur : dans la barre quand les sept liens tiennent, sinon dans le menu (burger) seulement */
@media (max-width: 1240px) {
  .nav-links .nav-more { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta .btn-line { display: none; }
  /* la langue et le thème passent dans le menu */
  .nav-cta > .lang-switch, .nav-cta > .theme-btn { display: none; }
}
@media (max-width: 480px) { .nav-in { gap: 8px; padding: 0 12px; } .brand { font-size: 18px; gap: 7px; } .brand img { width: 24px; height: 24px; } .nav-cta { gap: 8px; } .nav-cta .btn-sm { padding: 0 12px; height: 38px; } .nav-burger { width: 38px; height: 38px; } }

/* Menu mobile : un tiroir qui glisse depuis la droite (header.html, app.js). Fermé : inert et invisible. */
.drawer { position: fixed; inset: 0; z-index: 2; visibility: hidden; transition: visibility 0s .28s; }
.drawer.open { visibility: visible; transition: none; }
.nav:has(.drawer.open) { z-index: 90; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(10,11,12,.42); opacity: 0; transition: opacity .28s ease; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); display: flex; flex-direction: column; gap: 22px; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--paper); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -30px rgba(0,0,0,.35); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.drawer.open .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.drawer-close { width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 8px; background: none; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a { display: block; text-decoration: none; font-weight: 740; font-stretch: 80%; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; padding: 11px 0; border-bottom: 1px solid var(--line); }
.drawer-links a[hidden] { display: none; }
.drawer-links a.active { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (hover: hover) { .drawer-links a:hover { color: var(--grey); } }
.drawer-tools { display: flex; align-items: center; gap: 10px; }
.drawer-cta { display: grid; gap: 10px; margin-top: auto; }
.drawer-cta .btn { width: 100%; }

/* ---------- Rail de la landing : la page comme un morceau, ses cues A-G et leurs noms ----------
   Téléphone et tablette : une barre de pads en bas, le nom sous chaque lettre. Ordinateur : la colonne de gauche,
   forme d'onde (canvas) et pads placés par app.js (--y). Un seul nom, en haut du rail et dans sa largeur (.rail-name) :
   la section lue, ou le point survolé / au focus. Rien ne passe sur la page ni sur ses animations. */
.rail { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
.rail canvas, .rail-name { display: none; }
.pad { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border-radius: 6px; text-decoration: none; font-size: 11px; font-weight: 560; color: var(--grey); white-space: nowrap; transition: background .15s, color .15s; }
.pad b { width: 30px; height: 30px; border-radius: 4px; background: var(--pc); color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 760; box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
.pad[data-cue="g"] b { background: var(--ink); color: var(--paper); }
.pad.on { color: var(--ink); background: var(--paper-2); }
@media (max-width: 420px) { .pad { font-size: 10px; } }
@media (max-width: 1099px) { .home footer.site { padding-bottom: 90px; } }
@media (min-width: 1100px) {
  .rail { z-index: 40; top: 64px; right: auto; width: var(--rail); display: block; padding: 0; border-top: 0; border-right: 1px solid var(--line); }
  .rail canvas { display: block; width: 100%; height: 100%; }
  .rail .pad { position: absolute; left: 4px; top: calc(var(--y, -40px) - 17px); padding: 0; border-radius: 3px; background: none; }
  .rail .pad b { width: 16px; height: 16px; border-radius: 3px; font-size: 10px; font-weight: 700; box-shadow: none; }
  .rail .pad.on b { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
  @media (hover: hover) { .rail .pad:hover b { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--grey); } }
  /* the names stay in the links for screen readers, the rail shows one at its top */
  .pad-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail-name { display: block; position: absolute; top: 10px; left: 3px; right: 3px; padding-bottom: 5px; text-align: center; font-size: 11px; font-weight: 700; font-stretch: 80%; line-height: 1.2; letter-spacing: .01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: clip; box-shadow: inset 0 -3px 0 var(--pc); }
  .rail-name.is-g { box-shadow: inset 0 -3px 0 var(--ink); }
  .rail-name.pointed { color: var(--grey); }
}

/* ---------- Sections ---------- */
.block { padding: clamp(80px, 10vw, 150px) 0; border-top: 1px solid var(--line); scroll-margin-top: var(--hdr); position: relative; }
.block-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.block-head .lead { justify-self: end; }
.cue-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.cue-tag b { width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center; font-size: 13px; font-weight: 760; background: var(--pc); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
.cue-tag.g b { background: var(--ink); color: var(--paper); }
/* Le même repère au-dessus du titre de chaque page (une lettre A-G par sujet) */
.page-hero .cue-tag, .price-head .cue-tag, .thanks .cue-tag, .og-hero .cue-tag { margin: 0; justify-self: start; }
.prose .cue-tag { display: flex; margin: 0 0 16px; }
.og-hero .cue-tag b { color: #131416; }
@media (max-width: 860px) { .block-head { grid-template-columns: 1fr; } .block-head .lead { justify-self: start; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(60px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; }
.hero h1 { max-width: 9.5em; }
.hero-brand { display: block; font-size: 1.5em; line-height: .86; letter-spacing: -.04em; margin-bottom: .04em; }
.hero-brand::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .04em; border-radius: 50%; background: var(--a); }
.hero-side { display: grid; gap: 26px; padding-bottom: 8px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-note { font-size: 14px; color: var(--grey); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Écrans (objets sombres) ---------- */
.screen { background: var(--screen); color: var(--screen-text); border-radius: 16px; outline: 1px solid var(--screen-edge); outline-offset: -1px; font-size: 13px; line-height: 1.45; position: relative; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(19,20,22,.55); }
.screen .muted, .screen .m { color: var(--screen-muted); }

/* Démo d'analyse */
.demo { margin-top: clamp(44px, 6vw, 72px); padding: 22px 24px 20px; }
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.demo-title { display: flex; align-items: center; gap: 12px; }
.demo-title .art { width: 40px; height: 40px; border-radius: 8px; background: var(--screen-3); display: block; flex: none; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / 8%); }
.demo-title b { display: block; font-size: 16px; font-weight: 650; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--screen-3); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: blink 1s infinite; }
.status.done i { background: var(--a); animation: none; }
@keyframes blink { 50% { opacity: .3; } }
.readouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 20px 0 16px; background: var(--screen-3); border-radius: 10px; overflow: hidden; }
.readouts div { background: var(--screen-2); padding: 12px 14px; }
.readouts span { display: block; font-size: 12px; color: var(--screen-muted); }
.readouts strong { display: block; font-size: 22px; font-weight: 700; font-stretch: 85%; letter-spacing: -.01em; margin-top: 2px; transition: color .3s; }
.readouts strong.wait { color: #464a51; }
.wavebox { position: relative; height: 150px; padding-top: 30px; }
.wavebars { position: absolute; inset: 30px 0 0; display: flex; align-items: center; gap: 2px; }
.wavebars i { flex: 1; border-radius: 1px; background: #2c2f34; transition: background .25s; }
.wavebars i.lit { background: #d2d5da; }
.scan { position: absolute; top: 30px; bottom: 0; left: 0; width: 2px; background: var(--a); box-shadow: 0 0 18px var(--a); opacity: 0; }
.flags { position: absolute; inset: 0; pointer-events: none; }
.flag { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fc); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.flag b { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 4px 4px 4px 0; background: var(--fc); color: var(--ink); font-size: 11px; font-weight: 760; display: grid; place-items: center; }
.flag.in { opacity: 1; transform: none; }
.cue-names { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.cue-names div { background: var(--screen-2); border-radius: 8px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.cue-names div.in { opacity: 1; transform: none; }
.cue-names i { width: 8px; height: 8px; border-radius: 2px; background: var(--fc); flex: none; }
.cue-names b { font-size: 12.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cue-names span { font-size: 11px; color: var(--screen-muted); margin-left: auto; }
.demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.demo-foot p { color: var(--screen-muted); font-size: 13px; }
.replay { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: var(--a); color: #131416; font: 680 13.5px/1 var(--font); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.replay:hover { box-shadow: 0 0 0 4px rgb(177 240 63 / 22%); }
.replay:active { transform: scale(.97); }
.replay:focus-visible { outline: 2px solid var(--screen-text); outline-offset: 3px; }
.replay svg { flex: none; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.replay:hover svg { transform: rotate(-200deg); }
@media (prefers-reduced-motion: reduce) { .replay svg { transition: none; } }
@media (max-width: 760px) {
  .demo { padding: 16px; }
  .readouts { grid-template-columns: 1fr 1fr; }
  .cue-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cue-names span { display: none; }
  .wavebox { height: 120px; }
}

/* ---------- B : routine ---------- */
.swap { border-top: 1.5px solid var(--ink); }
.swap-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.swap-row .k { width: 12px; height: 12px; border-radius: 3px; background: var(--pc); align-self: start; margin-top: 9px; }
.swap-row .old { font-size: clamp(19px, 1.8vw, 24px); font-weight: 560; font-stretch: 92%; color: var(--grey); text-decoration: line-through; text-decoration-color: var(--pc); text-decoration-thickness: 3px; }
.swap-row .new { font-size: 17px; }
.swap-row .new b { font-weight: 650; }
.swap-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 0 0 12px; font-size: 14px; color: var(--grey); font-weight: 560; }
@media (max-width: 760px) { .swap-row, .swap-head { grid-template-columns: 20px minmax(0, 1fr); gap: 6px 14px; } .swap-row .new { grid-column: 2; } .swap-head span:last-child { display: none; } }

/* ---------- C : écrans annotés ---------- */
.shot { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; margin-bottom: clamp(70px, 9vw, 120px); }
.shot:last-child { margin-bottom: 0; }
.shot.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.shot.rev .shot-notes { order: -1; }
.shot-frame { position: relative; }
.shot-notes h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 740; font-stretch: 80%; letter-spacing: -.03em; line-height: 1; margin-bottom: 16px; }
.shot-notes > p { color: var(--grey); margin-bottom: 26px; max-width: 30em; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.notes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.notes li b { font-weight: 640; display: block; }
.notes li span { color: var(--grey); font-size: 15px; }
.pin { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 740; display: grid; place-items: center; }
.has-pin { position: relative; }
/* pastilles des listes : fond de la page, contour et chiffre ou coche à l'encre */
.notes li { --k: var(--ink); }
.notes .pin { width: 26px; height: 26px; margin-top: 1px; background: var(--paper); color: var(--k); border: 2px solid var(--k); font-size: 12.5px; font-weight: 760; font-variant-numeric: tabular-nums; }
.pin.el { position: absolute; z-index: 3; top: -11px; right: -11px; background: var(--a); color: var(--ink); box-shadow: 0 0 0 3px var(--screen); }

@media (max-width: 960px) { .shot, .shot.rev { grid-template-columns: minmax(0, 1fr); } .shot.rev .shot-notes { order: 0; } .app-bar { flex-wrap: wrap; } }

/* Contenu des maquettes */
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--screen-3); }
.app-brand { display: flex; align-items: center; gap: 8px; font-weight: 740; font-stretch: 85%; font-size: 14px; }
.app-brand img { width: 22px; height: 22px; }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--screen-2); }
.tabs span { padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.tabs span.on { background: var(--a); color: var(--ink); }
.tabs em { font-style: normal; background: var(--screen-text); color: var(--screen); border-radius: 999px; font-size: 10px; padding: 0 6px; line-height: 16px; }
.app-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--screen-3); font-size: 12px; font-weight: 600; }
.app-body { padding: 20px 22px 24px; }
.app-h { font-size: 26px; font-weight: 760; font-stretch: 85%; letter-spacing: -.02em; line-height: 1.05; margin: 2px 0 6px; }
.app-btns { display: flex; gap: 8px; margin: 14px 0 20px; flex-wrap: wrap; }
.app-btns span { padding: 8px 14px; border-radius: 999px; font-weight: 650; font-size: 12px; border: 1px solid var(--screen-3); }
.app-btns span.p { background: var(--a); color: var(--ink); border-color: var(--a); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lbl { font-size: 12px; font-weight: 650; color: var(--screen-muted); margin-bottom: 4px; }
.trk { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--screen-3); }
.trk:last-child { border-bottom: 0; }
.trk .ic { width: 28px; height: 28px; border-radius: 7px; background: var(--screen-2); display: grid; place-items: center; flex: none; color: var(--a); }
.trk b { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.trk span { font-size: 11.5px; color: var(--screen-muted); }
.trk .r { margin-left: auto; font-size: 11.5px; color: var(--screen-muted); white-space: nowrap; }
.iss { background: var(--screen-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.iss b { font-size: 12.5px; font-weight: 650; }
.iss b span { font-weight: 450; color: var(--screen-muted); }
.iss p { font-size: 11.5px; color: #c8ccd2; margin-top: 1px; }
.iss .go { color: var(--a); font-weight: 700; font-size: 12px; }
@media (max-width: 600px) { .cols2 { grid-template-columns: 1fr; } .tabs span:nth-child(4), .app-pill, .app-brand span { display: none; } }

.gridview { background: #08090a; border-radius: 10px; height: 150px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 3px; padding: 0 10px; }
.gridview i { flex: 1; background: #2e3237; border-radius: 1px; }
.gridview i.k { background: #d9dcdf; }
.gridview .bar { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--a); }
.gridview .bar span { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 700; color: var(--a); }
.checkpts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.checkpts div { background: var(--screen-2); border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.35; }
.checkpts div b { display: block; font-size: 12px; }
.checkpts div.sel { outline: 1.5px solid var(--screen-text); }
.okc { color: var(--a); } .warnc { color: var(--c); }
.cuechips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.cuechips div { background: var(--screen-2); border-radius: 8px; padding: 7px 8px; display: flex; gap: 8px; align-items: center; font-size: 11px; line-height: 1.25; color: var(--screen-muted); }
.cuechips i { font-style: normal; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; font-weight: 760; color: var(--ink); background: var(--fc); flex: none; }
.cuechips b { display: block; font-size: 12px; color: var(--screen-text); }
@media (max-width: 600px) { .checkpts { grid-template-columns: repeat(3, 1fr); } .checkpts div:nth-child(n+4) { display: none; } .cuechips { grid-template-columns: 1fr 1fr; } }

/* Clips : téléphones */
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.phone { display: grid; gap: 10px; }
.phone .scr { aspect-ratio: 9/16; border-radius: 18px; background: linear-gradient(180deg, #23262b, #0e0f11 70%); padding: 10px; display: flex; flex-direction: column; justify-content: space-between; color: var(--screen-text); position: relative; overflow: hidden; border: 4px solid var(--phone-edge); }
.phone .tc { align-self: flex-start; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.55); padding: 3px 7px; border-radius: 6px; }
.phone .cap { font-size: 12px; font-weight: 650; line-height: 1.25; }
.phone .cap span { display: block; font-weight: 450; color: var(--screen-muted); font-size: 11px; }
.phone .bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-top: 8px; }
.phone .bars i { flex: 1; background: var(--a); border-radius: 1px; }
.phone .meta { font-size: 14px; }
.phone .meta b { font-weight: 640; display: block; }
.phone .meta span { color: var(--grey); font-size: 13px; }
.phone.off .scr { opacity: .45; }
@media (max-width: 760px) { .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- D : garanties ---------- */
.never { border-top: 1.5px solid var(--ink); }
.never-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 48px; padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.never-row h3 { font-size: clamp(30px, 3.8vw, 52px); font-weight: 740; font-stretch: 80%; letter-spacing: -.03em; line-height: 1; }
.never-row p { color: var(--grey); max-width: 28em; }
@media (max-width: 760px) { .never-row { grid-template-columns: 1fr; } }

/* ---------- E : précision ---------- */
.measures { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.measure { display: grid; grid-template-columns: clamp(124px, 13vw, 184px) minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.measure:first-child { border-top: 1.5px solid var(--ink); }
.measure .n { grid-row: span 3; color: var(--ink); font-size: clamp(40px, 4.4vw, 60px); font-weight: 760; font-stretch: 78%; letter-spacing: -.04em; line-height: 1; }
.measure .n small { font-size: .45em; font-weight: 600; margin-left: 1px; }
.measure b { font-weight: 640; font-size: 17px; }
.measure span { color: var(--grey); font-size: 14.5px; }
.measure .n span { color: inherit; font-size: inherit; }
.meter { height: 4px; background: var(--paper-3); border-radius: 2px; grid-column: 2; margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink); width: var(--w); }
.aside-note { background: var(--paper-2); border-radius: 14px; padding: 28px; display: grid; gap: 14px; }
.aside-note h3 { font-size: 24px; }
.aside-note p { color: var(--grey); }
@media (max-width: 860px) { .measures { grid-template-columns: 1fr; } }

/* ---------- F : prix ---------- */
.price-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.big-price { font-size: clamp(120px, 19vw, 260px); font-weight: 780; font-stretch: 75%; letter-spacing: -.06em; line-height: .8; margin-left: -.04em; }
.big-price sup { font-size: .32em; vertical-align: top; position: relative; top: .12em; margin-left: .04em; letter-spacing: 0; }
.price-sub { font-size: clamp(20px, 2vw, 26px); font-weight: 560; font-stretch: 90%; margin-top: 18px; }
.incl { list-style: none; padding: 0; margin: 0 0 28px; border-top: 1.5px solid var(--ink); }
.incl li { padding: 13px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.incl li span { color: var(--grey); text-align: right; }
.price-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.price-fine { margin-top: 14px; font-size: 14px; color: var(--grey); }
.lifeline { margin-top: clamp(56px, 7vw, 90px); }
.lifeline-bar { display: grid; grid-template-columns: 1fr 1.1fr; height: 44px; border-radius: 8px; overflow: hidden; }
.lifeline-bar div { display: flex; align-items: center; padding: 0 16px; font-size: 14.5px; font-weight: 620; }
.lifeline-bar .upd { background: var(--a); }
.lifeline-bar .keep { background: repeating-linear-gradient(-45deg, var(--paper-2) 0 10px, var(--paper-3) 10px 20px); }
.lifeline-legend { display: grid; grid-template-columns: 1fr 1.1fr; margin-top: 12px; font-size: 14.5px; color: var(--grey); gap: 16px; }
.lifeline-legend b { color: var(--ink); font-weight: 640; }
.lifeline-ticks { display: grid; grid-template-columns: 1fr 1.1fr; font-size: 13px; color: var(--grey); margin-bottom: 8px; }
/* Tarifs: the price is what the visitor came for, so the title stays small and the price sits above the fold. */
.price-page { border-top: 0; padding-top: clamp(40px, 5vw, 64px); }
.price-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 44em; }
.price-head h1 { font-size: clamp(32px, 3.6vw, 48px); }
.price-page .price-wrap { align-items: start; }
@media (max-width: 860px) { .price-wrap { grid-template-columns: 1fr; } .lifeline-bar, .lifeline-legend, .lifeline-ticks { grid-template-columns: 1fr 1fr; } }

/* ---------- G : questions ---------- */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; border-top: 1.5px solid var(--ink); }
.qa div { padding: 26px 0; border-bottom: 1px solid var(--line); }
.qa h3 { font-size: 20px; margin-bottom: 8px; }
.qa p { color: var(--grey); font-size: 16px; }
.qa code, .prose code, .legal code { font: 500 .88em ui-monospace, Menlo, monospace; background: var(--paper-2); padding: 2px 6px; border-radius: 5px; color: var(--ink); }
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; } }

.closing { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: end; }
@media (max-width: 860px) { .closing .wrap { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
footer.site { background: var(--foot); color: #b9bdc3; font-size: 15px; }
footer.site .wrap { padding: 64px 0 36px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-grid .brand { color: #eef0ea; }
.foot-grid h4 { margin: 0 0 14px; color: #eef0ea; font-size: 15px; font-weight: 620; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; } .foot-grid a:hover { color: #eef0ea; text-decoration: underline; }
.foot-grid p { margin-top: 14px; max-width: 22em; }
/* a link inside the footer's sentence ("Développé par Colas Naudi") is underlined at rest, unlike the link lists */
.foot-grid p a { color: #eef0ea; text-decoration: underline; text-decoration-color: #5b6068; text-underline-offset: 3px; }
.foot-grid p a:hover { text-decoration-color: currentColor; }
.foot-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid #2a2c30; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #7d828a; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: span 2; } }

/* ================= Pages internes ================= */
.page-hero { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 64px); }
.page-hero .wrap { display: grid; gap: 22px; }
.page-hero h1 { font-size: clamp(46px, 7vw, 96px); max-width: 11em; }
.page-hero.center .wrap { justify-items: start; }

.card { background: var(--paper-2); border-radius: 14px; padding: 30px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.checks li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); margin-top: 8px; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; border-top: 1.5px solid var(--ink); }
.table th, .table td { text-align: left; padding: 15px 12px 15px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: 14px; color: var(--grey); font-weight: 560; }
.table td:not(:first-child), .table th:not(:first-child) { width: 22%; }
.table .y { font-weight: 650; }
.table .n { color: var(--grey); }

/* Docs */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-bottom: 120px; }
.docs-nav { position: sticky; top: 88px; align-self: start; display: grid; gap: 1px; font-size: 15px; max-height: calc(100vh - 88px - 48px); overflow: auto; margin-bottom: 48px; padding-bottom: 8px; }
.docs-nav .g { font-size: 13px; font-weight: 620; color: var(--grey); margin: 22px 0 6px; }
.docs-nav .g:first-child { margin-top: 0; }
.docs-nav a { text-decoration: none; padding: 6px 10px; border-left: 2px solid var(--line); color: var(--grey); }
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.on { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; gap: 24px; } .docs-nav { position: static; max-height: none; margin-bottom: 0; padding-bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; } .docs-nav .g { display: none; } .docs-nav a { border: 1px solid var(--line); border-radius: 8px; } }
.prose { max-width: 720px; }
.prose > section { padding-bottom: 52px; margin-bottom: 52px; border-bottom: 1px solid var(--line); scroll-margin-top: 88px; }
.prose > section:last-child { border-bottom: 0; }
.prose h2 { font-size: clamp(34px, 4vw, 52px); margin-bottom: 20px; }
.prose h3 { margin: 30px 0 10px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; } .prose li { margin: 7px 0; }
.prose a { font-weight: 560; }
.callout { background: var(--paper-2); border-left: 4px solid var(--b); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 20px 0; }
.callout.warn { border-left-color: var(--c); }

/* Docs : les pages docs/*.html. docs.js remplit nav.docs-nav (groupes .g, page courante .on), le précédent /
   suivant (#doc-pager) et les cartes du sommaire (#doc-hub). Le texte est sur le papier ; les illustrations
   sont les composants de l'app redessinés dans docs/doc-ui.css (.ui-*), toujours sombres. */
.docs-nav a span { display: inline; }
main > .docs:first-child { padding-top: clamp(40px, 5vw, 72px); }
.prose { min-width: 0; }
.prose .eyebrow { display: block; font-size: 13px; font-weight: 620; color: var(--grey); margin: 0 0 12px; }
.prose h1 { font-size: clamp(38px, 5vw, 64px); margin: 0 0 18px; }
.prose h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 56px 0 16px; }
.prose li { color: inherit; }
.doc-lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--grey); margin: 0 0 8px !important; text-wrap: pretty; }
.ui { font-weight: 640; color: var(--ink); }
.doc-tip, .doc-warn { background: var(--paper-2); border-left: 4px solid var(--a); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 24px 0 !important; font-size: 15.5px; }
.doc-warn { border-left-color: var(--d); }
.legal-table { overflow-x: auto; margin: 12px 0 24px; border: 1px solid var(--line); border-radius: 16px; }
.legal-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.legal-table th { text-align: left; font-size: 13px; font-weight: 620; color: var(--grey); background: var(--paper-2); }
.legal-table th, .legal-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table td { color: var(--grey); }
.legal-table td:first-child { color: var(--ink); }
.legal-table tr:last-child td { border-bottom: 0; }
.doc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.doc-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 48px 18px 18px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; font-weight: 450 !important; transition: border-color .2s, background .2s; }
.doc-card:hover { border-color: var(--ink); background: var(--paper-2); }
.doc-card strong { font-size: 18px; font-weight: 680; font-stretch: 90%; letter-spacing: -.01em; }
.doc-card > span { color: var(--grey); font-size: 14.5px; line-height: 1.45; }
.doc-card i { position: absolute; right: 18px; top: 18px; font-style: normal; color: var(--grey); }
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc-pager a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.doc-pager a:hover { border-color: var(--ink); background: var(--paper-2); }
.doc-pager-next { text-align: right; }
.doc-pager-label { font-size: 13px; font-weight: 560; color: var(--grey); }
@media (max-width: 560px) { .doc-cards, .doc-pager { grid-template-columns: 1fr; } }

.kbd-table { width: 100%; border-collapse: collapse; }
.kbd-table td { padding: 12px 0; border-bottom: 1px solid var(--line); }
.kbd-table td:first-child { width: 46%; }
kbd { font: 600 13px var(--font); background: var(--field); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; padding: 2px 8px; }
.steps-ol { list-style: none; padding: 0 !important; counter-reset: st; display: grid; gap: 0; border-top: 1.5px solid var(--ink); margin: 18px 0; }
.steps-ol li { counter-increment: st; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 16px 0; margin: 0 !important; border-bottom: 1px solid var(--line); }
.steps-ol li::before { content: counter(st); font-size: 28px; font-weight: 760; font-stretch: 78%; line-height: 1; }
.path { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; background: var(--screen); color: var(--screen-text); border-radius: 8px; padding: 9px 10px 9px 14px; font: 500 14px ui-monospace, Menlo, monospace; }
.path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path button { font: 650 13px var(--font); background: var(--a); color: var(--ink); border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; }

/* Versions */
.vlist { display: grid; max-width: 920px; border-top: 1.5px solid var(--ink); }
.vcard { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.vcard .v { font-size: 44px; font-weight: 760; font-stretch: 78%; letter-spacing: -.04em; line-height: 1; }
.vcard .d { color: var(--grey); font-size: 14px; margin-top: 8px; }
.vcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vcard li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.vcard li.plain { grid-template-columns: minmax(0, 1fr); }
.tag { display: inline-block; text-align: center; font-size: 12.5px; font-weight: 620; padding: 3px 8px; border-radius: 5px; align-self: start; }
.tag.new { background: var(--a); }
.tag.imp { background: var(--b); }
.tag.fix { background: var(--c); }
.tag.del { background: var(--paper-3); color: var(--grey); }
.vcard.upcoming .v { color: var(--grey); }
@media (max-width: 700px) { .vcard { grid-template-columns: 1fr; gap: 14px; } }

/* Contact */
.form-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.field { display: grid; gap: 7px; margin-bottom: 20px; }
.field label { font-size: 15px; font-weight: 600; }
.field .hint, .hint { font-size: 14px; color: var(--grey); }
input, select, textarea { width: 100%; font: 400 16px var(--font); color: var(--ink); background: var(--field); border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }
textarea { min-height: 160px; resize: vertical; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.radio-cards label { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-weight: 520; }
.radio-cards input { width: auto; accent-color: var(--ink); }
.radio-cards label:has(input:checked) { border-color: var(--ink); }
.quick { display: grid; border-top: 1.5px solid var(--ink); }
.quick a { display: block; text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--line); font-weight: 640; font-size: 18px; }
.quick a:hover div { text-decoration: underline; }
.quick a span { display: block; font-weight: 400; color: var(--grey); font-size: 15px; margin-top: 2px; }
.mini-label { font-size: 14px; color: var(--grey); margin-bottom: 4px; }
@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } .radio-cards { grid-template-columns: 1fr; } }

/* Légal */
.legal { max-width: 760px; padding-bottom: 120px; }
.legal h2 { font-size: 26px; font-stretch: 85%; letter-spacing: -.02em; margin: 48px 0 12px; line-height: 1.1; }
.legal p, .legal li { color: #2f3236; margin: 0 0 12px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 12px 0 18px; border-top: 1.5px solid var(--ink); }
.legal th, .legal td { text-align: left; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--grey); font-weight: 560; }
.todo { background: var(--c); color: var(--ink); border-radius: 4px; padding: 1px 6px; font-weight: 640; }
/* Les 5 pages légales (legal/*.html) : le page-hero, puis « Sur cette page » (legal.js, depuis les h2 de l'article
   affiché) à côté de l'article de la langue choisie. */
.legal-hero { padding-bottom: clamp(24px, 3vw, 40px); }
.legal-hero .wrap { gap: 16px; }
.legal-hero .eyebrow { font-size: 13px; font-weight: 620; color: var(--grey); }
.legal-hero h1 { font-size: clamp(34px, 4.6vw, 56px); max-width: 16em; }
.legal-hero .small { margin: 0; }
.legal-page { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: 120px; }
.legal-page > .legal { padding-bottom: 0; }
.legal-page > .legal { grid-column: 2; grid-row: 1; }
.legal-page:has(> .legal-toc[hidden]) { grid-template-columns: minmax(0, 760px); }
.legal-page:has(> .legal-toc[hidden]) > .legal { grid-column: 1; }
.legal-toc { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--hdr) + 24px); font-size: 14px; }
.legal-toc[hidden] { display: none; }
.legal-toc-title { font-size: 13px; font-weight: 620; color: var(--grey); margin: 0 0 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.legal-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--grey); text-decoration: none; line-height: 1.35; }
.legal-toc a:hover { color: var(--ink); }
.legal-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
.legal-note { background: var(--paper-2); border-left: 4px solid var(--a); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 24px; font-size: 15px; color: var(--grey); }
.legal h2 { scroll-margin-top: calc(var(--hdr) + 16px); }
.legal-scroll { overflow-x: auto; }
.legal-scroll table { min-width: 520px; }
.legal-code { overflow-x: auto; background: var(--paper-2); border-radius: 10px; padding: 14px 16px; font: 500 13px/1.6 ui-monospace, Menlo, monospace; margin: 0 0 14px; }
html[data-theme="dark"] .legal p, html[data-theme="dark"] .legal li { color: #c9ccc6; }
@media (max-width: 900px) {
  .legal-page { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal-page > .legal { grid-column: 1; grid-row: auto; }
  .legal-toc { position: static; }
}

/* Merci */
.thanks { padding: clamp(70px, 10vw, 140px) 0; }
.thanks .card { background: transparent; padding: 0; max-width: 680px; display: grid; gap: 22px; justify-items: start; }
.badge-ok { width: 56px; height: 56px; border-radius: 12px; background: var(--a); display: grid; place-items: center; color: var(--ink); }

/* Tarifs (page) */
.compare-note { margin-top: 16px; font-size: 14px; color: var(--grey); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Mode sombre ---------- */
html[data-theme="dark"] {
  --paper: #0d0e10; --paper-2: #16181b; --paper-3: #24272c;
  --ink: #eef0ea; --grey: #969ba3; --line: #26292e;
  --screen: #141619; --screen-2: #1d2024; --screen-3: #2a2e33; --screen-edge: #2a2e33;
  --g: #eef0ea;
  --glass: rgba(13,14,16,.86); --field: #16181b; --ink-hover: #ffffff;
  --foot: #08090a; --phone-edge: #2a2e33; --rail-bar: #3e4248;
}
html[data-theme="dark"] .screen { box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
html[data-theme="dark"] footer.site { border-top: 1px solid var(--line); }
html[data-theme="dark"] .lifeline-bar .upd, html[data-theme="dark"] .tag.new { color: #131416; }
html[data-theme="dark"] .tag.imp, html[data-theme="dark"] .tag.fix, html[data-theme="dark"] .todo, html[data-theme="dark"] .pad b, html[data-theme="dark"] .cue-tag b { color: #131416; }
html[data-theme="dark"] .pad[data-cue="g"] b, html[data-theme="dark"] .cue-tag.g b { background: var(--ink); color: var(--paper); }
html[data-theme="dark"] .pin.el { color: #131416; }

/* Bascule de thème */
.theme-btn { width: 38px; height: 38px; border-radius: 8px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .moon { display: none; }
html[data-theme="dark"] .theme-btn .sun { display: none; }
html[data-theme="dark"] .theme-btn .moon { display: block; }

/* ---------- Ligne de cue : le haut de chaque section ---------- */
.cue-line { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--cl); opacity: 0; transform-origin: left; pointer-events: none; }
.cue-line::before { content: attr(data-k); position: absolute; left: 0; top: 0; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 0 0 4px 0; background: var(--cl); color: #131416; font-size: 11px; font-weight: 760; display: grid; place-items: center; }
.cue-line[data-k="G"] { --cl: var(--ink) !important; }
.cue-line[data-k="G"]::before { color: var(--paper); }
.cue-line.hit { animation: cuehit 1.6s ease-out forwards; }
@keyframes cuehit { 0% { opacity: 1; transform: scaleX(0); } 18% { opacity: 1; transform: scaleX(1); } 70% { opacity: 1; } 100% { opacity: .0; } }
@media (prefers-reduced-motion: reduce) { .cue-line.hit { animation: none !important; opacity: 1; } }

/* ---------- Abonnement ---------- */
.billing { position: relative; z-index: 2; display: inline-flex; padding: 4px; gap: 2px; border: 1.5px solid var(--ink); border-radius: 10px; margin-bottom: 28px; }
.billing button { font: 620 15px var(--font); font-stretch: 95%; color: var(--ink); background: none; border: 0; border-radius: 7px; padding: 9px 16px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.billing button span:not([data-l]) { font-size: 12.5px; font-weight: 700; background: var(--a); color: #131416; border-radius: 4px; padding: 1px 6px; }
.billing button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.big-price .per { font-size: .2em; font-weight: 600; font-stretch: 90%; letter-spacing: -.01em; margin-left: .15em; color: var(--grey); }
/* l'ancien prix barré en biais, en rouge : les chiffres restent lisibles */
.price-sub s { position: relative; text-decoration: none; white-space: nowrap; color: var(--ink); }
.price-sub s::after { content: ""; position: absolute; left: -3px; right: -3px; top: calc(50% - 1px); height: 2px; border-radius: 2px; background: var(--d); transform: rotate(-14deg); }
/* Offre de lancement : un badge au-dessus du prix, retiré par sale.js quand les places sont prises */
.launch-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 6px; background: var(--a); color: #131416; font-size: 13px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.launch-badge::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #131416; animation: blink 1.4s infinite; }
.launch-badge[hidden] { display: none; }
.launch-badge b { margin-left: 2px; padding: 1px 6px; border-radius: 4px; background: #131416; color: var(--a); font-weight: 760; letter-spacing: .02em; }
.lifeline-bar.sub, .lifeline-legend.sub, .lifeline-ticks.sub { grid-template-columns: .42fr 1fr; }
.lifeline-bar.sub .keep { background: var(--paper-2); }
@media (max-width: 860px) { .lifeline-bar.sub, .lifeline-legend.sub, .lifeline-ticks.sub { grid-template-columns: .42fr 1fr; } .lifeline-bar.sub div { font-size: 13px; padding: 0 10px; } }
[data-view="month"] .big-price { font-size: clamp(96px, 14vw, 200px); }
/* Yearly / monthly share one grid cell: the hidden one keeps its space (invisible, out of the accessibility tree),
   so the block is as tall as the taller view and the switch above it does not move when it is pressed. */
.pricing { display: grid; }
.pricing > .billing { justify-self: start; }
.pricing > [data-view] { grid-area: 2 / 1; }
.pricing > [data-view][hidden] { display: block !important; visibility: hidden; }
.price-sub { margin-top: 28px; }

/* =========================================================
   Écrans de l'app alignés sur la DA du site
   Mêmes formes (rayons 6 à 10 px, pas de pilules), même typo condensée,
   couleur réservée au sens : lettres de cues, état prêt (A), à écouter (C).
   ========================================================= */
.screen { --s-ink: #eef0ea; --s-paper: #0e0f11; border-radius: 14px; }
.screen .app-h, .screen .demo-title b, .readouts strong { font-weight: 760; font-stretch: 80%; letter-spacing: -.03em; }
.screen .app-h { font-size: 30px; line-height: .98; }
.app-bar { padding: 12px 16px; }
.app-brand { font-stretch: 80%; font-size: 15px; letter-spacing: -.02em; }

/* Onglets : contrôle segmenté, actif en clair */
.tabs { border-radius: 8px; padding: 3px; background: var(--screen-2); }
.tabs span { border-radius: 6px; padding: 6px 12px; color: var(--screen-muted); }
.tabs span.on { background: var(--s-ink); color: #131416; }
.tabs em { border-radius: 4px; background: var(--c); color: #131416; font-weight: 760; }
.app-pill { border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; color: var(--screen-muted); }
.app-pill::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--a); }

/* Boutons : mêmes formes que le site */
.app-btns span { border-radius: 8px; padding: 9px 14px; font-size: 12.5px; border: 1.5px solid var(--screen-3); }
.app-btns span.p { background: var(--s-ink); color: #131416; border-color: var(--s-ink); }

/* Listes : petits carrés de cue au lieu d'icônes, filets fins */
.trk .ic { width: 10px; height: 10px; border-radius: 2px; background: var(--a); font-size: 0; }
.trk .r { font-variant-numeric: tabular-nums; }
.iss { border-radius: 8px; background: transparent; border: 1px solid var(--screen-3); border-left: 3px solid var(--c); padding: 10px 12px; }
.iss .go { color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 650; }
.lbl { display: flex; align-items: center; gap: 7px; }
.lbl i { width: 8px; height: 8px; border-radius: 2px; background: var(--k, var(--a)); }

/* Repères d'annotation : en négatif des repères du site */
.pin.el { background: var(--s-ink); color: #131416 !important; box-shadow: 0 0 0 3px var(--screen); }

/* Vérifier */
.checkpts div { border-radius: 6px; background: transparent; border: 1px solid var(--screen-3); }
.checkpts div.sel { outline: 0; border-color: var(--s-ink); }
.gridview { border-radius: 8px; }
.gridview .bar { background: var(--s-ink); opacity: .9; }
.gridview .bar span { color: var(--s-ink); }
.cuechips div { border-radius: 6px; }

/* Démo du hero */
.status { border-radius: 6px; }
.status i { border-radius: 2px; }
.readouts { border-radius: 8px; }
.readouts strong { font-size: 26px; }
.scan { background: var(--s-ink); box-shadow: 0 0 14px rgba(238,240,234,.6); }
.cue-names div { border-radius: 6px; }
.demo-title .art { border-radius: 6px; }

/* Clips : écrans plats, waveform à la couleur du moment */
.phone .scr { background: var(--screen); border-radius: 14px; border-width: 3px; }
.phone .bars i { background: var(--pc, var(--a)); }
.phone .tc { border-radius: 4px; background: var(--pc, var(--a)); color: #131416; }
.phone.off .scr { opacity: .4; }
html[data-theme="dark"] .phone .scr { border-color: var(--screen-3); }

/* Repères : une seule couleur, un seul calage (centrés sur le coin haut-droit de la cible) */
.pin.el { width: 24px; height: 24px; top: -12px; right: -12px; background: var(--s-ink, #eef0ea) !important; color: #131416 !important; box-shadow: 0 0 0 3px var(--screen) !important; font-size: 12px; line-height: 1; }
.pin.el.inline { position: relative; top: auto; right: auto; display: inline-grid; vertical-align: middle; margin-left: 12px; transform: translateY(-2px); }
/* Le repère se cale sur le bord extérieur de la cible, bordure comprise */
.pin.el:not(.inline) { top: calc(-12px - var(--bw, 0px)); right: calc(-12px - var(--bw, 0px)); }
.iss { --bw: 1px; }
.app-btns span { display: inline-block; --bw: 1.5px; }
.app-btns span .pin.el { font-size: 12px; }
.app-btns .pin.el { display: grid; padding: 0; border: 0; border-radius: 50%; font-weight: 740; }
.pin.el.inline { transform: translateY(-3px); }
.app-btns > span { border-width: 1px; --bw: 1px; }
.app-btns .pin.el { --bw: inherit; }
/* Vérifier : de l'air pour que chaque repère ait sa place */
.shot.rev .app-body > div:first-child { margin-bottom: 24px !important; }
.shot.rev .checkpts { margin: 0 0 24px !important; }
.shot.rev .cuechips { margin-top: 24px; }

/* ---------- Langues ---------- */
/* Les deux langues sont écrites dans la page ; sans JavaScript, celle de <html lang> s'affiche. */
html[lang="fr"] [data-l="en"] { display: none !important; }
html:not([lang="fr"]) [data-l="fr"] { display: none !important; }
.lang-switch { display: inline-flex; flex: none; }
.lang-switch button { width: 32px; height: 32px; padding: 0; border: 1.5px solid var(--line); background: transparent; color: var(--grey); font: 650 12.5px/1 var(--font); font-stretch: 95%; cursor: pointer; }
.lang-switch button:first-child { border-radius: 8px 0 0 8px; }
.lang-switch button + button { border-left: 0; border-radius: 0 8px 8px 0; }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Menu mobile : il défile si l'écran est bas. */

/* The subscribe button's messages (sale.js shows one [data-state] at a time) */
.checkout-status { margin-top: 12px; font-size: 14px; color: var(--grey); }
.checkout-status p { margin: 0; }
.checkout-status .sale-error { color: #c0392b; }

/* Merci et Contact : états du paiement et du formulaire (sale.js) */
[hidden] { display: none !important; }
.mono { font: 500 .92em ui-monospace, Menlo, monospace; }
.sale-card { background: var(--paper-2); border-radius: 12px; padding: 20px 22px; text-align: left; display: grid; gap: 10px; }
.sale-card p { margin: 0; }
.sale-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sale-code code { font: 600 clamp(17px, 3.4vw, 24px) ui-monospace, Menlo, monospace; letter-spacing: .04em; user-select: all; }
.sale-form { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.sale-form input { flex: 1 1 220px; width: auto; }
.sale-status p { margin: 6px 0 0; font-size: 15px; }
.sale-error { color: #c0392b; font-size: 14px; margin: 0; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-sent { display: grid; gap: 14px; justify-items: start; }
.contact-sent:focus { outline: none; }
.contact-sent h2 { font-size: 30px; margin: 0; }
.contact-form [aria-invalid="true"] { border-color: #c0392b; }

/* Versions page */
.table th.grp { padding-top: 26px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); border-bottom: 1.5px solid var(--ink); }
.fine { font-size: 13.5px; color: var(--grey); line-height: 1.55; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Accueil : « fonctionne avec » ---------- */
.works-with { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin-bottom: clamp(28px, 4vw, 48px); color: var(--grey); }
.works-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.wm { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); opacity: .78; transition: opacity .2s; }
.wm:hover { opacity: 1; }
.wm svg { width: 22px; height: 22px; }
.wm-rb span { font-size: 22px; font-weight: 720; font-stretch: 100%; letter-spacing: -.035em; line-height: 1; }
.wm-serato span { font-size: 24px; font-weight: 820; font-stretch: 112%; letter-spacing: -.05em; line-height: 1; }

/* ---------- Accueil : apparitions au scroll ----------
   html.anim (posé dans le <head> d'index.html, jamais avec prefers-reduced-motion) : app.js marque [data-reveal]
   et ajoute .in quand l'élément entre à l'écran. Sans JavaScript, tout est visible tout de suite. */
.anim [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-delay, 0ms); }
.anim [data-reveal].in { opacity: 1; transform: none; }
.anim .hero h1 > span[data-l] { display: block; }
.anim .demo[data-reveal] { transform: translateY(60px) scale(.97); transition-duration: .9s, 1s; }
.anim .demo[data-reveal].in { transform: none; }

/* La démo : la forme d'onde est là dès l'entrée, chaque cue tombe avec un éclat au passage de la tête de lecture */
.flag b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--fc); opacity: 0; }
.anim .flag.in b::after { animation: cueping .7s ease-out; }
@keyframes cueping { 0% { opacity: .9; box-shadow: 0 0 0 0 var(--fc); } 100% { opacity: 0; box-shadow: 0 0 0 12px var(--fc); } }
.anim .flag { transform: translateY(-22px); }
.anim .flag.in { transform: none; }
.anim .cue-names div { transform: translateY(10px) scale(.96); }
.anim .cue-names div.in { transform: none; }
.anim .readouts strong:not(.wait) { animation: readout .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes readout { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* B : le trait de couleur se trace sur l'ancienne tâche, puis la nouvelle se surligne */
.anim .swap-row .old { text-decoration: none; }
.anim .swap-row .old > span { background: linear-gradient(var(--pc), var(--pc)) no-repeat 0 52% / 0% 3px; transition: background-size .75s cubic-bezier(.65,0,.35,1) calc(var(--rv-delay, 0ms) + 250ms), color .4s calc(var(--rv-delay, 0ms) + 250ms); color: var(--ink); }
.anim .swap-row.in .old > span { background-size: 100% 3px; color: var(--grey); }
.anim .swap-row .new b { background: linear-gradient(color-mix(in srgb, var(--pc) 42%, transparent), color-mix(in srgb, var(--pc) 42%, transparent)) no-repeat 0 90% / 0% .5em; transition: background-size .6s cubic-bezier(.65,0,.35,1) calc(var(--rv-delay, 0ms) + 900ms); }
.anim .swap-row.in .new b { background-size: 100% .5em; }

/* E : les compteurs et les jauges accélèrent ensemble jusqu'à la valeur (même durée, même courbe que app.js) */
.anim .meter i { width: 0; transition: width 1.6s cubic-bezier(.32,0,.67,0) var(--rv-delay, 0ms); }
.anim .measure.in .meter i { width: var(--w); }

/* ---------- Accueil : sous la démo, le morceau part vers le logiciel DJ ----------
   Le bloc entre au scroll comme la démo. Quand l'analyse est finie et le bloc à l'écran, app.js pose .sent : la
   pochette descend le câble, se sépare vers les deux decks, qui se chargent (forme d'onde, pads A à G, coche).
   Sans JavaScript ou sans animation, l'état final est affiché. */
.handoff { --gap: 18px; --l: calc((100% - var(--gap)) / 4); --r: calc(100% - (100% - var(--gap)) / 4); width: min(700px, 100%); margin: 0 auto; }
.ho-wire { position: relative; height: 96px; }
.ho-wire > i { position: absolute; background: var(--ink); }
.ho-wire::before, .ho-wire::after { content: ""; position: absolute; }
.ho-stem { left: calc(50% - 1px); top: 0; width: 2px; height: 52px; transform-origin: top; }
.ho-split { left: var(--l); right: var(--l); top: 50px; height: 2px; }
.ho-drop { top: 50px; width: 2px; height: 46px; transform-origin: top; }
.ho-l { left: calc(var(--l) - 1px); }
.ho-r { left: calc(var(--r) - 1px); }
.ho-label { position: absolute; left: calc(50% + 16px); top: 12px; margin: 0; font-size: 12.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.ho-packet { position: absolute; top: 0; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 6px; overflow: hidden; opacity: 0; box-shadow: 0 0 0 2px var(--a), 0 0 22px 4px rgb(177 240 63 / 55%); z-index: 1; }
.ho-packet img { width: 100%; height: 100%; object-fit: cover; }
.ho-decks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.deck { position: relative; padding: 14px 16px 13px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--field); min-width: 0; }
.deck::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgb(177 240 63 / 70%); opacity: 0; }
.deck-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deck .wm { opacity: 1; }
.deck .ok { position: relative; flex: none; width: 22px; height: 22px; border-radius: 5px; background: var(--a); }
.deck .ok::after { content: ""; position: absolute; left: 7.5px; top: 3.5px; width: 5px; height: 11px; border: solid #131416; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.deck-wave { display: flex; align-items: center; gap: 2px; height: 38px; margin: 12px 0 10px; }
.deck-wave i { flex: 1; border-radius: 1px; background: var(--ink); opacity: .75; }
.deck-pads { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.deck-pads i { display: grid; place-items: center; height: 24px; border-radius: 4px; background: var(--pc); color: #131416; font: normal 760 11px/1 var(--font); box-shadow: inset 0 0 0 1px rgb(19 20 22 / 14%); }
.deck small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-wait { display: none; }

/* caché jusqu'à la fin de la démo, puis les decks entrent, puis le trait les relie */
.anim .handoff { transition: opacity .4s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
.anim .handoff:not(.shown) { opacity: 0; transform: translateY(26px); transition-duration: 0s; }
.anim .handoff .ho-decks .deck { transition: opacity .35s, transform .4s cubic-bezier(.2,.9,.3,1.2); }
.anim .handoff:not(.shown) .deck { opacity: 0; transform: translateY(18px) scale(.97); }
.anim .handoff.shown .deck-serato { transition-delay: .08s; }
.anim .handoff:not(.sent) .ho-wire > i, .anim .handoff:not(.sent) .ho-label { opacity: 0; }
.anim .handoff.sent .ho-label { animation: ho-text .3s .15s ease-out both; }

/* en attente */
.anim .handoff:not(.sent) .deck { border-color: var(--line); }
.anim .handoff:not(.sent) .deck .ok { opacity: 0; transform: scale(.3) rotate(-30deg); }
.anim .handoff:not(.sent) .deck-wave i { transform: scaleY(.12); opacity: .3; }
.anim .handoff:not(.sent) .deck-pads i { background: var(--paper-3); color: transparent; }
.anim .handoff:not(.sent) .deck-wait { display: inline; }
.anim .handoff:not(.sent) .deck-ok { display: none; }

/* l'envoi */
@keyframes ho-grow-y { from { transform: scaleY(0); } }
@keyframes ho-grow-x { from { transform: scaleX(0); } }
@keyframes ho-packet {
  0% { opacity: 0; top: 0; left: 50%; transform: scale(.4); }
  8% { opacity: 1; transform: scale(1); }
  32% { top: 51px; left: 50%; }
  62% { top: 51px; left: var(--to); }
  88% { opacity: 1; top: 96px; left: var(--to); transform: scale(1); }
  100% { opacity: 0; top: 112px; left: var(--to); transform: scale(.5); }
}
@keyframes ho-pop { 0% { transform: scale(.96); } 45% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes ho-ring { 0% { opacity: 1; box-shadow: 0 0 0 0 rgb(177 240 63 / 70%); } 100% { opacity: 0; box-shadow: 0 0 0 16px rgb(177 240 63 / 0%); } }
@keyframes ho-bar { from { transform: scaleY(.12); opacity: .3; } }
@keyframes ho-pad { 0% { background: var(--paper-3); color: transparent; transform: scale(.7); } 55% { transform: scale(1.18); box-shadow: 0 0 14px var(--pc); } 100% { transform: none; } }
@keyframes ho-ok { 0% { opacity: 0; transform: scale(.3) rotate(-30deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@keyframes ho-text { from { opacity: 0; transform: translateY(4px); } }
.anim .handoff.sent .ho-stem { animation: ho-grow-y .28s cubic-bezier(.5,0,.5,1) both; }
.anim .handoff.sent .ho-split { animation: ho-grow-x .25s .26s cubic-bezier(.3,0,.3,1) both; }
.anim .handoff.sent .ho-drop { animation: ho-grow-y .2s .5s ease-in both; }
.anim .handoff.sent .ho-packet { animation: ho-packet .85s cubic-bezier(.45,0,.4,1); }
.anim .handoff.sent .deck { animation: ho-pop .45s calc(.68s + var(--o)) cubic-bezier(.2,.9,.3,1.2) both; }
.anim .handoff.sent .deck::after { animation: ho-ring .7s calc(.68s + var(--o)) ease-out; }
.anim .handoff.sent .deck-wave i { animation: ho-bar .35s calc(.72s + var(--o) + var(--i) * 5ms) cubic-bezier(.2,.9,.3,1.3) both; }
.anim .handoff.sent .deck-pads i { animation: ho-pad .4s calc(.9s + var(--o) + var(--n) * 50ms) cubic-bezier(.2,.9,.3,1.2) both; }
.anim .handoff.sent .deck .ok { animation: ho-ok .4s calc(1.3s + var(--o)) cubic-bezier(.2,.9,.3,1.3) both; }
.anim .handoff.sent .deck-ok { display: inline-block; animation: ho-text .35s calc(1.3s + var(--o)) ease-out both; }
@media (max-width: 600px) {
  .handoff { --gap: 10px; }
  .deck { padding: 12px 10px 11px; }
  .deck .wm-rb span { font-size: 17px; } .deck .wm svg { width: 18px; height: 18px; }
  .deck .wm-serato span { font-size: 19px; }
  .deck-pads { gap: 3px; } .deck-pads i { height: 20px; font-size: 10px; }
  .deck small { white-space: normal; }
}

/* Referral cookie banner (footer.html, app.js): only after a referral link, equal Accept and Refuse */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 14px; padding: 16px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.18); font-size: 15px; line-height: 1.5; }
.consent p { margin: 0 0 12px; }
.consent-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-btns .btn { flex: 1 1 140px; }
.foot-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.foot-link:hover { text-decoration: underline; color: #eef0ea; }
.consent:focus { outline: none; }
.consent:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.consent-status { margin: 0 0 8px; }
.consent-status p { margin: 0 0 12px; }

/* /retractation: what the withdrawal does, before the confirmation */
.withdraw-sum { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 16px; }
.withdraw-sum dt { color: var(--grey); }
.withdraw-sum dd { margin: 0; text-align: right; }

/* /cadeau: the card terms, folded under the form */
.gift-terms-sec { padding: 0 0 120px; }
.gift-terms { border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); max-width: 860px; }
.gift-terms summary { cursor: pointer; padding: 22px 0; font-weight: 700; font-size: 20px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gift-terms summary::-webkit-details-marker { display: none; }
.gift-terms summary::after { content: "+"; font-weight: 400; font-size: 28px; line-height: 1; }
.gift-terms[open] summary::after { content: "\2212"; }
.gift-terms summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.gift-terms-body { padding: 0 0 28px; }
.gift-terms-body h3 { font-size: 17px; margin: 22px 0 6px; }
.gift-terms-body p, .gift-terms-body li { color: var(--grey); font-size: 15.5px; line-height: 1.6; }
.gift-terms-body ul { padding-left: 20px; margin: 8px 0; }
.gift-terms-body code { font: 500 .88em ui-monospace, Menlo, monospace; background: var(--paper-2); padding: 2px 6px; border-radius: 5px; color: var(--ink); }

/* /retractation: subscription / gift card tabs */
.w-tabs{display:flex;gap:6px;margin:0 0 22px}
.w-tabs button{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--line,currentColor);background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.w-tabs button[aria-selected="true"]{background:var(--ink,#131416);color:var(--paper,#fff);border-color:transparent}
.w-tabs button:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* home page: the holiday gift band (the holiday season of Réglages), dark like the top of /offrir */
.gift-season { background: var(--screen); color: var(--screen-text); padding: clamp(64px, 8vw, 110px) 0; overflow: hidden; }
.gift-season .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.gift-season-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
.gift-season h2 { color: var(--screen-text); max-width: 12em; }
.gift-season-sub { margin: 18px 0 0; font-size: clamp(17px, 2vw, 20px); color: var(--screen-muted); max-width: 30em; }
.gift-season-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.gift-season .btn-lime { background: var(--a); color: #131416; border-color: var(--a); }
.gift-season .btn-lime:hover { background: #f2f3ef; color: #131416; border-color: #f2f3ef; }
.gift-season-from { color: var(--screen-muted); font-size: 15px; }
.gift-season-from b { color: var(--screen-text); font-size: 17px; }
.gift-season-card { width: 100%; height: auto; border-radius: 22px; transform: rotate(-4deg); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
@media (max-width: 800px) {
  .gift-season .wrap { grid-template-columns: 1fr; }
  .gift-season-card { max-width: 440px; justify-self: center; transform: rotate(-3deg); }
}

/* /offrir (gift card bought online): a dark hero where the card is the object, the form as four cue steps A to D
   beside the e-mail the person will get, then how it works and what to know. --dur is the card's colour for the
   length chosen (offrir.js sets data-months): 1 month blue, 3 orange, 6 violet, 1 year green, like the wave cards. */
.field .label { font-size: 15px; font-weight: 600; }
.og-page { --dur: var(--a); }
.og-page[data-months="1"] { --dur: var(--b); }
.og-page[data-months="3"] { --dur: var(--c); }
.og-page[data-months="6"] { --dur: var(--e); }
.og-hero { position: relative; background: var(--screen); color: var(--screen-text); padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 96px); overflow: hidden; }
.og-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "text stage" "more stage"; gap: 0 clamp(32px, 5vw, 80px); align-items: center; }
.og-hero-text { grid-area: text; display: grid; gap: 22px; align-self: end; }
.og-hero-more { grid-area: more; display: grid; gap: 28px; align-self: start; margin-top: 24px; }
.og-hero h1 { font-size: clamp(44px, 6.2vw, 92px); line-height: .96; max-width: 9.5em; color: var(--screen-text); }
.og-hero h1 [data-dur] { color: var(--dur); white-space: nowrap; transition: color .25s; }
.og-sub { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--screen-muted); max-width: 30em; }
.og-hero-buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.og-hero .btn-lime { background: var(--a); color: #131416; border-color: var(--a); }
.og-hero .btn-lime:hover { background: #f2f3ef; color: #131416; border-color: #f2f3ef; }
.og-price { margin: 0; display: grid; line-height: 1.15; }
.og-price strong { font-size: clamp(28px, 3vw, 38px); font-weight: 760; font-stretch: 85%; letter-spacing: -.02em; color: var(--screen-text); font-variant-numeric: tabular-nums; }
.og-price > span { font-size: 14px; color: var(--screen-muted); }
/* the holiday price list (the holiday season of Réglages): its name above the price, never a struck-through normal price */
.og-price > .og-holiday { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dur, var(--d)); }
.og-price > .og-holiday[hidden] { display: none; }
.og-points { list-style: none; margin: 0; padding: 18px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--screen-3); }
.og-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--screen-text); }
.og-points b { flex: none; width: 26px; height: 26px; border-radius: 5px; background: var(--pc); color: #131416; display: grid; place-items: center; font-size: 13px; font-weight: 760; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.og-stage { grid-area: stage; position: relative; display: grid; place-items: center; padding: clamp(20px, 4vw, 56px) 0; }
.og-stage-glow { position: absolute; inset: 8% 4%; border-radius: 50%; background: var(--dur); opacity: .22; filter: blur(70px); transition: background .35s; }
.og-stage-back { position: absolute; width: 86%; aspect-ratio: 1200 / 756; border-radius: 22px; background: var(--dur); opacity: .9; transform: rotate(5deg) translate(4%, 6%); transition: background .35s; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
/* the card, wrapped for the holidays: a ribbon in the D cue's colour across it, tied in a bow (it turns with the card) */
.og-gift { position: relative; width: 92%; transform: rotate(-5deg); }
.og-card { position: relative; display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.og-ribbon { position: absolute; background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%, rgba(0,0,0,.16)), var(--ribbon); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.6); }
.og-ribbon-v { top: 0; bottom: 0; right: 21%; width: 6%; }
.og-ribbon-h { left: 0; right: 0; top: 19%; height: 10%; background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%, rgba(0,0,0,.16)), var(--ribbon); }
.og-bow { position: absolute; width: 34%; right: calc(24% - 17%); top: 24%; transform: translateY(-50%) rotate(4deg); overflow: visible; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.og-bow-loop, .og-bow-tail { fill: var(--ribbon); }
.og-bow-shade { fill: rgba(0,0,0,.2); }
.og-bow-knot { fill: var(--ribbon); stroke: rgba(0,0,0,.18); stroke-width: 1.5; }
.og-page { --ribbon: var(--d); }
@media (prefers-reduced-motion: no-preference) {
  .og-gift { animation: og-card-in .9s cubic-bezier(.2,.9,.3,1.15) both; }
  @keyframes og-card-in { from { opacity: 0; transform: rotate(-12deg) translateY(30px) scale(.94); } }
  .og-bow { animation: og-bow-in .7s .55s cubic-bezier(.2,.9,.3,1.4) both; }
  @keyframes og-bow-in { from { opacity: 0; transform: translateY(-50%) rotate(-20deg) scale(.4); } }
}

.og-shop { padding: clamp(56px, 7vw, 104px) 0; }
.og-shop-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.og-shop-head { display: grid; gap: 14px; margin-bottom: 36px; scroll-margin-top: calc(var(--hdr) + 24px); }
.og-shop-head h2 { font-size: clamp(36px, 4.4vw, 60px); }
.og-order { scroll-margin-top: calc(var(--hdr) + 24px); }
.og-form { display: grid; gap: 0; }
.og-step { border: 0; margin: 0; padding: 28px 0 10px; min-width: 0; border-top: 1px solid var(--line); }
.og-step:first-child { border-top: 1.5px solid var(--ink); }
.og-step legend { float: left; width: 100%; padding: 0; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; font-stretch: 90%; letter-spacing: -.01em; }
.og-step legend + * { clear: both; }
.og-step legend b { flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--pc); color: #131416; display: grid; place-items: center; font-size: 14px; font-weight: 760; box-shadow: inset 0 -2px 0 rgba(0,0,0,.16); }
.og-step > .sale-error { margin: 10px 0 14px; }
.og-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.og-months label { position: relative; display: grid; align-content: space-between; gap: 18px; min-height: 112px; background: var(--field); border: 1.5px solid var(--line); border-top: 8px solid var(--pc); border-radius: 12px; padding: 14px 14px 12px; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.og-months label[hidden] { display: none; }
.og-months:has(label[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.og-months label:hover { border-color: var(--pc); }
.og-months label:has(input:checked) { background: var(--pc); border-color: var(--pc); color: #131416; transform: translateY(-3px); box-shadow: 0 14px 30px -14px var(--pc); }
.og-months label:has(input:checked)::after { content: ""; position: absolute; top: 12px; right: 12px; width: 10px; height: 5px; border-left: 2px solid #131416; border-bottom: 2px solid #131416; transform: rotate(-45deg); }
.og-months label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.og-months input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.og-m { font-size: clamp(20px, 2vw, 24px); font-weight: 760; font-stretch: 85%; letter-spacing: -.02em; line-height: 1; }
.og-p { font-size: 15px; font-weight: 600; color: var(--grey); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.og-months label:has(input:checked) .og-p { color: #131416; }
.og-designs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.og-designs label { position: relative; display: grid; gap: 8px; align-content: start; padding: 6px 6px 9px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.og-designs label:hover { border-color: var(--grey); }
.og-designs img { display: block; width: 100%; height: auto; border-radius: 7px; box-shadow: 0 0 0 1px rgba(19,20,22,.08); }
.og-d { font-size: 14px; font-weight: 620; line-height: 1.2; padding: 0 3px; }
.og-designs label:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 0 14px 26px -16px rgba(0,0,0,.5); transform: translateY(-3px); }
.og-designs label:has(input:checked)::after { content: ""; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23b1f03f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.og-designs label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.og-designs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.og-opt { font-weight: 400; color: var(--grey); }
.og-count { text-align: right; }
textarea { resize: vertical; }
#og-date-wrap { display: grid; gap: 7px; margin-top: 10px; }
.og-step .radio-cards { margin-bottom: 18px; }
.og-pay-box { margin-top: 18px; padding: 22px; border-radius: 14px; background: var(--paper-2); display: grid; gap: 12px; }
.og-total { font-size: 15px; color: var(--grey); }
.og-total [data-dur] { color: var(--ink); font-weight: 650; }
.og-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#og-total-price { color: var(--ink); font-size: 20px; font-weight: 700; }
#og-total-price[hidden] { display: none; }
.og-pay-box .btn { width: 100%; height: 56px; font-size: 17px; }
.og-pay-box .price-fine { margin: 0; }
.og-pay-box .sale-status p { margin: 0; }

.og-preview { display: grid; gap: 14px; position: sticky; top: calc(var(--hdr) + 24px); }
.og-preview-label { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.og-preview-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dur); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dur) 30%, transparent); transition: background .3s; }
.og-mail { background: var(--field); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(19,20,22,.45); }
.og-mail-head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; }
.og-mail-head p { display: flex; gap: 10px; min-width: 0; }
.og-mail-k { flex: none; width: 46px; color: var(--grey); }
.og-mail-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-mail-body { padding: 22px 20px 24px; display: grid; gap: 16px; }
.og-from { margin: 0; font-size: 22px; font-weight: 720; font-stretch: 88%; letter-spacing: -.015em; line-height: 1.15; overflow-wrap: anywhere; }
.og-from-empty { display: none; color: var(--grey); }
#og-from[hidden] + .og-from-empty { display: block; }
.og-preview img { width: 100%; height: auto; border-radius: 14px; transform: rotate(-1.5deg); box-shadow: 0 16px 32px -12px rgba(0,0,0,.4); }
.og-intro { font-size: 16px; }
.og-msg { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--dur); font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; transition: border-color .3s; }
.og-code { background: var(--screen); color: var(--screen-text); border-radius: 10px; padding: 12px 16px; display: grid; gap: 2px; }
.og-code span { font-size: 13px; color: var(--screen-muted); }
.og-code b { font: 600 18px/1.5 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: var(--a); }
.og-mail-btn { justify-self: start; background: var(--ink); color: var(--paper); border-radius: 9px; padding: 11px 16px; font-size: 15px; font-weight: 620; }

.og-how-sec { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 9vw, 130px); border-top: 1px solid var(--line); }
.og-how-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.og-how-in h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 26px; }
.og-sure { background: var(--screen); color: var(--screen-text); border-radius: 18px; padding: clamp(24px, 3vw, 36px); }
.og-sure h2 { color: var(--screen-text); font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 18px; }
.og-sure ul { list-style: none; margin: 0; padding: 0; }
.og-sure li { display: grid; gap: 3px; padding: 14px 0 14px 26px; border-top: 1px solid var(--screen-3); position: relative; }
.og-sure li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 11px; height: 6px; border-left: 2px solid var(--a); border-bottom: 2px solid var(--a); transform: rotate(-45deg); }
.og-sure li b { font-weight: 650; }
.og-sure li > span { color: var(--screen-muted); font-size: 15px; }
.og-sure a { color: var(--screen-text); }

@media (max-width: 960px) {
  .og-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "stage" "more"; }
  .og-stage { max-width: 560px; width: 100%; justify-self: center; padding: 28px 0 8px; }
  .og-hero-more { margin-top: 12px; }
  .og-shop-in, .og-how-in { grid-template-columns: minmax(0, 1fr); }
  .og-preview { position: static; }
}
@media (max-width: 560px) {
  .og-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-months label { min-height: 92px; }
  .og-designs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .og-mail-head, .og-mail-body { padding-inline: 16px; }
}
html[data-theme="dark"] .og-mail { box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
html[data-theme="dark"] .og-pay-box { background: var(--paper-2); }
html[data-theme="dark"] .og-step .sale-error, html[data-theme="dark"] .og-pay-box .sale-error { color: #ff8a80; }
html[data-theme="dark"] .og-code { background: #08090a; }

/* /ambassadeurs: the programme (hero and its example card), the steps A B C, the figures, then the form beside the
   content (under it on a phone), the questions */
.amb-hero { padding: clamp(44px, 6vw, 88px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.amb-hero-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.amb-hero-text { display: grid; gap: 22px; justify-items: start; }
.amb-hero .cue-tag { margin: 0; }
.amb-hero h1 { font-size: clamp(40px, 5.6vw, 78px); line-height: .98; max-width: 12em; }
.amb-hl { background: linear-gradient(transparent 62%, var(--a) 62%, var(--a) 92%, transparent 92%); padding: 0 .04em; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .amb-hl { background: none; color: var(--a); }
.amb-seats { display: inline-flex; align-items: center; gap: 10px; font-weight: 620; font-size: 16px; padding: 8px 14px 8px 12px; border-radius: 999px; background: var(--paper-2); }
.amb-seats i { width: 9px; height: 9px; border-radius: 50%; background: var(--d); box-shadow: 0 0 0 4px rgb(255 122 133 / 22%); }
.amb-card { margin: 0; padding: 22px 24px 20px; display: grid; gap: 4px; max-width: 420px; justify-self: end; width: 100%; transform: rotate(1.5deg); }
.amb-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.amb-card-tag { font-size: 12px; font-weight: 650; color: var(--screen-muted); border: 1px solid var(--screen-3); border-radius: 999px; padding: 3px 10px; }
.amb-card .m { font-size: 13px; }
.amb-card-code { font: 700 clamp(40px, 4.4vw, 56px)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; color: var(--a); margin: 4px 0 6px; }
.amb-card-link { font: 500 14px ui-monospace, "SF Mono", Menlo, monospace; }
.amb-card-pads { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 18px 0 16px; }
.amb-card-pads i { height: 6px; border-radius: 2px; background: var(--pc); }
.amb-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--screen-3); border-radius: 10px; overflow: hidden; }
.amb-card-stats div { background: var(--screen-2); padding: 10px 12px; display: flex; flex-direction: column; }
.amb-card-stats div > span { line-height: 1.3; }
.amb-card-stats strong { margin-top: auto !important; padding-top: 2px; }
.amb-card-stats span { display: block; font-size: 12px; color: var(--screen-muted); }
.amb-card-stats strong { display: block; font-size: 22px; font-weight: 700; font-stretch: 85%; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.amb-card-stats strong span { display: inline; font-size: inherit; color: inherit; }

.amb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; padding: clamp(56px, 7vw, 96px) 0; }
.amb-content { display: grid; gap: clamp(56px, 7vw, 88px); }
.amb-sec { scroll-margin-top: calc(var(--hdr) + 16px); }
.amb-sec h2, .amb-faq h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 26px; }
.amb-steps { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.amb-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.amb-steps b { width: 34px; height: 34px; border-radius: 7px; background: var(--pc); color: #131416; display: grid; place-items: center; font-weight: 760; font-size: 15px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.16); }
.amb-steps h3 { margin-bottom: 6px; }
.amb-steps p { color: var(--grey); }
.amb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.amb-num { background: var(--paper-2); border-radius: 14px; padding: 20px 18px 18px; border-top: 6px solid var(--pc); display: grid; gap: 8px; align-content: start; }
.amb-num strong { font-size: clamp(40px, 4.2vw, 58px); font-weight: 780; font-stretch: 75%; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amb-num p { font-size: 15px; color: var(--grey); line-height: 1.4; }
.amb-examples { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.amb-examples li { padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 16.5px; }
.amb-examples li[hidden] { display: none; }
.amb-examples b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amb-who { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.amb-who li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.amb-who li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); margin-top: 9px; }
.amb-who b { font-weight: 650; }
.amb-note { margin: 12px 0 0; font-size: 14px; color: var(--grey); max-width: 46em; }
.amb-need-title { font-size: 20px; margin: 30px 0 12px; }

.amb-apply { scroll-margin-top: calc(var(--hdr) + 16px); }
/* the hero's two buttons (#postuler, #comment) glide to their section; never for people who asked for less motion */
@media (prefers-reduced-motion: no-preference) { html:has(.amb-apply) { scroll-behavior: smooth; } }
.amb-apply .card { padding: clamp(22px, 2.6vw, 32px); }
.amb-apply h2 { font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 22px; }
.amb-form fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.amb-form legend { padding: 0; margin-bottom: 7px; }
.amb-form .radio-cards label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.amb-form [aria-invalid="true"] { border-color: #c0392b; }
.amb-form .radio-cards:has([aria-invalid="true"]) label { border-color: #c0392b; }
.amb-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 500 !important; font-size: 15px; line-height: 1.45; cursor: pointer; }
.amb-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.amb-consent a { font-weight: 600; }
.amb-apply .contact-sent p { font-size: 17px; }
html[data-theme="dark"] .amb-form .sale-error { color: #ff8a80; }
html[data-theme="dark"] .amb-form [aria-invalid="true"], html[data-theme="dark"] .amb-form .radio-cards:has([aria-invalid="true"]) label { border-color: #ff8a80; }

.amb-faq { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 9vw, 130px); border-top: 1px solid var(--line); }
/* Deux colonnes indépendantes : ouvrir une question ne bouge ni n'étire l'autre colonne */
.amb-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; align-items: start; border-top: 1.5px solid var(--ink); }
.amb-qa-col { min-width: 0; }
.amb-qa details { border-bottom: 1px solid var(--line); }
.amb-qa summary { cursor: pointer; padding: 20px 0; font-weight: 680; font-size: 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.amb-qa summary::-webkit-details-marker { display: none; }
.amb-qa summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; flex: none; }
.amb-qa details[open] summary::after { content: "\2212"; }
.amb-qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.amb-qa p { color: var(--grey); padding: 0 0 22px; max-width: 34em; }

@media (max-width: 960px) {
  .amb-hero-in, .amb-grid { grid-template-columns: minmax(0, 1fr); }
  .amb-card { justify-self: start; transform: none; }

}
@media (max-width: 760px) {
  .amb-qa { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .amb-cards { grid-template-columns: minmax(0, 1fr); }
  .amb-num { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
  .amb-card-stats strong { font-size: 19px; }
}
.foot-grid p.foot-social { display: flex; gap: 10px; margin-top: 18px; }
.foot-grid .foot-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; border: 1px solid #2a2c30; color: #eef0ea; text-decoration: none; }
.foot-grid .foot-social a:hover { border-color: #5b6068; background: #1d1f23; }
.foot-grid .foot-social a:focus-visible { outline: 2px solid #eef0ea; outline-offset: 2px; }

/* Tarifs : la carte cadeau (comme le bandeau des fêtes de l'accueil, en carte) et la liste des fonctions de la
   dernière version, écrite depuis versions-data.js par pnpm --filter site layout */
/* Tarifs, everything included: four highlights on a dark screen, then each group as a hot cue pad (A to F, in its
   colour) with its selling line; this version's new features stand out in lime */
.feat-top { list-style: none; margin: 0 0 14px; padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; background: var(--screen); color: var(--screen-text); border-radius: 18px; }
.feat-top li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 4px solid var(--pc); }
.feat-top b { font-size: clamp(19px, 1.7vw, 23px); font-weight: 740; font-stretch: 85%; letter-spacing: -.015em; line-height: 1.1; }
.feat-top li > span { color: var(--screen-muted); font-size: 15px; line-height: 1.45; }
.feat-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.feat-group { background: var(--paper-2); border-radius: 16px; overflow: hidden; }
.feat-head { background: var(--pc); color: #131416; padding: 20px 22px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.feat-head > b { width: 36px; height: 36px; border-radius: 7px; background: #131416; color: var(--pc); display: grid; place-items: center; font-size: 16px; font-weight: 780; }
.feat-head h3 { font-size: 22px; font-weight: 760; font-stretch: 85%; color: #131416; }
.feat-head p { margin-top: 4px; font-size: 15.5px; font-weight: 560; line-height: 1.35; color: rgba(19,20,22,.78); }
.feat-group ul { list-style: none; margin: 0; padding: 8px 22px 14px; }
.feat-group li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.feat-group li:first-child { border-top: 0; }
.feat-group li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.feat-group li.is-new { margin: 4px -10px; padding-left: 38px; padding-right: 10px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--a) 26%, transparent); font-weight: 600; }
.feat-group li.is-new + li { border-top: 0; }
.feat-group li.is-new::before { left: 13px; }
.feat-group .tag { margin-left: 6px; font-size: 11.5px; padding: 2px 7px; vertical-align: 1px; }
@media (max-width: 980px) { .feat-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feat-groups, .feat-top { grid-template-columns: minmax(0, 1fr); } }

/* The home page's holiday band: the whole block opens /offrir; shown while the gift card is sold online (app.js) */
.gift-season .wrap { position: relative; }
.gift-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.gift-season .wrap:has(.gift-link:hover) .gift-season-card, .gift-season .wrap:hover .gift-season-card { transform: rotate(-1deg) translateY(-6px); }
.gift-season-card { transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.gift-season .wrap:hover .btn-lime { background: #f2f3ef; color: #131416; border-color: #f2f3ef; }
.gift-season .wrap { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .gift-season-card { transition: none; } }

/* /offrir for the holidays (founder decision 2026-11-07: the gift card is sold online around the end of the year).
   Confetti of hot cue dots drifting slowly behind the hero (still when reduced motion is asked), a warm glow under the
   card, the quick 24 / 25 December dates, and the message shown out of the season. */
.og-confetti { position: absolute; inset: -40% 0 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 12% 18%, var(--a) 0 2.5px, transparent 3.5px), radial-gradient(circle at 38% 64%, var(--b) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 30%, var(--d) 0 3px, transparent 4px), radial-gradient(circle at 86% 78%, var(--c) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 8%, var(--g) 0 1.5px, transparent 2.5px), radial-gradient(circle at 22% 86%, var(--e) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 46%, var(--g) 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 40%, var(--f) 0 2.5px, transparent 3.5px);
  background-size: 460px 380px;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 62%); mask-image: linear-gradient(100deg, transparent 18%, #000 62%); }
.og-hero-in, .og-closed-in { position: relative; z-index: 1; }
.og-stage::before { content: ""; position: absolute; inset: 22% 18% -6%; border-radius: 50%; background: var(--c); opacity: .16; filter: blur(80px); }
@media (prefers-reduced-motion: no-preference) {
  .og-confetti { animation: og-fall 60s linear infinite; }
  @keyframes og-fall { to { background-position: 40px 380px; } }
}

.og-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.og-quick-k { font-size: 14px; color: var(--grey); margin-right: 4px; }
.og-quick button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); font: 600 15px/1 var(--font); cursor: pointer; transition: border-color .15s, background .15s; }
.og-quick button::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--d); box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.18); }
.og-quick button:hover { border-color: var(--d); }
.og-quick button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.og-quick button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.og-closed { position: relative; overflow: hidden; background: var(--screen); color: var(--screen-text); padding: clamp(72px, 11vw, 160px) 0 clamp(80px, 12vw, 170px); }
.og-closed-in { display: grid; gap: 22px; justify-items: start; }
.og-closed .cue-tag { margin: 0; }
.og-closed .cue-tag b { color: #131416; }
.og-closed h1 { color: var(--screen-text); font-size: clamp(40px, 5.6vw, 84px); line-height: .98; max-width: 11em; }
.og-closed-sub { margin: 0; font-size: clamp(18px, 1.8vw, 22px); color: var(--screen-text); max-width: 30em; }
.og-closed-dates { margin: 0; font-size: 16px; color: var(--screen-muted); display: inline-flex; align-items: center; gap: 10px; }
.og-closed-dates::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--d); }
.og-closed-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.og-closed .btn-lime { background: var(--a); color: #131416; border-color: var(--a); }
.og-closed .btn-lime:hover { background: #f2f3ef; border-color: #f2f3ef; }
.og-closed .btn-line { color: var(--screen-text); border-color: var(--screen-3); }
.og-closed .btn-line:hover { background: var(--screen-2); }
.og-page[data-gift="closed"] > :not(.og-closed) { display: none; }

/* /offrir in « annonce » (founder decision 2026-11-08): where the pay button was, a block that looks off */
.og-soon { margin: 0; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1.5px dashed var(--grey); background: var(--paper-3); color: var(--grey); font-size: 17px; font-weight: 620; font-stretch: 95%; cursor: not-allowed; user-select: none; }
.og-soon[hidden] { display: none; }