/* Votune — site de présentation. Aucune police ni ressource externe. */
/* Couleurs d'AB-CONNECT (ab-connect-site/style.css) et de l'application
   Votune (bleu d'action #2E9BFF) : aucune teinte propre au site. Deux
   thèmes, [data-theme="dark"] par défaut et [data-theme="light"], comme sur
   ab-connect.be ; le bouton de l'en-tête bascule et retient le choix. */
:root, [data-theme="dark"]{
  --bg:#05070C; --bg-2:#0B0F17; --bg-3:#121826; --bg-glass:rgba(5,7,12,.82);
  --ink:#EDEFF5; --ink-dim:#BABDC6; --muted:#8B8E97;
  --signal:#2E9BFF; --signal-dim:#1B7FE0; --signal-soft:rgba(46,155,255,.15);
  --accent-2:#7C5CFF; --gradient:linear-gradient(135deg, var(--signal), var(--accent-2));
  --on-signal:#04121F;
  --good:#38E08A; --good-soft:var(--good-soft); --good-ink:var(--good-ink);
  --bad:#E0574F; --bad-soft:var(--bad-soft); --bad-ink:var(--bad-ink);
  --pending:#FF9F45; --pending-soft:var(--pending-soft); --pending-ink:var(--pending-ink);
  --vote:#F4C542; --vote-soft:rgba(244,197,66,.09); --vote-ink:var(--vote-ink);
  --accepted-ink:var(--accepted-ink);
  --line:rgba(237,239,245,.11); --line-2:rgba(237,239,245,.06);
  --bezel:#020306; --track:rgba(237,239,245,.1);
  --shadow:inset 0 1px 0 0 rgba(255,255,255,.05), 0 24px 44px -30px rgba(0,0,0,.7);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#F7F9FC; --bg-2:#FFFFFF; --bg-3:#EDF2F9; --bg-glass:rgba(247,249,252,.86);
  --ink:#10131A; --ink-dim:#3D414C; --muted:#6B6E76;
  --signal:#147FD9; --signal-dim:#1069B7; --signal-soft:rgba(20,127,217,.10);
  --accent-2:#6549DD; --on-signal:#FFFFFF;
  --good:#16A35A; --good-soft:rgba(22,163,90,.12); --good-ink:#0D5E35;
  --bad:#C9372E; --bad-soft:rgba(201,55,46,.10); --bad-ink:#7E1F19;
  --pending:#D9730D; --pending-soft:rgba(217,115,13,.10); --pending-ink:#7A3E00;
  --vote:#B8860B; --vote-soft:rgba(184,134,11,.10); --vote-ink:#5E4300;
  --accepted-ink:#0B4A85;
  --line:rgba(16,19,26,.12); --line-2:rgba(16,19,26,.07);
  --bezel:#1B2130; --track:rgba(16,19,26,.1);
  --shadow:inset 0 1px 0 0 rgba(255,255,255,.6), 0 20px 40px -30px rgba(20,36,68,.35);
  color-scheme:light;
}
:root{
  --radius:18px; --radius-sm:12px; --pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }
body{ margin:0; background:radial-gradient(1100px 620px at 78% -12%, color-mix(in srgb, var(--signal) 13%, transparent), transparent 62%), radial-gradient(900px 600px at -5% 30%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 60%), var(--bg); color:var(--ink); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .25s, color .25s; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:6px; }
.wrap{ width:min(1160px, 100% - 40px); margin:0 auto; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:200; padding:10px 16px; background:var(--signal); color:var(--on-signal); border-radius:var(--pill); font-weight:700; }
.skip:focus{ left:16px; }

