/* ============================================================
   PrintSpot — page vitrine
   Mobile-first. Police : Plus Jakarta Sans (auto-hébergée).
   Animations au défilement : AOS (vendor/).
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── Jetons de design ─────────────────────────────────── */
:root {
  --paper:#F4F6F9; --surface:#FFFFFF; --surface-2:#F9FAFB;
  --ink:#0F1629; --ink-soft:#26314A; --muted:#5A6474;
  --rule:#E3E7ED; --rule-strong:#CDD4DE;
  --blue:#2563EB; --btn:#2563EB; --btn-deep:#1D4ED8; --blue-soft:#EAF0FE;
  --cash:#15803D;
  --c-cyan:#0891B2; --c-mag:#DB2777; --c-yel:#CA8A04;
  --on-btn:#FFFFFF;
  --dot:rgba(15,22,41,.05);
  --hl:color-mix(in srgb, var(--blue) 20%, transparent);
  --shadow: 0 1px 2px rgba(15,22,41,.04), 0 12px 34px -18px rgba(15,22,41,.22);
  --shadow-lift: 0 2px 6px rgba(15,22,41,.06), 0 26px 50px -22px rgba(15,22,41,.30);
  --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1120px;
  --radius: 32px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0A101E; --surface:#111A2D; --surface-2:#0D1524;
    --ink:#EAEEF6; --ink-soft:#C4CDDD; --muted:#8C97AC;
    --rule:#243049; --rule-strong:#324061;
    --blue:#7AA5F5; --btn:#2F6BF0; --btn-deep:#2563EB; --blue-soft:#16233F;
    --cash:#4ADE80;
    --c-cyan:#22D3EE; --c-mag:#F472B6; --c-yel:#FBBF24;
    --dot:rgba(230,238,246,.045);
    --hl:color-mix(in srgb, var(--blue) 30%, transparent);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px -20px rgba(0,0,0,.7);
    --shadow-lift: 0 2px 8px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="light"] {
  --paper:#F4F6F9; --surface:#FFFFFF; --surface-2:#F9FAFB;
  --ink:#0F1629; --ink-soft:#26314A; --muted:#5A6474;
  --rule:#E3E7ED; --rule-strong:#CDD4DE;
  --blue:#2563EB; --btn:#2563EB; --btn-deep:#1D4ED8; --blue-soft:#EAF0FE;
  --cash:#15803D; --c-cyan:#0891B2; --c-mag:#DB2777; --c-yel:#CA8A04;
  --dot:rgba(15,22,41,.05); --hl:color-mix(in srgb, var(--blue) 20%, transparent);
  --shadow: 0 1px 2px rgba(15,22,41,.04), 0 12px 34px -18px rgba(15,22,41,.22);
  --shadow-lift: 0 2px 6px rgba(15,22,41,.06), 0 26px 50px -22px rgba(15,22,41,.30);
}
:root[data-theme="dark"] {
  --paper:#0A101E; --surface:#111A2D; --surface-2:#0D1524;
  --ink:#EAEEF6; --ink-soft:#C4CDDD; --muted:#8C97AC;
  --rule:#243049; --rule-strong:#324061;
  --blue:#7AA5F5; --btn:#2F6BF0; --btn-deep:#2563EB; --blue-soft:#16233F;
  --cash:#4ADE80; --c-cyan:#22D3EE; --c-mag:#F472B6; --c-yel:#FBBF24;
  --dot:rgba(230,238,246,.045); --hl:color-mix(in srgb, var(--blue) 30%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px -20px rgba(0,0,0,.7);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8);
}

