/* CollectioMall — marbre, noir mat, laiton.
   Mobile d'abord : svh pour les pleins écrans, dvh pour les couches fixes, jamais
   de vh nu (la barre d'adresse iOS bouge et coupe le bas de la page). */

:root{
  --marble:#F4F2EE;
  --marble-2:#E7E3DC;
  --ink:#14140F;
  --ink-2:#26251E;
  --brass:#B08D57;
  --brass-lt:#D6B06E;
  --paper:#FBFAF7;
  --muted:#6E6A61;
  --line:rgba(20,20,15,.12);
  --line-lt:rgba(246,242,233,.16);
  --shadow:0 18px 50px rgba(18,16,12,.22);
  --radius:14px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* PIÈGE : une règle de classe (.panel{display:grid}) bat le [hidden]{display:none}
   de la feuille du navigateur. Le panneau reste alors invisible MAIS capte tous les
   taps, et plus rien ne répond sur la page. Cette ligne referme le piège. */
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                    /* aucun débordement latéral, jamais */
  overscroll-behavior:none;
}
body{ position:fixed; inset:0; }        /* la vue 3D ne défile pas */
/* Rien ne se sélectionne au toucher : sans ça, un appui long sur l'en-tête ou la vue
   ouvre la bulle « Copier / Rechercher » d'iOS par-dessus le mall. Les champs de
   saisie restent sélectionnables. */