/* ---- en-tête ---- */
.site-header{ position:sticky; top:0; z-index:100; background:var(--bg-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); }
.header-row{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:19px; letter-spacing:-.01em; }
/* Le « V » de l'application Votune : carré bleu arrondi, lettre blanche. */
.brand-emblem{ width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; color:#fff; background:var(--gradient); box-shadow:0 8px 20px -10px color-mix(in srgb, var(--signal) 80%, transparent); flex:none; }
.brand-emblem-small{ width:24px; height:24px; border-radius:7px; font-size:13px; vertical-align:middle; margin-right:4px; }
.main-nav{ display:flex; gap:22px; margin-left:auto; }
.main-nav a{ text-decoration:none; color:var(--ink-dim); font-size:14.5px; }
.main-nav a:hover{ color:var(--signal); }
.header-actions{ display:flex; align-items:center; gap:14px; }
.lang{ display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--pill); }
.lang a{ text-decoration:none; font-size:12px; font-weight:700; color:var(--muted); padding:5px 9px; border-radius:var(--pill); }
.lang a[aria-current]{ background:var(--bg-3); color:var(--ink); }
.lang a:hover{ color:var(--ink); }
.theme-toggle{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 6px; border:1px solid var(--line); border-radius:var(--pill); background:none; color:var(--ink-dim); font:600 12px var(--mono); cursor:pointer; }
.theme-toggle:hover{ border-color:var(--signal); color:var(--ink); }
.theme-toggle .knob{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--gradient); color:#fff; font-size:13px; }
@media (max-width:760px){ .theme-toggle{ padding:0 6px; } .theme-toggle .toggle-label{ display:none; } }
.nav-toggle{ display:none; width:42px; height:42px; position:relative; border:1px solid var(--line); border-radius:12px; background:none; cursor:pointer; }
.nav-toggle span{ position:absolute; left:11px; right:11px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s var(--ease), opacity .2s; }
.nav-toggle span:nth-child(1){ top:14px; } .nav-toggle span:nth-child(2){ top:20px; } .nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:1020px){
  .main-nav{ display:none; position:fixed; inset:68px 0 auto; flex-direction:column; gap:0; padding:10px 20px 22px; background:var(--bg); border-bottom:1px solid var(--line); }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:14px 4px; font-size:18px; border-bottom:1px solid var(--line-2); }
  .nav-toggle{ display:inline-block; }
  .header-actions{ margin-left:auto; }
}
@media (max-width:620px){ .header-actions .btn-small{ display:none; } .header-row{ gap:12px; } }

