/* ProvaCall · design system
 * Une seule page, des jetons (tokens) : couleur, typographie, forme. Chaque thème ne change QUE des jetons.
 * Un seul thème (Mono). Pour changer de look : modifier les jetons du bloc :root ci-dessous.
 *
 * COULEUR   --paper fond · --soft fond secondaire · --surface cartes claires · --ink texte · --ink-2 · --muted · --faint · --line
 *           --accent · --accent-text · --on-accent · --btn / --on-btn (bouton principal)
 * TYPO      --display titres · --font texte · --serif italique d'emphase · --mono repères
 *           --h-weight · --h-track · --h1 · --h2
 * FORME     --btn-radius · --card-radius · --big-radius · --card-bg · --card-line
 */
:root{
  --surface:#fff;--btn:var(--ink);--on-btn:var(--paper);
  --serif:"Newsreader","Source Serif 4",Georgia,serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --h-weight:500;--h-track:-.04em;--h1:clamp(40px,5vw,62px);--h2:clamp(32px,4.2vw,48px);
  --btn-radius:999px;--card-radius:22px;--big-radius:28px;--card-bg:var(--soft);--card-line:transparent;
}

/* ───────────── thèmes : uniquement des jetons ───────────── */

/* 6 · Mono — les couleurs d'Ivory (papier, encre, aucune couleur) avec la typographie et les formes d'Oxblood. Thème par défaut. */
/* Jetons : papier chaud et encre (aucune couleur d'accent), titres Bricolage, angles nets. */
:root{
  --paper:#faf8f3;--soft:#f0ede4;--surface:#fffdf9;--ink:#161512;--ink-2:#3b3933;--muted:#5f5b52;--faint:#6b675d;--line:#e2ded2;
  --accent:#161512;--accent-text:#161512;--on-accent:#faf8f3;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--h-weight:500;--h-track:-.045em;--h1:clamp(44px,5.6vw,76px);--h2:clamp(34px,4.4vw,56px);
  --btn-radius:6px;--card-radius:6px;--big-radius:10px;
}

/* ───────────── socle ───────────── */
html{background:var(--paper)}
body{font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility}
h1,h2{font-weight:var(--h-weight);letter-spacing:var(--h-track);text-wrap:balance}
.pitch h1{font-size:var(--h1);font-weight:var(--h-weight)}
h2{font-size:var(--h2)}
p{text-wrap:pretty}
h1 em,h2 i,h2 em,.serif{font-family:var(--serif);font-weight:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.amount b,.kpi b,.timer{font-variant-numeric:tabular-nums}

/* repère de section : 01, 02… en monospace au-dessus de chaque titre */
main{counter-reset:sec}
.section,.demo{counter-increment:sec}
.section h2::before,.demo h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:20px;
  font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--faint)}

/* ───────────── composants ───────────── */
.btn{border-radius:var(--btn-radius)}
.btn-dark{background:var(--btn);color:var(--on-btn)}
.btn-dark:hover{background:var(--btn);filter:brightness(1.12)}
.btn-light,.btn-white{background:var(--surface);color:var(--ink)}
.ctas .link{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;text-decoration-thickness:1px}
.ctas .link:hover{text-decoration-color:var(--ink)}
.trust .dot{background:var(--accent)}