html,body,.app,canvas,.topbar,.hud,.intro,.pill,.guide,.sheet,.panel{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
input,textarea,[contenteditable]{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
img,svg{ max-width:100%; }

.app{ position:fixed; inset:0; }
#view{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* ---------- barre du haut ---------- */
.topbar{
  position:fixed; z-index:30;
  top:0; left:0; right:0;
  display:flex; align-items:center; gap:10px;
  padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 12px) 10px calc(var(--safe-l) + 12px);
  background:linear-gradient(to bottom,rgba(20,20,15,.82),rgba(20,20,15,.42) 62%,transparent);
  pointer-events:none;
}
.topbar > *{ pointer-events:auto; }

.brand{
  display:flex; align-items:center; gap:10px;
  background:none; border:0; padding:6px; margin:0;
  color:var(--paper); cursor:pointer;
  min-height:44px;
  font-family:var(--sans);
}
.brand-mark{ display:block; height:40px; width:auto; flex:0 0 auto; object-fit:contain; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.brand-txt b{ font-family:'Inter',system-ui,sans-serif; font-size:18px; font-weight:600; letter-spacing:-.01em; color:#F6F2E9; }
.brand-txt i{ font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,242,233,.6); }

.bar-actions{ display:flex; gap:7px; align-items:center; }

/* sélecteur de langue : toujours en haut à droite, y compris sur téléphone où les
   actions descendent en barre basse et laissent la place */
.lang{ margin-left:auto; display:flex; align-items:center; }
.lang select{
  width:auto; min-height:40px; padding:0 30px 0 12px;
  border:1px solid rgba(246,242,233,.26);
  background-color:rgba(20,20,15,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--paper); font:600 12px/1 var(--sans); letter-spacing:.08em;
  border-radius:999px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6B06E' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-position:right 9px center; background-size:15px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 14px;
  border:1px solid rgba(246,242,233,.26);
  background:rgba(20,20,15,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--paper); font:500 13px/1 var(--sans); letter-spacing:.02em;
  border-radius:999px; cursor:pointer;
  transition:border-color .18s, background .18s, color .18s;
}
.pill svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pill.accent{ border-color:var(--brass); color:var(--brass-lt); }
/* l'état actif vaut pour le doigt comme pour la souris : rien en hover seul */
.pill:active{ background:rgba(176,141,87,.24); }
@media (hover:hover) and (pointer:fine){
  .pill:hover{ border-color:var(--brass); color:var(--brass-lt); }
}

/* ---------- couche de jeu ---------- */
.hud{ position:fixed; inset:0; z-index:20; pointer-events:none; }
.hint{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 22px);
  max-width:min(88vw,520px);
  padding:11px 18px;
  background:rgba(20,20,15,.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(176,141,87,.35);
  color:var(--paper); font:400 13.5px/1.5 var(--sans);
  border-radius:999px; text-align:center;
  opacity:0; transition:opacity .35s;
}
.hint.on{ opacity:1; }

/* la consigne du trail */
.guide{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(var(--safe-t) + 74px);
  width:min(92vw,440px);
  pointer-events:auto;
}
.guide-in{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px 11px 14px;
  background:rgba(20,20,15,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(176,141,87,.5);
  border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.4);
}
.guide-ico{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px;
  border-radius:50%; background:rgba(176,141,87,.2); }
.guide-ico svg{ width:19px; height:19px; fill:none; stroke:var(--brass-lt); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.guide-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.guide-txt b{ color:var(--paper); font:600 14px/1.25 var(--sans); }
.guide-txt i{ font-style:normal; color:rgba(246,242,233,.6); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guide-m{ color:var(--brass-lt); font:600 15px/1 var(--sans); white-space:nowrap; }
.guide-x{
  width:32px; height:32px; flex:0 0 32px; margin-left:2px;
  border:0; border-radius:50%; background:rgba(246,242,233,.1);
  color:rgba(246,242,233,.8); font-size:14px; cursor:pointer;
}

.minimap{
  position:absolute;
  right:calc(var(--safe-r) + 14px); bottom:calc(var(--safe-b) + 14px);
  width:110px; height:110px;
  border:1px solid rgba(176,141,87,.4);
  border-radius:50%;
  background:rgba(20,20,15,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* La marche est à GAUCHE (pouce gauche), le regard à DROITE (pouce droit).
   La zone capte tout le bas-gauche ; le socle s'y déplace sous le doigt. */
.stickzone{
  position:absolute;
  left:0; bottom:calc(var(--safe-b) + 8px);
  width:min(46%,240px); height:min(46%,260px);
  pointer-events:auto; touch-action:none;
  display:none;
}
.stick{
  position:absolute;
  left:calc(var(--safe-l) + 22px); bottom:14px;
  width:112px; height:112px;
  border-radius:50%;
  border:1.5px solid rgba(246,242,233,.34);
  background:rgba(20,20,15,.14);
  box-shadow:0 2px 14px rgba(12,12,9,.22);
  touch-action:none;
  transition:border-color .16s, background .16s;
}
.stick.live{ background:rgba(20,20,15,.24); border-color:rgba(214,176,110,.7); }
.stick.fast{ border-color:rgba(255,224,168,.92); box-shadow:0 0 0 3px rgba(214,176,110,.22), 0 2px 14px rgba(12,12,9,.22); }
.stick.fast i{ background:rgba(255,224,168,.6); border-color:rgba(255,242,214,.95); }
.stick i{
  position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%;
  background:rgba(250,247,241,.30);
  border:1.5px solid rgba(250,247,241,.72);
  box-shadow:0 1px 8px rgba(12,12,9,.28);
}
.stick.live i{ background:rgba(214,176,110,.42); border-color:rgba(255,238,206,.9); }
@media (pointer:coarse){
  .stickzone{ display:block; }
  .minimap{ width:92px; height:92px; }
}

/* ---------- l'entrée ---------- */
.intro{
  position:fixed; inset:0; z-index:60;
  min-height:100svh;                     /* svh : pas de saut quand la barre iOS bouge */
  display:grid; place-items:center;
  padding:calc(var(--safe-t) + 26px) calc(var(--safe-r) + 22px) calc(var(--safe-b) + 26px) calc(var(--safe-l) + 22px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(176,141,87,.14), transparent 62%),
    linear-gradient(170deg,#1B1B15 0%,#14140F 58%,#0E0E0A 100%);
  transition:opacity .5s ease, visibility .5s;
  overflow-y:auto;
}
.intro.gone{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-in{ max-width:620px; text-align:center; }
.kicker{
  display:block; margin-bottom:22px;
  color:var(--brass-lt); font:500 11px/1.6 var(--sans);
  letter-spacing:.24em; text-transform:uppercase;
}
.intro h1{
  margin:0 0 20px;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(40px,11vw,74px); line-height:1.02; letter-spacing:.005em;
  color:var(--paper);
}
.lede{
  margin:0 auto 30px; max-width:470px;
  color:rgba(246,242,233,.72); font:400 15.5px/1.68 var(--sans);
}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 34px;
  border:1px solid var(--brass);
  background:var(--brass); color:#14140F;
  font:600 14px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  border-radius:2px; cursor:pointer; text-decoration:none;
  transition:background .2s, color .2s;
}
.cta:active{ background:var(--brass-lt); }
@media (hover:hover) and (pointer:fine){
  .cta:hover{ background:var(--brass-lt); }
}
.mini{ margin:20px 0 0; color:rgba(246,242,233,.42); font:400 12.5px/1.6 var(--sans); }
.preview-note{
  margin:26px auto 0; max-width:400px; padding-top:18px;
  border-top:1px solid rgba(246,242,233,.12);
  color:rgba(246,242,233,.4); font:400 11.5px/1.6 var(--sans);
}

/* ---------- fiche d'une pièce ---------- */
.sheet{
  position:fixed; z-index:50;
  right:calc(var(--safe-r) + 16px); top:calc(var(--safe-t) + 70px);
  width:min(92vw,384px);
  max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 96px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  animation:rise .24s ease-out;
}
@keyframes rise{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
.sheet-close{
  position:absolute; right:10px; top:10px; z-index:2;
  width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(20,20,15,.55); color:#fff; cursor:pointer;
  display:grid; place-items:center;
}
.sheet-close svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.sheet-media{ position:relative; height:132px; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; }
.sheet-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.boost-flag{
  position:absolute; left:12px; bottom:12px;
  padding:5px 11px; border-radius:999px;
  background:rgba(20,20,15,.82); color:var(--brass-lt);
  font:600 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
}
.sheet-body{ padding:18px 20px 22px; }
.tag{
  display:block; margin-bottom:8px;
  color:var(--muted); font:500 11px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase;
}
.sheet h2{ margin:0 0 6px; font-family:var(--serif); font-weight:500; font-size:27px; line-height:1.18; }
.price{ margin:0 0 14px; color:var(--ink); font:600 21px/1 var(--sans); }
.desc{ margin:0 0 16px; color:#4A463E; font:400 14px/1.62 var(--sans); }
.specs{ margin:0 0 16px; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; }
.specs dt{ color:var(--muted); font:500 12px/1.5 var(--sans); letter-spacing:.04em; }
.specs dd{ margin:0; color:var(--ink); font:500 13px/1.5 var(--sans); }
.escrow{
  display:block; padding:12px 14px; margin-bottom:16px;
  background:var(--marble-2); border-left:2px solid var(--brass);
  border-radius:0 6px 6px 0;
}
.escrow b{ display:block; margin-bottom:4px; font:600 12.5px/1.4 var(--sans); }
.escrow span{ color:#55514A; font:400 12.5px/1.58 var(--sans); }
.sheet-actions{ display:flex; flex-direction:column; gap:9px; }
.sheet-actions .cta{ width:100%; }
.ghost{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:46px; padding:0 18px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font:500 13.5px/1 var(--sans); border-radius:2px; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.ghost:active{ background:var(--marble-2); }
@media (hover:hover) and (pointer:fine){ .ghost:hover{ border-color:var(--brass); } }
.ghost.danger{ color:#8E3B2F; }

/* ---------- panneaux ---------- */
.panel{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:end center;
  background:rgba(14,14,10,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:0;
}
.panel-in{
  width:100%; max-width:560px;
  max-height:calc(100dvh - var(--safe-t) - 34px);   /* dvh : la feuille suit la barre iOS */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--paper);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:20px 20px calc(var(--safe-b) + 26px);
  animation:sheetUp .26s ease-out;
}
.panel.wide .panel-in{ max-width:940px; }
@keyframes sheetUp{ from{ transform:translateY(26px); opacity:0;} to{ transform:none; opacity:1;} }
@media (min-width:760px){
  .panel{ place-items:center; padding:24px; }
  .panel-in{ border-radius:var(--radius); max-height:min(86dvh,860px); padding:24px 26px 26px; }
}
.panel-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.panel-head h2{ margin:0; flex:1; font-family:var(--serif); font-weight:500; font-size:25px; line-height:1.2; }
.x{
  width:40px; height:40px; flex:0 0 40px;
  border:1px solid var(--line); background:transparent; border-radius:50%;
  color:var(--muted); font-size:15px; cursor:pointer;
}
.note{ margin:0 0 14px; color:var(--muted); font:400 13px/1.6 var(--sans); }
.warn{
  margin:16px 0 0; padding:11px 13px;
  background:#FBF3E6; border-left:2px solid var(--brass);
  color:#6B5732; font:400 12.5px/1.6 var(--sans);
}

/* champs : 16px minimum, sinon iOS zoome au focus */
input,select,textarea,button{ font-family:var(--sans); }
input[type=search],input[type=text],input:not([type]),textarea,select{
  width:100%; min-height:46px; padding:11px 13px;
  border:1px solid var(--line); border-radius:4px;
  background:#fff; color:var(--ink);
  font-size:16px; line-height:1.4;
  appearance:none; -webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A61' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; background-size:17px;
  padding-right:36px;
}
textarea{ min-height:84px; resize:vertical; }
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

/* ---------- résultats de recherche ---------- */
.results{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.results li{ margin:0; }
.results button{
  display:flex; align-items:center; gap:13px; width:100%;
  min-height:60px; padding:9px 11px;
  border:1px solid transparent; border-radius:8px;
  background:transparent; text-align:left; cursor:pointer;
}
.results button:active{ background:var(--marble-2); }
@media (hover:hover) and (pointer:fine){ .results button:hover{ border-color:var(--line); background:var(--marble); } }
.rs-swatch{ width:42px; height:42px; flex:0 0 42px; border-radius:6px; background-size:cover; background-position:center; }
.rs-txt{ flex:1; min-width:0; }
.rs-txt b{ display:block; font:500 14px/1.35 var(--sans); color:var(--ink); }
.rs-txt i{ display:block; font-style:normal; font:400 12px/1.4 var(--sans); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-go{ color:var(--brass); font:600 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.empty{ padding:22px 4px; color:var(--muted); font:400 13.5px/1.6 var(--sans); }

/* ---------- annuaire ---------- */
.wings{ display:grid; gap:18px; }
.wing{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.wing-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:13px 16px; background:var(--ink); color:var(--paper);
}
.wing-head b{ font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:.08em; }
.wing-head span{ color:rgba(246,242,233,.55); font:400 12px/1.5 var(--sans); }
.wing-body{ display:grid; gap:1px; background:var(--line); }
.store{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:64px; padding:11px 16px;
  border:0; background:var(--paper); text-align:left; cursor:pointer;
}
.store:active{ background:var(--marble); }
@media (hover:hover) and (pointer:fine){ .store:hover{ background:var(--marble); } }
.store-dot{ width:11px; height:11px; flex:0 0 11px; border-radius:50%; }
.store-txt{ flex:1; min-width:0; }
.store-txt b{ display:block; font:500 14.5px/1.35 var(--sans); }
.store-txt i{ display:block; font-style:normal; font:400 12px/1.45 var(--sans); color:var(--muted); margin-bottom:4px; }
.tier-chip{
  padding:4px 9px; border-radius:999px; white-space:nowrap;
  font:600 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
}
.tier-basic{ background:var(--marble-2); color:#5D5950; }
.tier-gold{ background:rgba(176,141,87,.18); color:#7A6134; }
.tier-elite{ background:var(--ink); color:var(--brass-lt); }

/* ---------- filtres et grille ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.chip{
  min-height:38px; padding:0 15px;
  border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--muted);
  font:500 12.5px/1 var(--sans); cursor:pointer;
}
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--brass-lt); }

.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--paper); text-align:left; cursor:pointer; padding:0;
  transition:border-color .18s, transform .18s;
}
.card:active{ transform:scale(.985); }
@media (hover:hover) and (pointer:fine){ .card:hover{ border-color:var(--brass); } }
.card-img{ aspect-ratio:4/3; background-size:cover; background-position:center; position:relative; }
.card-boost{
  position:absolute; right:7px; top:7px;
  padding:3px 8px; border-radius:999px; background:rgba(20,20,15,.82);
  color:var(--brass-lt); font:600 9.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
}
.card-body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:3px; flex:1; }
.card-body b{ font:500 13.5px/1.35 var(--sans); }
.card-body i{ font-style:normal; font:400 11.5px/1.4 var(--sans); color:var(--muted); }
.card-body u{ margin-top:auto; padding-top:7px; text-decoration:none; font:600 14px/1 var(--sans); color:var(--ink); }

/* ---------- paliers ---------- */
.tiers{ display:grid; gap:12px; margin-bottom:22px; }
@media (min-width:720px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
.tier{
  display:flex; flex-direction:column; gap:10px;
  padding:18px 18px 20px;
  border:1px solid var(--line); border-radius:10px;
}
.tier.best{ border-color:var(--brass); box-shadow:0 0 0 1px rgba(176,141,87,.35); }
.tier-name{ font-family:var(--serif); font-size:23px; font-weight:500; letter-spacing:.06em; }
.tier-price{ font:600 15px/1 var(--sans); }
.tier-price em{ font-style:normal; color:var(--muted); font-weight:400; font-size:12.5px; }
.tier ul{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tier li{ display:flex; gap:9px; color:#4A463E; font:400 13px/1.5 var(--sans); }
.tier li::before{ content:"—"; color:var(--brass); flex:0 0 auto; }
.tier-fee{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font:500 13px/1.4 var(--sans); }
.tier-fee em{ font-style:normal; color:var(--muted); font-weight:400; }

.sell-more{ display:grid; gap:16px; padding-top:20px; border-top:1px solid var(--line); }
@media (min-width:720px){ .sell-more{ grid-template-columns:repeat(3,1fr); gap:24px 28px; } }
.sell-more b{ display:block; margin-bottom:5px; font:600 13.5px/1.4 var(--sans); }
.sell-more p{ margin:0; color:#55514A; font:400 13px/1.6 var(--sans); }

/* ---------- back-office ---------- */
.vendor-bar{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; }
.vendor-pick{ flex:1; min-width:200px; font:500 12px/1.6 var(--sans); color:var(--muted); }
.vendor-bar .ghost{ width:auto; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:18px; }
.stat{ background:var(--paper); padding:13px 14px; }
.stat b{ display:block; font:600 19px/1.2 var(--sans); }
.stat i{ font-style:normal; font:400 11px/1.4 var(--sans); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }

.form{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.form label{ display:flex; flex-direction:column; gap:5px; font:500 12px/1.5 var(--sans); color:var(--muted); }
.row{ display:grid; gap:12px; }
@media (min-width:600px){ .row{ grid-template-columns:1fr 1fr; } }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.form-actions .cta,.form-actions .ghost{ width:auto; }
.form-actions.end{ justify-content:flex-end; }
input[type=color]{ width:100%; height:46px; padding:4px; border:1px solid var(--line); border-radius:4px; background:#fff; }
input[type=file]{ font-size:13px; padding:10px 0; border:0; }
.check{ flex-direction:row !important; align-items:center; gap:9px !important; min-height:46px; color:var(--ink) !important; }
.check input{ width:20px; height:20px; min-height:0; flex:0 0 20px; }
.attrs{ border:1px solid var(--line); border-radius:8px; padding:14px 14px 16px; display:grid; gap:12px; }
@media (min-width:600px){ .attrs{ grid-template-columns:1fr 1fr; } }
.attrs legend{ padding:0 7px; font:600 11.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.shop-list{ display:flex; flex-direction:column; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:14px; }
.item{ display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--paper); }
.item-sw{ width:40px; height:40px; flex:0 0 40px; border-radius:5px; background-size:cover; background-position:center; }
.item-txt{ flex:1; min-width:0; }
.item-txt b{ display:block; font:500 13.5px/1.35 var(--sans); }
.item-txt i{ display:block; font-style:normal; font:400 11.5px/1.4 var(--sans); color:var(--muted); }
.item-acts{ display:flex; gap:6px; }
.icon-btn{
  width:40px; height:40px; flex:0 0 40px;
  border:1px solid var(--line); border-radius:6px; background:transparent;
  color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:14px;
}
.icon-btn.on{ border-color:var(--brass); color:var(--brass); background:rgba(176,141,87,.1); }
.shop-foot{ display:flex; gap:10px; flex-wrap:wrap; }
.shop-foot .ghost{ width:auto; }

/* ---------- code promo ---------- */
.coupon{ margin:0 0 18px; }
.coupon label{ display:block; margin-bottom:6px; font:500 12px/1.5 var(--sans); color:var(--muted); }
.coupon-row{ display:flex; gap:8px; }
.coupon-row input{ flex:1; }
.coupon-row .ghost{ width:auto; padding:0 20px; white-space:nowrap; }
.coupon-msg{ margin:9px 0 0; font:500 12.5px/1.5 var(--sans); }
.coupon-msg.ok{ color:#2F6B4F; }
.coupon-msg.no{ color:#8E3B2F; }

/* ---------- litiges ---------- */
.dispute{ margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.dispute summary{
  cursor:pointer; list-style:none; min-height:44px;
  display:flex; align-items:center; gap:8px;
  font:600 13.5px/1.4 var(--sans); color:var(--ink);
}
.dispute summary::-webkit-details-marker{ display:none; }
.dispute summary::before{ content:"＋"; color:var(--brass); font-weight:400; }
.dispute[open] summary::before{ content:"－"; }
.dispute .steps{ margin-top:12px; }

/* ---------- vendeur vérifié ---------- */
.verified{
  display:inline-flex; align-items:center; gap:5px;
  color:#2F6B4F; font:600 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.verified::before{
  content:""; width:13px; height:13px; flex:0 0 13px; border-radius:50%;
  background:#2F6B4F center/9px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
}
.unverified{ color:var(--muted); font:500 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }

/* ---------- achat ---------- */
.buy-item{ display:flex; gap:13px; align-items:center; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.buy-item .rs-swatch{ width:56px; height:56px; flex:0 0 56px; }
.steps{ margin:0 0 18px; padding:0 0 0 22px; display:flex; flex-direction:column; gap:11px; }
.steps li{ color:#4A463E; font:400 13.5px/1.6 var(--sans); }
.steps li b{ color:var(--ink); font-weight:600; }
.buy-split{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.split-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 14px; background:var(--paper);
  font:400 13.5px/1.4 var(--sans); }
.split-row b{ font-weight:600; }
.split-row.total{ background:var(--marble-2); font-weight:600; }

/* ---------- repli ---------- */
.fallback{
  position:fixed; inset:0; z-index:80; overflow-y:auto;
  background:var(--marble);
  padding:calc(var(--safe-t) + 20px) calc(var(--safe-r) + 18px) calc(var(--safe-b) + 32px) calc(var(--safe-l) + 18px);
}
.fb-head{ display:flex; align-items:center; gap:13px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }

.fb-head b{ display:block; font-family:'Inter',system-ui,sans-serif; font-size:21px; font-weight:600; letter-spacing:-.01em; color:#0F4A32; }
.fb-head i{ display:block; font-style:normal; font:400 12.5px/1.5 var(--sans); color:var(--muted); }

/* ---------- chargement ---------- */
.loading{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  min-height:100vh; min-height:100dvh;
  padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background:#14140F; transition:opacity .6s ease, visibility 0s linear .6s;
}
.loading.gone{ opacity:0; visibility:hidden; pointer-events:none; }
.load-in{ width:min(320px, 100%); display:flex; flex-direction:column; align-items:center; text-align:center; }
.load-mark{ display:block; height:84px; width:auto; object-fit:contain; }
.load-name{ margin:20px 0 30px; font:600 28px/1.1 'Inter',system-ui,sans-serif; letter-spacing:-.01em; color:#F2EBDD; }
.load-bar{ width:100%; height:3px; background:rgba(176,141,87,.22); border-radius:2px; overflow:hidden; }
.load-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brass),var(--brass-lt)); transition:width .35s ease-out; }
.load-row{ width:100%; display:flex; justify-content:space-between; margin-top:12px;
  font:500 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:rgba(242,235,221,.62); }
.load-row span:last-child{ font-variant-numeric:tabular-nums; color:var(--brass-lt); }
@keyframes spin{ to{ transform:rotate(360deg);} }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===================== TÉLÉPHONE =====================
   Cinq pilules en haut faisaient 397 px de large sur un écran de 390 : « Sell here »
   et « My store » sortaient de l'écran, sans que rien ne le signale (la barre est en
   position fixe, et overflow-x:hidden avalait la preuve). Sur téléphone, les actions
   descendent en barre basse, là où le pouce va. */
@media (max-width:760px){
  .topbar{
    padding:calc(var(--safe-t) + 8px) 12px 8px 12px;
    background:linear-gradient(to bottom,rgba(20,20,15,.78),transparent);
  }
  .lang{ margin-left:auto; }
  .bar-actions{
    position:fixed;
    left:0; right:0; bottom:0;
    margin:0;
    display:grid; grid-template-columns:repeat(5,1fr);
    gap:0;
    padding:6px calc(var(--safe-l) + 4px) calc(var(--safe-b) + 6px) calc(var(--safe-r) + 4px);
    background:rgba(16,16,12,.92);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid rgba(176,141,87,.28);
  }
  .pill{
    flex-direction:column; gap:3px;
    min-height:54px; padding:6px 2px;
    border:0; background:none; border-radius:10px;
    font-size:10px; letter-spacing:.01em;
    color:rgba(246,242,233,.72);
  }
  .pill svg{ width:21px; height:21px; }
  .pill span{ white-space:nowrap; }
  .pill.accent{ color:var(--brass-lt); }
  .pill:active{ background:rgba(176,141,87,.18); }

  /* la manette et la minimap remontent au-dessus de la barre */
  .stickzone{ bottom:calc(var(--safe-b) + 72px); height:min(42%,230px); }
  .stick{ left:calc(var(--safe-l) + 18px); bottom:12px; width:104px; height:104px; }
  .minimap{ bottom:calc(var(--safe-b) + 84px); right:calc(var(--safe-r) + 12px); }
  .hint{ bottom:calc(var(--safe-b) + 200px); font-size:12.5px; padding:9px 15px; }
  .guide{ top:calc(var(--safe-t) + 62px); width:calc(100vw - 24px); }

  /* la fiche devient une feuille du bas, posée sur la barre d'actions */
  .sheet{
    right:0; left:0; top:auto;
    bottom:calc(var(--safe-b) + 66px);
    width:auto; margin:0 8px;
    max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 214px);  /* la bannière de guidage reste lisible au-dessus */
    border-radius:var(--radius);
  }
  .sheet-media{ height:96px; }
  .sheet-body{ padding:15px 16px 18px; }
  .sheet h2{ font-size:23px; }

  /* les panneaux laissent la barre visible */
  .panel-in{ max-height:calc(100dvh - var(--safe-t) - 28px); padding-bottom:calc(var(--safe-b) + 86px); }
}

/* écran très étroit : les libellés de la barre basse disparaissent, les icônes restent */
@media (max-width:340px){
  .pill span{ display:none; }
  .pill{ min-height:48px; }
}

/* ---------- plan interactif plein écran ---------- */
.planmap{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column;
  background:#12110D; color:#F6F2E9;
  padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 12px);
}
.planmap[hidden]{ display:none; }
.pm-head{ display:flex; align-items:center; gap:10px; }
.pm-head h2{ flex:1; margin:0; font-family:var(--serif); font-weight:500; font-size:24px; }
.pm-list, .pm-x{
  min-height:44px; border:1px solid rgba(176,141,87,.55); border-radius:22px;
  background:rgba(246,242,233,.07); color:#F6F2E9; font:inherit; font-size:14px; padding:0 16px; cursor:pointer;
}
.pm-x{ width:44px; padding:0; font-size:18px; color:#D6B06E; }
.pm-hint{ margin:4px 0 6px; font-size:13px; color:rgba(246,242,233,.66); }
.pm-body{ flex:1; min-height:0; display:grid; place-items:center; }
.pm-body svg{ width:100%; height:100%; max-width:560px; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.pm-env{ fill:#1B1913; stroke:rgba(176,141,87,.5); stroke-width:.35; }
.pm-gallery{ fill:#E9E3D6; }
.pm-wing{ stroke:none; }
.pm-core{ fill:#2A261C; stroke:#B08D57; stroke-width:.3; }
.pm-atrium{ font:600 2.4px var(--serif); fill:#D6B06E; letter-spacing:.3px; }
.pm-lab{ font:600 2.3px sans-serif; fill:#D6B06E; letter-spacing:.3px; }
.pm-wlab{ font:700 1.9px sans-serif; fill:#1A1812; letter-spacing:.25px; pointer-events:none; }
.pm-unit{ stroke:rgba(246,242,233,.55); stroke-width:.25; }
.pm-free .pm-unit{ opacity:.55; }
.pm-name{ font:600 2px sans-serif; fill:#fff; paint-order:stroke; stroke:rgba(10,10,8,.85); stroke-width:.5px; pointer-events:none; }
.pm-kname{ font:600 1.7px sans-serif; fill:#F6F2E9; paint-order:stroke; stroke:rgba(10,10,8,.9); stroke-width:.45px; pointer-events:none; }
.pm-kbg{ fill:rgba(14,14,10,.72); pointer-events:none; }
.pm-hit{ fill:transparent; }
.pm-shop{ cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.pm-shop:focus-visible .pm-unit, .pm-shop:active .pm-unit{ stroke:#FFE8A8; stroke-width:.7; }
@media (hover:hover) and (pointer:fine){ .pm-shop:hover .pm-unit{ stroke:#FFE8A8; stroke-width:.7; } }
.pm-trail{ fill:none; stroke:#D6B06E; stroke-width:.7; stroke-dasharray:1.4 1; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.pm-me{ fill:#fff; pointer-events:none; }
.pm-me-ring{ fill:rgba(255,255,255,.18); stroke:#fff; stroke-width:.3; }
.pm-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; padding-top:6px; font-size:12px; color:rgba(246,242,233,.8); }
.pm-chip{ display:inline-flex; align-items:center; gap:6px; }
.pm-chip i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.pm-chip i.you{ background:#fff; border-radius:50%; }
.minimap{ pointer-events:auto; cursor:pointer; }