/* ---- boutons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px; border-radius:var(--pill); font-weight:700; font-size:15.5px; text-decoration:none; text-align:center; border:1px solid transparent; cursor:pointer; transition:transform .2s var(--ease), background .2s, border-color .2s; }
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:var(--gradient); color:#fff; box-shadow:0 12px 30px -14px color-mix(in srgb, var(--signal) 80%, transparent); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:color-mix(in srgb, var(--ink) 3%, transparent); }
.btn-ghost:hover{ border-color:color-mix(in srgb, var(--signal) 50%, transparent); }
.btn-small{ min-height:38px; padding:8px 16px; font-size:13.5px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 22px; }

/* ---- héros ---- */
.hero{ padding:72px 0 56px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.eyebrow{ display:inline-block; margin:0 0 18px; padding:6px 12px; border:1px solid color-mix(in srgb, var(--signal) 35%, transparent); border-radius:var(--pill); background:var(--signal-soft); color:var(--signal); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
h1{ margin:0; font-size:clamp(38px, 5.6vw, 66px); line-height:1.04; letter-spacing:-.025em; font-weight:800; }
h1 .accent{ display:block; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ margin:22px 0 0; max-width:600px; font-size:19px; color:var(--ink-dim); }
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.checks li{ position:relative; padding-left:28px; color:var(--ink-dim); }
.checks li::before{ content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--good-soft); color:var(--good); font-size:12px; font-weight:800; margin-top:3px; }
@media (max-width:900px){ .hero{ padding:44px 0 36px; } .hero-grid{ grid-template-columns:1fr; gap:40px; } }

/* maquette téléphone */
.mock{ display:flex; justify-content:center; }
.mock-phone{ position:relative; width:290px; padding:46px 18px 22px; border-radius:40px; background:linear-gradient(180deg,var(--bg-2),var(--bg-2)); border:1px solid var(--line); box-shadow:0 40px 90px -40px color-mix(in srgb, var(--signal) 45%, transparent), inset 0 0 0 6px var(--bezel); transform:rotate(2deg); }
.mock-notch{ position:absolute; top:14px; left:50%; width:90px; height:22px; margin-left:-45px; border-radius:var(--pill); background:var(--bezel); }
.mock-brand{ display:flex; align-items:center; gap:9px; margin-bottom:16px; font-weight:700; font-size:14px; }
.mock-emblem{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background:var(--gradient); font-size:13px; }
.mock-now{ display:grid; gap:2px; padding:14px; margin-bottom:16px; border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb, var(--signal) 16%, transparent), rgba(46,155,255,.08)); border:1px solid color-mix(in srgb, var(--signal) 25%, transparent); }
.mock-now strong{ font-size:17px; }
.mock-now > span:not(.mock-label):not(.mock-bar){ color:var(--ink-dim); font-size:13px; }
.mock-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal); }
.mock-bar{ display:block; height:4px; margin-top:10px; border-radius:4px; background:var(--track); overflow:hidden; }
.mock-bar span{ display:block; width:42%; height:100%; background:var(--signal); animation:mockplay 14s linear infinite; }
@keyframes mockplay{ from{ width:8%; } to{ width:96%; } }
.mock-queue{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.mock-queue li{ display:grid; padding:10px 12px; border-radius:12px; background:var(--bg-3); border:1px solid var(--line-2); font-size:13px; }
.mock-queue strong{ font-size:14px; }
.mock-queue span{ color:var(--ink-dim); }
.mock-queue em{ font-style:normal; color:var(--muted); font-size:11.5px; }

/* ---- sections ---- */
.section{ padding:72px 0; }
h2{ margin:0 0 14px; font-size:clamp(28px, 3.6vw, 42px); line-height:1.12; letter-spacing:-.02em; font-weight:800; }
h3{ margin:0 0 8px; font-size:18px; line-height:1.3; }
.section-lead{ margin:0 0 36px; max-width:700px; color:var(--ink-dim); font-size:17.5px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.section-lead + .grid-3{ margin-top:0; }
.card{ padding:26px; border-radius:var(--radius); background:var(--bg-2); border:1px solid var(--line-2); }
.card p{ margin:0; color:var(--ink-dim); }
.card-rule h3::before{ content:""; display:block; width:28px; height:3px; margin-bottom:14px; border-radius:3px; background:var(--signal); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } .section{ padding:52px 0; } }

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:none; }
.step{ position:relative; padding:28px 26px; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--bg-2); }
.step p{ margin:0; color:var(--ink-dim); }
.step-num{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; margin-bottom:16px; border-radius:12px; font-size:18px; font-weight:800; color:#fff; background:var(--gradient); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }

.screen-icon{ display:block; width:46px; height:46px; margin-bottom:16px; border-radius:12px; border:1.5px solid color-mix(in srgb, var(--signal) 50%, transparent); background:var(--signal-soft); position:relative; }
.card-screen-1 .screen-icon{ width:30px; border-radius:9px; }
.card-screen-2 .screen-icon::after{ content:""; position:absolute; left:8px; right:8px; bottom:8px; height:3px; border-radius:2px; background:var(--signal); box-shadow:0 -7px 0 var(--signal), 0 -14px 0 var(--signal); opacity:.7; }
.card-screen-3 .screen-icon{ width:62px; height:40px; border-radius:6px; }

.offer{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.offer-card h3{ margin-bottom:16px; }
@media (max-width:900px){ .offer{ grid-template-columns:1fr; } }

.faq{ display:grid; gap:10px; margin-top:24px; max-width:860px; }
.faq details{ border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--bg-2); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 52px 18px 20px; font-weight:700; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--signal); transition:transform .2s var(--ease); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{ margin:0; padding:0 20px 20px; color:var(--ink-dim); }

.contact-box{ max-width:760px; text-align:center; padding:56px 28px; border-radius:28px; border:1px solid color-mix(in srgb, var(--signal) 28%, transparent); background:radial-gradient(600px 260px at 50% 0%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 70%), var(--bg-2); }
.contact-box p{ color:var(--ink-dim); font-size:17.5px; margin:0 auto 26px; max-width:560px; }
.contact-box .contact-mail{ margin:18px 0 0; font-size:14.5px; color:var(--muted); }
.contact-mail a{ color:var(--signal); }

.site-footer{ padding:36px 0 48px; border-top:1px solid var(--line-2); color:var(--muted); font-size:14px; }
.footer-row{ display:grid; gap:8px; }
.footer-row p{ margin:0; }
.footer-row a{ color:var(--ink-dim); }
.footer-links{ display:flex; flex-wrap:wrap; gap:18px; }
.footer-small{ font-size:12.5px; }

/* ================= bar de démo ================= */
.section-demo{ background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--signal) 4%, transparent) 30%, transparent); }
.demo{ border:1px solid color-mix(in srgb, var(--signal) 25%, transparent); border-radius:26px; padding:20px; background:color-mix(in srgb, var(--bg) 70%, transparent); }
.demo-note{ margin:14px 0 0; font-size:13.5px; color:var(--muted); }
.demo-noscript{ margin:0; color:var(--ink-dim); }
.demo-tabs{ display:none; gap:6px; padding:4px; margin-bottom:16px; border-radius:var(--pill); background:var(--bg-2); border:1px solid var(--line-2); }
.demo-tabs button{ flex:1; min-height:42px; border:0; border-radius:var(--pill); background:none; color:var(--ink-dim); font:600 14px var(--font); cursor:pointer; position:relative; }
.demo-tabs button[aria-selected="true"]{ background:var(--bg-3); color:var(--ink); }
.demo-tabs .dot{ position:absolute; top:8px; right:14px; width:8px; height:8px; border-radius:50%; background:var(--pending); box-shadow:0 0 0 3px rgba(255,159,69,.25); }
.demo-grid{ display:grid; grid-template-columns:330px 1fr 1.05fr; gap:18px; align-items:start; }
.demo-panel{ border-radius:20px; background:var(--bg-2); border:1px solid var(--line-2); overflow:hidden; min-height:520px; display:flex; flex-direction:column; }
.demo-panel-head{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line-2); font-size:13px; font-weight:700; }
.demo-panel-head .tag{ margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.demo-panel-head .live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--good); text-transform:uppercase; letter-spacing:.1em; }
.demo-panel-head .live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px rgba(56,224,138,.18); }
.demo-body{ padding:16px; display:grid; gap:14px; align-content:start; flex:1; }
.demo-phone{ border-radius:30px; border:1px solid var(--line); box-shadow:inset 0 0 0 5px var(--bezel); }
.demo-phone .demo-panel-head{ padding-top:18px; }
@media (max-width:1100px){
  .demo-tabs{ display:flex; }
  .demo-grid{ grid-template-columns:1fr; }
  .demo-panel{ display:none; min-height:0; }
  .demo-panel.is-active{ display:flex; }
  .demo-phone{ max-width:420px; width:100%; margin:0 auto; }
}
@media (max-width:520px){ .demo{ padding:12px; border-radius:20px; } }

