/* =========================================================================
   app.css — habillage de l'éditeur uniquement.
   (Les styles des cartes vivent dans js/runtime-css.js + chaque template.)
   ========================================================================= */
:root{
  --ui-bg:#12121a;
  --ui-panel:#191924;
  --ui-line:#2a2a38;
  --ui-txt:#eceaf5;
  --ui-dim:#9a97ad;
  --ui-accent:#ff5c9a;
  --r:14px;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--ui-bg); color:var(--ui-txt); overflow:hidden;
  font-family:'Fredoka',-apple-system,'Segoe UI',system-ui,sans-serif;
}
button{ font-family:inherit; color:inherit }

/* Icônes : un seul jeu de tracés, à la couleur du texte, jamais déformées. */
.i{
  width:18px; height:18px; flex:0 0 auto; display:block;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.i.marque{ width:19px; height:19px; color:var(--ui-accent) }
.primary, .ghost, .mini, #btn-copy, .tabs button{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}

/* ------------------------------ entête -------------------------------- */
.head{
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 18px; border-bottom:1px solid var(--ui-line); background:var(--ui-panel);
}
.brand{ display:flex; align-items:center; gap:9px; font-size:17px; letter-spacing:-.01em }
.brand b{ font-weight:600 }
.brand .acc{ color:var(--ui-accent) }
.brand span{ font-size:12.5px; color:var(--ui-dim); letter-spacing:0 }
.hactions{
  display:flex; gap:9px; flex:0 1 auto; min-width:0; align-items:center;
  flex-wrap:nowrap; overflow:hidden;
}
.hactions > *{ flex:0 0 auto }
.langsel{
  padding:9px 8px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--ui-dim); background:#22222f; border:1px solid var(--ui-line);
  border-radius:11px; letter-spacing:.04em;
}
.langsel:hover{ color:var(--ui-txt); border-color:#454560 }

.primary,.ghost,.mini,#btn-copy{
  border:1px solid var(--ui-line); background:#22222f; color:var(--ui-txt);
  padding:9px 15px; border-radius:11px; font-size:13.5px; cursor:pointer; transition:.15s;
}
.primary{ background:var(--ui-accent); border-color:var(--ui-accent); color:#fff; font-weight:600 }
.primary:hover{ filter:brightness(1.1) }
.ghost:hover,.mini:hover,#btn-copy:hover{ border-color:#454560; background:#292937 }


/* ------------------------------ layout -------------------------------- */
/* Le panneau respire : à 352 px, « Ta photo (facultatif) » et « Choisir une
   photo » passaient à la ligne au milieu d'un écran à moitié vide. */
/* Hauteur calculée sur l'écran, pas sur une chaîne de pourcentages : celle-ci
   se rompait dès qu'un parent n'avait pas de hauteur explicite, et la zone de
   la carte gardait 1024 px quelle que soit la fenêtre — d'où une carte qui
   dépassait de 157 px sur un écran de 720. */
.layout{ height:calc(100dvh - 60px); display:grid; grid-template-columns:352px 1fr }
@media (min-width:1280px){ .layout{ grid-template-columns:404px 1fr } }
@media (min-width:1700px){ .layout{ grid-template-columns:440px 1fr } }
.panel{ display:flex; flex-direction:column; min-height:0; background:var(--ui-panel); border-right:1px solid var(--ui-line) }

.tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:10px 10px 0;
  overflow:visible; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none }
