/* theme.css — refonte identité « Agence Démo Immobilier » (chargé en dernier) */

@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/outfit-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/outfit-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/outfit-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/outfit-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/outfit-latin-800-normal.woff2') format('woff2')}

/* ---------- tokens additionnels (le reste est défini dans index.html) ---------- */
:root{
  --sh1:0 1px 2px rgba(0,0,0,.07); --sh2:0 1px 2px rgba(0,0,0,.06),0 20px 40px -22px rgba(0,0,0,.35);
  --accent-t2:#8A6B3D;
}
body{font-family:var(--f-ui)}
:focus-visible{outline-color:var(--marine)}
.rib{background:var(--marine);color:#EAF0F6}
.rib b{color:#fff}.rib .dot{background:var(--vert-msg);box-shadow:0 0 0 4px rgba(31,169,113,.22)}
.rib .r{color:#A9BCCB}
.encr{background:color-mix(in srgb,var(--laiton) 20%,#fff);color:var(--ink2)}
.stage[data-ch="wa"] .stage-body{background:radial-gradient(120% 80% at 50% 0%,#eef3f0 0%,#dde8e2 100%)}
.stage[data-ch="wa"] .qr button{color:var(--marine)}
.stage[data-ch="wa"] .user .meta .tk{color:#53bdeb}
.hero h1 em{font-style:normal;color:inherit;font-weight:inherit}
.chip svg{color:var(--marine)}

/* ---------- hero : composition scindée ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.hero-text{min-width:0}
.hero-cta{margin-top:24px}
.hero-visual{min-width:0}
.hv-scene{position:relative;overflow:hidden;border-radius:24px;background:
    repeating-linear-gradient(90deg,rgba(201,166,107,.10) 0 2px,transparent 2px 15%),
    linear-gradient(165deg,#0E1E30,var(--marine) 55%,#16314A);
  padding:clamp(18px,2.6vw,28px);display:flex;flex-direction:column;gap:16px}
.hv-scene::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px);pointer-events:none}
.hv-row{position:relative;display:flex;align-items:flex-end;gap:0}
.hv-browser{flex:1 1 58%;min-width:0;background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:0 18px 34px -18px rgba(0,0,0,.55)}
.hv-browser-bar{display:flex;align-items:center;gap:6px;padding:9px 10px;background:#EEF2F6;border-bottom:1px solid var(--line)}
.hv-browser-bar i{width:7px;height:7px;border-radius:50%;background:#C7D0D9;display:block}
.hv-browser-url{margin-left:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10.5px/1 var(--f-ui);color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.hv-browser-body{padding:16px 14px 20px;background:var(--verre)}
.hv-widget{display:flex;align-items:center;gap:9px;background:var(--bg);border-radius:12px;padding:9px 10px}
.hv-widget-av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--laiton);color:var(--marine);display:grid;place-items:center;font:700 12px/1 var(--f-ui)}
.hv-widget-txt{font:600 12px/1.3 var(--f-ui);color:var(--ink)}
.hv-widget-txt b{display:flex;align-items:center;gap:5px;margin-top:3px;font:500 10.5px/1 var(--f-ui);color:var(--muted);font-weight:500}
.hv-widget-txt b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vert-msg)}
.hv-widget-line{height:8px;border-radius:999px;background:color-mix(in srgb,var(--marine) 10%,#fff);margin-top:10px}
.hv-widget-line.l1{width:88%}.hv-widget-line.l2{width:62%;margin-top:7px}
.hv-phone{flex:0 0 auto;width:clamp(128px,30%,176px);margin-left:-26px;margin-bottom:-10px;background:#0C1A28;border-radius:22px;padding:7px;box-shadow:0 24px 44px -16px rgba(0,0,0,.6)}
.hv-phone-head{display:flex;align-items:center;gap:7px;background:var(--vert-msg);color:#fff;border-radius:16px 16px 0 0;padding:8px 10px}
.hv-phone-av{display:block;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.85);flex:none}
.hv-phone-name{font:600 10px/1.2 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-phone-body{background:var(--wa-bg);padding:10px 8px;display:flex;flex-direction:column;gap:6px;border-radius:0 0 16px 16px;min-height:150px}
.hv-bub{max-width:92%;font:500 9.5px/1.35 var(--f-ui);padding:6px 8px;border-radius:9px;box-shadow:0 1px .5px rgba(11,20,26,.18)}
.hv-bub-bot{align-self:flex-start;background:#fff;color:var(--ink2);border-top-left-radius:2px}
.hv-bub-user{align-self:flex-end;background:var(--wa-out);color:var(--ink);border-top-right-radius:2px}
.hv-tags{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.hv-tag{background:var(--surface);border-radius:10px;padding:8px 11px;box-shadow:var(--sh2);display:flex;flex-direction:column;gap:2px}
.hv-tag-a{transform:rotate(-1.4deg)}.hv-tag-b{transform:rotate(1deg)}
.hv-tag-t{font:600 12px/1.3 var(--f-ui);color:var(--ink)}
.hv-tag-p{font:700 12px/1 var(--f-ui);color:var(--accent-t2);font-variant-numeric:tabular-nums}
.mo .hv-bub{opacity:0;transform:translateY(7px);animation:hvIn .5s var(--ease) forwards}
.mo .hv-bub.b1{animation-delay:.35s}.mo .hv-bub.b2{animation-delay:1.05s}.mo .hv-bub.b3{animation-delay:1.85s}
.mo .hv-tag{opacity:0;animation:hvTag .6s var(--ease) forwards}
.mo .hv-tag-a{animation-delay:.15s}.mo .hv-tag-b{animation-delay:.5s}
@keyframes hvIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes hvTag{from{opacity:0;transform:translateY(8px) rotate(var(--r0,0deg))}to{opacity:1}}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:460px;margin-inline:auto;width:100%}
}
@media(max-width:560px){
  .hv-tag-t{font-size:10.5px}.hv-tag-p{font-size:11px}
  .hv-phone{width:clamp(108px,34%,150px)}
}

/* ---------- frise « comment ça se passerait » (remplace les 4 cartes identiques) ---------- */
.steps{grid-template-columns:repeat(4,1fr);counter-reset:st;position:relative;gap:14px}
.steps::before{content:"";position:absolute;left:19px;right:19px;top:19px;height:2px;background:var(--line2);z-index:0}
.step{background:transparent;border:0;border-radius:0;padding:4px 16px 6px 10px;margin-left:-10px;position:relative}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--laiton);color:var(--marine);font:700 13px/1 var(--f-ui);letter-spacing:0;margin-bottom:14px;position:relative;z-index:2;box-shadow:0 0 0 6px var(--bg)}
.step h3{font-size:17.5px;font-weight:700;line-height:1.3}
.sec-h h2{font-size:clamp(27px,3.2vw,40px)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:28px}.steps::before{display:none}.step{padding-right:10px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- cibles tactiles ≥44px, mobile ---------- */
@media(max-width:560px){
  .ibtn{width:44px;height:44px}
  .seg button{height:44px}
  .sw{min-height:44px}
  .mini{min-height:44px}
  .qr button{min-height:44px}
  .cb-in button{width:48px;height:48px}
}