/* Domeo — gris métal / blanc / doré */
:root{
  --gold:#C9A24B; --gold-2:#E8CE8F; --gold-dark:#9A7A2E;
  --metal-900:#1D2126; --metal-700:#2C3238; --metal-500:#4A5258;
  --bg:#FAFAF8; --card:#FFFFFF; --ink:#1D2126; --muted:#6E7680;
  --line:#E8E6E1; --ok:#1E8E4D; --radius:14px;
  --shadow:0 10px 30px rgba(20,24,28,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header.site{background:linear-gradient(180deg,var(--metal-900),var(--metal-700));color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:.14em;font-size:1.25rem;text-decoration:none}
.logo b{color:var(--gold)}
nav.links{display:flex;gap:26px}
nav.links a{color:#EDEDEA;text-decoration:none;font-size:.95rem;opacity:.9}
nav.links a:hover,nav.links a.active{color:var(--gold-2);opacity:1}
@media(max-width:640px){nav.links{gap:14px;font-size:.85rem}}

/* ---------- hero ---------- */
.hero{background:radial-gradient(1200px 500px at 70% -10%,#3d444b 0%,var(--metal-900) 60%);color:#fff;padding:72px 0 64px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.22),transparent 70%)}
.hero h1{font-size:2.4rem;line-height:1.2;margin:0 0 14px;max-width:640px}
.hero h1 .gold{color:var(--gold-2)}
.hero p.lead{font-size:1.12rem;color:#D8D8D4;max-width:620px;margin:0 0 26px}
.btn{display:inline-block;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#231d08;font-weight:700;text-decoration:none;padding:14px 30px;border-radius:999px;border:none;cursor:pointer;font-size:1rem;box-shadow:0 6px 18px rgba(201,162,75,.35)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:none;margin-left:12px}
.btn.ghost:hover{border-color:var(--gold-2);color:var(--gold-2)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:4px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.badge{border:1px solid rgba(201,162,75,.5);color:var(--gold-2);border-radius:999px;padding:6px 14px;font-size:.82rem}

/* ---------- sections ---------- */
section.block{padding:56px 0}
h2.sec{font-size:1.7rem;margin:0 0 8px}
p.sub{color:var(--muted);margin:0 0 30px;max-width:680px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.grid3,.grid2{grid-template-columns:1fr}.hero h1{font-size:1.8rem}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:1.1rem}
.card h3 .ico{margin-right:8px}
.card p{margin:0;color:var(--muted);font-size:.94rem}
.stepnum{display:inline-flex;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#231d08;font-weight:800;align-items:center;justify-content:center;margin-bottom:12px}

/* ---------- démo interactive ---------- */
.demo{background:linear-gradient(180deg,var(--metal-900),#262b31);color:#fff;border-radius:20px;padding:36px;display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center;box-shadow:var(--shadow)}
@media(max-width:860px){.demo{grid-template-columns:1fr}}
.phone{background:#0e1013;border-radius:34px;padding:18px 14px;border:1px solid #3a4046;box-shadow:inset 0 0 0 2px #000,0 12px 30px rgba(0,0,0,.5)}
.phone .notch{width:110px;height:22px;background:#000;border-radius:0 0 12px 12px;margin:0 auto 12px}
.phone h4{margin:0 0 4px;text-align:center;font-size:.95rem;color:#fff}
.phone .hint{text-align:center;color:#9aa0a8;font-size:.78rem;margin-bottom:12px;min-height:34px}
.pbtn{display:block;width:100%;margin:7px 0;padding:11px;border-radius:12px;border:1px solid #3a4046;background:#171b1f;color:#fff;font-size:.92rem;cursor:pointer;text-align:left}
.pbtn:hover{border-color:var(--gold)}
.pbtn.on{border-color:var(--gold);background:#2a2413;color:var(--gold-2)}
.pbtn.temp{display:flex;justify-content:space-between;align-items:center}
.pbtn .tbtn{background:#242a30;border:1px solid #3a4046;color:#fff;border-radius:8px;width:34px;height:30px;font-size:1rem;cursor:pointer}
.scene{background:#101318;border-radius:16px;padding:8px;border:1px solid #2c3238}
.scene svg{width:100%;height:auto;display:block;border-radius:10px}
.voice-line{margin-top:10px;font-size:.9rem;color:var(--gold-2);min-height:24px;font-style:italic}

/* ---------- réalisations ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:700px){.gal{grid-template-columns:1fr}}
.gal figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.gal img{width:100%;height:260px;object-fit:cover;display:block}
.gal figcaption{padding:16px 18px}
.gal figcaption b{display:block;margin-bottom:4px}
.gal figcaption span{color:var(--muted);font-size:.9rem}

/* ---------- devis ---------- */
.techno{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
@media(max-width:640px){.techno{grid-template-columns:1fr}}
.tech-card{border:2px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;background:#fff;transition:.15s}
.tech-card:hover{border-color:var(--gold)}
.tech-card.sel{border-color:var(--gold);background:#FFFBEF;box-shadow:0 0 0 3px rgba(201,162,75,.25)}
.tech-card b{display:block;font-size:1.05rem;margin-bottom:4px}
.tech-card span{color:var(--muted);font-size:.85rem}
.note{font-size:.88rem;color:var(--muted);margin:10px 0 26px}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.prod-grid{grid-template-columns:1fr}}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.prod.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.prod .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.prod b.name{font-size:1rem}
.prod .price{color:var(--gold-dark);font-weight:700;white-space:nowrap}
.prod .variant{width:100%;margin:8px 0;padding:9px;border:1px solid var(--line);border-radius:10px;font-size:.92rem;background:#fff}
.qty{display:flex;align-items:center;gap:12px;margin-top:8px}
.qty button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.15rem;cursor:pointer;line-height:1}
.qty button:hover{border-color:var(--gold)}
.qty .n{min-width:34px;text-align:center;font-weight:700;font-size:1.05rem}
.qty input.meters{width:90px;padding:8px;border:1px solid var(--line);border-radius:10px;font-size:1rem}
.line-total{margin-left:auto;font-weight:700;color:var(--metal-700)}
.badge-devis{display:inline-block;background:#FFF3D6;color:#8a6d1f;border-radius:999px;padding:3px 12px;font-size:.78rem;font-weight:700}
.layout-devis{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
@media(max-width:960px){.layout-devis{grid-template-columns:1fr}}
.recap{background:linear-gradient(180deg,var(--metal-900),var(--metal-700));color:#fff;border-radius:var(--radius);padding:24px;position:sticky;top:84px;box-shadow:var(--shadow)}
.recap h3{margin:0 0 4px;color:var(--gold-2)}
.recap .rlines{max-height:300px;overflow:auto;margin:12px 0;font-size:.88rem}
.recap .rline{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.15)}
.recap .total{display:flex;justify-content:space-between;font-size:1.25rem;font-weight:800;margin:14px 0 4px}
.recap .total small{font-weight:400;font-size:.75rem;color:#c9c9c6}
.recap .ast{font-size:.78rem;color:#c9c9c6}
.pass{display:flex;gap:10px;align-items:flex-start;background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.5);border-radius:10px;padding:10px 12px;font-size:.85rem;margin:12px 0;color:#F3E6C4}
.email-row{margin-top:14px}
.email-row input{width:100%;padding:11px;border-radius:10px;border:1px solid #4a5258;background:#14171a;color:#fff;margin-bottom:10px;font-size:.95rem}
.recap .btn{width:100%;text-align:center}

/* ---------- footer ---------- */
footer{background:var(--metal-900);color:#C9C9C6;padding:36px 0;margin-top:20px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer b{color:#fff}
footer .gold{color:var(--gold-2)}
.tmp-note{background:#FFF8E1;border:1px solid #F0D98C;border-radius:10px;padding:12px 16px;font-size:.9rem;color:#7A5E14;margin:18px 0}
/* ---------- bouton WhatsApp flottant ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.32);z-index:100;transition:transform .15s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}