.tabs button{
  flex-direction:column; gap:4px; min-width:0; border:0; background:transparent;
  color:var(--ui-dim); cursor:pointer; padding:9px 4px 8px;
  border-radius:10px 10px 0 0; font-size:11px; white-space:nowrap; overflow:hidden;
}
.tabs .i{ width:18px; height:18px }
.tabs button:hover{ color:var(--ui-txt) }
.tabs button.on{ background:var(--ui-bg); color:var(--ui-txt); box-shadow:inset 0 2px 0 var(--ui-accent) }
.tab-body{ flex:1; min-height:0; overflow-y:auto; padding:16px; background:var(--ui-bg) }
.tab-body::-webkit-scrollbar{ width:9px }
.tab-body::-webkit-scrollbar-thumb{ background:#31313f; border-radius:9px }

/* ----------------------------- galerie -------------------------------- */
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.tcard{
  padding:0; overflow:hidden; cursor:pointer; text-align:left;
  background:var(--ui-panel); border:1.5px solid var(--ui-line); border-radius:var(--r);
  transition:.16s;
}
.tcard:hover{ border-color:#4b4b66; transform:translateY(-2px) }
.tcard.on{ border-color:var(--ui-accent); box-shadow:0 0 0 3px rgba(255,92,154,.18) }
.thumb{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#000; --s:.2 }
.thumb .dm-stage.is-thumb{
  position:absolute; top:0; left:0; width:820px; height:564px; min-height:0;
  transform:scale(var(--s)); transform-origin:top left; pointer-events:none;
}
.tmeta{ padding:8px 10px 9px; display:flex; flex-direction:column; gap:2px }
.tmeta b{ font-size:13px; font-weight:500 }
.tmeta span{ font-size:11px; color:var(--ui-dim) }

/* ------------------------------ formulaire ---------------------------- */
.row{ display:block; margin-bottom:14px }
.row.sub{ margin:-4px 0 16px 30px }
.lbl{ display:block; font-size:12px; color:var(--ui-dim); margin-bottom:6px }
.row input[type=text], .row textarea, input:not([type]), textarea, #shareLink{
  width:100%; padding:10px 12px; font:inherit; font-size:14px; resize:vertical;
  color:var(--ui-txt); background:var(--ui-panel); border:1.5px solid var(--ui-line); border-radius:11px;
  outline:none; transition:border-color .15s;
}
.row input:focus, .row textarea:focus, #shareLink:focus{ border-color:var(--ui-accent) }
.row input[type=range]{ width:100%; accent-color:var(--ui-accent) }
.cbox{ display:flex; align-items:center; gap:10px }
.cbox input[type=color]{
  width:52px; height:38px; padding:2px; cursor:pointer;
  background:var(--ui-panel); border:1.5px solid var(--ui-line); border-radius:10px;
}
.cbox code{ font-size:12px; color:var(--ui-dim); letter-spacing:.06em }
.inline{ display:flex; gap:9px; flex-wrap:wrap; align-items:center }
.inline #shareLink{ flex:1; min-width:180px; font-size:12px }
.lien-row{ display:flex; flex-direction:column; gap:9px }
.lien-row #shareLink{ width:100%; font-size:13.5px; text-overflow:ellipsis }
.lien-row .inline{ gap:9px }
.lien-row .inline button{ flex:1; padding:12px 14px; font-size:14px }
.lien-row.attente #shareLink{ opacity:.5 }
#btn-copy.ok, #btn-natif.ok{ border-color:#3bb35b; color:#7ee2a0 }
.reponse{ text-align:center }
.rep-titre{
  font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.15;
  color:var(--ui-accent); margin-bottom:5px;
}
.rep-quand{ font-size:12px; color:var(--ui-dim); margin-bottom:16px }
.rep-lignes{
  text-align:left; border:1px solid var(--ui-line); border-radius:12px;
  padding:4px 14px; background:rgba(255,92,154,.045);
}
.rep-ligne{
  display:flex; justify-content:space-between; gap:16px; padding:10px 0; font-size:14px;
}
.rep-ligne + .rep-ligne{ border-top:1px solid var(--ui-line) }
.rep-ligne span{ color:var(--ui-dim); flex:0 0 auto }
.rep-ligne b{ font-weight:600; text-align:right; overflow-wrap:anywhere }
.rep-vide{ padding:10px 0; font-size:14px; color:var(--ui-dim) }
.rep-liste{ display:flex; flex-direction:column; gap:22px }
.rep-photo{
  width:118px; height:118px; border-radius:50%; object-fit:cover; display:block;
  margin:0 auto 14px; border:2px solid var(--ui-accent);
}
/* plusieurs réponses : la première reste grande, les suivantes s'alignent */
.rep-item + .rep-item{ border-top:1px solid var(--ui-line); padding-top:22px }
.rep-item + .rep-item .rep-titre{ font-size:19px; color:var(--ui-txt) }
.rep-item + .rep-item .rep-photo{ width:74px; height:74px }
.rep-compte{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ui-dim); margin-bottom:14px;
}

/* ------------------------------ les offres ----------------------------- */
.offres{ display:flex; flex-direction:column; gap:10px; margin:18px 0 20px; text-align:left }
.offre{
  display:flex; gap:13px; align-items:flex-start; width:100%; cursor:pointer;
  padding:15px 16px; border-radius:14px; background:transparent; text-align:left;
  border:1.5px solid var(--ui-line); transition:border-color .18s, background .18s;
}
.offre:hover{ border-color:#3a3a4c }
.offre.on{ border-color:var(--ui-accent); background:rgba(255,92,154,.06) }
.offre .puce{
  width:17px; height:17px; border-radius:50%; flex:0 0 auto; margin-top:2px;
  border:1.5px solid var(--ui-line); position:relative;
}
.offre.on .puce{ border-color:var(--ui-accent) }
.offre.on .puce::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--ui-accent);
}
.offre .corps{ flex:1; min-width:0 }
.offre .nom{ display:flex; justify-content:space-between; gap:12px; align-items:baseline }
.offre .nom b{ font-size:15px; font-weight:600 }
.offre .nom i{ font-style:normal; font-size:15px; font-weight:600; color:var(--ui-accent) }
.offre .desc{ margin-top:5px; font-size:12.5px; line-height:1.55; color:var(--ui-dim) }
.offre .impose{
  display:inline-block; margin-top:7px; font-size:11px; letter-spacing:.05em;
  padding:3px 9px; border-radius:999px; background:rgba(255,92,154,.14); color:var(--ui-accent);
}