.d-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal); margin:0; }
.d-muted{ color:var(--muted); font-size:13px; margin:0; }
.d-welcome{ text-align:center; padding:22px 6px; display:grid; gap:12px; }
.d-welcome h3{ font-size:24px; margin:0; }
.d-welcome p{ margin:0; color:var(--ink-dim); }
.d-btn{ min-height:44px; padding:10px 16px; border-radius:var(--pill); border:1px solid var(--line); background:var(--bg-3); color:var(--ink); font:700 14px var(--font); cursor:pointer; }
.d-btn:hover{ border-color:color-mix(in srgb, var(--signal) 50%, transparent); }
.d-btn-gold{ background:var(--gradient); color:#fff; border:0; }
.d-btn-ok{ background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 45%, transparent); color:var(--good-ink); }
.d-btn-no{ background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 45%, transparent); color:var(--bad-ink); }
.d-btn-sm{ min-height:34px; padding:6px 12px; font-size:12.5px; }
.d-btn-icon{ min-height:32px; width:32px; padding:0; font-size:14px; }
.d-btn:disabled{ opacity:.4; cursor:not-allowed; }
.d-now{ padding:14px; border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb, var(--signal) 15%, transparent), rgba(46,155,255,.07)); border:1px solid color-mix(in srgb, var(--signal) 25%, transparent); display:grid; gap:2px; }
.d-now strong{ font-size:16px; }
.d-now span{ color:var(--ink-dim); font-size:13px; }
.d-progress{ height:4px; margin-top:8px; border-radius:4px; background:var(--track); overflow:hidden; }
.d-progress span{ display:block; height:100%; background:var(--signal); width:0; transition:width .9s linear; }
.d-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.d-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--bg-3); border:1px solid var(--line-2); font-size:13.5px; }
.d-item .d-text{ display:grid; min-width:0; flex:1; }
.d-item .d-text strong{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-item .d-text span{ color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-item.is-mine{ border-color:color-mix(in srgb, var(--signal) 45%, transparent); background:color-mix(in srgb, var(--signal) 7%, transparent); }
.d-actions{ display:flex; gap:6px; flex:none; }
.d-search{ display:grid; gap:8px; }
.d-search label{ font-size:12.5px; color:var(--muted); }
.d-search input{ width:100%; min-height:44px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:15px var(--font); }
.d-results{ max-height:300px; overflow:auto; }
.d-status{ padding:12px 14px; border-radius:14px; border:1px solid var(--line); display:grid; gap:4px; font-size:13.5px; }
.d-status b{ font-size:12px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.d-status[data-state="pending"]{ background:var(--pending-soft); border-color:color-mix(in srgb, var(--pending) 40%, transparent); } .d-status[data-state="pending"] b{ color:var(--pending-ink); }
.d-status[data-state="voting"]{ background:var(--vote-soft); border-color:color-mix(in srgb, var(--vote) 40%, transparent); } .d-status[data-state="voting"] b{ color:var(--vote-ink); }
.d-status[data-state="accepted"]{ background:var(--signal-soft); border-color:color-mix(in srgb, var(--signal) 45%, transparent); } .d-status[data-state="accepted"] b{ color:var(--accepted-ink); }
.d-status[data-state="playing"], .d-status[data-state="played"]{ background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 40%, transparent); } .d-status[data-state="playing"] b, .d-status[data-state="played"] b{ color:var(--good-ink); }
.d-status[data-state="refused"]{ background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 40%, transparent); } .d-status[data-state="refused"] b{ color:var(--bad-ink); }
.d-warn{ margin:0; padding:10px 12px; border-radius:12px; background:var(--pending-soft); color:var(--pending-ink); font-size:13px; }
.d-vote{ padding:14px; border-radius:14px; border:1px solid color-mix(in srgb, var(--vote) 40%, transparent); background:var(--vote-soft); display:grid; gap:10px; }
.d-vote .d-actions{ justify-content:stretch; } .d-vote .d-actions .d-btn{ flex:1; }
.d-toggle{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--bg-3); border:1px solid var(--line-2); cursor:pointer; font-size:13.5px; }
.d-toggle input{ appearance:none; -webkit-appearance:none; flex:none; width:40px; height:24px; margin:0; border-radius:var(--pill); background:var(--track); position:relative; cursor:pointer; transition:background .2s; }
.d-toggle input::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); }
.d-toggle input:checked{ background:var(--good); }
.d-toggle input:checked::after{ transform:translateX(16px); }
.d-toggle small{ display:block; color:var(--muted); font-size:12px; }
.d-badge{ display:inline-block; padding:1px 7px; margin-left:6px; border-radius:var(--pill); background:var(--signal-soft); color:var(--signal); font:700 10.5px var(--mono); vertical-align:middle; }
.d-tally{ color:var(--vote-ink); font-size:12px; }
.d-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; z-index:300; padding:12px 18px; border-radius:var(--pill); background:var(--bg-3); border:1px solid var(--line); box-shadow:0 18px 40px -16px #000; font-size:14px; transition:opacity .25s, transform .25s var(--ease); pointer-events:none; max-width:calc(100% - 32px); }
.d-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* écran de salle */
.d-screen{ background:radial-gradient(500px 240px at 50% 0%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 70%), var(--bg-2); }
.d-screen .demo-body{ gap:18px; }
.d-screen-now{ text-align:center; padding:18px 10px 6px; display:grid; gap:6px; }
.d-screen-now strong{ font-size:clamp(24px, 2.6vw, 34px); font-weight:800; line-height:1.1; letter-spacing:-.01em; }
.d-screen-now span{ color:var(--ink-dim); }
.d-screen-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .d-screen-cols{ grid-template-columns:1fr; } }
.d-scan{ display:flex; align-items:center; gap:12px; margin-top:auto; padding:12px; border-radius:14px; border:1px dashed color-mix(in srgb, var(--signal) 35%, transparent); color:var(--ink-dim); font-size:13px; }
.d-qr{ flex:none; width:46px; height:46px; border-radius:6px; background:
  conic-gradient(from 90deg at 30% 30%, #fff 25%, transparent 0) 0 0/12px 12px,
  #111; border:3px solid #fff; }
.d-reset{ justify-self:start; background:none; border:0; color:var(--muted); font:13px var(--font); text-decoration:underline; cursor:pointer; padding:0; }

/* ---- formulaire de demande de prix ---- */
.contact-box{ text-align:left; }
.contact-box h2, .contact-box > p{ text-align:center; }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-top:8px; }
.field{ display:grid; gap:6px; }
.field-wide{ grid-column:1 / -1; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-dim); }
.field .req{ font-weight:400; font-size:12px; color:var(--muted); }
.field input, .field textarea{ width:100%; min-height:48px; padding:12px 14px; border-radius:13px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:15px var(--font); transition:border-color .2s, box-shadow .2s; }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-soft); }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.form-foot .btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.form-privacy{ margin:0 !important; font-size:13px !important; color:var(--muted) !important; text-align:left !important; }
.form-privacy a{ color:var(--signal); }
.form-status{ margin:0; padding:12px 16px; border-radius:12px; font-size:14.5px; }
.form-status[data-kind="pending"]{ background:var(--signal-soft); color:var(--ink); }
.form-status[data-kind="ok"]{ background:var(--good-soft); color:var(--good-ink); }
.form-status[data-kind="error"]{ background:var(--bad-soft); color:var(--bad-ink); }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-box .contact-mail{ text-align:center; }
@media (max-width:640px){ .contact-form{ grid-template-columns:1fr; } .contact-box{ padding:40px 18px; } }
.contact-box .form-status{ max-width:none; margin:0; text-align:left; }

/* ---- retour en haut ---- */
.back-to-top{ position:fixed; right:22px; bottom:22px; z-index:150; width:46px; height:46px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; border:0; background:var(--gradient); color:#fff; box-shadow:0 14px 30px -14px color-mix(in srgb, var(--signal) 80%, transparent); cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.back-to-top[hidden]{ display:none; }
.back-to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover{ transform:translateY(-2px); }
.back-to-top svg{ width:20px; height:20px; }
@media print{ .back-to-top{ display:none !important; } }