/* ═══════════════════════════════════════════════════════════
   PEINTURE OLASSO — Tunnel de devis « Patxi »
   Même charte que le site (bleu nuit / doré / crème), mais un ton
   plus doux et enfantin : Patxi guide, coins ronds, bulles.
   ═══════════════════════════════════════════════════════════ */

:root{
  --wiz-bg:   #0f1c28;   /* bleu nuit */
  --wiz-card: #16283a;
  --wiz-card2:#1d3247;
  --wiz-ink:  #f2eee6;
  --wiz-dim:  rgba(242,238,230,.6);
  --wiz-line: rgba(242,238,230,.16);
  --or:       #ae8a5f;
  --or-clair: #d8b483;
  --creme:    #f2eee6;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; }
body{
  font-family:"SF Pro Display","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--wiz-bg); color:var(--wiz-ink);
  min-height:100svh; overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--or); color:var(--wiz-bg); }

.mono{ font-family:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace; }

/* bulles de fond, décoratives */
.bubbles{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bubbles i{
  position:absolute; bottom:-8vh; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(216,180,131,.28), rgba(174,138,95,.06) 60%, transparent 72%);
  border:1px solid rgba(216,180,131,.12);
  animation:rise var(--d,18s) linear infinite; animation-delay:var(--delay,0s);
}
@keyframes rise{
  0%{ transform:translateY(0) scale(.8); opacity:0; }
  12%{ opacity:1; } 88%{ opacity:1; }
  100%{ transform:translateY(-118svh) scale(1.1); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .bubbles{ display:none; } }

/* ── ossature ─────────────────────────────────────────── */
.wiz{
  position:relative; z-index:1;
  max-width:44rem; margin-inline:auto; min-height:100svh;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(1rem,3vw,1.6rem);
}

/* haut : logo + progression */
.wiz__top{ display:grid; gap:.9rem; padding-block:.4rem 1.2rem; }
.wiz__bar-row{ display:flex; align-items:center; gap:.9rem; }
.wiz__home{ display:flex; flex:0 0 auto; align-items:center; border-radius:.4rem; }
.wiz__home:focus-visible{ outline:2px solid var(--or-clair); outline-offset:3px; }
.wiz__logo{ height:2rem; width:auto; display:block; transition:opacity .25s; }
.wiz__home:hover .wiz__logo{ opacity:.75; }
.wiz__bar{ flex:1; height:6px; border-radius:999px; background:var(--wiz-line); overflow:hidden; }
.wiz__bar i{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--or),var(--or-clair)); transition:width .5s cubic-bezier(.16,1,.3,1); }
.wiz__count{ font-family:"SF Mono",monospace; font-size:.72rem; letter-spacing:.1em; color:var(--wiz-dim); white-space:nowrap; }

/* zone centrale : scène */
.wiz__scene{ align-self:center; padding-block:1rem; }
.scene{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease,cubic-bezier(.16,1,.3,1)), transform .5s cubic-bezier(.16,1,.3,1); }
.scene.is-in{ opacity:1; transform:none; }

/* Patxi + bulle */
.patxi{ display:flex; align-items:flex-end; gap:.9rem; margin-bottom:1.4rem; }
.patxi img{ width:clamp(4.5rem,20vw,6.5rem); height:auto; flex:0 0 auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.4)); }
.patxi__say{
  position:relative; background:var(--creme); color:var(--wiz-bg);
  border-radius:1.1rem; padding:.85rem 1.1rem; font-size:clamp(.98rem,2.6vw,1.12rem);
  font-weight:550; line-height:1.3; max-width:26rem;
  box-shadow:0 8px 24px rgba(0,0,0,.32);
}
.patxi__say::after{
  content:""; position:absolute; left:-9px; bottom:16px;
  border:7px solid transparent; border-right-color:var(--creme); border-left:0;
}
.patxi--big img{ width:clamp(7rem,34vw,11rem); }

/* titres */
.scene__eyebrow{ font-family:"SF Mono",monospace; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--or-clair); display:block; margin-bottom:.5rem; }
.scene__title{ font-size:clamp(1.5rem,5.5vw,2.3rem); font-weight:750; letter-spacing:-.02em;
  line-height:1.05; margin-bottom:1.3rem; }
.scene__title.big{ font-size:clamp(2rem,7vw,3.2rem); }