/* ------------------------ une image dans un champ ---------------------- */
.imgrow{ display:flex; gap:13px; align-items:center }
.imgrow .vign{
  width:58px; height:58px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:grid; place-items:center; background:#1e1e2a;
  border:1.5px dashed var(--ui-line); color:var(--ui-dim);
}
.imgrow .vign.plein{ border-style:solid; border-color:var(--ui-accent) }
.imgrow .vign img{ width:100%; height:100%; object-fit:cover; display:block }
.imgrow input[type=file]{ position:absolute; width:1px; height:1px; opacity:0 }
.imgrow .actions{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0 }
.imgrow .poids{ font-size:11.5px; color:var(--ui-dim) }
#bloc-mail input{ width:100% }
#suiviLink{ font-size:12.5px }
#btn-suivi-ouvrir{ text-decoration:none }

/* ------------------------- le choix du mode ---------------------------- */
#modes::backdrop{ background:rgba(8,8,12,.78) }
#modes{
  border:0; padding:0; background:transparent; max-width:520px; width:calc(100% - 32px);
}
.modes-in{
  background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:20px;
  padding:26px 22px; display:flex; flex-direction:column; gap:11px;
}
.modes-t{
  font-size:21px; font-weight:600; letter-spacing:-.02em; text-align:center; margin-bottom:8px;
}
/* Ces dialogues portent déjà leur propre panneau (.modes-in) : sans ce
   dégagement, le cadre du <dialog> en dessinait un SECOND, plus grand, et la
   barre de défilement passait entre les deux en débordant des angles arrondis. */
