/* Styles communs aux 3 démos DST (salon, boutique, restaurant) */
:root { --accent:#0062E6; --accent-d:#0041A4; --accent-soft:#EAF1FE; --ink:#1B1B1F; --ink-2:#55555E; --line:#E6E3DE; --bg:#FBF9F6; --card:#fff; --ok:#267A2A; --r:18px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }
.wrap { width:min(1120px, 100% - 32px); margin-inline:auto; }
h1,h2,h3 { line-height:1.15; letter-spacing:-.02em; margin:0; }
h2 { font-size:clamp(24px,3vw,34px); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Bandeau DST (rappelle que c'est un exemple) */
.dst-bar { position:sticky; top:0; z-index:50; background:#061340; color:#fff; font-size:13.5px; }
.dst-bar .wrap { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:9px 0; flex-wrap:wrap; }
.dst-bar b { color:#7CC4FF; }
.dst-bar a.cta { background:#1E7F43; color:#fff; text-decoration:none; font-weight:700; padding:7px 14px; border-radius:99px; white-space:nowrap; }
.dst-bar a.back { color:#B8C6F0; text-decoration:none; }
.dst-bar a:hover { filter:brightness(1.1); }

/* En-tête du faux site */
.site-head { background:var(--card); border-bottom:1px solid var(--line); }
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand { font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--accent-d); text-decoration:none; }
.site-head nav { display:flex; gap:20px; font-size:15px; }
.site-head nav a { text-decoration:none; color:var(--ink-2); font-weight:600; }
.site-head nav a:hover { color:var(--accent-d); }
@media (max-width:640px){ .site-head nav { display:none; } }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:99px; background:var(--accent); color:#fff; font-weight:700; padding:13px 22px; text-decoration:none; transition:transform .15s, filter .15s; }
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn:disabled, .btn[aria-disabled="true"] { background:#C9C6C0; cursor:not-allowed; transform:none; filter:none; }
.btn.ghost { background:transparent; color:var(--accent-d); border:1.5px solid var(--accent); }
.btn.wave { background:#1DC8F2; color:#04323f; }
.btn.om { background:#FF7900; color:#1a1a1a; }

/* Hero */
.hero { position:relative; color:#fff; min-height:min(68vh,560px); display:flex; align-items:flex-end; overflow:hidden; background:#222; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.72)); }
.hero .wrap { position:relative; z-index:1; padding:56px 0 44px; }
.hero h1 { font-size:clamp(34px,6vw,64px); max-width:14ch; }
.hero p { max-width:46ch; font-size:clamp(16px,2vw,19px); opacity:.95; margin:14px 0 22px; }
.hero .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.chip { display:inline-block; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); padding:6px 12px; border-radius:99px; font-size:13px; font-weight:600; }

section.block { padding:clamp(44px,6vw,80px) 0; }
section.block > .wrap > p.sub { color:var(--ink-2); margin:8px 0 26px; max-width:60ch; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); }
.grid { display:grid; gap:16px; }
.cols-2 { grid-template-columns: 1.3fr 1fr; align-items:start; gap:28px; }
@media (max-width:860px){ .cols-2 { grid-template-columns:1fr; } }

.price { font-weight:800; white-space:nowrap; }
.muted { color:var(--ink-2); }
.pick { text-align:left; width:100%; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:border-color .15s, background .15s; color:inherit; }
.pick:hover { border-color:var(--accent); }
.pick[aria-pressed="true"], .pick[aria-checked="true"] { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent) inset; }
.pick small { display:block; color:var(--ink-2); font-weight:400; }
.pick:disabled { opacity:.45; cursor:not-allowed; text-decoration:line-through; }

label.f { display:block; font-size:13.5px; font-weight:700; margin:12px 0 5px; }
input.t { width:100%; font:inherit; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; }
input.t:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid #7CC4FF; outline-offset:2px; }
.err { color:#B3261E; font-size:13.5px; min-height:1.2em; margin:6px 0 0; }

.panel { position:sticky; top:64px; padding:20px; }
.panel h3 { font-size:19px; margin-bottom:12px; }
.line { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:15px; }
.line.total { border-bottom:0; font-weight:800; font-size:17px; padding-top:12px; }

.done { text-align:center; padding:26px 12px; }
.done .tick { width:60px; height:60px; border-radius:50%; background:#E3F5E1; color:var(--ok); display:grid; place-items:center; margin:0 auto 12px; font-size:30px; font-weight:800; }
.done h3 { margin-bottom:6px; }
.simu { font-size:12.5px; color:var(--ink-2); background:#F2EFEA; border-radius:10px; padding:8px 10px; margin-top:14px; }

/* Pied de page + appel à l'action DST */
.dst-end { background:#061340; color:#fff; padding:clamp(40px,6vw,64px) 0; margin-top:40px; }
.dst-end .wrap { display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.dst-end h2 { font-size:clamp(22px,3vw,32px); max-width:22ch; }
.dst-end p { color:#B8C6F0; margin:8px 0 0; max-width:48ch; }
.dst-end .acts { display:flex; gap:12px; flex-wrap:wrap; }
.dst-end .btn { background:#1E7F43; }
.dst-end .btn.ghost { background:transparent; color:#fff; border-color:#fff; }
.foot { font-size:13px; color:var(--ink-2); padding:22px 0 34px; text-align:center; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .btn{transition:none} }

/* Accessibilité */
[hidden] { display:none !important; }
.skip { position:fixed; left:12px; top:-60px; z-index:300; background:#061340; color:#fff; padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none; transition:top .25s; }
.skip:focus { top:12px; }