/* ══════════════════════════════════════════════════════════════════════════
   Thème « Maison Nina » — IDENTIQUE à app/menu.html (le client passe du QR à
   l'app sans rupture visuelle). Ne pas réinventer la palette ici.
   ══════════════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0D0D0D; --card:#1A1A1A; --card2:#222; --border:#2A2A2A;
  --green:#6B8F71; --green2:#557A5C; --green-pale:rgba(107,143,113,.12);
  --gold:#C9A84C; --gold-pale:rgba(201,168,76,.12);
  --text:#F0EDE8; --muted:#9A9A9A; --dim:#5A5A5A;
  --danger:#B45454; --radius:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
html,body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;
  min-height:100%;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
/* Sur un ORDINATEUR, l'app reste au format téléphone et centrée — sinon le
   dessin s'étire sur 1280 px et ne ressemble plus à rien. */
@media(min-width:540px){
  html{background:#060606}
  body{max-width:430px;margin-inline:auto;box-shadow:0 0 0 1px var(--border),0 0 70px rgba(0,0,0,.7)}
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── barres ── */
#top{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 14px}
.wordmark{display:flex;align-items:center;gap:8px}
.wm-dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--green),var(--green2));
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#0D0D0D}
.wm-txt{font-size:13px;font-weight:600;letter-spacing:.04em}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--border);
  display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--muted)}

#main{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 18px 24px;-webkit-overflow-scrolling:touch}
#main::-webkit-scrollbar{width:0}

/* La carte : même zone de défilement que #main, à côté de lui. L'attribut
   « hidden » ne suffit pas sur un enfant de flex — il faut le dire au display. */
#v-carte{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#v-carte::-webkit-scrollbar{width:0}
#v-carte[hidden]{display:none}
#main[hidden]{display:none}

#tabs{flex-shrink:0;display:flex;border-top:1px solid var(--border);background:rgba(13,13,13,.97);
  backdrop-filter:blur(20px);padding:9px 0 calc(var(--safe-b) + 10px)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;
  color:var(--dim);font-weight:500;padding:2px 0;min-height:44px}
.tab[aria-selected="true"]{color:var(--green)}
.tab svg{width:21px;height:21px}

/* ── blocs communs ── */
.hello{font-family:'Playfair Display',serif;font-size:27px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.hello-sub{font-size:13.5px;color:var(--muted);margin-top:3px;margin-bottom:20px}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.sec-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.sec-a{font-size:12.5px;color:var(--green);font-weight:600}

.live{display:flex;align-items:center;gap:11px;padding:13px 15px;margin-bottom:16px;width:100%;
  background:var(--green-pale);border:1px solid rgba(107,143,113,.32);border-radius:14px;text-align:left}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pl 1.8s ease-in-out infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(107,143,113,.55)}70%{box-shadow:0 0 0 9px rgba(107,143,113,0)}}
.live-txt{flex:1;min-width:0}
.live-t{font-size:13.5px;font-weight:600}
.live-s{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-go{font-size:13px;color:var(--green);font-weight:600;flex-shrink:0}

#scanbtn{position:relative;display:block;width:100%;text-align:left;border-radius:22px;padding:26px 22px;
  margin-bottom:30px;overflow:hidden;background:linear-gradient(150deg,#7A9E80,#4E7156);
  box-shadow:0 16px 34px -14px rgba(107,143,113,.6)}
#scanbtn::after{content:'';position:absolute;inset:0;
  background:radial-gradient(420px 200px at 88% -20%,rgba(255,255,255,.22),transparent 65%)}
#scanbtn:active{transform:scale(.985)}
.scan-in{position:relative;z-index:1;display:flex;align-items:center;gap:20px}
/* Les libellés sont des <span> (on est dans des <button>) : sans ceci ils
   restent en ligne et le prix se colle au nom. */