/* ── options (choix unique) ───────────────────────────── */
.opts{ display:grid; gap:.7rem; }
.opts--2{ grid-template-columns:repeat(2,1fr); }
.opt{
  display:flex; align-items:center; gap:.9rem; text-align:left; width:100%;
  background:var(--wiz-card); border:1.5px solid var(--wiz-line);
  border-radius:1rem; padding:1rem 1.15rem; font-size:1.05rem; font-weight:550;
  transition:border-color .25s, background-color .25s, transform .25s;
}
.opt:hover{ border-color:var(--or); }
.opt:active{ transform:scale(.98); }
.opt.is-on{ border-color:var(--or); background:var(--wiz-card2); }
.opt__ico{ font-size:1.5rem; flex:0 0 auto; width:2rem; text-align:center; }
.opt__check{ margin-left:auto; width:1.5rem; height:1.5rem; border-radius:50%;
  border:1.5px solid var(--wiz-line); display:grid; place-items:center; flex:0 0 auto;
  transition:background-color .25s, border-color .25s; }
.opt.is-on .opt__check{ background:var(--or); border-color:var(--or); color:var(--wiz-bg); }
.opt__check svg{ width:.9rem; height:.9rem; opacity:0; transition:opacity .2s; }
.opt.is-on .opt__check svg{ opacity:1; }

/* ── compteurs (pièces) ───────────────────────────────── */
.counts{ display:grid; gap:.6rem; }
.count{
  display:flex; align-items:center; gap:.9rem;
  background:var(--wiz-card); border:1.5px solid var(--wiz-line);
  border-radius:1rem; padding:.7rem .8rem .7rem 1.15rem; transition:border-color .25s, background-color .25s;
}
.count.is-on{ border-color:var(--or); background:var(--wiz-card2); }
.count__ico{ font-size:1.4rem; width:1.9rem; text-align:center; flex:0 0 auto; }
.count__name{ font-size:1.05rem; font-weight:550; flex:1; }
.count__ctrl{ display:flex; align-items:center; gap:.2rem; }
.count__btn{ width:2.4rem; height:2.4rem; border-radius:.7rem; background:var(--wiz-bg);
  border:1.5px solid var(--wiz-line); font-size:1.4rem; line-height:1; display:grid; place-items:center;
  transition:border-color .2s, background-color .2s; }