.card{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:inset 0 0 0 1px var(--card-line)}
.card .n{border-color:var(--accent);color:var(--accent-text)}
.price-card,.band,.tray{border-radius:var(--big-radius)}
.band.pilot{background:var(--ink);color:var(--paper)}
.band.pilot p{color:#c9c5b8}
.frame{border-radius:var(--big-radius)}
.foot-card{background:var(--surface);border-radius:var(--big-radius)}
.sheet,.guar{background:var(--surface)}
.rings circle{stroke:var(--line)}
.pulse{border-color:var(--faint)}
.pf-opt.on{color:var(--paper)}
.pf-opt.on .pf-tick{background:var(--paper);border-color:var(--paper)}

/* ───────────── variantes de forme propres à un thème ───────────── */


.card .n{background:var(--accent);color:var(--on-accent);border-radius:4px}
.faq summary{font-family:var(--display);letter-spacing:-.03em}



/* sélecteur de thème (aperçu local uniquement, ajouté par fx.js) */

/* formulaire de pilote : mêmes jetons que le reste */
.pf-opt{background:var(--surface);color:var(--ink)}
.pf-opt.on{background:var(--btn);border-color:var(--btn);color:var(--on-btn)}
.pf-input::placeholder{color:var(--faint)}

/* bas du hero : la preuve sociale en légende, sur un filet, plutôt qu'en pastille sous les boutons */
.hero-foot{position:absolute;left:0;right:0;bottom:24px;z-index:4;animation:rise .9s .6s both}
.hero-foot>div{max-width:1064px;margin:0 auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;
  font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-foot a{color:var(--ink);text-decoration:none}
.hero-foot a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:1120px){.hero-foot>div{margin:0 28px}}
@media (max-width:900px){.hero{flex-wrap:wrap}.hero-foot{position:static;width:100%;margin-top:20px}.hero-foot a{display:none}}
@media (max-width:600px){.hero-foot>div{margin:0 16px}}

/* barre du haut des pages secondaires : la couleur du papier, pas du blanc */
.header{background:color-mix(in srgb,var(--paper) 86%,transparent)}

/* champs de points gris : teinte du thème, et deux positions de plus (bas droite, bas gauche) */
.deco-dots::before{background-image:radial-gradient(circle,var(--faint) 1.25px,transparent 1.6px);opacity:.28}
.deco-dots.b::before{-webkit-mask-image:radial-gradient(55% 70% at 90% 85%,#000,transparent);mask-image:radial-gradient(55% 70% at 90% 85%,#000,transparent)}
.deco-dots.bl::before{-webkit-mask-image:radial-gradient(50% 70% at 8% 82%,#000,transparent);mask-image:radial-gradient(50% 70% at 8% 82%,#000,transparent)}

/* ───────────── mobile ─────────────
   Une colonne, des cartes empilées (plus de carrousel coupé), un téléphone à l'échelle de l'écran,
   moins de vide entre les sections, et le bouton principal toujours à portée de pouce. */
.mcta{display:none}
@media (max-width:700px){
  .section{padding:68px 0}
  h2{font-size:clamp(30px,8.6vw,38px);line-height:1.1}
  .section h2::before,.demo h2::before{margin-bottom:14px}
  .head{margin-bottom:28px}
  .lead{font-size:16.5px}

  .hero{padding:80px 0 8px}
  .pitch h1{font-size:clamp(38px,11.4vw,50px);line-height:1.07;margin-bottom:16px}
  .pitch .lead{max-width:none;margin-bottom:24px}
  .ctas{gap:6px}
  .ctas .btn{width:100%;height:56px;font-size:17px}
  .ctas .link{width:100%;justify-content:center;height:48px}
  .stage{min-height:0;padding:28px 0 32px}
  .rings{width:620px;height:620px}
  .iphone{zoom:.84;transform:none}
  .hero-foot{margin-top:4px}
  .hero-foot>div{justify-content:center}

  .demo{padding:36px 0 28px}
  .demo .head{text-align:left;margin-bottom:22px}
  .demo .head .lead{margin-left:0}
  .frame{border-radius:10px}
  .vctl{right:8px;top:8px;gap:6px}
  .snd{height:34px}
  #demo-sound{width:34px;padding:0;gap:0;justify-content:center;font-size:0}

  .deco-rings::before{display:none}
  .deco-dots::before{opacity:.28}

  .cards,.cards.three{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:10px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .card{min-height:0;padding:20px 20px 22px}
  .card .ic,.card .n{margin-bottom:16px}
  .card h3{margin-top:0}
  .card:hover{transform:none}

  .report{gap:28px}
  .points{margin:22px 0 24px;gap:16px}
  .report .iphone{zoom:.9}

  .band{padding:22px 20px}
  .band .btn{width:100%;height:52px}
  .faq summary{font-size:17px;padding:18px 36px 18px 0}
  .footer{padding-bottom:84px}

  .mcta{display:flex;position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;height:54px;font-size:16.5px;
    box-shadow:0 14px 34px -12px rgba(0,0,0,.5);transform:translateY(90px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
  .mcta.show{transform:none;opacity:1;pointer-events:auto}
  .pf-lock .mcta{display:none}
}

/* ───────────── accessibilité ───────────── */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:var(--btn-radius);font-weight:500;text-decoration:none;transition:top .15s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main:focus{outline:none}
a,button,summary,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-dark:focus-visible,.mcta:focus-visible{outline-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.demo-note{position:absolute;left:0;right:0;bottom:4px;margin:0;text-align:center;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.demo-note{bottom:6px}}

/* ───────────── pages légales ───────────── */
.legal{padding:72px 0 96px}
.legal .wrap{max-width:780px}
.legal-meta{margin:0 0 14px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legal h1{font-size:clamp(36px,5vw,52px);line-height:1.05;margin:0 0 20px}
.legal .lead{margin-bottom:36px;max-width:62ch}
.legal h2{font-size:clamp(21px,2.4vw,26px);letter-spacing:-.02em;margin:40px 0 10px}
.legal h2::before{content:none}
.legal p,.legal li{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:68ch}
.legal ul{padding-left:22px;margin:10px 0}
.legal li{margin:6px 0}
.legal a:not(.btn){color:var(--ink);text-underline-offset:3px}
.legal .btn{margin-top:6px}
.ltable{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:15px}
.ltable th,.ltable td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.ltable th{font:500 12px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.ltable thead{display:none}.ltable tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}.ltable td{display:block;border:0;padding:3px 0}.legal{padding:48px 0 72px}}
.legal-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{color:var(--ink);text-decoration:underline}
.footer>.wrap{flex-wrap:wrap;gap:12px 24px}
.footer>.wrap:has(>.legal-links){display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px;border-top:1px solid var(--line)}
.pf-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.ltable td[data-label]::before{content:attr(data-label) ": ";font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}}