#decors, #ajout, #pages-choix{
  border:0; padding:0; background:transparent; box-shadow:none; max-width:760px;
}
#decors::backdrop, #ajout::backdrop, #pages-choix::backdrop{
  background:rgba(8,8,12,.78);
}
/* la barre de défilement : fine, arrondie, et tenue à l'écart des angles */
.modes-in.large{ scrollbar-width:thin; scrollbar-color:#3d3d52 transparent }
.modes-in.large::-webkit-scrollbar{ width:10px }
.modes-in.large::-webkit-scrollbar-track{ background:transparent; margin:20px 0 }
.modes-in.large::-webkit-scrollbar-thumb{
  background:#3d3d52; background-clip:content-box;
  border:3px solid transparent; border-radius:999px;
}
.modes-in.large::-webkit-scrollbar-thumb:hover{ background:#4d4d66; background-clip:content-box }
/* dialog{width:...} l'emporte sur un simple max-width : sans redonner une
   largeur ici, le choix des pages restait dans les 520 px du dialogue commun
   et n'affichait qu'une colonne et demie sur un écran d'ordinateur.
   Uniquement au-delà du seuil mobile : plus bas, le dialogue est une feuille
   collée en bas et pleine largeur, qu'un identifiant écraserait — il laissait
   alors une bande vide sur le côté droit. */
@media (min-width:861px){ #pages-choix{ width:min(94vw, 820px) } }

/* ------------------- choix des pages, avec leur aperçu ----------------- */
.choixpages{
  display:grid; gap:12px; margin:4px 0 18px;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
}
.pcarte{
  position:relative; padding:0; cursor:pointer; text-align:left; overflow:hidden;
  background:#15151f; border:1.5px solid var(--ui-line); border-radius:16px;
  transition:border-color .18s, transform .18s;
}
.pcarte:hover{ border-color:#3a3a4c }
.pcarte.on{ border-color:var(--ui-accent) }
.pcarte.fixe{ border-color:var(--ui-accent); cursor:default; opacity:.9 }
.pcarte .vue{
  position:relative; height:200px; overflow:hidden; background:#0d0d14;
  border-bottom:1px solid var(--ui-line);
}
/* une page ne tient pas toujours dans le hublot : le dégradé dit qu'elle
   continue, au lieu de laisser croire à une coupure */
.pcarte .vue::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34px; z-index:1;
  background:linear-gradient(to top, #15151f, transparent); pointer-events:none;
}
.pcarte .vue .dm-stage{
  position:absolute; top:0; left:0; width:390px; height:760px; min-height:0;
  transform:scale(var(--s,.38)); transform-origin:top left; pointer-events:none;
}
.pcarte .txt{ padding:10px 12px 12px }
.pcarte .txt b{ display:block; font-size:14px; font-weight:600 }
.pcarte .txt span{ display:block; margin-top:3px; font-size:11.5px; line-height:1.45; color:var(--ui-dim) }
/* le numéro dit l'ordre : c'est la seule façon de le rendre visible sans
   inventer une manipulation de plus */
.pcarte .rang{
  position:absolute; top:9px; right:9px; z-index:2;
  min-width:24px; height:24px; padding:0 6px; border-radius:999px;
  display:grid; place-items:center; font-size:12.5px; font-weight:600;
  color:#fff; background:var(--ui-accent); box-shadow:0 4px 12px -4px #000;
}
/* la grille dépasse souvent la hauteur de l'écran : le bouton reste collé en
   bas du dialogue, sinon il faut deviner qu'il existe et défiler pour valider */
#pages-ok{
  align-self:stretch; position:sticky; bottom:-2px; z-index:3;
  box-shadow:0 -14px 22px -6px var(--ui-panel);
}
.modes-in.large{ max-height:86dvh; overflow-y:auto }
.modes-in.large .note{ text-align:center; margin:-4px 0 12px }
.modes-in.large .gallery{ margin:0 }
#ajout-fermer{ align-self:center; margin-top:6px }

/* l'invite du tout début : elle ne revient jamais */
/* l'invite se pose AU-DESSUS du bouton de test, sinon les deux se recouvrent
   au premier chargement — c'est-à-dire au seul moment où l'invite existe */
.indice{
  position:absolute; left:50%; bottom:calc(var(--simu-bas, 14px) + 52px);
  transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px;
  font-size:13px; white-space:nowrap; pointer-events:none;
  color:#fff; background:rgba(18,18,26,.82); backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -14px #000;
  animation:respire 2.4s ease-in-out infinite;
}
@keyframes respire{ 0%,100%{ opacity:.92 } 50%{ opacity:.55 } }
.mode{
  display:block; width:100%; text-align:left; cursor:pointer; padding:18px 20px;
  border-radius:15px; background:transparent; border:1.5px solid var(--ui-line);
  transition:border-color .18s, background .18s;
}
.mode:hover{ border-color:var(--ui-accent); background:rgba(255,92,154,.06) }
.mode b{ display:block; font-size:16px; font-weight:600; margin-bottom:5px }
.mode span{ display:block; font-size:13px; line-height:1.55; color:var(--ui-dim) }

/* ---------------------------- ses comptes ------------------------------ */
.comptes{ display:grid; gap:8px }
.compte{ display:flex; align-items:center; gap:10px }
.compte .lbl{ flex:0 0 84px; font-size:13px; color:var(--ui-dim) }
.compte input[type=text]{ flex:1; min-width:0 }

.paywall{ text-align:center }
.pw-titre{ font-size:17px; font-weight:600; margin-bottom:12px }
.pw-liste{ list-style:none; margin:0 0 16px; padding:0; text-align:left; display:grid; gap:7px }
.pw-liste li{ position:relative; padding-left:22px; font-size:13.5px; color:var(--ui-txt) }
.pw-liste li::before{
  content:''; position:absolute; left:4px; top:6px; width:6px; height:10px;
  border:solid var(--ui-accent); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.pw-prix{ font-size:15px; font-weight:600; margin-bottom:12px; color:var(--ui-txt) }
#btn-payer{ width:100%; justify-content:center }
#pw-note{ margin-top:10px }
.lien-mini{
  margin-top:2px; padding:4px 0; font-size:12px; cursor:pointer; background:none; border:0;
  color:var(--ui-dim); text-decoration:underline; text-underline-offset:3px;
}
.lien-mini:hover{ color:var(--ui-txt) }
#btn-natif.attente{ opacity:.6 }
.lien-row.attente .inline button{ opacity:.45; pointer-events:none }

/* palettes */
.pals{ margin:8px 0 20px }
.pals-grille{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.pal-titre{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ui-dim);
  margin:12px 2px 7px;
}
.pal-titre:first-child{ margin-top:0 }
.pal{
  display:flex; align-items:center; gap:7px; padding:7px 9px; cursor:pointer;
  background:var(--ui-panel); border:1.5px solid var(--ui-line); border-radius:11px; transition:.15s;
}
.pal:hover{ border-color:#4b4b66 }
.pal i{ width:13px; height:13px; border-radius:4px; flex:0 0 auto }
.pal em{ font-style:normal; font-size:11.5px; color:var(--ui-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* options du "non" */
.opt{
  display:flex; gap:11px; align-items:flex-start; padding:12px; margin-bottom:9px; cursor:pointer;
  background:var(--ui-panel); border:1.5px solid var(--ui-line); border-radius:var(--r); transition:.15s;
}
.opt:hover{ border-color:#4b4b66 }
.opt:has(input:checked){ border-color:var(--ui-accent); background:rgba(255,92,154,.07) }
.opt input{ width:18px; height:18px; margin-top:2px; accent-color:var(--ui-accent); cursor:pointer; flex:0 0 auto }
.opt b{ display:block; font-size:13.5px; font-weight:500 }
.opt span{ display:block; font-size:11.5px; color:var(--ui-dim); margin-top:2px; line-height:1.45 }
.note{ font-size:11.5px; color:var(--ui-dim); line-height:1.55; margin:12px 2px }
.note.warn{ color:#ffd27a }

/* ------------------------------- scène -------------------------------- */
.stagewrap{
  display:flex; flex-direction:column; min-width:0; min-height:0;
  padding:14px 16px 16px; gap:11px;
}
#zoom{
  flex:0 0 auto; margin-left:8px; padding:2px 7px; font-size:11px; border-radius:6px;
  color:var(--ui-dim); background:#22222f; border:1px solid var(--ui-line);
}
#zoom:empty{ display:none }
/* ------------------- passer en mode test, sur la carte ------------------
   Il était rangé dans une barre au-dessus de la carte, en icône seule : on ne
   le voyait pas et on ne devinait pas ce qu'il faisait. Il est maintenant posé
   SUR la carte, en relief, avec son intitulé — même place sur téléphone et sur
   ordinateur, comme n'importe quel bouton flottant. */
.simu{
  position:absolute; right:12px; bottom:var(--simu-bas, 14px); z-index:6;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 9px 13px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:#fff;
  background:rgba(18,18,26,.72); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.12) inset;
  transition:background .16s, transform .12s, box-shadow .16s;
}
.simu:hover{ background:rgba(30,30,44,.85) }
.simu:active{ transform:translateY(1px) }
.simu .i{ width:17px; height:17px; flex:0 0 auto }
.simu .i path{ fill:currentColor; stroke:none }
/* en test, il change de couleur ET d'intitulé : on sait toujours où on est */
.simu.on{
  background:var(--ui-accent); border-color:transparent; color:#fff;
  box-shadow:0 12px 26px -8px rgba(214,51,108,.55);
}
.simu.on .i path{ fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round }
/* La carte garde le format d'un téléphone, même sur un écran de 1920.
   Ce n'est pas une coquetterie : les tailles de police des thèmes se calculent
   sur la LARGEUR DE LA CARTE (container queries). Étirée sur 1550 px, une
   question s'affichait en corps 40 et des boutons de dix centimètres — un
   rendu que personne ne verra jamais, puisque tout se lit sur un téléphone.
   Concevoir sur un format qu'on n'aura pas, c'est concevoir à l'aveugle. */
.frame{
  /* La HAUTEUR est posée d'abord, la largeur en découle. En laissant flex et
     aspect-ratio se débrouiller, le navigateur résolvait la largeur en premier
     (430 px) et en déduisait 932 px de haut : la carte dépassait de l'écran sur
     un portable de 900 px. */
  flex:0 0 auto; position:relative; overflow:hidden;
  /* Les deux dimensions sont calculées, avec un plancher sur la largeur : sur
     un portable de 720 px de haut, garder le ratio d'un téléphone donnait une
     carte de 262 px et un texte minuscule. Or c'est la largeur qui décide de
     la taille des polices — mieux vaut une carte un peu moins haute qu'un
     rendu qu'on ne peut plus juger. Le contenu, lui, défile déjà. */
  width:clamp(330px, calc((100dvh - 120px) * 9 / 19.5), 430px);
  height:min(calc(100dvh - 120px), 932px);
  margin:auto;
  border-radius:34px; border:1px solid var(--ui-line);
  box-shadow:0 30px 70px -30px #000, inset 0 0 0 1px rgba(255,255,255,.03);
}
#preview{ position:absolute; inset:0 }
.poignee{ display:none }
.feuille{ display:contents }

/* ------------------------------ dialogue ------------------------------ */
dialog{
  width:min(94vw,520px); padding:26px; color:var(--ui-txt); background:var(--ui-panel);
  border:1px solid var(--ui-line); border-radius:20px; box-shadow:0 40px 90px -30px #000;
}
dialog::backdrop{ background:rgba(6,6,12,.65); backdrop-filter:blur(3px) }
dialog h2{ margin:0 0 4px; font-size:19px; font-weight:600; letter-spacing:-.01em }
dialog .inline{ margin-bottom:6px }
.close{
  margin-top:20px; width:100%; padding:10px; cursor:pointer; font-size:13.5px;
  background:transparent; border:1px solid var(--ui-line); border-radius:11px;
}
.close:hover{ background:#22222f }

/* ------------------------ mode carte seule ---------------------------- */
body.is-view{ overflow:hidden; background:#000 }
#view{ position:fixed; inset:0 }
#view .dm-stage{ height:100dvh }
.made-with{
  position:fixed; right:10px; bottom:8px; z-index:60; font-size:10.5px; letter-spacing:.04em;
  color:#fff; opacity:.28; text-decoration:none; mix-blend-mode:difference;
}
.made-with:hover{ opacity:.75 }

/* =========================================================================
   Téléphone : aperçu collé en haut, réglages en dessous, onglets au pouce.
   ========================================================================= */


/* très petits écrans : deux colonnes de modèles, ça reste lisible */


/* =========================================================================
   Parcours multi-pages : bandeau, liste des pages, ajout de page
   ========================================================================= */
.strip{
  display:flex; gap:6px; padding:10px 10px 0; overflow-x:auto; scrollbar-width:none;
  background:var(--ui-panel);
}
.strip::-webkit-scrollbar{ display:none }
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 12px 7px 7px; font-size:12.5px; white-space:nowrap; border-radius:999px;
  color:var(--ui-dim); background:#22222f; border:1.5px solid var(--ui-line); transition:.15s;
}
.chip:hover{ color:var(--ui-txt); border-color:#454560 }
.chip i{
  display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  font:600 10px/1 'Fredoka',sans-serif; font-style:normal; background:#33334a; color:var(--ui-txt);
}
.chip.on{ color:#fff; background:var(--ui-accent); border-color:var(--ui-accent) }
.chip.on i{ background:rgba(0,0,0,.25) }
.chip.add{ padding:7px 14px; border-style:dashed }
/* « Essayer » enfoncé : la carte redevient cliquable, on ne modifie plus */
/* le × n'apparaît que sur la page sélectionnée : sinon la barre ressemble à
   un tableau de bord d'avion */
.chip .ferme{
  display:none; margin-left:8px; padding:0 1px; border:0; background:none; cursor:pointer;
  font-size:15px; line-height:1; color:inherit; opacity:.6;
}
.chip.on .ferme{ display:inline-block }
.chip .ferme:hover{ opacity:1 }

.plist{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px }
.prow{
  display:flex; align-items:center; gap:9px; padding:9px 10px; cursor:pointer;
  background:var(--ui-panel); border:1.5px solid var(--ui-line); border-radius:12px; transition:.15s;
}
.prow:hover{ border-color:#4b4b66 }
.prow.on{ border-color:var(--ui-accent); background:rgba(255,92,154,.07) }
.pnum{
  display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto; border-radius:50%;
  font-size:10.5px; background:#2e2e40; color:var(--ui-dim);
}
.prow.on .pnum{ background:var(--ui-accent); color:#fff }
.pname{ flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ptools{ display:flex; gap:3px }
.ibtn{
  width:24px; height:24px; padding:0; cursor:pointer; font-size:12px; line-height:1; border-radius:7px;
  color:var(--ui-dim); background:transparent; border:1px solid transparent;
}
.ibtn:hover{ color:var(--ui-txt); background:#2b2b3c; border-color:var(--ui-line) }

.addgrid{ display:grid; gap:8px; margin-bottom:20px }
.padd{
  text-align:left; padding:10px 12px; cursor:pointer; border-radius:12px;
  background:var(--ui-panel); border:1.5px dashed var(--ui-line); transition:.15s;
}
.padd:hover{ border-color:var(--ui-accent); border-style:solid }
.padd b{ display:block; font-size:13px; font-weight:500 }
.padd span{ display:block; font-size:11px; color:var(--ui-dim); margin-top:2px; line-height:1.45 }

.block{ padding-top:8px; border-top:1px solid var(--ui-line) }
.note.strong{ color:var(--ui-txt); font-size:13px; margin:14px 2px 10px }

.row select{
  width:100%; padding:10px 12px; font:inherit; font-size:14px; cursor:pointer;
  color:var(--ui-txt); background:var(--ui-panel); border:1.5px solid var(--ui-line); border-radius:11px;
  outline:none;
}
.row select:focus{ border-color:var(--ui-accent) }

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:99;
  padding:11px 20px; font-size:13.5px; border-radius:999px; color:#fff;
  background:#22222f; border:1px solid var(--ui-line); box-shadow:0 18px 40px -18px #000;
  animation:toastIn .3s ease both;
}
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,10px) } }

/* =========================================================================
   Dialogue de partage : lien court, QR, exports
   ========================================================================= */
dialog .bloc{ padding:14px 0; border-top:1px solid var(--ui-line) }
dialog .bloc:first-of-type{ border-top:0; padding-top:8px }
.bloc-t{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ui-dim); margin-bottom:10px }
#gen-zone{ margin-bottom:10px }
#gen-zone .primary{ width:100% }
.primary.large{ width:100%; padding:13px 16px; font-size:15px; margin-top:10px }
.qrwrap{
  display:grid; place-items:center; padding:14px; margin-bottom:10px;
  background:#fff; border-radius:16px; box-shadow:inset 0 0 0 1px var(--ui-line);
}
.qrwrap canvas{ display:block; width:190px; height:190px; image-rendering:auto }
.tog{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ui-dim); cursor:pointer }
.tog input{ accent-color:var(--ui-accent); cursor:pointer }
dialog .note{ margin:8px 2px 0 }

/* =========================================================================
   TÉLÉPHONE — à garder en toute fin de fichier : ces règles doivent passer
   après toutes les autres (même spécificité = c'est l'ordre qui tranche).
   ========================================================================= */
@media (max-width:860px){
  /* ---------------------------------------------------------------------
     Sur téléphone, l'éditeur DISPARAÎT : on montre la carte en vrai, plein
     écran, exactement telle que la personne la verra. Les réglages passent
     par-dessus, dans une feuille qu'on ouvre et referme. Rien n'est mis à
     l'échelle, rien n'est deviné : la scène EST l'écran.
     --------------------------------------------------------------------- */
  html, body{ height:100%; overflow:hidden }
  body{ padding:0 }

  .layout{ display:block; height:100% }

  /* --- la carte, plein écran --- */
  .stagewrap{ position:fixed; inset:0; z-index:1; padding:0; gap:0; display:block }
  .frame{
    /* width:auto est indispensable : la règle de bureau pose une largeur fixe
       (clamp 330px) et, sur un élément en position absolue, une largeur
       explicite l'emporte sur le décalage droit. La carte restait donc à
       330 px sur un téléphone de 393, avec une bande noire à droite et les
       boutons coupés. */
    position:absolute; inset:0; width:auto; height:auto; max-width:none; margin:0;
    border:0; border-radius:0; box-shadow:none;
  }

  /* --- boutons flottants du haut --- */
  .head{
    position:fixed; top:0; left:0; right:0; z-index:40; height:auto;
    padding:10px 10px; padding-top:calc(10px + env(safe-area-inset-top));
    background:transparent; border:0; pointer-events:none;
  }
  .brand{ display:none }
  .hactions{ pointer-events:auto; margin-left:auto; gap:8px }
  .head .ghost, .head .primary{
    padding:10px 15px; font-size:13px; border-radius:999px;
    background:rgba(18,18,26,.62); border-color:rgba(255,255,255,.14); color:#fff;
    backdrop-filter:blur(10px);
  }
  .head .ghost{ padding:10px; }                  /* icône seule */
  .langsel{ padding:10px 6px; font-size:12px; background:rgba(18,18,26,.62);
            border-color:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(10px) }
  .head .primary{ background:var(--ui-accent); border-color:transparent }
  .long{ display:none }            /* téléphone : icônes seules dans l'entête */

  #zoom{ display:none }
  #btn-mobile, #btn-plier{ display:none }
  /* le bouton de test reste sur la carte, mais au-dessus de la barre des
     pages et des onglets, sinon il passe dessous et redevient invisible */
  .frame{ --simu-bas:calc(122px + env(safe-area-inset-bottom)) }

  /* --- pastilles de pages, flottantes au-dessus de la barre d'onglets --- */
  .strip{
    position:fixed; left:0; right:0; z-index:35; background:transparent;
    bottom:calc(70px + env(safe-area-inset-bottom)); padding:6px 10px 8px;
  }
  .chip{ background:rgba(18,18,26,.68); backdrop-filter:blur(10px); border-color:rgba(255,255,255,.12) }

  /* --- la feuille de réglages, par-dessus la carte --- */
  /* le panneau ne dessine plus rien : ses enfants se placent seuls, sinon son
     transform ferait dériver la barre d'onglets (un ancêtre transformé devient
     le référent des positions fixes) */
  .panel{ display:contents }
  .feuille{
    display:flex; flex-direction:column; overflow:hidden;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    height:min(62dvh, 540px); border-radius:22px 22px 0 0;
    background:rgba(22,22,32,.97); backdrop-filter:blur(18px);
    box-shadow:0 -22px 60px -30px #000;
    transform:translateY(112%); transition:transform .3s cubic-bezier(.2,.9,.25,1);
    will-change:transform;
    touch-action:none;
  }
  /* pendant le glissement, la feuille suit le doigt : aucune transition,
     sinon elle traîne d'un tiers de seconde derrière lui */
  .feuille.glisse{ transition:none }
  .tab-body{ touch-action:pan-y }
  body.reglages .feuille{ transform:translateY(0) }
  .poignee{
    display:block; width:100%; padding:10px 0 6px; cursor:pointer;
    background:transparent; border:0; flex:0 0 auto;
  }
  .poignee::before{
    content:''; display:block; width:40px; height:4px; margin:0 auto;
    border-radius:4px; background:rgba(255,255,255,.28);
  }
  .tab-body{
    flex:1; min-height:0; overflow-y:auto; background:transparent;
    padding:4px 14px 16px;
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
  }

  /* --- barre d'onglets, toujours au premier plan --- */
  .tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:grid; grid-template-columns:repeat(5,1fr); gap:2px; overflow:visible;
    padding:5px 5px calc(5px + env(safe-area-inset-bottom));
    background:rgba(22,22,32,.94); backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .tabs button{
    display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;
    padding:8px 2px 7px; font-size:10px; border-radius:12px; white-space:nowrap; overflow:hidden;
  }
  .tabs .i{ width:20px; height:20px }
  .tabs button.on{ background:rgba(255,92,154,.15); color:var(--ui-accent); box-shadow:none }

  /* 16px mini : en dessous, iOS zoome à chaque fois qu'on tape dans un champ */
  .row input[type=text], .row textarea, .row select, #shareLink, .padd, .opt b{ font-size:16px }
  .opt input{ width:22px; height:22px }
  .ibtn{ width:32px; height:32px; font-size:14px }
  .prow{ padding:11px 10px }
  .addgrid{ gap:9px }
  .layout, .panel, .stagewrap, .tab-body, .plist, .addgrid, .prow, .padd, .opt{ min-width:0 }
  .pname, .padd b, .padd span, .opt b, .opt span, .note{ overflow-wrap:anywhere }

  /* le dialogue de partage : feuille elle aussi */
  dialog{
    width:100%; max-width:none; margin:auto 0 0; max-height:92dvh; overflow-y:auto;
    border-radius:22px 22px 0 0;
    padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  }
  dialog h2{ font-size:18px }
  .qrwrap canvas{ width:170px; height:170px }
  #btn-qr-print{ display:none }          /* on n'imprime pas depuis un téléphone */
  .lien-row #shareLink{ font-size:16px }
  .inline #shareLink{ min-width:0 }
  .toast{ bottom:calc(84px + env(safe-area-inset-bottom)); z-index:60 }
}

@media (max-width:380px){
  .tabs button{ font-size:9px }
  .head .ghost{ display:none }
}