.count__btn:hover{ border-color:var(--or); }
.count__btn:disabled{ opacity:.35; cursor:default; }
.count__val{ width:2.2rem; text-align:center; font-size:1.2rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── texte libre ──────────────────────────────────────── */
.wiz textarea{
  width:100%; min-height:8rem; resize:vertical;
  background:var(--wiz-card); border:1.5px solid var(--wiz-line); border-radius:1rem;
  padding:1rem 1.15rem; color:var(--wiz-ink); font:inherit; font-size:1.02rem; line-height:1.4;
}
.wiz textarea:focus{ outline:none; border-color:var(--or); }
.wiz textarea::placeholder{ color:var(--wiz-dim); }
.opt-note{ font-size:.9rem; color:var(--wiz-dim); margin-top:.6rem; }

/* ── coordonnées ──────────────────────────────────────── */
.fields{ display:grid; gap:.8rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:.85rem; color:var(--wiz-dim); font-weight:550; padding-left:.2rem; }
.field input{
  background:var(--wiz-card); border:1.5px solid var(--wiz-line); border-radius:.9rem;
  padding:.85rem 1.1rem; color:var(--wiz-ink); font:inherit; font-size:1.02rem;
}
.field input:focus{ outline:none; border-color:var(--or); }
.field input::placeholder{ color:var(--wiz-dim); }
.consent{ display:flex; gap:.7rem; align-items:flex-start; margin-top:.4rem;
  font-size:.92rem; color:var(--wiz-dim); line-height:1.4; cursor:pointer; }
.consent input{ margin-top:.15rem; width:1.2rem; height:1.2rem; flex:0 0 auto; accent-color:var(--or); }

/* ── PHOTOS guidées (illustration plate + cadre photo) ── */
.photos{ display:grid; gap:1.1rem; }
.illus-wrap{ position:relative; width:min(72vw,17rem); aspect-ratio:200/156; margin-inline:auto; }
.il, .cam{ position:absolute; inset:0; width:100%; height:100%; }
.il{ animation:pop .4s var(--ease,cubic-bezier(.16,1,.3,1)); }
@keyframes pop{ from{ opacity:0; transform:scale(.94);} to{ opacity:1; transform:none;} }
/* pièces du dessin */
.il .pnl{ fill:rgba(174,138,95,.6); stroke:var(--or-clair); stroke-width:2.5; }
.il .pnlline{ fill:none; stroke:var(--or-clair); stroke-width:2.5; }
.il .soft{ fill:rgba(29,50,71,.85); stroke:rgba(216,180,131,.35); stroke-width:2; }
.il .soft2{ fill:rgba(29,50,71,.6); stroke:rgba(216,180,131,.3); stroke-width:2; }
.il .det{ fill:none; stroke:var(--creme); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.il .detf{ fill:var(--creme); }
.il .fillc{ fill:var(--creme); }
.il .edge2{ stroke:var(--or-clair); stroke-width:6; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(216,180,131,.7)); }
.il .crack{ fill:none; stroke:var(--or-clair); stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
/* cadre « photo » */
.cam path{ fill:none; stroke:var(--creme); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.photo-target .ok{ color:var(--or-clair); }

.shots{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.shot{ position:relative; width:3.2rem; height:3.2rem; border-radius:.6rem; overflow:hidden;
  border:1.5px solid var(--wiz-line); background:var(--wiz-card); display:grid; place-items:center;
  font-size:1.1rem; color:var(--wiz-dim); }
.shot.is-current{ border-color:var(--or-clair); box-shadow:0 0 0 3px rgba(216,180,131,.25); }
.shot.is-done{ border-color:var(--or); }
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot__x{ position:absolute; top:-6px; right:-6px; width:1.2rem; height:1.2rem; border-radius:50%;
  background:var(--wiz-bg); border:1px solid var(--wiz-line); font-size:.8rem; line-height:1; color:var(--wiz-ink); display:none; }
.shot.is-done .shot__x{ display:grid; place-items:center; }
.photo-cta{ display:grid; gap:.5rem; }
.photo-target{ text-align:center; font-size:1.05rem; font-weight:600; }
.photo-hint{ text-align:center; font-size:.9rem; color:var(--wiz-dim); }
.photo-progress{ text-align:center; font-family:"SF Mono",monospace; font-size:.72rem;
  letter-spacing:.1em; color:var(--or-clair); }
.hidden-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ── boutons bas ──────────────────────────────────────── */
.wiz__nav{ display:flex; gap:.8rem; align-items:center; padding-block:1rem .4rem; }
.btn2{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:3.4rem; padding-inline:1.6em; border-radius:999px; font-size:1.02rem; font-weight:650;
  transition:transform .2s, background-color .3s, opacity .3s; }
.btn2:active{ transform:scale(.97); }
.btn2--primary{ background:var(--creme); color:var(--wiz-bg); flex:1; }
.btn2--primary:disabled{ opacity:.4; cursor:default; }
.btn2--ghost{ border:1.5px solid var(--wiz-line); color:var(--wiz-ink); }
.btn2--ghost:hover{ border-color:var(--or); }
.btn2--gold{ background:var(--or); color:var(--wiz-bg); flex:1; }

/* ── écran final ──────────────────────────────────────── */
.done{ text-align:center; display:grid; gap:1.2rem; justify-items:center; padding-block:1rem; }
.done img{ width:clamp(8rem,40vw,12rem); filter:drop-shadow(0 14px 30px rgba(0,0,0,.4)); }
.done h2{ font-size:clamp(1.6rem,6vw,2.4rem); font-weight:750; letter-spacing:-.02em; }
.done p{ color:var(--wiz-dim); max-width:30rem; line-height:1.5; }
.demo-flag{ margin-top:.4rem; font-family:"SF Mono",monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--or-clair); border:1px solid var(--or); border-radius:999px; padding:.5em 1em; }

/* ── barrière QR (ordinateur) ─────────────────────────── */
.qr-gate{ text-align:center; display:grid; justify-items:center; gap:1.1rem; padding-block:1rem; }
.qr-gate > img{ width:clamp(6rem,13vw,9rem); height:auto;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.42)); }
.qr-gate__txt{ color:var(--wiz-dim); max-width:30rem; line-height:1.55; }
.qr-card{ background:var(--creme); padding:1.1rem; border-radius:1.3rem;
  box-shadow:0 16px 40px rgba(0,0,0,.4); }
.qr-card img{ width:min(62vw,232px); height:auto; display:block; }
.qr-gate__sub{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--or-clair); }

@media (max-width:400px){ .opts--2{ grid-template-columns:1fr; } }