.scan-t,.scan-s,.v-n,.v-m,.v-p,.again,.live-t,.live-s,.line-t,.line-s,
.pc-n,.pc-s,.live-txt,.line-m,.v-mid,.v-r,.pc-m,.scan-in>span{display:block}

.qr{width:64px;height:64px;flex-shrink:0;position:relative}
.qr span:not(.qr-line){position:absolute;width:20px;height:20px;border:2.5px solid rgba(13,13,13,.68);border-radius:5px}
.qr span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.qr span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.qr span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.qr span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.scan-in>span:last-child{flex:1;min-width:0}
.qr-line{position:absolute;left:5px;right:5px;top:29px;height:2px;background:rgba(13,13,13,.55);
  border-radius:2px;animation:sc 2.6s ease-in-out infinite}
@keyframes sc{0%,100%{transform:translateY(-15px);opacity:.35}50%{transform:translateY(15px);opacity:.95}}
.scan-t{font-family:'Playfair Display',serif;font-size:23px;font-weight:600;color:#0D1A11;letter-spacing:-.01em}
.scan-s{font-size:12.5px;color:rgba(13,26,17,.72);margin-top:5px;line-height:1.45;font-weight:500}

.visit{display:flex;gap:13px;padding:14px;border-radius:15px;background:var(--card);border:1px solid var(--border);
  margin-bottom:10px;align-items:center;width:100%;text-align:left}
.logo{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  font-family:'Playfair Display',serif;font-size:17px;font-weight:600;color:#0D0D0D;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;padding:5px;background:#fff}
.v-mid{flex:1;min-width:0}
.v-n{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-m{font-size:12px;color:var(--muted);margin-top:3px}
.v-r{text-align:right;flex-shrink:0}
.v-p{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.again{font-size:11.5px;color:var(--green);font-weight:600;margin-top:4px}

.pcard{border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border);
  margin-bottom:13px;width:100%;text-align:left;display:block}
.pc-img{height:118px;position:relative;background:linear-gradient(135deg,#3E5646,#1E2821)}
/* C'est un LOGO, pas une photo de salle : on le pose entier, on ne le recadre
   pas (sinon il ressort zoomé et flou, cf. Restaurant Test). */
/* La photo de couverture REMPLIT le bandeau (façon Facebook), elle ne flotte pas
   au milieu avec des marges — c'est l'établissement qu'on veut voir. */
.pc-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Le logo par-dessus, en bas à gauche, comme la photo de profil d'une page. */
.pc-logo{position:absolute;left:12px;bottom:-10px;z-index:3;width:42px;height:42px;
  border-radius:13px;overflow:hidden;background:var(--card2);border:2.5px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:18px;color:var(--text)}
.pc-logo img{width:100%;height:100%;object-fit:cover;padding:0}
/* on laisse la place au logo qui déborde sous le bandeau */
.pcard .pc-b{padding-left:64px}
.pc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(13,13,13,.7))}
.pc-tag{position:absolute;top:11px;left:11px;z-index:2;padding:5px 10px;border-radius:8px;
  background:rgba(13,13,13,.72);backdrop-filter:blur(8px);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;color:var(--gold);border:1px solid rgba(201,168,76,.3)}
.pc-b{padding:13px 15px 15px;display:flex;align-items:center;gap:12px}
.pc-m{flex:1;min-width:0}
.pc-n{font-family:'Playfair Display',serif;font-size:17.5px;font-weight:500}
.pc-s{font-size:12px;color:var(--muted);margin-top:4px}
.pc-btn{padding:10px 16px;border-radius:11px;background:var(--green);color:#0D1A11;font-size:13px;
  font-weight:600;flex-shrink:0}

.line{display:flex;align-items:center;gap:13px;padding:15px 16px;background:var(--card);
  border:1px solid var(--border);border-radius:14px;margin-bottom:10px;width:100%;text-align:left;min-height:44px}
.li{width:34px;height:34px;border-radius:10px;background:var(--card2);display:grid;place-items:center;
  font-size:15px;flex-shrink:0}
.line-m{flex:1;min-width:0}
.line-t{font-size:14px;font-weight:500}
.line-s{font-size:12px;color:var(--muted);margin-top:2px}
.chev{color:var(--dim);font-size:16px}
.sw{width:42px;height:25px;border-radius:13px;background:var(--card2);border:1px solid var(--border);
  position:relative;flex-shrink:0;transition:background .2s,border-color .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:var(--dim);transition:left .2s,background .2s}
.sw[aria-checked="true"]{background:var(--green-pale);border-color:var(--green)}
.sw[aria-checked="true"]::after{left:20px;background:var(--green)}

.privacy{background:var(--gold-pale);border:1px solid rgba(201,168,76,.28);border-radius:var(--radius);
  padding:17px;margin-bottom:12px}
.pv-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pv-h b{font-size:13px;font-weight:600;color:var(--gold);letter-spacing:.02em}
.pv-p{font-size:12.5px;color:#D8D2C6;line-height:1.62}
.pv-p em{color:var(--gold);font-style:normal;font-weight:600}

.me{text-align:center;padding:8px 0 22px}
.me-av{width:66px;height:66px;border-radius:50%;margin:0 auto 13px;
  background:linear-gradient(140deg,var(--green),var(--green2));display:grid;place-items:center;
  font-family:'Playfair Display',serif;font-size:25px;font-weight:600;color:#0D1A11}
.me-n{font-family:'Playfair Display',serif;font-size:22px;font-weight:500}
.me-e{font-size:13px;color:var(--muted);margin-top:4px}
.stats{display:flex;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 0;margin-bottom:22px}
.st{flex:1;text-align:center;position:relative}
.st+.st::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--border)}
.st-v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.st-l{font-size:10.5px;color:var(--dim);margin-top:4px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.danger-txt{font-size:12.5px;color:var(--danger);text-align:center;padding:18px 0 8px;font-weight:500;width:100%}

.empty{text-align:center;padding:44px 24px}
.empty-i{font-size:40px;opacity:.5;margin-bottom:14px}
.empty-t{font-family:'Playfair Display',serif;font-size:19px;font-weight:500;margin-bottom:8px}
.empty-s{font-size:13px;color:var(--muted);line-height:1.6}
.skel{height:118px;border-radius:var(--radius);background:linear-gradient(100deg,var(--card) 30%,var(--card2) 50%,var(--card) 70%);
  background-size:220% 100%;animation:sk 1.3s linear infinite;margin-bottom:13px}
@keyframes sk{to{background-position:-120% 0}}

/* ── scanner ── */
#scan{position:fixed;inset:0;z-index:200;background:#000;display:none;flex-direction:column}
#scan.on{display:flex}
#scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-mask{position:absolute;inset:0;background:rgba(0,0,0,.58);
  -webkit-mask:radial-gradient(circle at 50% 42%,transparent 0 128px,#000 129px);
          mask:radial-gradient(circle at 50% 42%,transparent 0 128px,#000 129px)}
.sc-top{position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 0}
.sc-x{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
  display:grid;place-items:center;font-size:19px;color:#fff}
.sc-h{color:#fff;font-size:15px;font-weight:600}
.sc-b{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 22px calc(var(--safe-b) + 28px);text-align:center}
.sc-hint{color:#EDEDED;font-size:14px;line-height:1.55;margin-bottom:18px}
.btn{display:block;width:100%;padding:15px;border-radius:13px;text-align:center;font-size:14.5px;
  font-weight:600;margin-bottom:10px;min-height:44px}
.btn-g{background:var(--green);color:#0D1A11}
.btn-o{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-w{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px)}

#toast{position:fixed;left:16px;right:16px;bottom:calc(var(--safe-b) + 84px);z-index:300;
  background:var(--card2);border:1px solid var(--border);border-radius:13px;padding:13px 16px;
  font-size:13.5px;box-shadow:0 14px 34px rgba(0,0,0,.6);opacity:0;transform:translateY(12px);
  transition:opacity .22s,transform .22s;pointer-events:none}
#toast.on{opacity:1;transform:none}
#toast.warn{border-color:rgba(201,168,76,.4)}
#toast.err{border-color:rgba(180,84,84,.5)}

/* ══ SUIVI DE COMMANDE — écrans 02 / 10 / 11 de la maquette ══ */
.state{text-align:center;padding:12px 0 24px}
.state-lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.state-big{font-family:'Playfair Display',serif;font-size:31px;font-weight:500;color:var(--green);
  margin-top:9px;letter-spacing:-.01em;line-height:1.15}
.state-eta{font-size:13px;color:var(--muted);margin-top:7px}
.steps{display:flex;padding:0 6px;margin-bottom:26px}
.step{flex:1;text-align:center;position:relative}
.step::before{content:'';position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--border)}
.step:first-child::before{display:none}
.step.done::before{background:var(--green)}
.dot{width:24px;height:24px;border-radius:50%;margin:0 auto 9px;background:var(--card2);
  border:2px solid var(--border);display:grid;place-items:center;position:relative;z-index:1;
  font-size:11px;color:var(--dim)}
.step.done .dot{background:var(--green);border-color:var(--green);color:#0D0D0D;font-weight:700}
.step.now .dot{background:var(--bg);border-color:var(--green);box-shadow:0 0 0 4px var(--green-pale)}
.step.now .dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--green);
  animation:pl 1.8s ease-in-out infinite}
.step-l{font-size:11.5px;color:var(--dim);font-weight:500}
.step.done .step-l,.step.now .step-l{color:var(--text)}

.tick{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:13px}
.trow{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font-size:14px}
.trow+.trow{border-top:1px solid rgba(42,42,42,.6)}
.trow .q{color:var(--gold);font-weight:600;margin-right:7px;font-variant-numeric:tabular-nums}
.trow .pr{font-variant-numeric:tabular-nums;color:var(--muted)}
.trow.fee{font-size:12.5px;color:var(--dim)}
.trow.fee .pr{color:var(--dim)}
.trow.tot{border-top:1px solid var(--border);margin-top:5px;padding-top:13px;font-size:16px;font-weight:600}
.trow.tot .pr{color:var(--text);font-weight:600}

.cashbar{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:15px;
  background:var(--gold-pale);border:1px solid rgba(201,168,76,.3);margin-bottom:14px}
.cb-ic{font-size:19px;flex-shrink:0}
.cb-m{flex:1;min-width:0}
.cb-t{font-size:14px;font-weight:600;color:var(--gold)}
.cb-s{font-size:12px;color:#C4BAA2;margin-top:3px;line-height:1.4}
.cb-p{font-size:16px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;flex-shrink:0}

.bignum{text-align:center;padding:2px 0 22px}
.bn-l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.bn-v{font-family:'Playfair Display',serif;font-size:56px;font-weight:600;color:var(--gold);
  letter-spacing:.02em;line-height:1.1;margin-top:8px;font-variant-numeric:tabular-nums}
.bn-s{font-size:13px;color:var(--muted);margin-top:6px}
.foot-note{text-align:center;font-size:12px;color:var(--dim);padding:8px 10px 24px;line-height:1.6}

/* ══ FICHE ÉTABLISSEMENT — écran 05 ══ */
.cover{height:190px;position:relative;flex-shrink:0;margin:0 -18px 0;
  background:linear-gradient(135deg,#3E5646,#1B231D)}
/* Le bandeau = une PHOTO du lieu (celle de la salle). Jamais le logo étiré :
   posé en plein écran sur du blanc, il écrase l'écran et casse le thème. */
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,13,.3) 0%,transparent 38%,rgba(13,13,13,.94))}
.cv-back{position:absolute;top:14px;left:14px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(13,13,13,.6);backdrop-filter:blur(10px);display:grid;place-items:center;font-size:17px}
.cv-b{position:absolute;bottom:12px;left:18px;right:18px;z-index:3;display:flex;align-items:flex-end;gap:12px}
.cv-logo{width:50px;height:50px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  font-family:'Playfair Display',serif;font-size:19px;font-weight:600;color:#0D0D0D;
  border:2px solid rgba(13,13,13,.5);overflow:hidden}
.cv-logo img{width:100%;height:100%;object-fit:contain;padding:4px;background:#fff}
.cv-n{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;line-height:1.15}
.cv-s{font-size:12.5px;color:#BDBDBD;margin-top:4px}
.infoline{display:flex;gap:11px;padding:12px 0;font-size:13.5px;align-items:flex-start;width:100%;text-align:left}
.infoline+.infoline{border-top:1px solid rgba(42,42,42,.6)}
.if-i{width:20px;text-align:center;flex-shrink:0;opacity:.75}
.if-t{flex:1;min-width:0}
.if-t small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ══ RÉSERVER SUR PHOTO — écran 06 ══ */
.pickrow{display:flex;gap:9px;margin-bottom:9px}
/* ⛔ LA RANGÉE D'HEURES DOIT DÉFILER. Avec les services du gérant (brunch + midi +
   soir), il peut y avoir dix créneaux. En flex:1 sans retour à la ligne, ils sont
   écrasés puis COUPÉS par #main{overflow-x:hidden} : les heures du soir n'existaient
   simplement plus à l'écran, ni visibles ni atteignables. */
.pickrow.scroll{overflow-x:auto;margin:0 -18px 9px;padding:0 18px 4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pickrow.scroll::-webkit-scrollbar{height:0}
.pickrow.scroll .pick{flex:0 0 auto;min-width:78px;scroll-snap-align:start}
.pick{flex:1;padding:13px 6px;border-radius:13px;background:var(--card);border:1px solid var(--border);text-align:center}
.pick[aria-pressed="true"]{background:var(--green-pale);border-color:var(--green)}
.pk-v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;display:block}
.pick[aria-pressed="true"] .pk-v{color:var(--green)}
.pk-l{font-size:10.5px;color:var(--dim);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;display:block}
.zonestrip{display:flex;gap:9px;overflow-x:auto;margin:0 -18px 13px;padding:0 18px 4px}
.zonestrip::-webkit-scrollbar{height:0}
.zt{width:106px;flex-shrink:0;border-radius:13px;overflow:hidden;border:1.5px solid var(--border);background:var(--card)}
.zt[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}
.zt-img{height:60px;background:linear-gradient(135deg,#3E5646,#1B231D);display:block}
.zt-img img{width:100%;height:100%;object-fit:cover}
.zt-l{padding:8px 9px 9px;text-align:center;font-size:11.5px;font-weight:600;display:block}
.zt-l small{display:block;color:var(--muted);font-size:10.5px;font-weight:500;margin-top:2px}
.zt[aria-pressed="true"] .zt-l{color:var(--green)}
.photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  margin-bottom:11px;background:linear-gradient(168deg,#54402F,#1A120C);min-height:180px}
.photo img{width:100%;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;
  font-weight:700;backdrop-filter:blur(3px);z-index:2;line-height:1}
.pin.free{width:38px;height:38px;font-size:12px;background:rgba(107,143,113,.62);
  border:2px solid rgba(190,215,194,.85);color:#E4EDE5}
.pin.busy{width:34px;height:34px;font-size:11.5px;background:rgba(176,84,84,.58);
  border:2px solid rgba(190,120,120,.5);color:#C79191;opacity:.72}
.pin.sel{width:48px;height:48px;font-size:14px;background:var(--green);border:2.5px solid #E2EFE4;
  color:#0D1A11;box-shadow:0 0 0 7px rgba(107,143,113,.28),0 10px 24px rgba(0,0,0,.55)}
.pin small{display:block;font-size:8px;font-weight:600;opacity:.85}
.ph-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:24px 14px 10px;font-size:11.5px;
  color:#CBCBCB;background:linear-gradient(180deg,transparent,rgba(10,10,10,.88))}
.legend{display:flex;gap:16px;justify-content:center;font-size:11px;color:var(--dim);margin-bottom:14px}
.lg{display:flex;align-items:center;gap:6px}
.lg i{width:11px;height:11px;border-radius:50%;display:block}
.lg.f i{background:rgba(107,143,113,.62);border:2px solid rgba(190,215,194,.85)}
.lg.b i{background:rgba(176,84,84,.58);border:2px solid rgba(190,120,120,.7)}
.lg.s i{background:var(--green);border:2px solid #E2EFE4}
#sticky{flex-shrink:0;padding:13px 18px calc(var(--safe-b) + 12px);border-top:1px solid var(--border);
  background:rgba(13,13,13,.97);backdrop-filter:blur(20px);display:none}
#sticky.on{display:block}
.sk-l{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:13px}
.sk-l b{font-weight:600}
.sk-l span{color:var(--muted)}

/* ══ ÉCRAN 07 — feuille « installer l'application » ══ */
#sheetwrap{position:fixed;inset:0;z-index:250;display:none}
#sheetwrap.on{display:block}
#sheetbg{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
  animation:fade .3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
#sheet{position:absolute;left:0;right:0;bottom:0;max-width:430px;margin:0 auto;
  background:var(--card);border:1px solid var(--border);border-bottom:0;
  border-radius:26px 26px 0 0;padding:10px 20px calc(var(--safe-b) + 24px);
  box-shadow:0 -22px 50px rgba(0,0,0,.6);animation:up .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.grab{width:38px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 18px}
.sh-ico{width:52px;height:52px;border-radius:16px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--green),var(--green2));display:grid;place-items:center;font-size:22px}
.sh-t{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;text-align:center;
  line-height:1.25;margin-bottom:8px}
.sh-s{font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6;margin-bottom:18px}
.perk{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:13.5px}
.perk i{color:var(--green);font-style:normal;font-weight:700;flex-shrink:0}
.perk small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.45}

.mini-btn{flex:1;padding:11px;border-radius:11px;text-align:center;font-size:13px;font-weight:600}
.mb-g{background:var(--green);color:#0D1A11}
.mb-o{background:transparent;border:1px solid var(--border);color:var(--text)}
.been{font-size:11px;color:var(--gold);font-weight:600}
.cv-heart{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(13,13,13,.6);backdrop-filter:blur(10px);display:grid;place-items:center;font-size:15px}
.rv{animation:rv .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes rv{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* La prochaine réservation : la même carte qu'un passage, mais elle attire l'œil —
   c'est l'information la plus utile de la journée. */
.visit.resa-next{background:var(--green-pale);border-color:rgba(107,143,113,.32)}

/* ── Découvrir : une grille de carrés ─────────────────────────────────────
   Une liste de cartes pleine largeur devient vite un mur. En carrés, l'œil
   balaie et compare. L'accueil garde les cartes larges : il n'en montre que
   deux, et elles doivent attirer. */
.disc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tuile{border-radius:var(--radius);overflow:hidden;background:var(--card);
  border:1px solid var(--border);text-align:left;display:block}
.tu-img{display:block;position:relative;aspect-ratio:1;
  background:linear-gradient(135deg,#3E5646,#1E2821)}
.tu-img img{width:100%;height:100%;object-fit:cover;display:block}
.tu-logo{position:absolute;left:9px;bottom:9px;width:34px;height:34px;border-radius:10px;
  overflow:hidden;background:var(--card2);border:2px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:15px;color:var(--text)}
.tu-logo img{width:100%;height:100%;object-fit:cover}
.tu-b{display:block;padding:10px 11px 12px}
.tu-n{display:block;font-size:13.5px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tu-s{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Annuler une réservation : discret, mais toujours atteignable — on ne cache pas
   à quelqu'un le moyen de défaire ce qu'il a fait. */
.annul{display:block;margin-top:5px;font-size:11.5px;color:var(--danger);font-weight:600}

/* ── La fenêtre de saisie de l'APP ─────────────────────────────────────────
   Elle remplace le prompt() du navigateur. Une boîte grise du système au milieu
   d'une application noire, c'est exactement la rupture que Katia a signalée :
   le client a l'impression d'avoir quitté l'app.
   Un seul exemplaire, construit à la demande et réutilisé. */
#askwrap{position:fixed;inset:0;z-index:400;display:none}
#askwrap.on{display:block}
#askbg{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(3px);animation:fade .18s}
#askbox{position:absolute;left:18px;right:18px;top:50%;transform:translateY(-50%);
  max-width:394px;margin:0 auto;background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:20px 18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:askpop .2s cubic-bezier(.2,.9,.3,1.25)}
@keyframes askpop{from{opacity:0;transform:translateY(-50%) scale(.94)}
                  to{opacity:1;transform:translateY(-50%) scale(1)}}
#ask-t{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
#ask-s{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.55}
#ask-i{width:100%;height:50px;margin-top:15px;background:var(--card2);
  border:1.5px solid var(--border);border-radius:13px;padding:0 14px;
  font-family:inherit;font-size:15.5px;color:var(--text)}
#ask-i::placeholder{color:var(--dim)}
#ask-i:focus{outline:none;border-color:var(--green);background:#262626}
#ask-e{display:none;margin-top:9px;font-size:12.5px;color:var(--danger)}
#ask-e.on{display:block}
.ask-btns{display:flex;gap:9px;margin-top:15px}
.ask-btns button{flex:1;height:47px;border-radius:13px;font-size:14.5px;font-weight:600}
#ask-no{background:var(--card2);border:1px solid var(--border);color:var(--muted)}
#ask-ok{background:var(--green);color:#0D0D0D}
#ask-ok:active{background:var(--green2)}
/* L'email pas encore renseigné : une invitation, pas une valeur. */
.line-s.vide{color:var(--green);font-weight:500}

/* ── AJOUTER UNE CARTE ─────────────────────────────────────────────────────
   Le champ de Stripe est un iframe : sa couleur de texte se déclare en JS
   (voir ajouterCarte). Ici on n'habille que ce qui l'entoure. */
#cartewrap{position:fixed;inset:0;z-index:410;display:none}
#cartewrap.on{display:block}
#cw-bg{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(3px);animation:fade .18s}
#cw-box{position:absolute;left:18px;right:18px;top:50%;transform:translateY(-50%);
  max-width:394px;margin:0 auto;background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:20px 18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:askpop .2s cubic-bezier(.2,.9,.3,1.25)}
#cw-t{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
#cw-s{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.55}
#cw-champ{margin-top:15px;background:var(--card2);border:1.5px solid var(--border);
  border-radius:13px;padding:15px 14px;transition:border-color .15s}
#cw-champ.StripeElement--focus{border-color:var(--green);background:#262626}
#cw-champ.StripeElement--invalid{border-color:var(--danger)}
#cw-err{display:none;margin-top:9px;font-size:12.5px;color:var(--danger);line-height:1.5}
#cw-err.on{display:block}
#cw-no{background:var(--card2);border:1px solid var(--border);color:var(--muted)}
#cw-ok{background:var(--green);color:#0D0D0D}
#cw-ok:disabled{background:var(--card2);color:var(--dim);cursor:default}
/* Le lien vers la politique de confidentialité, dans le bloc « Vos données ». */
.pv-lien{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;
  color:var(--gold);text-decoration:none}