/* ===== Panel gérant ===== */
body.admin{background:var(--cream)}
.adm-top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:10px}
.adm-top h1{font-size:20px}
.adm-main{padding:16px 16px 26px;max-width:1180px;margin:0 auto}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:16px}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--sh-s)}
.kpi .lb{font-size:11.5px;color:var(--ink-3);font-weight:650;text-transform:uppercase;letter-spacing:.04em}
.kpi .vl{font-size:24px;font-weight:750;font-family:var(--serif);margin-top:4px;letter-spacing:-.02em}
.kpi .ev{font-size:11.5px;font-weight:700;margin-top:4px;display:inline-flex;gap:4px;align-items:center}
.ev.up{color:var(--ok)} .ev.down{color:var(--err)} .ev.flat{color:var(--ink-3)}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--sh-s);margin-bottom:14px}
.panel h3{margin-bottom:12px;font-size:16px}
.panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cols{display:grid;gap:14px}
@media(min-width:900px){.cols.two{grid-template-columns:1.35fr 1fr}.cols.three{grid-template-columns:repeat(3,1fr)}}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding:8px 6px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 6px;border-bottom:1px solid #F7EDE4;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr[data-click]{cursor:pointer}
.tbl tr[data-click]:hover{background:#FFF8F2}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700}
.mini{width:34px;height:34px;border-radius:11px;background:var(--cream-2);display:grid;place-items:center;flex:none}
.mini svg{width:88%;height:88%}
.mini .photo-frame{width:88%;height:88%}
.seg{display:flex;gap:4px;background:var(--cream-2);border-radius:14px;padding:3px}
.seg button{flex:1;padding:7px 10px;border-radius:11px;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.seg button.on{background:#fff;box-shadow:var(--sh-s);color:var(--ink)}
.rowline{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #F7EDE4}
.rowline:last-child{border-bottom:0}
.swatch-pick{display:flex;gap:8px;flex-wrap:wrap}
.swatch-pick button{width:36px;height:36px;border-radius:12px;border:2px solid transparent}
.swatch-pick button.on{border-color:var(--ink)}
.shape-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shape-pick button{background:var(--cream-2);border-radius:14px;padding:6px;border:2px solid transparent}
.shape-pick button.on{border-color:var(--ink);background:#fff}
.shape-pick svg{width:100%;height:auto}
.chip-st{padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:650;background:#fff;border:1px solid var(--line);white-space:nowrap}
.chip-st.on{background:var(--fort);color:#fff;border-color:var(--fort)}
.fab{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:45;width:56px;height:56px;border-radius:20px;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));color:#fff;display:grid;place-items:center;box-shadow:var(--sh-l)}
@media(min-width:1000px){.fab{bottom:26px}}
.alert{display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:16px;font-size:13.5px;margin-bottom:9px}
.alert.warn{background:#FEF3E2;color:#8A5A16}
.alert.err{background:#FDECEC;color:#992B2B}
.alert.ok{background:#E8F7EF;color:#1F6B45}
.ticket{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;background:#fff;
  border:1px dashed var(--line-2);border-radius:14px;padding:14px}
@media print{body.admin{padding:0;background:#fff}.adm-top,.adm-nav,.fab,.sheet-bg{display:none!important}
  .sheet{position:static!important;transform:none!important;max-height:none;box-shadow:none;border-radius:0;opacity:1!important;margin:0!important;max-width:none!important}}
.seg button{white-space:nowrap}
.adm-top .seg{flex:none}
.rowline .mini{cursor:inherit}
.prow{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #F7EDE4}
.prow:last-of-type{border-bottom:0}
.pinfo{flex:1;min-width:0}
.pinfo b{font-size:14px;display:block;line-height:1.3}
.pactions{display:flex;align-items:center;gap:7px;flex:none}
.pactions input{width:58px;padding:7px 4px;text-align:center;font-size:13px}
.pactions .btn.sm{padding:8px 10px;font-size:12px}
.sheet .rowline{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sheet .rowline svg{width:20px;height:20px;color:var(--ink-2)}
.prod-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #F7EDE4}
.prod-item.done{opacity:.45}
.prod-item.done b{text-decoration:line-through}
.tick{width:30px;height:30px;border-radius:10px;border:2px solid var(--line-2);display:grid;place-items:center;flex:none;background:#fff}
.tick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.qty-big{font-family:var(--serif);font-size:22px;font-weight:700;min-width:38px;text-align:right}

/* ---------- planning de la semaine ----------
   Empilé (1 colonne) tant que l'écran est étroit, en grille 7 colonnes à
   partir de 900px — même palier que .cols.two ailleurs dans ce fichier. */
.planning-grid{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:900px){.planning-grid{grid-template-columns:repeat(7,1fr)}}
.plan-day{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--sh-s);min-height:64px}
.plan-day.today{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.plan-day-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:650;margin-bottom:8px}
.plan-day-h b{font-family:var(--serif);font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0;margin-left:4px}
.plan-card{background:var(--cream-2);border-radius:12px;padding:8px 10px;margin-bottom:6px;cursor:pointer}
.plan-card:last-child{margin-bottom:0}
.plan-card b{font-size:12.5px}

/* ---------- sélecteur de thème de couleurs ----------
   UNE SEULE LIGNE PAR FAMILLE, qui se fait glisser vers la droite — même
   geste que la bande des cadres d'articles juste en dessous. En grille, les
   couleurs poussaient tout le reste des Réglages plusieurs écrans plus bas,
   et le problème empirait à chaque palette ajoutée ; en bande, en ajouter
   ne coûte plus une seule ligne de hauteur.
   Format resserré : la pastille et le « Aa » sur la même ligne, le nom
   dessous. Le « Aa » reste — posé sur le crème du thème et peint de son
   accent, c'est lui qui montre que le texte restera lisible. */
.theme-pick{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 -14px;padding:6px 14px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.theme-pick::-webkit-scrollbar{display:none}
/* La teinte du liseré arrive par --tp-line (voir themeGroup dans js/admin.js)
   et NON par un `border-color` en style inline : une déclaration inline
   l'emporte sur toute règle de feuille, donc `.on` ci-dessous n'était jamais
   appliquée et AUCUNE tuile ne montrait la couleur active. Invisible tant
   que les palettes tenaient sur deux lignes — impossible à deviner depuis
   qu'elles défilent, où l'on n'en voit que cinq sur vingt-trois. */
.theme-pick button{flex:0 0 96px;scroll-snap-align:start;
  position:relative;border:2px solid var(--tp-line,transparent);border-radius:12px;padding:8px 6px 7px;
  display:block;text-align:center;transition:transform .14s}
.theme-pick button.on{border-color:#2B1A12;box-shadow:0 0 0 1px #2B1A12 inset}
.theme-pick button:active{transform:scale(.96)}
.theme-pick button:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}
/* Pastille et « Aa » en flux sur une même ligne, libellé dessous : en grille,
   un nom long (« Sauge sobre ») élargissait les colonnes et décalait la
   pastille d'une tuile à l'autre. */
.theme-pick .tp-dot{display:inline-block;vertical-align:middle;width:14px;height:14px;
  border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.theme-pick .tp-aa{display:inline-block;vertical-align:middle;font-family:var(--serif);
  font-weight:700;font-size:13px;margin:0 0 0 6px}
.theme-pick .tp-label{display:block;margin-top:2px;font-size:10.5px;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sélecteur de couleurs COMPACT (colorGrid, js/admin.js) : petites pastilles
   rondes, toutes visibles, sans catégories. Sélection = anneau à la couleur
   + coche. --sw = teinte, --swl = liseré discret. */
.col-pick{display:flex;flex-wrap:wrap;gap:11px;margin:2px 0;padding:2px 0}
.col-pick button{position:relative;width:30px;height:30px;border-radius:50%;background:var(--sw);
  border:2px solid #fff;box-shadow:0 0 0 1px var(--swl,rgba(0,0,0,.12)),0 2px 5px rgba(0,0,0,.16);
  padding:0;cursor:pointer;transition:transform .12s}
.col-pick button:hover{transform:scale(1.14)}
.col-pick button:focus-visible{outline:none;transform:scale(1.14)}
.col-pick button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sw)}
.col-pick .sw-ck{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:900;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.col-pick button.on .sw-ck{display:flex}
/* Pastille « Défaut » (= couleur du thème) : pilule texte, pas de rond coloré. */
.col-pick button.def{width:auto;height:30px;border-radius:15px;padding:0 13px;background:#fff;
  color:var(--ink-3,#77614c);font-size:11px;font-weight:700;
  box-shadow:0 0 0 1px var(--line-2,#e5d8c6),0 2px 5px rgba(0,0,0,.1)}
.col-pick button.def.on{color:var(--ink,#2b1a12);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink,#2b1a12)}
/* Sélecteur de police : vignettes, chaque nom écrit DANS sa police. */
.font-pick{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0}
.font-pick .fp-item{padding:9px 14px;border-radius:12px;border:1.5px solid var(--line-2,#e5d8c6);
  background:#fff;font-size:17px;line-height:1.15;color:var(--ink,#2b1a12);cursor:pointer;
  transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.font-pick .fp-item:hover{border-color:var(--acc)}
.font-pick .fp-item.on{border-color:var(--acc);background:var(--acc-l);box-shadow:0 0 0 1px var(--acc) inset}
/* Modèles de bannière désactivés quand une image de fond est active. */
.hero-pick.off{opacity:.45;pointer-events:none;filter:grayscale(.35)}

/* ---- disposition « Bannière d'accueil » (grande preview + style repliable) ---- */
.hero-cfg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hero-cfg-head h3{margin:0}
.hero-cfg{display:flex;gap:16px;align-items:stretch}
.hero-cfg-prev{flex:1;min-width:0;border-radius:16px;overflow:hidden;background:var(--cream-2,#f1e7dc);
  padding:14px;pointer-events:none;display:flex;align-items:center}
.hero-cfg-prev .hero{padding:0;max-width:none;margin:0;width:100%}
.hero-cfg-side{flex:0 0 180px;display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:center}
.hero-cfg-side .btn{width:100%;justify-content:center}
.hero-mini{display:flex;flex-wrap:wrap;gap:6px;cursor:pointer}
.hero-mini-sw{width:28px;height:19px;border-radius:5px;background:var(--card,#fff);border:1px solid var(--line-2,#e0d2c0)}
.hero-mini-sw:nth-child(2n){background:var(--cream-2,#eaded0)}
.hero-mini-sw.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.hero-mini-more{min-width:28px;height:19px;border-radius:5px;padding:0 6px;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--ink-3);background:var(--cream,#faf4ee);border:1px solid var(--line-2)}
.hero-styles-pop{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .35s ease,opacity .25s,margin .35s}
.hero-cfg-wrap:hover .hero-styles-pop,.hero-styles-pop.open{max-height:1600px;opacity:1;margin:14px 0 0}
.hero-texts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-texts .input{flex:1;min-width:150px}
.hero-foot{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.hero-adv{flex:1;min-width:0}
.hero-adv>summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px;padding:6px 0}
.hero-adv>summary::-webkit-details-marker{display:none}
.hero-adv>summary::before{content:'▸';transition:transform .2s;color:var(--ink-3)}
.hero-adv[open]>summary::before{transform:rotate(90deg)}
.hero-adv-body{padding-top:6px}
.hero-foot .btn.primary{flex:0 0 auto;white-space:nowrap}
@media(max-width:640px){.hero-cfg{flex-direction:column}.hero-cfg-side{flex-basis:auto}}

/* ---- Livraison / Retrait en onglets ---- */
.liv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.seg{display:inline-flex;background:var(--cream-2,#efe6db);border-radius:12px;padding:4px;gap:2px}
.seg-btn{border:0;background:transparent;padding:8px 16px;border-radius:9px;font-weight:700;font-size:14px;
  color:var(--ink-3,#77614c);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.seg-btn.on{background:#fff;color:var(--ink,#2b1a12);box-shadow:var(--sh-s,0 1px 3px rgba(0,0,0,.12))}
.liv-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2,#d8cbb8)}
.liv-dot.on{background:var(--ok,#3c8f57)}
.liv-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-weight:700;font-size:14px;color:var(--ink,#2b1a12)}
.liv-switch input{position:absolute;opacity:0;width:0;height:0}
.liv-switch .sw-track{width:44px;height:26px;border-radius:99px;background:var(--line-2,#d8cbb8);position:relative;transition:background .2s;flex:none}
.liv-switch .sw-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.liv-switch input:checked + .sw-track{background:var(--ok,#3c8f57)}
.liv-switch input:checked + .sw-track::after{transform:translateX(18px)}
.liv-switch input:focus-visible + .sw-track{outline:2px solid var(--acc);outline-offset:2px}

/* Inscription : champ requis laissé vide au clic sur « Créer ma boutique ». */
.input.champ-manque{border-color:var(--err,#c0392b)!important;background:#fff6f5}

/* ---------- choix du cadre des articles ----------
   Chaque case contient une vraie carte produit (voir cardPreview() dans
   js/admin.js). pointer-events:none sur l'aperçu est indispensable : la
   carte contient de vrais liens vers la fiche produit et un bouton
   « ajouter au panier » — sans ça, choisir un cadre quitterait les
   Réglages ou remplirait le panier du gérant. */
/* Une seule ligne qui se fait glisser : les dix cadres se comparent en
   balayant vers la droite, sans faire descendre le reste des Réglages de
   plusieurs écrans. Les marges négatives font filer la bande jusqu'aux bords
   du panneau, pour qu'on voie qu'elle continue au-delà. */
/* padding-top de 6px, pas 2 : overflow-x:auto force overflow-y à « auto »
   côté navigateur, et le liseré de focus clavier (outline-offset:2px) se
   faisait rogner par le bord haut de la bande. */
.card-pick{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 -14px;padding:6px 14px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.card-pick::-webkit-scrollbar{display:none}
/* 200 px : en dessous, sur un article en promotion, le prix barré et le
   bouton « ajouter » ne tiennent plus sur la même ligne DANS L'APERÇU (la
   vraie carte, elle, est plus large et va très bien) — et une carte qui a
   l'air cassée dans le sélecteur décourage d'essayer le cadre. */
.card-pick .cp-item{flex:0 0 200px;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;
  padding:10px;border:2px solid transparent;border-radius:16px;background:var(--cream);text-align:left;
  cursor:pointer;transition:transform .14s,border-color .14s}
.card-pick .cp-item.on{border-color:var(--ink)}
.card-pick .cp-item:active{transform:scale(.97)}
.card-pick .cp-item:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* isolation:isolate ne protège plus rien aujourd'hui : le seul cadre qui
   s'en servait peignait une seconde carte en z-index:-1 et a disparu avec
   le catalogue. On la garde délibérément, comme --cadre-ratio dans
   css/app.css — c'est la déclaration qui donne à CHAQUE aperçu son propre
   contexte d'empilement, et sans elle un futur cadre à couche négative
   repasserait derrière le fond du bouton, invisible ici seulement (sur la
   boutique il n'y a aucun fond entre la carte et la page). */
.card-pick .cp-stage{display:block;margin-bottom:8px;pointer-events:none;isolation:isolate}
.card-pick .cp-name{font-size:12.5px;font-weight:700}
.card-pick .cp-note{font-size:11px;color:var(--ink-3);line-height:1.35}

/* Aperçus de bannière : rendus à 600 px de large — donc dans leur mise en
   page « ordinateur », la seule où les onze se distinguent — puis réduits
   d'un facteur .46. .hp-frame porte la taille réelle occupée dans la
   bande ; .hp-stage, lui, garde ses 600 px et se contente d'être mis à
   l'échelle. Hauteur fixe des deux côtés : c'est ce qui donne un cadrage
   identique d'une bannière à l'autre, comme dans les maquettes. */
.card-pick .cp-item[data-herostyle]{flex-basis:284px}
.card-pick .hp-frame{display:block;width:276px;height:97px;overflow:hidden;margin-bottom:8px;
  border-radius:8px;isolation:isolate}
.card-pick .hp-stage{display:block;width:600px;transform:scale(.46);transform-origin:top left;pointer-events:none}
.card-pick .hp-stage .hero{padding:0;max-width:none;margin:0}
.card-pick .hp-stage .hero-card{height:210px}

/* ---------- logo ---------- */
.logo-prev{width:64px;height:64px;border-radius:18px;background:linear-gradient(140deg,var(--acc),var(--caramel));
  display:grid;place-items:center;color:#fff;font-size:24px;box-shadow:var(--sh-s);overflow:hidden;flex:none}
.logo-prev img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- visite guidée ---------- */
#tutBanner{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:10px;
  background:var(--choco);color:#fff;padding:9px 10px 9px 14px;border-radius:99px;box-shadow:var(--sh-l);font-size:12.5px;font-weight:600;
  max-width:calc(100vw - 24px)}
#tutBanner .tut-ico{font-size:15px;flex:none}
#tutBanner #tutMin{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tutBanner #tutEnd{flex:none;background:rgba(255,255,255,.16);padding:6px 11px;border-radius:99px;font-size:11.5px;font-weight:700}
#tutBanner #tutEnd:active{background:rgba(255,255,255,.28)}
@media(min-width:1000px){#tutBanner{left:auto;right:20px;transform:none;top:16px}}

#tutBubble{position:fixed;z-index:310;max-width:264px;background:var(--choco);color:#fff;padding:11px 14px;border-radius:14px;
  font-size:13px;line-height:1.4;box-shadow:var(--sh-l);opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;
  pointer-events:none;display:none}
#tutBubble.on{opacity:1;transform:translateY(0)}
#tutBubble .tut-arrow{position:absolute;width:10px;height:10px;background:var(--choco);transform:rotate(45deg);left:20px}
#tutBubble.below .tut-arrow{top:-4px}
#tutBubble.above .tut-arrow{bottom:-4px}

/* ---------- assistant de premier lancement ---------- */
#onbOverlay{position:fixed;inset:0;z-index:400;background:var(--cream);display:grid;place-items:center;padding:20px;overflow-y:auto}
.onb-box{width:100%;max-width:420px}
.onb-box h1{font-size:26px;margin-bottom:2px}
.onb-steps{display:flex;gap:6px;margin-bottom:24px}
.onb-steps i{flex:1;height:4px;border-radius:99px;background:var(--line-2)}
.onb-steps i.on{background:var(--acc)}
.onb-types{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.onb-types button{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:18px 12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;box-shadow:var(--sh-s)}
.onb-types button.on{border-color:var(--acc);background:var(--acc-l)}
.onb-emoji{font-size:32px}
.onb-cats{display:flex;flex-wrap:wrap;gap:8px}
.onb-skip{display:block;margin:16px auto 0;color:var(--ink-3);font-size:12.5px;font-weight:600;text-decoration:underline}

/* ---------- réglages : sous-navigation + groupes ----------
   Le panneau Réglages a fini par accumuler plus de vingt panneaux (thème,
   paiement, livraison, marketing, notifications, sécurité…) dans un seul
   défilement sans repère : cette bande de raccourcis saute directement à
   une catégorie, et chaque groupe se replie ensuite au choix du gérant
   (mémorisé au fil des re-rendus, voir rendreEnGardantLaPlace dans
   js/admin.js — même réflexe que le défilement des bandes de couleurs/
   cadres juste en dessous). Ouverts par défaut : rien n'est caché au
   premier chargement, seul un futur repli est une décision du gérant. */
.s-nav{position:sticky;z-index:30;display:flex;gap:8px;overflow-x:auto;
  background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(10px);
  margin:0 -16px 16px;padding:10px 16px;border-bottom:1px solid var(--line);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s-nav::-webkit-scrollbar{display:none}
.s-nav button{flex:none}
.s-grp{margin-bottom:22px;scroll-margin-top:112px}
.s-grp>summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--serif);font-weight:750;font-size:18px;padding:6px 2px 14px;color:var(--ink)}
.s-grp>summary::-webkit-details-marker{display:none}
.s-grp>summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .15s}
.s-grp[open]>summary::after{transform:rotate(-135deg)}
.s-grp>summary .s-emo{font-size:20px}

/* ---------- capture guidée face/dos (js/camera.js) ---------- */
#camOverlay{position:fixed;inset:0;z-index:500;background:#0B0705;display:flex;flex-direction:column;color:#fff}
.cam-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top))}
.cam-top .iconbtn{background:rgba(255,255,255,.12);color:#fff}
.cam-step{font-weight:650;font-size:14.5px}
.cam-stage{position:relative;flex:1;overflow:hidden;display:grid;place-items:center}
#camVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-ring{position:relative;width:min(64vw,300px);aspect-ratio:1;border-radius:50%;
  border:3px dashed rgba(255,255,255,.85);box-shadow:0 0 0 999px rgba(0,0,0,.42)}
.cam-hint{position:absolute;bottom:22px;left:16px;right:16px;text-align:center;font-size:13.5px;
  background:rgba(0,0,0,.5);padding:9px 14px;border-radius:99px;backdrop-filter:blur(6px)}
.cam-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.cam-bottom #camSkip{width:auto;flex:none;background:transparent;color:#fff;text-decoration:underline;box-shadow:none;border:0}
.cam-shutter{width:72px;height:72px;border-radius:50%;background:#fff;border:4px solid rgba(255,255,255,.4);flex:none}
.cam-shutter:active{transform:scale(.92)}

/* ═══════════ Accueil Réglages — design 1b (tuiles d'état) ═══════════
   Palette = variables du thème (fidèle au Vanille de la maquette,
   mais suit aussi le thème sombre). Le libellé à gauche, l'état à droite. */
.set-home{padding:2px 0 10px}
.set-todo{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;box-shadow:var(--sh-s);margin-bottom:18px;flex-wrap:wrap}
.set-todo-txt{flex:1;min-width:220px}
.set-todo-txt b{font-size:15px}
.set-todo-txt p{font-size:12.5px;color:var(--ink-2);margin:4px 0 0}
.set-prog{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none}
.set-prog small{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.set-prog .bar{display:block;width:180px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.set-prog .bar>span{display:block;height:7px;border-radius:99px;background:var(--acc)}
.set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:960px){.set-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.set-grid{grid-template-columns:1fr}}
.set-tile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;
  box-shadow:var(--sh-s);cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;
  transition:transform .12s ease,box-shadow .12s ease}
.set-tile:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(74,44,29,.34)}
.set-tile.warn{outline:2px solid var(--warn);outline-offset:-2px}
.set-tile.dash{background:var(--cream-2,#fdf9f9);border-style:dashed;cursor:default}
.set-tile.dash:hover{transform:none;box-shadow:var(--sh-s)}
.set-tile-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.set-tile-h .emo{font-size:18px}
.set-tile-h h3{font-size:15px;flex:1;margin:0;font-family:inherit}
.set-tile-h .chev{color:var(--ink-3);font-size:15px}
.set-tile>p{font-size:12.5px;color:var(--ink-2);margin:0 0 10px}
.set-tile .sum{font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.set-pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.set-pill.g{color:var(--ok);background:#E8F7EF}
.set-pill.w{color:#8A5A16;background:#FEF3E2}
.set-pill.r{color:#992B2B;background:#f6d5db}
/* barre de retour d'une sous-page */
.set-back{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.set-back button{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:12px;
  font-size:13px;font-weight:650;background:#fff;border:1px solid var(--line);cursor:pointer;color:var(--ink)}
.set-back b{font-size:15px}
.set-tile.on{outline:2px solid var(--acc);outline-offset:-2px;background:var(--cream-2,#fdf3ee)}
#setBody{scroll-margin-top:12px}

/* ── Accueil des Réglages — refonte 2 colonnes (sidebar sombre + groupes) ─── */
.set-home2{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start;padding:2px 0 12px}
@media(max-width:820px){.set-home2{grid-template-columns:1fr}}
/* Sidebar sombre sticky */
.set-side{display:flex;flex-direction:column;gap:20px;background:#3E352F;border-radius:16px;padding:24px 22px;color:#F5F1EA;position:sticky;top:14px}
@media(max-width:820px){.set-side{position:static}}
.set-side-top{display:flex;flex-direction:column;gap:9px}
.set-side-title{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.28}
.set-side-sub{font-size:12.5px;color:#BCB1A6}
.set-side-bar{width:100%;height:5px;border-radius:99px;background:#584D45;overflow:hidden}
.set-side-bar>span{display:block;height:100%;background:#E0A23C;border-radius:99px}
.set-checks{display:flex;flex-direction:column;gap:2px;border-top:1px solid #574C44;padding-top:14px}
.set-check{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#EBE4DA}
.set-check .box{width:15px;height:15px;border-radius:4px;border:1.5px solid #9A8D82;flex:none}
.set-side-cta{border:0;cursor:pointer;background:#F5F1EA;color:#2B2420;font-size:15px;font-weight:700;font-family:inherit;padding:12px 20px;border-radius:10px;width:100%;transition:background .16s}
.set-side-cta:hover{background:#fff}
.set-side-help{display:flex;flex-direction:column;gap:7px;border-top:1px solid #574C44;padding-top:16px}
.set-side-help .t{font-size:14px;font-weight:700}
.set-side-help .d{font-size:12.5px;color:#BCB1A6;line-height:1.5}
.set-side-help .l{font-size:13px;font-weight:600;color:#E0A23C}
.set-side-help .l:hover{color:#F0C078;text-decoration:none}
/* États de validation dans la zone marron */
.set-check .box{display:grid;place-items:center;font-size:11px;font-weight:800;color:#3E352F;line-height:1}
.set-check.done{color:#fff}
.set-check.done .box{background:#78B98C;border-color:#78B98C}
.set-refus{background:rgba(196,80,68,.2);border:1px solid rgba(196,80,68,.45);border-radius:11px;padding:12px 14px}
.set-refus b{font-size:14px;color:#F6DAD6}
.set-refus p{margin:5px 0 0;font-size:12.5px;color:#E3C6C2;line-height:1.5}
.set-side-note{margin:0;font-size:11.5px;color:#BCB1A6;line-height:1.5}
/* Fiche « Compte à valider » dans /hq */
.valider-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.valider-item .vi-head{margin-bottom:8px}
.valider-item .vi-info{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:13px;color:var(--ink-2)}
.valider-item .vi-info .vk{color:var(--ink-3);font-weight:600}
.valider-item .vi-cgv{margin-top:8px;font-size:13px}
.valider-item .vi-cgv summary{cursor:pointer;color:var(--acc-d);font-weight:600}
.valider-item .vi-cgv pre{white-space:pre-wrap;font-family:inherit;font-size:12.5px;color:var(--ink-2);background:var(--cream);border-radius:8px;padding:10px;margin:8px 0 0;max-height:180px;overflow:auto}
.valider-item .vi-actions{display:flex;gap:8px;margin-top:12px}
@media(max-width:560px){.valider-item .vi-info{grid-template-columns:1fr}}
/* Colonne droite : groupes */
.set-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.set-group{display:flex;flex-direction:column;gap:12px}
.set-group-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.set-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){.set-cards{grid-template-columns:1fr}}
.set-card{width:100%;text-align:left;font-family:inherit;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:17px 19px;display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:border-color .16s,transform .16s,box-shadow .2s}
.set-card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh-m)}
.set-card.span2{grid-column:span 2}
@media(max-width:520px){.set-card.span2{grid-column:auto}}
.set-card.warn{border-color:#E0A23C}
.set-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.set-card-h .t{font-size:16px;font-weight:700;color:var(--ink)}
.set-card>p{font-size:13px;color:var(--ink-2);line-height:1.45;margin:0}
/* Groupe en liste */
.set-list{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.set-row{width:100%;text-align:left;font-family:inherit;background:none;border:0;border-bottom:1px solid var(--cream-2);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 19px;transition:background .16s}
.set-row:last-child{border-bottom:0}
.set-row:hover{background:var(--cream)}
.set-row .t{font-size:15px;font-weight:600;color:var(--ink);min-width:190px}
.set-row .d{flex:1;font-size:13px;color:var(--ink-2)}
.set-row .s{font-size:13px;color:var(--ink-2);white-space:nowrap}
@media(max-width:600px){
  .set-row{flex-wrap:wrap;gap:3px 12px}
  .set-row .t{min-width:0;flex:1 0 100%}
}
/* Statuts */
.set-stat{font-size:12.5px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.set-stat.ok{color:#2E7D5B}
.set-stat.warn{font-weight:700;color:#8A5A0B;background:#FBEFD8;padding:4px 9px;border-radius:6px}


/* Pastille « Blanc » du sélecteur de couleurs : anneau et coche foncés,
   sinon blanc sur blanc = invisible (sélection comprise). */
.col-pick button.sw-blanc.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #B9AFA4}
.col-pick button.sw-blanc .sw-ck{color:#8A8178;text-shadow:none}

/* Accueil Réglages sans le panneau latéral marron (retiré 2026-08-30) :
   les tuiles occupent toute la largeur. */
.set-home2.sans-side{grid-template-columns:1fr}

/* ---- Import Matterhorn (js/admin.js, mhImportSheet) ---- */
.mh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mh-item{display:flex;flex-direction:column;gap:6px;background:var(--card,#fff);
  border:1px solid var(--line-2,#eee);border-radius:12px;padding:10px}
.mh-item img,.mh-sansimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;background:#F6F2EC}
.mh-sansimg{display:grid;place-items:center;font-size:34px}
.mh-nom{font-size:12.5px;font-weight:650;line-height:1.3;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.mh-prix{font-size:12px;color:var(--ink-3,#888)}
.mh-item .btn{margin-top:auto}

/* ===== Bannières prêtes à l'emploi (Réglages → Vitrine) =====
   Réutilise le sélecteur horizontal .card-pick ; ici l'aperçu est une
   vraie photographie, pas un rendu de composant. */
.ban-pretes{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-2)}
.ban-pretes h4{margin:0 0 4px;font-size:1rem}
.ban-pretes .tiny{margin:0 0 8px}
.card-pick.ban-pick .ban-item{flex-basis:196px;gap:6px;position:relative}
.card-pick.ban-pick .ban-item img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;
  background:var(--cream-2,#f2ece5)}
.card-pick.ban-pick .ban-lab{font-size:.82rem;font-weight:600;line-height:1.25;color:var(--ink)}
.card-pick.ban-pick .ban-met{font-size:.72rem;color:var(--ink-3,#8a8078);line-height:1.2}
/* Pendant l'application (chargement + conversion), la vignette se calme et
   n'accepte plus de second clic. */
.card-pick.ban-pick .ban-item.en-cours{opacity:.5;pointer-events:none}
.ban-autres{margin-top:10px}
.ban-autres summary{cursor:pointer;font-size:.85rem;color:var(--ink-2);padding:6px 0}
.ban-autres summary:hover{color:var(--ink)}
.ban-autres[open] summary{margin-bottom:2px}

/* ═══ Aperçu en direct de la boutique (Réglages → Vitrine) ═══════════════
   La boutique est rendue à sa VRAIE largeur (390 ou 900 px) puis réduite
   par transform. Redimensionner l'iframe elle-même déclencherait les
   points de rupture mobiles du site et montrerait au gérant une mise en
   page que ses clients ne verront jamais. */
.apercu-panel .apercu-cadre{position:relative;overflow:hidden;border-radius:16px;
  border:1px solid var(--line);background:var(--cream-2);
  box-shadow:inset 0 2px 12px -6px rgba(0,0,0,.25)}
.apercu-panel iframe{border:0;display:block;transform-origin:top left;background:#fff}
.apercu-panel .chip-st{padding:6px 12px;font-size:.82rem}

/* Vignettes de dégradé (Réglages → Fond de la boutique). Même gabarit que
   les bannières prêtes, mais l'aperçu est le dégradé lui-même plutôt
   qu'une photographie : un aplat de 16/9 suffit à le juger. */
.card-pick.deg-pick .deg-item{flex-basis:150px;gap:6px}
.card-pick.deg-pick .deg-vue{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;
  border:1px solid var(--line,rgba(0,0,0,.08))}
.card-pick.deg-pick .ban-lab{font-size:.82rem;font-weight:600;line-height:1.25;color:var(--ink)}

/* ══ VITRINE — deux colonnes, cinq étapes, aperçu collé (2026-09-01) ═══ */
/* UNE SEULE COLONNE DÉSORMAIS. L'aperçu a quitté la Vitrine pour la colonne
   permanente de droite (css/gerant.css, .rg-apercu) : garder ici une seconde
   piste de 42 % laissait un vide de la moitié de l'écran. */
.vit-deux{display:block}
.vit-reglages{min-width:0}
/* L'aperçu ne quitte jamais l'écran : collé sous la barre du panneau. */
.vit-apercu{position:sticky;top:76px;min-width:0}
.vit-apercu .apercu-panel{margin-bottom:0}
.vit-seul-mobile{display:none}

/* Une étape = un pli. Numéro dans une pastille, titre, sous-titre discret. */
.vit-etape{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:10px;
  box-shadow:var(--sh-s);overflow:hidden}
.vit-etape>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.vit-etape>summary::-webkit-details-marker{display:none}
.vit-etape>summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);
  transition:transform .18s}
.vit-etape[open]>summary::after{transform:rotate(-135deg)}
.vit-etape[open]>summary{border-bottom:1px solid var(--line)}
.vit-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--fort);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13px}
.vit-titre{font-weight:750;font-size:15.5px}
.vit-sous{color:var(--ink-3);font-size:12.5px;margin-left:2px}
.vit-corps{padding:16px}
/* Les anciennes cartes internes se fondent dans l'étape : plus de boîte
   dans la boîte. */
.vit-corps .panel{border:0;box-shadow:none;padding:0;margin:0 0 14px;border-radius:0}
.vit-corps .panel:last-child{margin-bottom:0}
.vit-corps .field>span:first-child{font-weight:700;font-size:13.5px}

@media(max-width:999px){
  .vit-deux{grid-template-columns:1fr}
  /* L'aperçu passe DEVANT et se colle en haut, réduit — sur téléphone on
     ne peut pas garder une colonne. Le bouton Agrandir lui rend sa hauteur. */
  .vit-apercu{order:-1;top:60px;z-index:5;background:var(--cream)}
  .vit-apercu .apercu-cadre{max-height:34vh;transition:max-height .25s}
  .vit-apercu.grand .apercu-cadre{max-height:82vh}
  .vit-seul-mobile{display:inline-flex}
  .vit-sous{display:none}
}

/* ═══ L'ONGLET VITRINE : la boutique en plein écran (2026-09-07) ═══════
   Posée par render() sous `body.vitrine`, retirée en changeant d'onglet,
   comme `body.gerant` pour les Réglages. La PAGE ne défile pas : c'est le
   cadre qui défile, sinon deux barres de défilement se disputaient la
   molette. La hauteur disponible est l'écran moins la barre #nav, mesurée
   par js/admin.js (--vt-nav) parce qu'elle passe en hauteur automatique
   sous 900 px. La barre d'outils et l'aide sont des enfants flexibles, la
   scène prend tout le reste : fermer l'aide rend sa place au cadre sans
   rien recalculer. */
body.vitrine{overflow:hidden}
body.vitrine .adm-top{display:none}
body.vitrine .adm-main{max-width:none;padding:0;margin:0;display:flex;flex-direction:column;
  height:calc(100vh - var(--vt-nav,63px));height:calc(100dvh - var(--vt-nav,63px))}
/* LA BARRE S'ENROULE À TOUTE LARGEUR, pas seulement sur un petit écran.
   Un message d'état qui dit quoi faire tient sur deux ou trois lignes ;
   sans enroulement il écrasait la moitié droite, dont les commandes
   débordaient par la GAUCHE et venaient se peindre par-dessus le
   segmenté Appareil (« Mobile » était caché sous l'interrupteur). */
.vt-barre{flex:none;min-height:52px;display:flex;align-items:center;flex-wrap:wrap;
  gap:8px 14px;padding:6px 16px;background:var(--card);border-bottom:1px solid var(--line)}
/* La moitié gauche cède la place la première : c'est elle qui porte le
   texte long, et lui seul sait se replier sur plusieurs lignes. */
.vt-gauche{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 240px}
.vt-titre{font-size:15px;font-weight:750;white-space:nowrap}
.vt-etat{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-etat.enr{color:var(--ink-2)}
/* Une panne de retouche se lit EN ENTIER : un mot d'état ordinaire tient
   sur une ligne, mais un message rouge dit QUOI FAIRE et ne doit jamais
   finir en points de suspension. */
.vt-etat.err{color:var(--err);font-weight:650;white-space:normal;overflow:visible;text-overflow:clip}
/* MÊME DROIT DE S'ÉTENDRE, SANS L'ALARME. « Cette page ne se retouche
   pas » n'annonce aucune panne : le gérant a simplement suivi un lien de
   sa boutique (panier, compte, favoris). Encre pleine pour être lue,
   jamais le rouge de l'échec, qui laissait croire à un incident. */
.vt-etat.info{color:var(--ink);font-weight:600;white-space:normal;overflow:visible;text-overflow:clip}
/* Le segmenté Appareil : Bureau, Tablette, Mobile. */
.vt-appareils{flex:none;display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--cream-2);border:1px solid var(--line)}
.vt-appareils button{border:0;background:transparent;border-radius:9px;padding:6px 12px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;color:var(--ink-3);white-space:nowrap}
.vt-appareils button:hover{color:var(--ink)}
.vt-appareils button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* Les commandes de droite gardent leur largeur naturelle : rognées, elles
   sortaient de leur boîte au lieu de passer à la ligne. */
.vt-droite{display:flex;align-items:center;gap:8px;flex:0 0 auto;justify-content:flex-end;margin-left:auto}
.vt-bouton{display:inline-flex;align-items:center;padding:7px 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.vt-bouton:hover{background:var(--cream)}
/* `display:inline-flex` l'emporterait sur le [hidden] du navigateur :
   sans cette ligne, le bouton « Réessayer » resterait visible en
   permanence. */
.vt-bouton[hidden]{display:none}
/* L'interrupteur Retouche : même dessin que .rg-switch des Réglages, en
   plus petit, parce qu'il tient dans une barre de 52 px. */
.vt-retouche{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 6px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;color:var(--ink);white-space:nowrap}
.vt-switch{position:relative;width:36px;height:21px;border-radius:21px;background:#d8cec7;transition:background .2s;flex:none}
.vt-switch-p{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.vt-retouche.on .vt-switch{background:var(--acc)}
.vt-retouche.on .vt-switch-p{transform:translateX(15px)}
/* L'aide, refermable et mémorisée (localStorage shopzy:vitrine:aide). */
.vt-aide{flex:none;display:flex;align-items:center;gap:12px;padding:7px 16px;font-size:12.5px;color:var(--ink-2);
  background:var(--cream);border-bottom:1px solid var(--line)}
.vt-aide span{flex:1;min-width:0}
.vt-aide button{flex:none;border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:13px;padding:4px 6px;border-radius:6px}
.vt-aide button:hover{background:var(--cream-2);color:var(--ink)}
/* La scène. Bureau : le cadre prend toute la largeur et toute la hauteur
   restante. Tablette / Mobile : largeur fixée par js/admin.js, centrée,
   dans un châssis sobre sur un fond légèrement grisé. */
.vt-scene{flex:1 1 auto;min-height:0;background:#fff}
.vt-cadre{width:100%;height:100%}
.vt-cadre iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.vt-scene.vt-appareil{display:flex;justify-content:center;padding:18px 18px 22px;background:#ECEAE7;overflow:auto}
.vt-scene.vt-appareil .vt-cadre{max-width:100%;border:1px solid #d4cfc9;border-radius:22px;overflow:hidden;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.35);background:#fff}
/* Écrans étroits : la barre passe sur deux lignes ; sous 700 px le
   segmenté disparaît, le cadre est déjà à la largeur de l'écran. */
@media(max-width:900px){
  .vt-barre{flex-wrap:wrap;gap:8px 12px;padding:8px 12px}
  .vt-gauche{flex:1 1 100%}
  .vt-droite{flex:1 1 auto}
}
@media(max-width:700px){
  .vt-appareils{display:none}
  /* Les trois commandes de droite (≈ 415 px incompressibles) ne tiennent
     pas sur la ligne d'un téléphone en portrait ; alignées à droite, le
     surplus sortait par la GAUCHE, hors d'atteinte (overflow hidden) :
     l'interrupteur Retouche était rogné. Elles passent à la ligne. */
  .vt-droite{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start}
  .vt-scene.vt-appareil{padding:0}
  .vt-scene.vt-appareil .vt-cadre{border:0;border-radius:0;box-shadow:none;width:100%!important}
}