/* ── Base (mobile d'abord) ────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Texture « papier millimétré » : trame de points très discrète derrière tout */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--dot) 1.1px, transparent 1.1px);
  background-size:24px 24px;
}
h1,h2,h3 { text-wrap:balance; line-height:1.08; letter-spacing:-.02em; margin:0; font-weight:800; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
[id] { scroll-margin-top:80px; }
:focus-visible { outline:2.5px solid var(--btn); outline-offset:3px; border-radius:6px; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
.eyebrow {
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:700; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before { content:""; width:22px; height:1px; background:var(--rule-strong); display:inline-block; flex:0 0 auto; }
.tnum { font-variant-numeric:tabular-nums; }
/* Surligneur façon marqueur sur un mot-clé — touche éditoriale, pas décorative */
.hl { background:linear-gradient(transparent 58%, var(--hl) 0); padding:0 .06em; border-radius:2px; }

/* ── Boutons ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:-.01em;
  padding:13px 22px; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--btn); color:var(--on-btn); box-shadow:0 10px 24px -12px var(--btn); }
.btn-primary:hover { background:var(--btn-deep); transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--btn); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.btn-ghost:hover { border-color:var(--ink); transform:translateY(-2px); }
.btn-lg { padding:15px 24px; font-size:16px; }
.btn-block { width:100%; }
.btn-disabled,
.btn-disabled:hover {
  opacity:.72;
  cursor:default;
  transform:none;
  box-shadow:none;
  pointer-events:none;
}

/* ── Nav ──────────────────────────────────────────────── */
header.nav {
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--rule);
}
.nav-inner { display:flex; align-items:center; gap:16px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em; }
.brand .mark {
  width:32px; height:32px; border-radius:9px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 4px 12px -4px rgba(37,99,235,.5); background:var(--surface);
}
.brand .mark img { width:100%; height:100%; object-fit:cover; }
.brand-emphasis { color:var(--blue); }
.nav-links { display:none; gap:26px; margin-left:6px; }
.nav-links a { font-size:15px; color:var(--ink-soft); font-weight:600; transition:color .15s; }
.nav-links a:hover { color:var(--blue); }
.nav-spacer { flex:1; }
.nav .btn { padding:9px 16px; font-size:14px; }

/* ── Trame de section ─────────────────────────────────── */
section { padding-block:56px; }
.sec-head { display:flex; flex-direction:column; gap:14px; max-width:660px; margin-bottom:34px; }
.sec-head h2 { font-size:clamp(26px, 6vw, 42px); }
.sec-head p { color:var(--muted); font-size:16px; }
.rule-top { border-top:1px solid var(--rule); }

/* ── Hero (centré, vitrine mobile) ────────────────────── */
.col-copy { display:flex; flex-direction:column; }
.hero { padding-top:36px; padding-bottom:0; overflow:hidden; text-align:center; position:relative; }
/* Lavis dégradé doux derrière le hero (rappel des landings modernes) */
.hero::before {
  content:""; position:absolute; inset:0 0 auto; height:660px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 40% at 50% -4%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 58%);
}
.hero-center { display:flex; flex-direction:column; align-items:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  background:var(--surface); border:1px solid var(--rule); border-radius:999px;
  padding:7px 14px 7px 13px; font-size:13px; font-weight:600; color:var(--ink-soft);
  box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease; max-width:100%;
}
.hero-badge:hover { transform:translateY(-1px); box-shadow:var(--shadow-lift); }
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--blue); flex:0 0 auto; box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.hero-badge svg { width:15px; height:15px; color:var(--muted); flex:0 0 auto; }
.hero-title { font-size:clamp(38px, 10vw, 74px); line-height:1.0; letter-spacing:-.04em; font-weight:800; }
.hero-title .accent { color:var(--blue); }
.hero .lede { color:var(--muted); font-size:clamp(16px,4.2vw,19px); margin:22px auto 0; max-width:46ch; }
.hero .cta-row { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; justify-content:center; }
.hero .cta-row .btn { flex:1 1 auto; }
.hero-trust { display:flex; gap:10px 22px; margin-top:20px; flex-wrap:wrap; justify-content:center; color:var(--muted); font-size:13.5px; font-weight:600; }
.hero-trust span { display:inline-flex; align-items:center; gap:7px; }
.hero-trust svg { width:15px; height:15px; color:var(--blue); flex:0 0 auto; }

/* Trio de téléphones */
.hero-shots { position:relative; margin-top:48px; }
.phone-trio { display:flex; align-items:flex-end; justify-content:center; }
.phone {
  position:relative; flex:0 0 auto; margin:0; background:#0E1424; border-radius:38px; padding:8px;
  box-shadow:var(--shadow-lift);
}
.phone::after {
  content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:32%; height:15px; background:#0E1424; border-radius:0 0 11px 11px; z-index:3;
}
.phone-screen { display:block; width:100%; height:auto; aspect-ratio:320/680; object-fit:cover; border-radius:30px; background:var(--surface-2); }
.phone-main { width:min(244px, 60vw); z-index:3; }
.phone-side { width:min(200px, 48vw); z-index:1; }
.phone-left  { transform:translateY(7%) rotate(-7deg); margin-right:-6%; }
.phone-right { transform:translateY(7%) rotate(7deg);  margin-left:-6%; }
/* Petit écran : un seul téléphone, bien lisible */
@media (max-width:479px){
  .phone-side { display:none; }
  .phone-main { width:min(280px, 76vw); }
}

.hero .chips { display:flex; gap:9px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
.chip {
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--rule); padding:8px 12px; border-radius:999px; box-shadow:var(--shadow);
}
.chip svg { width:15px; height:15px; color:var(--blue); flex:0 0 auto; }
.chip.cash svg { color:var(--cash); }

/* Logos opérateurs Mobile Money */
.pay { display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
.pay .lbl { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.pay-logos { display:flex; gap:10px; }
.pay-logo {
  height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:#FFFFFF; border:1px solid var(--rule); border-radius:12px; padding:8px 14px; box-shadow:var(--shadow);
}
.pay-logo img { height:100%; width:auto; max-height:26px; object-fit:contain; }

/* Visuel hero : feuille de presse (papier empilé + traits de coupe) */
.sheet {
  position:relative; background:var(--surface); border:1px solid var(--rule);
  border-radius:22px; padding:26px; box-shadow:var(--shadow-lift); max-width:420px; margin-inline:auto;
}
.sheet::before {
  content:""; position:absolute; inset:0; z-index:-1; background:var(--surface-2);
  border:1px solid var(--rule); border-radius:22px; transform:rotate(-3deg) translateY(6px);
  box-shadow:var(--shadow);
}
.crop { position:absolute; width:16px; height:16px; opacity:.8; }
.crop::before,.crop::after { content:""; position:absolute; background:var(--rule-strong); }
.crop::before { width:16px; height:1.5px; top:0; }
.crop::after { width:1.5px; height:16px; left:0; }
.crop.tl { top:-9px; left:-9px; } .crop.tr { top:-9px; right:-9px; transform:scaleX(-1); }
.crop.bl { bottom:-9px; left:-9px; transform:scaleY(-1); } .crop.br { bottom:-9px; right:-9px; transform:scale(-1); }
.reg { position:absolute; width:9px; height:9px; border-radius:50%; }
.reg.c { background:var(--c-cyan); top:16px; right:44px; }
.reg.m { background:var(--c-mag); top:16px; right:30px; }
.reg.y { background:var(--c-yel); top:16px; right:16px; }

/* Contenu de la feuille : bon de travail « imprimé » minimal + tampon PAYÉ */
.sheet-head { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px dashed var(--rule); }
.sheet-logo { width:36px; height:36px; border-radius:9px; overflow:hidden; flex:0 0 auto; box-shadow:0 3px 9px -3px rgba(37,99,235,.55); }
.sheet-head-txt { display:flex; flex-direction:column; line-height:1.25; }
.sheet-head-txt b { font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.sheet-head-txt span { font-size:12px; color:var(--muted); }
.mini-page {
  margin:22px auto 18px; width:62%; aspect-ratio:1 / 1.34; background:var(--surface-2);
  border:1px solid var(--rule); border-radius:9px; padding:16px 15px;
  display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow);
}
.mini-page i { height:7px; border-radius:4px; background:var(--rule-strong); display:block; }
.mini-page i:nth-child(1){ width:52%; height:10px; background:var(--btn); }
.mini-page i:nth-child(2){ width:100%; } .mini-page i:nth-child(3){ width:92%; }
.mini-page i:nth-child(4){ width:97%; } .mini-page i:nth-child(5){ width:64%; }
.sheet-cap { text-align:center; font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.stamp {
  position:absolute; right:20px; bottom:66px; width:92px; height:92px; border-radius:50%;
  border:2.5px solid var(--cash); color:var(--cash); transform:rotate(-13deg); opacity:.92;
  display:grid; place-content:center; text-align:center;
  box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--cash) 20%, transparent);
}
.stamp b { font-size:20px; font-weight:800; letter-spacing:.06em; line-height:1; text-transform:uppercase; }
.stamp span { display:block; font-size:8px; letter-spacing:.2em; margin-top:4px; font-weight:700; text-transform:uppercase; }

/* Logos opérateurs dans le bandeau (chips blancs, lisibles sur les 2 thèmes) */
.band-logos { display:inline-flex; gap:8px; align-items:center; }
.band-logos .plog { height:32px; display:inline-flex; align-items:center; justify-content:center; background:#FFFFFF; border:1px solid var(--rule); border-radius:8px; padding:5px 9px; }
.band-logos .plog img { height:100%; max-height:20px; width:auto; object-fit:contain; }

/* ── Bandeau ──────────────────────────────────────────── */
.band { border-block:1px solid var(--rule); background:var(--surface); }
.band-grid { display:grid; grid-template-columns:1fr; }
.band-cell { padding:22px 20px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:4px; }
.band-cell:first-child { border-top:0; }
.band-cell .k { font-weight:800; font-size:18px; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.band-cell .v { font-size:13.5px; color:var(--muted); }

/* ── Étapes ───────────────────────────────────────────── */
.steps { display:grid; grid-template-columns:1fr; gap:28px; }
.step { display:flex; flex-direction:column; gap:11px; position:relative; }
.step .ic { width:44px; height:44px; border-radius:12px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.step .ic svg { width:22px; height:22px; }
.step .no { font-size:12px; font-weight:800; color:var(--blue); letter-spacing:.08em; }
.step h3 { font-size:18px; }
.step p { color:var(--muted); font-size:15px; }

/* ── Blocs alternés ───────────────────────────────────── */
.split { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.feat-list { display:flex; flex-direction:column; gap:16px; margin-top:22px; }
.feat { display:flex; gap:13px; }
.feat .fi { width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface); border:1px solid var(--rule); color:var(--blue); }
.feat .fi svg { width:19px; height:19px; }
.col-visual { display:flex; justify-content:center; }
.feat h4 { margin:0 0 3px; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.feat p { color:var(--muted); font-size:14.5px; }

.panel { background:var(--surface); border:1px solid var(--rule); border-radius:20px; padding:24px; box-shadow:var(--shadow); position:relative; }
.panel .eyebrow { margin-bottom:16px; }
.kv { display:flex; flex-direction:column; font-size:13.5px; font-variant-numeric:tabular-nums; }
.kv .r { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px dashed var(--rule); }
.kv .r:last-child { border-bottom:0; }
.kv .r span:first-child { color:var(--muted); }
.kv .r span:last-child { color:var(--ink); font-weight:700; }
.status-pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; background:color-mix(in srgb, var(--cash) 15%, transparent); color:var(--cash); }
.status-pill .d { width:7px; height:7px; border-radius:50%; background:var(--cash); flex:0 0 auto; }

/* ── Téléchargements ──────────────────────────────────── */
/* Bandeau QR « scannez pour installer » */
.qr-panel {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
  background:linear-gradient(135deg, var(--blue-soft), var(--surface));
  border:1px solid var(--rule); border-radius:24px; padding:30px 24px; margin-bottom:24px;
}
.qr-box {
  width:158px; height:158px; flex:0 0 auto; background:#FFFFFF;
  border:1px solid var(--rule); border-radius:16px; padding:12px; box-shadow:var(--shadow);
}
.qr-box svg { width:100%; height:100%; display:block; }
.qr-copy { display:flex; flex-direction:column; align-items:center; gap:10px; }
.qr-copy h3 { font-size:22px; }
.qr-copy p { color:var(--muted); font-size:15px; max-width:44ch; }
.qr-copy .btn { margin-top:4px; }

.dl-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.dl {
  position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:20px;
  padding:28px 24px; display:flex; flex-direction:column; gap:15px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.dl:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--rule-strong); }
.dl .ic { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); }
.dl .ic svg { width:25px; height:25px; }
.dl h3 { font-size:20px; }
.dl .desc { color:var(--muted); font-size:14.5px; flex:1; }
.dl .meta { display:flex; flex-wrap:wrap; gap:7px; }
.dl .meta span { font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--rule); padding:4px 9px; border-radius:7px; }
.dl.feature { background:linear-gradient(180deg, var(--blue-soft), var(--surface)); }
.dl-note { margin-top:20px; font-size:13.5px; color:var(--muted); display:flex; align-items:flex-start; gap:8px; }
.dl-note svg { width:16px; height:16px; color:var(--blue); flex:0 0 auto; margin-top:2px; }

/* ── Plans ────────────────────────────────────────────── */
.plans { display:grid; grid-template-columns:1fr; gap:18px; }
.plan { border:1px solid var(--rule); border-radius:18px; padding:24px; background:var(--surface); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.plan.hot { border-color:var(--btn); box-shadow:0 20px 44px -24px var(--btn); }
.plan .name { font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:800; }
.plan .price { font-size:30px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.plan .price small { font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; }
.plan .lst { display:flex; flex-direction:column; gap:11px; margin-top:10px; }
.plan .li { color:var(--ink-soft); font-size:14.5px; display:flex; gap:9px; align-items:flex-start; }
.plan .li svg { width:17px; height:17px; color:var(--blue); flex:0 0 auto; margin-top:2px; }
.plan-badge { align-self:flex-start; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--btn); background:var(--blue-soft); padding:4px 10px; border-radius:7px; }

/* ── FAQ ──────────────────────────────────────────────── */
.faq { max-width:820px; }
details.q { border-bottom:1px solid var(--rule); }
details.q summary {
  list-style:none; cursor:pointer; padding:20px 2px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em;
}
details.q summary::-webkit-details-marker { display:none; }
details.q summary .plus { flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--rule-strong); display:grid; place-items:center; transition:transform .2s, background .2s, color .2s, border-color .2s; }
details.q summary .plus svg { width:15px; height:15px; }
details.q[open] summary .plus { transform:rotate(45deg); background:var(--btn); color:#fff; border-color:var(--btn); }
details.q .a { padding:0 2px 22px; color:var(--muted); font-size:15.5px; max-width:70ch; }

/* ── CTA + pied de page ───────────────────────────────── */
.cta-band { background:#0F1629; color:#fff; border-radius:26px; padding:40px 24px; text-align:center; position:relative; overflow:hidden; }
@media (prefers-color-scheme: dark) { .cta-band { background:#0E1830; border:1px solid var(--rule); } }
:root[data-theme="light"] .cta-band { background:#0F1629; border:none; }
:root[data-theme="dark"] .cta-band { background:#0E1830; border:1px solid var(--rule); }
.cta-band h2 { font-size:clamp(26px,6vw,42px); color:#fff; }
.cta-band p { color:rgba(255,255,255,.72); font-size:16px; margin-top:14px; max-width:52ch; margin-inline:auto; }
.cta-band .cta-row { display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.cta-band .btn-ghost { color:#fff; border-color:rgba(255,255,255,.28); }
.cta-band .btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.06); }
.cta-band .reg { position:absolute; top:20px; }
.cta-band .reg.c{left:20px;background:var(--c-cyan);} .cta-band .reg.m{left:34px;background:var(--c-mag);} .cta-band .reg.y{left:48px;background:var(--c-yel);}

footer { border-top:1px solid var(--rule); background:var(--surface); padding-block:44px 32px; margin-top:64px; }
.foot-grid { display:grid; grid-template-columns:1fr; gap:30px; }
.foot-brand p { color:var(--muted); font-size:14.5px; margin-top:12px; max-width:34ch; }
.foot-col h5 { font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin:0 0 14px; font-weight:800; }
.foot-col a { display:block; color:var(--ink-soft); font-size:14.5px; padding:6px 0; transition:color .15s; }
.foot-col a:hover { color:var(--blue); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:36px; padding-top:22px; border-top:1px solid var(--rule); flex-wrap:wrap; }
.foot-bottom span { font-size:12.5px; color:var(--muted); letter-spacing:.02em; }

/* ══ Points de rupture (progressifs, mobile-first) ══════ */

/* Petites tablettes / grands mobiles */
@media (min-width:560px) {
  .band-grid { grid-template-columns:1fr 1fr; }
  .band-cell { border-top:0; border-left:1px solid var(--rule); }
  .band-cell:nth-child(-n+2) { border-top:0; }
  .band-cell:nth-child(2n+1) { border-left:0; }
  .band-cell:nth-child(n+3) { border-top:1px solid var(--rule); }
  .steps { grid-template-columns:1fr 1fr; gap:30px 26px; }
  .dl-grid { grid-template-columns:1fr 1fr; }
  .hero .cta-row .btn { flex:0 0 auto; }
}

/* Tablettes */
@media (min-width:768px) {
  body { font-size:16.5px; }
  section { padding-block:72px; }
  .sec-head { gap:16px; margin-bottom:44px; }
  .foot-grid { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
  .split { grid-template-columns:1fr 1fr; gap:48px; }
  .split.rev .col-visual { order:-1; }
  .qr-panel { flex-direction:row; text-align:left; gap:34px; padding:34px 38px; }
  .qr-copy { align-items:flex-start; }
  .qr-box { width:176px; height:176px; }
}

/* Ordinateur */
@media (min-width:960px) {
  body { font-size:17px; }
  section { padding-block:88px; }
  .nav-inner { height:66px; gap:24px; }
  .nav-links { display:flex; }
  .brand .mark { width:34px; height:34px; }
  .hero { padding-top:56px; }
  .hero-title { font-size:clamp(50px, 6.2vw, 76px); }
  .hero .lede { font-size:19px; max-width:54ch; }
  .hero-shots { margin-top:56px; }
  .phone-main { width:290px; }
  .phone-side { width:234px; }
  .band-grid { grid-template-columns:repeat(4,1fr); }
  .band-cell { border-top:0 !important; border-left:1px solid var(--rule); padding:30px 24px; }
  .band-cell:first-child { border-left:0; }
  .steps { grid-template-columns:repeat(4,1fr); }
  .step:not(:last-child)::after { content:""; position:absolute; top:22px; right:-13px; width:26px; height:1px; background:var(--rule-strong); }
  .dl-grid { grid-template-columns:repeat(3,1fr); gap:24px; }
  .plans { grid-template-columns:repeat(3,1fr); gap:20px; }
  .sec-head h2 { font-size:clamp(30px,3.4vw,42px); }
  .cta-band { padding:56px; }
  footer { padding-block:56px 40px; margin-top:88px; }
}

/* Accessibilité : mouvement réduit (AOS est aussi désactivé côté JS) */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .btn, .dl { transition:none; }
  [data-aos] { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── Pages légales ────────────────────────────────────── */
.legal-head { max-width:760px; margin:0 auto; padding-block:44px 8px; }
.legal-head h1 { font-size:clamp(30px,7vw,46px); margin-top:14px; }
.legal-head .updated { display:block; margin-top:16px; color:var(--muted); font-size:14px; }
.legal-note {
  max-width:760px; margin:24px auto 0; padding:16px 18px;
  background:var(--blue-soft); border:1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius:16px; color:var(--ink-soft); font-size:14.5px; line-height:1.6;
}
.legal-note strong { color:var(--ink); }

/* Sommaire */
.legal-toc { max-width:760px; margin:30px auto 0; padding:20px 22px; background:var(--surface-2); border:1px solid var(--rule); border-radius:18px; }
.legal-toc h2 { font-size:13px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin-bottom:14px; }
.legal-toc ol { list-style:none; counter-reset:toc; display:grid; gap:9px; }
.legal-toc li { counter-increment:toc; }
.legal-toc a { color:var(--ink-soft); font-size:15px; font-weight:600; display:flex; gap:10px; }
.legal-toc a::before { content:counter(toc,decimal-leading-zero); color:var(--blue); font-variant-numeric:tabular-nums; }
.legal-toc a:hover { color:var(--blue); }

/* Corps de texte légal */
.legal { max-width:760px; margin:0 auto; padding-block:20px 8px; }
.legal section { border:0; padding-block:26px; scroll-margin-top:80px; }
.legal section + section { border-top:1px solid var(--rule); }
.legal h2 { font-size:clamp(20px,4.5vw,26px); margin-bottom:14px; letter-spacing:-.01em; }
.legal h2 .num { color:var(--blue); font-variant-numeric:tabular-nums; margin-right:10px; }
.legal h3 { font-size:17px; margin:22px 0 8px; }
.legal p { color:var(--ink-soft); font-size:15.5px; line-height:1.72; margin-bottom:14px; }
.legal ul, .legal ol { margin:0 0 14px; padding-left:4px; list-style:none; display:grid; gap:9px; }
.legal li { position:relative; padding-left:22px; color:var(--ink-soft); font-size:15.5px; line-height:1.65; }
.legal ul li::before { content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.legal ol { counter-reset:ol; }
.legal ol li { counter-increment:ol; }
.legal ol li::before { content:counter(ol)"."; position:absolute; left:0; top:0; color:var(--blue); font-weight:700; }
.legal a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.legal strong { color:var(--ink); }
.legal .ph { background:color-mix(in srgb, var(--c-yel) 16%, transparent); color:var(--ink); padding:1px 6px; border-radius:6px; font-weight:600; white-space:nowrap; }
.legal .def { display:block; margin:0 0 10px; }

/* Liens croisés entre pages légales */
.legal-cross { max-width:760px; margin:16px auto 0; display:flex; flex-wrap:wrap; gap:12px; }
.legal-cross a {
  flex:1 1 200px; padding:14px 16px; border:1px solid var(--rule); border-radius:16px;
  background:var(--surface); color:var(--ink); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; transition:border-color .15s, transform .15s;
}
.legal-cross a:hover { border-color:var(--blue); transform:translateY(-2px); }
.legal-cross a svg { width:18px; height:18px; color:var(--blue); flex:0 0 auto; }

/* ── Bascule de thème (nav) ───────────────────────────── */
/* Les jetons clair/sombre existent déjà plus haut : ce bouton ne fait que
   poser `data-theme` sur <html>. Sans choix explicite, le système décide. */

/* Aligne les éléments natifs (barres de défilement, champs) sur le thème choisi,
   et pas seulement sur la préférence système. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto; border-radius:12px;
  background:var(--surface); border:1px solid var(--rule); color:var(--ink-soft);
  cursor:pointer; transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.theme-toggle:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.theme-toggle svg { width:18px; height:18px; }
/* Une seule icône visible : la lune en clair (« passer en sombre »), le soleil en sombre. */
.theme-toggle .i-moon { display:block; }
.theme-toggle .i-sun  { display:none; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .i-moon { display:none; }
  .theme-toggle .i-sun  { display:block; }
}
:root[data-theme="light"] .theme-toggle .i-moon { display:block; }
:root[data-theme="light"] .theme-toggle .i-sun  { display:none; }
:root[data-theme="dark"]  .theme-toggle .i-moon { display:none; }
:root[data-theme="dark"]  .theme-toggle .i-sun  { display:block; }

/* ── Avantages (grille bento) ─────────────────────────── */
.adv-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.adv {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--rule); border-radius:24px;
  padding:24px 22px; display:flex; flex-direction:column; gap:11px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.adv:hover { border-color:var(--rule-strong); transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.adv-ico {
  width:42px; height:42px; border-radius:13px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue);
}
.adv-ico svg { width:21px; height:21px; }
.adv h3 { font-size:18px; letter-spacing:-.02em; line-height:1.3; }
.adv p { color:var(--muted); font-size:15px; line-height:1.6; }
/* Puce de contexte : à qui profite l'avantage. */
.adv .who {
  align-self:flex-start; margin-top:auto; padding-top:4px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}

/* Cellules mises en avant : fond teinté + titre plus grand. */
.adv.wide { background:linear-gradient(150deg, var(--blue-soft), var(--surface) 62%); }
.adv.wide h3 { font-size:21px; }
.adv.wide p { color:var(--ink-soft); }

/* Liste de détail dans les cellules larges. */
.adv-list { display:grid; gap:7px; margin-top:2px; }
.adv-list li { position:relative; padding-left:20px; color:var(--muted); font-size:14.5px; line-height:1.55; }
.adv-list li::before {
  content:""; position:absolute; left:2px; top:8px; width:7px; height:7px;
  border-radius:2px; background:var(--blue);
}

@media (min-width:560px) { .adv-grid { grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (min-width:960px) {
  .adv-grid { grid-template-columns:repeat(3,1fr); gap:18px; }
  .adv { padding:28px 26px; }
  .adv.wide { grid-column:span 2; }
}

/* ── Sélecteur de langue (nav) ────────────────────────── */
/* Deux pages réelles par langue : chaque option est un lien, pas un bouton JS.
   Le libellé reste dans sa propre langue (« FR » / « EN »). */
.lang-switch {
  display:inline-flex; align-items:center; flex:0 0 auto; gap:2px;
  height:38px; padding:3px; border:1px solid var(--rule); border-radius:12px; background:var(--surface);
}
.lang-opt {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:29px; height:30px; padding:0 7px; border-radius:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--muted);
  transition:color .15s ease, background-color .15s ease;
}
.lang-opt:hover { color:var(--blue); }
.lang-opt[aria-current="true"] { background:var(--blue); color:var(--on-btn); }
.lang-opt[aria-current="true"]:hover { color:var(--on-btn); }

/* Sous 420 px, marque + langue + thème saturent déjà la barre. Le bouton
   « Télécharger » y est redondant (le hero porte le même CTA juste en dessous,
   et le pied de page les liens) : on le retire plutôt que de tout comprimer. */
@media (max-width:419px) {
  .nav-inner { gap:10px; }
  .nav .btn { display:none; }
}