/* ────────────────────────────────────────────────────────────
 *  Ngento — © 2026 Jean-François Pellet. Tous droits réservés.
 *  Logo Studio — styles éditeur (mobile-first). ref:NGENTOJFP-1f4d9e7a2b6c4f80
 * ──────────────────────────────────────────────────────────── */
:root{--ink:#0d1117;--muted:#6b7280;--line:#e6e8ef;--bg:#f6f7fb;--card:#fff;--accent:#2563eb;--gold:#d8b56a;}
*{box-sizing:border-box}
html{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     background:var(--bg);color:var(--ink);line-height:1.5;max-width:100%;overflow-x:hidden;padding:9px}
img,svg,canvas{max-width:100%}
.ls-topbar{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.ls-back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:13px;
         font-weight:700;padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;flex:none}
.ls-back:hover{border-color:var(--accent);color:var(--accent)}
.ls-head{display:flex;align-items:center;gap:8px;margin:0;min-width:0}
.ls-head h1{font-size:18px}.ls-head .ico{font-size:20px}
.tabs{display:flex;gap:6px;background:#eceef3;border-radius:12px;padding:4px;margin:0 0 14px}
.tabs .tab{flex:1;border:0;background:transparent;border-radius:9px;padding:11px 8px;font:inherit;font-size:14px;
           font-weight:800;color:var(--muted);cursor:pointer}
.tabs .tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pane{display:none}
.pane.on{display:block}
.ls-head h1{font-size:20px;margin:0;font-weight:800}.ls-head .ico{font-size:24px}
.sub{color:var(--muted);font-size:12px;margin:0 0 14px;max-width:80ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 12px;max-width:100%}
.card h2{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 10px}
/* ── Réglages en accordéon (<details>) : repliables + une seule ouverte (radio, via JS) ── */
details.acc{padding:0}
.acc-h{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:13px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:800;color:var(--muted);user-select:none}
.acc-h::-webkit-details-marker{display:none}
.acc-chev{font-size:13px;transition:transform .18s;color:var(--muted)}
details.acc[open] .acc-h{color:var(--ink)}
details.acc[open] .acc-chev{transform:rotate(180deg)}
.acc-body{padding:0 14px 13px}
.fld{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:600;flex-wrap:wrap;margin:0 0 8px}
.fld:last-child{margin:0}
input[type=text],input[type=number],select{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:9px;
     padding:9px 11px;background:#fff;color:var(--ink);min-width:0}
input[type=text]{flex:1;width:100%}
input[type=color]{width:38px;height:32px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;padding:0}
.color-swatch{width:40px;height:32px;flex:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  padding:0;box-shadow:0 0 0 2px #fff inset,0 1px 2px rgba(15,23,42,.1)}
.color-swatch:hover{border-color:var(--accent)}
input.hex{font-family:ui-monospace,Menlo,monospace;text-transform:lowercase;width:104px;flex:1}
input.hex.bad{border-color:#e5484d;background:#fff0f0}
input[type=range]{flex:1;min-width:0}
.rangeval{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);min-width:44px;text-align:right}
.pal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sw{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);border-radius:10px;
    padding:6px 4px;background:#fff;cursor:pointer;min-width:0}
.sw:hover{border-color:var(--gold)}
.sw .chip{width:100%;height:22px;border-radius:6px;border:1px solid #0002}
.sw .nm{font-size:9px;font-weight:700}.sw .hx{font-size:8px;color:var(--muted);font-family:ui-monospace,monospace}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:1}
.seg button{flex:1;border:0;background:#fff;font:inherit;font-size:12px;font-weight:700;padding:8px 6px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--ink);color:#fff}
.preview{background:#dde3ec;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;
         align-items:center;justify-content:center;height:min(46vh,360px);box-sizing:border-box;margin:0 0 10px}
/* le canevas « flotte » au-dessus du fond gris (ombre portée) -> délimitation visible même en blanc/transparent */
.preview svg{width:100%;height:100%;filter:drop-shadow(0 3px 14px rgba(15,23,42,.22))}
.preview.draggable{touch-action:none;cursor:grab}
.preview.draggable:active{cursor:grabbing}
/* Étape 2 : composition produit (palette latérale comme le composeur) */
.ed-stage{position:relative}
.cmp-side-r.ed-tools{bottom:8px}
/* Page Édition en un seul écran non scrolable (comme le composeur), pour LE LOGO ET
   LES PRODUITS : preview maximal, réglages dans la palette (modals/bande), footers. */
/* La mise en page « plein écran » ne doit s'appliquer QUE si le pane est actif (.on) :
   sinon, la classe fit-mode (qui reste posée) l'emporte sur .pane{display:none} par
   spécificité (#id > classe) et l'éditeur resterait visible SOUS le Composer (2 écrans). */
#pane-edit.fit-mode.on{display:flex;flex-direction:column;overflow:hidden}
#pane-edit.fit-mode .format-bar{flex:none;margin:0 0 6px}
#pane-edit.fit-mode .ed-stage{flex:1;min-height:0;margin:0;display:flex;flex-direction:column}
#pane-edit.fit-mode .preview{flex:1;height:auto;min-height:0;margin:0;padding:11px 46px 11px 11px}
#pane-edit.fit-mode .ed-ctl{flex:none;margin:6px 0 0}
#pane-edit.fit-mode .ed-strip{flex:none;margin:6px 0 0}
#pane-edit.fit-mode .ed-add{flex:none;margin:6px 0 0}
.logo-variant .seg{margin:0 auto}   /* variante centrée */
/* Mode logo : barre d'outils libellée (footer), claire et discoverable */
#pane-edit.fit-mode .logo-tools{flex:none;margin:6px 0 0}
.logo-tools{display:flex;flex-wrap:wrap;gap:6px}
.logo-tools .lt-btn{flex:1 1 30%;min-width:92px;padding:9px 8px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer}
.logo-tools .lt-btn:hover{border-color:var(--accent);color:var(--accent);background:#f5f8ff}
/* Réglages logo en PANNEAU BAS : l'aperçu reste visible au-dessus (feedback live) */
.modal.lm-sheet{background:rgba(11,16,32,.12);backdrop-filter:none;align-items:flex-end;padding:0}
/* TAILLE STANDARD de toutes les modales-feuilles : quasi plein écran (94vh), cohérent partout. */
.modal.lm-sheet .modal-card{max-width:none;border-radius:16px 16px 0 0;height:94vh;max-height:94vh;overflow:auto;box-shadow:0 -12px 40px -12px rgba(0,0,0,.4)}
.modal.lm-sheet .modal-head{position:sticky;top:0;background:#fff;z-index:5}
.exp-info{font-size:12.5px;color:var(--muted);margin:4px 2px 12px;line-height:1.4}
.exp-brand{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.exp-brand>b{font-size:14px;color:var(--ink)}
.brand-opt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);margin:5px 0;cursor:pointer}
.brand-opt small{font-weight:400;color:var(--muted)}
.fmt-presets{margin-top:4px}
.fmt-grp{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:10px 2px 4px}
.fmt-row{display:flex;flex-wrap:wrap;gap:6px}
.fmt-preset{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:5px;padding:7px 10px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer}
.fmt-preset small{font-weight:500;color:var(--muted);font-size:10.5px}
.fmt-preset:hover{border-color:var(--accent);color:var(--accent)}
.cpk-transp{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:600;margin-top:10px;cursor:pointer}
.cpk-transp[hidden]{display:none}
.ed-ctl{background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin:8px 0}
.ed-ctl[hidden]{display:none}
.ed-strip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 0 8px;padding-bottom:2px;scrollbar-width:thin}
.ed-strip::-webkit-scrollbar{height:5px}
.ed-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ed-strip .ed-item{flex:0 0 auto}
.ed-add{margin:0 0 10px}
.ed-tool-del:not(:disabled){color:#dc2626}
.ed-list{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.ed-item{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;background:#fff;cursor:pointer;font-size:12px;font-weight:700;color:var(--ink)}
.ed-item.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ed-item-nm{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-item-thumb{width:34px;height:26px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;border-radius:5px;overflow:hidden}
.ed-item-thumb svg{max-width:100%;max-height:100%}
.ed-item-tx{font-size:11px;font-weight:700;color:var(--ink);max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-del{border:0;background:transparent;color:#dc2626;cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.lib-empty{align-self:center;color:var(--muted);font-size:12px;padding:0 8px}
/* Bouton compact « Produit : <courant> » — ouvre la cascade de sélection (modals). */
.prod-current{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;font:inherit;text-align:left}
.prod-current:hover{border-color:var(--accent)}
.prod-current-tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);opacity:.75}
.prod-current-lb{flex:1;min-width:0;font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-current-chev{flex:none;color:var(--muted)}
/* Étape 1 : grandes catégories en LISTE VERTICALE (aucun scroll latéral). */
.cat-list{display:flex;flex-direction:column;gap:10px}
.cat-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border:1px solid var(--line);border-left:5px solid var(--cat,var(--line));background:#fff;border-radius:13px;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,box-shadow .15s}
.cat-row:hover{border-color:var(--cat,var(--accent));box-shadow:0 2px 10px -4px var(--cat)}
.cat-ic{flex:none;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--cat-tint,var(--bg));color:var(--cat,var(--accent))}
.cat-row-lb{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--ink)}
.cat-row-n{flex:none;font-size:12px;font-weight:800;color:var(--cat,var(--muted));background:var(--cat-tint,var(--bg));border-radius:999px;padding:3px 10px}
.cat-row-chev{flex:none;color:var(--cat,var(--muted));opacity:.65}
/* Étape 2 : grille de produits qui PASSE À LA LIGNE (mobile-first, jamais de scroll latéral). */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;padding:2px 0 4px;align-content:start}
/* Cascade catégories/produits : MÊME hauteur fixe pour les 2 modals (pas de saut de taille)
   + assez grand pour tout afficher (le contenu défile à l'intérieur seulement si nécessaire). */
#catModal .modal-card,#prodModal .modal-card{height:94vh;max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
#catModal .cat-list,#prodModal .prod-grid{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
#prodModalTitle{color:var(--cat,var(--ink))}
.prod-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 6px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;color:var(--muted);min-width:0}
.prod-card:hover{border-color:var(--cat,var(--accent));color:var(--cat,var(--accent))}
.prod-card.on{border-color:var(--cat,var(--accent));color:var(--cat,var(--accent));box-shadow:0 0 0 1px var(--cat,var(--accent)) inset}
.prod-card-ic{display:flex;color:var(--cat,var(--accent))}
.prod-card-lb{font-size:11.5px;font-weight:700;text-align:center;line-height:1.15;color:var(--ink);white-space:normal;word-break:break-word}
#kindbar{display:none}
#libModal .modal-card{display:flex;flex-direction:column;max-height:94vh}
.lib-modal-grid{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;margin-top:10px;flex:1 1 auto;min-height:0;overflow:auto}
#libModal .lib-actbar{flex:none;margin-top:10px}   /* barre d'actions figée en bas du modal */
.ed-empty{font-size:12px;color:var(--muted);padding:6px 2px}
.ed-ctl[hidden]{display:none}
.ed-hint{font-size:11.5px;color:var(--muted);margin:6px 0 0}
.elem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:10px;max-height:60vh;overflow:auto}
.elem-cell{aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px}
.elem-cell:hover{border-color:var(--accent);background:#f5f8ff}
.elem-cell svg{width:80%;height:80%}
.elem-cell.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.elem-cell.elem-brand{position:relative;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:#f5f8ff}   /* logo de la marque (pose directe) */
.elem-cell img{max-width:84%;max-height:84%;object-fit:contain}   /* logo de marque ET élément image importé */
.elem-fmt{position:absolute;bottom:2px;right:2px;font-size:8px;font-weight:800;letter-spacing:.03em;padding:1px 3px;border-radius:4px;line-height:1.2}
.elem-fmt-vec{background:#16a34a;color:#fff}   /* vectoriel = vert (à privilégier) */
.elem-fmt-raster{background:#f59e0b;color:#fff}   /* raster = orange (attention qualité) */
.elem-new{border-style:dashed;color:var(--muted)}
.elem-new:hover{border-color:var(--accent);color:var(--accent);background:#f5f8ff}
.elem-actbar{margin-top:8px}
#elemModal .modal-card{display:flex;flex-direction:column;max-height:94vh}
#elemModal .elem-grid{flex:1 1 auto;min-height:0;max-height:none}
#elemModal .lib-actbar{flex:none}   /* actions figées en bas du modal */
.lib-actbar .elem-del{color:#dc2626}
.preview.checker{background-image:linear-gradient(45deg,#e9e9ef 25%,transparent 25%),linear-gradient(-45deg,#e9e9ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e9ef 75%),linear-gradient(-45deg,transparent 75%,#e9e9ef 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.kindbar{display:flex;gap:6px;margin:0 0 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:2px}
.kindbar::-webkit-scrollbar{height:5px}
.kindbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.kindbar button{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.kindbar button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.format-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.format-bar[hidden]{display:none}
.fmt-sel{flex:1 1 auto;min-width:140px}
.fmt-num{width:78px}
.fmt-lbl{font-size:12px;font-weight:700;color:var(--muted)}
.fmt-orient{flex:0 0 auto;max-width:190px}
.fmt-flip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.fmt-flip:hover{border-color:var(--accent);color:var(--accent)}
.preview.cardflip{animation:cardflip .47s ease}
@keyframes cardflip{0%{transform:perspective(900px) rotateY(0)}49%{transform:perspective(900px) rotateY(90deg)}51%{transform:perspective(900px) rotateY(-90deg)}100%{transform:perspective(900px) rotateY(0)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;
     color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--gold)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto;text-align:center;justify-content:center}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);width:100%;padding:14px;font-size:1rem;font-weight:800}
.btn-improve{background:linear-gradient(90deg,#eef2ff,#f5edff);border-color:#dcd6f7;color:#4c3a8c;font-weight:800}
.btn-improve:hover{border-color:#a78bfa}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;
       border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:90}
/* z-index 90 = AU-DESSUS des modales (60) et des sélecteurs (70) : sinon les messages du
   parcours (« déposez votre fichier », « adresse incomplète »…) passaient DERRIÈRE le
   panneau ouvert et l'utilisateur voyait un clic sans effet. */
.toast.show{opacity:1}
textarea{width:100%;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
         resize:vertical;background:#fff;color:var(--ink)}
.hint{font-size:12px;color:var(--muted);margin:0 0 8px}
.filebtn{display:inline-flex;align-items:center;gap:7px;border:1.5px dashed var(--line);border-radius:11px;padding:11px 14px;
         font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;background:#fff;width:100%;justify-content:center}
.filebtn:hover{border-color:var(--accent);color:var(--accent)}
#sketch{width:100%;height:auto;aspect-ratio:600/340;border:1px solid var(--line);border-radius:12px;background:#fff;display:block}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
       background:rgba(11,16,32,.55);backdrop-filter:blur(3px);padding:14px}
.modal[hidden]{display:none}
#colorModal{z-index:70}   /* sélecteur de couleur : toujours AU-DESSUS des autres modales (ouvert depuis Texte/Soulignage…) */
/* ⛔⛔ Une carte de modale n'avait NI hauteur maximale NI défilement. Centrée
   en flex, dès qu'elle dépasse l'écran elle déborde en HAUT ET EN BAS, et rien
   ne permet d'atteindre ce qui est coupé : ni le bouton d'action, ni le titre.
   Vécu sur « Coller du code » le 24/08/2026 (zone de saisie + aperçu + options
   + réglages = plus haut qu'un portable). Trois modales du bloc avaient reçu un
   correctif chacune (#catModal, #libModal, #elemModal) : la règle manquait au
   niveau du gabarit. Elle y est. Les modales qui définissent leur propre hauteur
   restent prioritaires (sélecteur plus spécifique). */
.modal-card{background:#fff;border-radius:16px;padding:14px;width:100%;max-width:560px;
  max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:15px}
.modal-x{border:0;background:#eceef3;border-radius:8px;width:30px;height:30px;font-size:15px;cursor:pointer;color:var(--muted)}
.modal-card #sketch{width:100%;height:auto;aspect-ratio:600/400}
.history{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:4px}
.history:empty{display:none}
.histitem{flex:none;width:60px;height:60px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
          padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.histitem:hover{border-color:var(--accent)}
.histitem.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.18)}
.histitem svg{width:100%;height:100%}
@media(min-width:860px){
  body{padding:24px;max-width:1100px;margin:0 auto}
  .pal{grid-template-columns:repeat(7,1fr)}
}

/* ── Galerie de propositions IA (3 variantes au choix) ── */
.variants{margin:4px 0 10px}
.variants .vt-h{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:800;margin:0 0 8px;text-align:center}
.vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vt-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);border-radius:14px;padding:12px 8px 10px;cursor:pointer;
  aspect-ratio:1/1;transition:border-color .12s,box-shadow .12s,transform .12s;overflow:hidden}
.vt-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(37,99,235,.16);transform:translateY(-1px)}
.vt-card:active{transform:translateY(0)}
.vt-card svg{width:100%;flex:1;min-height:0;max-height:78%;display:block}
.vt-card .vt-nm{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--ink);
  text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:430px){.vt-grid{grid-template-columns:1fr 1fr}.vt-card .vt-nm{font-size:9px}}

/* ── Monogramme (lettermark) : galerie de propositions ── */
.lm-sublabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:800;margin:12px 0 8px}
.lm-shuffle{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;
  font:inherit;font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0}
.lm-shuffle:hover{border-color:var(--accent)}
.lm-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lm-card{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:8px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.lm-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(37,99,235,.16);transform:translateY(-1px)}
.lm-card:active{transform:translateY(0)}
.lm-card-svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.lm-card-svg svg{width:78%;height:78%}
@media(max-width:430px){.lm-gallery{grid-template-columns:1fr 1fr}}

/* ── Composer (calques : texte + symboles, multi-couleurs) ── */
.cmp-preview{display:flex;align-items:center;justify-content:center;height:170px;margin:0 0 10px;
  background:#fff;border:1px solid var(--line);border-radius:14px}
.cmp-preview .cmp-empty{color:var(--muted);font-size:13px}
.cmp-parts{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:thin}
.cmp-parts::-webkit-scrollbar{height:5px}
.cmp-parts::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.cmp-part{flex:none;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1.5px solid var(--line);
  border-radius:999px;background:#fff;cursor:pointer}
.cmp-part.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.16)}
.cmp-part-svg{display:flex;width:30px;height:30px;flex:none}
.cmp-part-nm{font-size:11px;font-weight:700;color:var(--ink);text-transform:capitalize;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-controls{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cmp-controls select{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;flex:1;background:#fff}
.cmp-colors{display:flex;flex-wrap:wrap;gap:5px;flex:1}
.cmp-col{width:24px;height:24px;border-radius:7px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.cmp-col.on{box-shadow:0 0 0 2px var(--accent)}
/* sélecteur de symboles */
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;margin-top:10px;
  max-height:54vh;overflow:auto}
.sym-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border:1px solid var(--line);
  border-radius:10px;background:#fff;cursor:pointer;color:var(--ink)}
.sym-cell:hover{border-color:var(--accent);background:#f5f8ff}

/* ── Composer : formes élémentaires + état de chargement symboles ── */
.cmp-shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;margin-top:8px}
.cmp-shapes[hidden]{display:none}
.cmp-shape{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border:1px solid var(--line);
  border-radius:10px;background:#fff;cursor:pointer}
.cmp-shape:hover{border-color:var(--accent);background:#f5f8ff}
.sym-loading{padding:30px 10px;text-align:center;color:var(--muted);font-size:13px;grid-column:1/-1}

/* ── Bibliothèque « Mes logos » : strip horizontal dans l'en-tête (remplace les onglets) ── */
.libbar{margin:0 0 12px}
.libbar-top{margin-left:46px}                /* laisse la place au bouton retour flottant */
.lib-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.lib-strip::-webkit-scrollbar{height:6px}
.lib-strip::-webkit-scrollbar-thumb{background:#cdd3df;border-radius:3px}
.lib-new,.lib-chip{flex:0 0 auto;width:52px;height:52px;border-radius:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;background:#fff}
.lib-new{border:1.5px dashed var(--line);color:var(--muted);font:inherit}
.lib-new:hover{border-color:var(--accent);color:var(--accent);background:#f5f8ff}
.lib-new-plus{font-size:24px;line-height:1}
.lib-trame{flex-direction:column;gap:2px;width:auto;min-width:60px;padding:0 10px;border:1.5px solid var(--accent);color:var(--accent)}
.lib-trame:hover{background:#f5f8ff;box-shadow:0 2px 10px -4px var(--accent)}
.lib-trame-ic{display:flex}.lib-trame-lb{font-size:11px;font-weight:600;letter-spacing:.02em}
.lib-chip{position:relative;border:1px solid var(--line);overflow:hidden}
.lib-chip svg{width:74%;height:74%}
/* logo actuellement ouvert : pastille verte discrète (PAS un anneau, pour ne pas être confondu avec la sélection) */
.lib-chip.current::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 1.5px #fff}
.lib-chip.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}   /* sélection = anneau accent */
.lib-actbar{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;
  background:#f3f5fa;border:1px solid var(--line);border-radius:11px;padding:6px}
.lib-actbar[hidden]{display:none}
.lib-actbar .btn{flex:1 1 0;min-width:0;padding:7px 4px;font-size:12px;font-weight:700;
  text-align:center;justify-content:center;white-space:nowrap}
.lib-actbar .lib-del{color:#dc2626}

/* ── Composer : remplit l'écran, cadre extensible, réglages dans les marges ── */
.tabs-top{margin-left:46px}                 /* laisse la place au bouton retour flottant */
#pane-create.on{display:flex;flex-direction:column;overflow:hidden}   /* hauteur posée par JS -> zéro scroll */
#pane-create>.card{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;margin-bottom:8px;padding:11px 9px 9px}
.cmp-stage{position:relative;flex:1;min-height:200px;margin:0 0 8px;display:flex}
/* Cadre de TAILLE FIGÉE : artboard du logo (haut, extensible) + bande de réglage (bas, fixe). */
.cmp-frame{flex:1;min-height:0;display:flex;flex-direction:column;background:#edf0f6;
  border:1px solid #e2e6ef;border-radius:16px;overflow:hidden}
.cmp-preview{position:relative;flex:1;min-height:0;height:auto;width:auto;margin:0;padding:10px 46px 8px 11px;
  touch-action:none;display:flex;align-items:center;justify-content:center;cursor:grab}
.cmp-preview:active{cursor:grabbing}
/* logo posé sur un plan de travail BLANC surélevé (artboard) ; appuis traversent vers le cadre */
.cmp-preview svg{width:100%;height:100%;pointer-events:none;background:#fff;border-radius:12px;
  box-shadow:0 10px 26px rgba(15,23,42,.13),0 1px 2px rgba(15,23,42,.06)}
.cmp-side{position:absolute;display:flex;z-index:2}
.cmp-side-r{right:7px;top:8px;bottom:126px;flex-direction:column;align-items:center;gap:4px;width:32px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.cmp-side-r::-webkit-scrollbar{width:4px}
.cmp-side-r::-webkit-scrollbar-thumb{background:#cdd3df;border-radius:3px}
.cmp-side-r .cmp-tool{width:26px;height:26px;flex:none;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);font-size:15px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.cmp-side-r .cmp-tool:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cmp-side-r .cmp-tool:disabled{opacity:.35;cursor:default}
.cmp-side-r .cmp-tool[hidden]{display:none}
.cmp-side-r .cmp-tool.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.cmp-side-r .cmp-tool.cmp-tool-color.on{color:transparent}
.cmp-side-r .cmp-tool.loading{animation:cmp-pulse 1s ease-in-out infinite}
@keyframes cmp-pulse{0%,100%{opacity:.45}50%{opacity:1}}
.cmp-side-r .cmp-tool-color{font-size:0}   /* pastille de couleur : pas d'icône, le fond = la couleur */
.cmp-side-r .cmp-tool-color{box-shadow:0 0 0 1px var(--line) inset,0 1px 2px rgba(15,23,42,.1)}
/* Barre d'actions horizontale (sous le logo, au-dessus des réglages) */
.cmp-actions{flex:none;display:flex;gap:6px;padding:6px 8px;border-top:1px solid #e2e6ef;background:#fbfcfe}
.cmp-act{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;
  font-size:11.5px;font-weight:700;padding:6px 4px;cursor:pointer;white-space:nowrap}
.cmp-act:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cmp-act:disabled{opacity:.4;cursor:default}
.cmp-act svg{flex:none}
/* Zone de réglage contextuelle : DANS le cadre, sous le logo, hauteur FIXE (logo figé) */
.cmp-ctl{flex:none;height:80px;background:#fff;border-top:1px solid #e2e6ef;border-radius:0 0 15px 15px;
  padding:8px 11px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.cmp-ctl[hidden]{display:none}
.ctl-hint{font-size:11.5px;line-height:1.3;color:var(--muted);margin:0 0 7px;min-height:15px}
.ctl-rows{flex:1;display:flex;align-items:center}
.ctl-row{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.ctl-row[hidden]{display:none}
.ctl-row input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.ctl-row input[type=range][hidden]{display:none}
.ctl-row-adjust{gap:12px;align-items:stretch}
.adj-col{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-width:0;margin:0}
.adj-col>span{font-size:10.5px;font-weight:600;color:var(--muted);text-align:center;line-height:1.1}
.adj-col input[type=range]{width:100%;min-width:0}
.ctl-row-order{gap:5px}
.ctl-row-order .btn-mini{flex:1;padding:6px 3px;font-size:11px;font-weight:600;white-space:nowrap;border-radius:8px}
.ctl-row-erase{gap:9px}
.ctl-row-erase .btn-mini{flex:none;padding:6px 10px;font-size:12px;font-weight:700;border-radius:9px}
.ctl-row-fill{gap:6px;flex-wrap:wrap}
.ctl-row-fill .btn{flex:1 1 auto;min-width:0;padding:7px 6px;font-size:12px;font-weight:700;white-space:nowrap}
.ctl-row-fill .btn.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fill-swatch{width:13px;height:13px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(15,23,42,.18) inset;background:#888}
.fill-gswatch{width:26px;height:30px;flex:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;padding:0;background:#888}
.fill-gswatch[hidden]{display:none}
.exp-order{margin:4px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.exp-order[hidden]{display:none}
.po-ship{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.po-ship[hidden]{display:none}
.po-ship .fld{margin:0}
#poPrice:not(:empty){margin:8px 0;font-weight:700}
/* Gomme : curseur croix (toujours visible, jamais « invisible ») + l'anneau montre la taille.
   touch-action:none = pas de scroll pendant le tracé tactile. */
.preview.erasing,.cmp-preview.erasing{cursor:crosshair}
.preview.erasing svg,.cmp-preview.erasing svg{touch-action:none}
/* Outil Points : déplacement de nœuds (pas de scroll tactile pendant le drag) */
.cmp-preview.noding{cursor:move}
.cmp-preview.noding svg{touch-action:none}
.cmp-preview svg circle.nh{cursor:grab}
/* L'anneau de gomme est désormais un <circle class="er-brush"> DANS le SVG (aligné par construction). */
.ctl-row input[type=text]{flex:1}
.ctl-row .btn{flex:1}
.ctl-row-relief{flex-wrap:nowrap}
.ctl-row-relief .seg{flex:0 0 auto}
.ctl-row-relief input[type=range]{flex:1 1 0}
.ctl-row-typo{flex-wrap:wrap}
.ctl-row-typo input[type=range]{flex:1 1 100%}
.typo-sel{flex:1 1 42%;min-width:120px;font-size:12px}
/* Footer d'ajout : boutons colorés et conviviaux */
.cmp-add{display:flex;gap:8px;margin-top:8px}
.add-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;
  border-radius:12px;padding:13px 6px;font:inherit;font-size:13px;font-weight:800;color:#fff;
  cursor:pointer;box-shadow:0 3px 9px rgba(15,23,42,.16)}
.add-btn:active{transform:translateY(1px)}
.add-ic{font-size:15px;font-weight:800;opacity:.92}
.add-text{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.add-symbol{background:linear-gradient(135deg,#7c3aed,#6d28d9)}
.add-shape{background:linear-gradient(135deg,#0d9488,#0f766e)}
.add-import{background:linear-gradient(135deg,#64748b,#475569)}
.add-qr{background:linear-gradient(135deg,#0f172a,#334155)}
.qr-bg-opt{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569;margin:4px 2px 8px;cursor:pointer}
.qr-bg-opt small{color:#94a3b8}
.qr-seg{display:flex;gap:6px;margin:2px 2px 10px}
.qr-seg button{flex:1;padding:8px;border:1px solid #cbd5e1;background:#fff;border-radius:9px;font-size:13px;font-weight:600;color:#475569;cursor:pointer}
.qr-seg button.on{background:#0f172a;color:#fff;border-color:#0f172a}
.qr-seg button small{font-size:10px;font-weight:700;opacity:.6;letter-spacing:.04em}
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 2px 6px}
.qr-grid input{width:100%;padding:9px 10px;border:1px solid #cbd5e1;border-radius:9px;font-size:14px;box-sizing:border-box}
.qr-grid .qr-wide{grid-column:1/-1}
.qr-hint{font-size:12.5px;line-height:1.4;color:#475569;background:#f1f5f9;border-radius:9px;padding:8px 10px;margin:0 2px 10px}
.imp-quality{font-size:12px;color:var(--muted);margin:8px 0 12px;text-align:center}
/* Colle-code (HTML/SVG) : lecteur éditable + barre fluidifier */
.code-input{width:100%;box-sizing:border-box;min-height:120px;max-height:34vh;resize:vertical;
  font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#0d1117;
  border:1px solid #cbd5e1;border-radius:10px;padding:10px;background:#f8fafc;overflow:auto;
  /* ⛔ `white-space:pre` = aucun retour : un attribut `d` de 4 000 caractères
     s'étirait en une ligne infinie qu'il fallait faire défiler à l'horizontale
     pour lire. `pre-wrap` conserve l'indentation ET replie les longues valeurs. */
  white-space:pre-wrap;overflow-wrap:anywhere}
.code-input:focus{outline:none;border-color:var(--accent);background:#fff}
.code-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.code-opts{display:flex;flex-direction:column;gap:7px;margin:4px 0 12px;
  background:#f8fafc;border:1px solid #e6e8ef;border-radius:11px;padding:10px 12px}
.code-opt{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#1f2937;cursor:pointer;flex-wrap:wrap}
.code-opt small{font-weight:500;color:var(--muted);font-size:11.5px}
/* Outil hors de son domaine (ex. « Pleins & déliés » sur un tracé PLEIN) :
   RETIRÉ de l'écran, pas grisé — un outil visible qu'on ne peut pas utiliser
   est frustrant. Une note explique en une ligne pourquoi il n'est pas là. */
.code-note{font-size:11.5px;color:var(--muted);line-height:1.45;margin:0 0 2px;
  padding:6px 8px;background:#f8fafc;border-left:2px solid #cbd5e1;border-radius:0 4px 4px 0}
.code-sub{display:flex;flex-direction:column;gap:6px;padding:2px 4px 4px 24px}
.code-sub label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#475569}
.code-sub input[type=range]{flex:1;min-width:90px}
.code-edit-hint{margin:0 0 8px;padding:7px 10px;border-radius:9px;font-size:12px;line-height:1.4;
  color:#1e3a8a;background:#eef4ff;border:1px solid #cdddff}
/* « Couleur principale » dans le sélecteur sombre */
.cpk-auto{margin-top:10px;width:100%;border:1px solid #3a4254;background:#2b3242;color:#e5e7eb;
  border-radius:9px;padding:9px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.cpk-auto:hover{border-color:#6b7280}
/* Sélecteur de police visuel : chaque nom écrit dans sa propre police */
.fontpick{position:relative;flex:1;min-width:0}
.fontpick-cur{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:9px 11px;
  font:inherit;font-size:16px;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fontpick-chev{font-family:system-ui,sans-serif;font-size:12px;color:var(--muted);flex:none}
.fontpick-pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;
  border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 30px -8px rgba(15,23,42,.3);
  max-height:264px;overflow:auto;padding:5px}
.fontpick-pop[hidden]{display:none}
.fontpick-item{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:9px 10px;border-radius:8px;font-size:19px;line-height:1.15;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fontpick-item:hover{background:#f1f5ff}
.fontpick-item.on{background:#e7eeff;font-weight:700}
/* Modal de sélection de police (échantillons écrits dans leur police) */
.font-list{display:flex;flex-direction:column;gap:5px;max-height:64vh;overflow:auto;margin-top:8px}
.font-item{display:flex;align-items:center;width:100%;box-sizing:border-box;min-height:54px;text-align:left;
  border:1px solid var(--line);background:#fff;cursor:pointer;padding:6px 14px;border-radius:10px;
  font-size:19px;line-height:1.5;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-item:hover{border-color:var(--accent);background:#f5f8ff}
.font-item.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.txt-styles{display:flex;gap:6px;margin:0 0 10px}
.txt-style{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;min-height:60px;
  border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;color:var(--ink);
  font-size:12px;font-weight:600;line-height:1}
.txt-style:hover{border-color:var(--accent);color:var(--accent)}
.txt-style.on{border-color:var(--accent);color:var(--accent);background:#f5f8ff;box-shadow:0 0 0 1px var(--accent) inset}
#txtFontList{max-height:34vh}
.ctxt-fine{margin:0 0 10px}
.ctxt-fine-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12px;color:var(--ink)}
.ctxt-fine-row>span{min-width:96px;color:var(--muted);font-weight:600}
.ctxt-fine-row input[type=range],.ctxt-fine-row .typo-sel{flex:1;min-width:0}
.ctxt-swatch{width:34px;height:28px;border-radius:7px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;flex:none}
#ctxtFontList{max-height:30vh}
/* Panneau décor (drill-down) : gros contrôles au doigt, zéro scroll */
.ctxt-back{background:none;border:none;color:var(--ink);cursor:pointer;padding:2px 6px 2px 0;display:inline-flex;align-items:center;margin-right:auto}
.modal-head .ctxt-back+b{margin-right:auto}
.ctxt-panel-lbl{font-size:12px;font-weight:700;color:var(--muted);margin:4px 0 6px}
.ctxt-typegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.ctxt-typegrid button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;min-height:62px;
  border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;color:var(--ink);font-size:12px;font-weight:600}
.ctxt-typegrid button:hover{border-color:var(--accent);color:var(--accent)}
.ctxt-typegrid button.on{border-color:var(--accent);color:var(--accent);background:#f5f8ff;box-shadow:0 0 0 1px var(--accent) inset}
.ctxt-switch{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.ctxt-switch input{opacity:0;width:0;height:0;position:absolute}
.ctxt-switch span{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.15s;cursor:pointer}
.ctxt-switch span::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ctxt-switch input:checked+span{background:var(--accent)}
.ctxt-switch input:checked+span::before{transform:translateX(18px)}
#ctxtModal .modal-card{max-height:92vh;overflow:auto}
#ctxtBoldPreset,#ctxtItalicPreset{grid-template-columns:repeat(2,1fr)}
.cmp-side-r .cmp-colors{display:flex;flex-direction:column;gap:6px;width:100%}
.cmp-side-r .cmp-col{width:100%;height:30px;flex:none;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.cmp-side-r .cmp-col.on{box-shadow:0 0 0 2px var(--accent)}
.cmp-side-r .hex{width:100%;font-size:9px;padding:3px 1px;text-align:center;flex:none}
/* bande de réglages PLEINE LARGEUR en bas = zone qui ne déplace jamais le logo */
.cmp-axes{position:absolute;left:0;right:0;bottom:0;padding:9px 14px 11px;display:flex;flex-direction:column;gap:9px;z-index:2;
  border-radius:0 0 13px 13px}
.cmp-ax{display:flex;align-items:center;gap:8px}
.cmp-ax>span{font-size:14px;color:#94a3b8;width:16px;text-align:center;flex:none}
.cmp-ax input[type=range]{flex:1;margin:0;accent-color:var(--accent)}
.cmp-footer{flex:none;padding:2px 0 calc(2px + env(safe-area-inset-bottom))}
.cmp-footer .btn-primary{margin:0}
.cmp-del{flex:none;width:20px;height:20px;border-radius:50%;border:0;background:#fde8e8;color:#dc2626;
  font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.cmp-del:hover{background:#dc2626;color:#fff}
.cmp-hint{font-size:11px;color:var(--muted);text-align:center;margin:0 0 8px}
/* pastille de déplacement FIXE dans le coin haut-gauche (détachée du logo) */
/* Outil dans le coin haut-gauche du cadre (annuler ; d'autres pourront s'y ajouter). */
.cmp-corner{position:absolute;z-index:3;left:8px;top:8px;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);
  border:1px solid var(--line);box-shadow:0 2px 8px rgba(15,23,42,.14);cursor:pointer;
  font-size:18px;line-height:1;padding:0}
.cmp-corner:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cmp-corner:disabled{opacity:.4;cursor:default}
.cmp-col-auto{position:relative}
.cmp-col-auto::after{content:"A";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;mix-blend-mode:difference}

.fld[hidden]{display:none}

/* Aperçu du texte dans le modal */
.text-preview{display:flex;align-items:center;justify-content:center;height:min(42vh,260px);margin:0 0 12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:10px;box-sizing:border-box}
.text-preview svg{width:100%;height:100%}   /* remplit le cadre (au lieu d'un SVG figé à 150px) */
/* Aperçu des réglages : on exploite l'espace disponible (bien plus grand) */
#advPreview{height:min(52vh,440px)}
/* les modals avec aperçu peuvent défiler si besoin (petits écrans) */
#advModal .modal-card,#textModal .modal-card{max-height:92vh;overflow:auto}
.text-preview .lm-load{color:var(--muted);font-size:22px}

/* Couleur perso : pastille arc-en-ciel (palette) + sélecteur « Définir » web sombre */
.cmp-col-custom{color:#fff;font-weight:800;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;text-shadow:0 1px 2px rgba(0,0,0,.5);
  background:conic-gradient(from 0deg,#ef4444,#f97316,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444)}
.cpk-card{background:#1b2030;color:#e5e7eb;max-width:420px}
.cpk-card .modal-head{color:#fff;font-size:16px}
.cpk-card .modal-x{background:#2b3242;color:#cbd5e1}
.cpk-field{position:relative;width:100%;height:210px;border-radius:12px;cursor:crosshair;touch-action:none;
  background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,#0bf)}
.cpk-dot{position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.55);transform:translate(-50%,-50%);pointer-events:none;left:60%;top:10%}
.cpk-hue{-webkit-appearance:none;appearance:none;width:100%;height:18px;border-radius:9px;margin:16px 0;touch-action:none;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cpk-hue::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #777;cursor:pointer}
.cpk-hue::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #777;cursor:pointer}
.cpk-bottom{display:flex;align-items:center;gap:12px}
.cpk-swatch{width:58px;height:50px;border-radius:10px;border:1px solid rgba(255,255,255,.15);flex:none;background:#2563eb}
.cpk-bottom .hex{flex:1;width:auto;background:#11151f;color:#fff;border-color:#374151;font-size:18px;text-align:center;padding:14px;letter-spacing:.05em}

/* Bouton « Utiliser » remonté sur la ligne « Composer » (compact, pro) */
/* En-tête du composeur = barre du haut : dégage le bouton retour flottant (comme
   .libbar-top) -> une ligne « [retour] Composeur … [Édition →] ». */
.cmp-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px 38px}
.cmp-head h2{margin:0}
.btn-apply{border:0;cursor:pointer;color:#fff;font:inherit;font-weight:800;font-size:13px;
  padding:9px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 3px 10px rgba(37,99,235,.38)}
.btn-apply:hover{filter:brightness(1.08)}
.btn-apply:active{transform:translateY(1px)}
.btn-apply span{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.25);border-radius:50%;font-size:10px}

/* ── Collaboratif temps réel : pastilles des utilisateurs connectés sur le document ── */
.collab-peers{display:flex;gap:6px;align-items:center;padding:4px 8px;flex-wrap:wrap}
.collab-av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.28);cursor:default;user-select:none}

/* ── Outil Mentions légales (SIREN → registre public) ── */
.legal-hint{font-size:12px;color:var(--muted);padding:2px 2px 8px;line-height:1.45}
.legal-preview{background:#f6f7f9;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  margin:2px 0 10px;font-size:12.5px;line-height:1.6;color:#1e293b;max-height:170px;overflow:auto}
.legal-preview div{padding:1px 0}
.legal-lbl{min-width:78px;font-size:12.5px;color:var(--muted)}
.legal-opts{padding:2px 2px 8px;display:flex;flex-direction:column;gap:6px}
.legal-opts label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#1e293b;cursor:pointer}
.legal-opts i{color:var(--muted);font-style:italic;font-size:11.5px}
.legal-sub{padding-left:24px}
/* champ avec indicateur de recherche (registre public) */
.legal-fld{position:relative}
.legal-fld input{width:100%}
.legal-spin{position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;
  border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;
  animation:legal-spin .7s linear infinite;pointer-events:none}
@keyframes legal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.legal-spin{animation-duration:2s}}

/* ── Parcours de commande impression : tuiles-boutons 3D (cf PATTERN_UI_TUILES_3D) ── */
.po-hero{font-weight:700;color:#111827;margin:2px 0 4px;font-size:.9rem}
.po-hint{color:#6b7280;font-size:.78rem;margin:0 0 8px}
.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));grid-auto-rows:1fr;gap:11px;margin:8px 0 12px}
.po-tile-lb{min-height:2.2em}   /* réserve 2 lignes → toutes les tuiles alignées même si le libellé est court */
.po-tile{position:relative;background:#fff;border:1px solid #e6eaf2;border-radius:15px;padding:12px 12px 11px;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;color:#111827;font-family:inherit;min-width:0;width:100%;
  box-shadow:0 5px 0 color-mix(in srgb,var(--tc,#2563eb) 28%,#e3e7f1),0 9px 16px rgba(15,23,42,.12);
  transition:transform .09s ease,box-shadow .09s ease}
.po-tile:hover{transform:translateY(-1px);box-shadow:0 6px 0 color-mix(in srgb,var(--tc,#2563eb) 28%,#e3e7f1),0 13px 22px rgba(15,23,42,.16)}
.po-tile:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--tc,#2563eb) 28%,#e3e7f1),0 3px 7px rgba(15,23,42,.1)}
.po-tile-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--tc,#2563eb) 14%,#fff);color:var(--tc,#2563eb);margin-bottom:3px;flex:0 0 auto}
.po-tile-ic svg{width:17px;height:17px}
.po-tile-lb{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8b93a7}
.po-tile-val{font-size:13px;font-weight:800;line-height:1.15;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1f2937}
.po-pricebar{display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:linear-gradient(180deg,#eef4ff,#e2ecff);border:1px solid #d3e0fb;border-radius:14px;padding:12px 14px;margin:4px 0 2px}
.po-price{font-size:15px;font-weight:800;color:#1e3a8a;line-height:1.25}
.po-price small{display:block;font-size:.72rem;font-weight:600;color:#3b5aa6}
.po-cta{background:linear-gradient(180deg,#2f6bff,#1d4ed8);color:#fff;border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 0 #1a3ea8,0 8px 16px rgba(37,99,235,.32);transition:transform .09s,box-shadow .09s}
.po-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #1a3ea8,0 3px 8px rgba(37,99,235,.28)}
.po-cta--pay{width:100%;margin-top:10px;background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 4px 0 #15803d,0 8px 16px rgba(22,163,74,.32)}
.po-cta--pay:active{box-shadow:0 1px 0 #15803d,0 3px 8px rgba(22,163,74,.28)}
.po-picklist{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto;padding:4px 2px}
.po-pick-row{background:#fff;border:1px solid #e6eaf2;border-radius:11px;padding:11px 13px;cursor:pointer;font-weight:700;text-align:left;
  font-family:inherit;font-size:13px;color:#1f2937;box-shadow:0 3px 0 #e8ebf3;transition:transform .08s ease}
.po-pick-row:active{transform:translateY(2px);box-shadow:0 1px 0 #e8ebf3}
.po-pick-row.on{border-color:#2f6bff;box-shadow:0 3px 0 #a9c4ff;color:#1d4ed8;background:#f5f9ff}
.po-pick-sub{font-size:11px;color:#8b93a7;font-weight:500;display:block;margin-top:1px}

/* Commande impression & import : panneau quasi PLEIN ÉCRAN (évite le scroll, cf patron plein écran) */
/* TAILLE STANDARD des panneaux du parcours impression : quasi plein écran (94vh) */
#printOrderSheet .modal-card,#importPrintSheet .modal-card,#poPickSheet .modal-card{height:94vh;max-height:94vh;display:flex;flex-direction:column}
/* ⚠️ Colonne flex à hauteur FIXE : sans cette règle les blocs se COMPRESSENT (flex-shrink:1)
   au lieu de faire défiler le panneau → le dépôt de fichier, le prix et le bouton de paiement
   étaient écrasés en bas de la feuille, donc invisibles et non cliquables (« bouton inactif »).
   Chaque bloc garde sa hauteur naturelle ; le trop-plein défile (overflow:auto de .modal-card). */
#printOrderSheet .modal-card>*,#importPrintSheet .modal-card>*{flex:0 0 auto}
#printOrderSheet .modal-head,#importPrintSheet .modal-head,#poPickSheet .modal-head{position:sticky;top:0;background:#fff;z-index:5;padding-bottom:8px;margin-bottom:6px}
#poPickSheet .po-picklist{flex:1 1 auto;max-height:none}   /* la liste remplit la hauteur standard */

/* Confirmation de commande : dire que c'est passé, et où réclamer. */
.od-ok{display:flex;gap:12px;align-items:center;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:14px;padding:12px 14px;color:#15803d;font-size:13px;line-height:1.45;margin:2px 0 10px}
.od-ok svg{flex:0 0 auto}
.od-ok b{color:#14532d}
/* Aperçu agrandi : l'image peut dépasser, le cadre défile dans les deux sens. */
#batZoomSheet .modal-card{height:94vh;max-height:94vh;padding:0;overflow:hidden;display:flex;flex-direction:column}
#batZoomSheet .modal-head{flex:0 0 auto;margin:0;padding:10px 12px;border-bottom:1px solid var(--line)}
.bz-tools{display:flex;align-items:center;gap:6px}
.bz-tools .ad-btn{min-width:38px}
.bz-hint{flex:0 0 auto;font-size:11.5px;color:var(--muted);text-align:center;padding:6px 10px;background:#fff}
/* ⛔⛔ `min-height/min-width:0` : sans eux, un item de flex ne descend PAS sous sa
   taille min-content — le cadre gonfle à la taille de l'image zoomée, sort du
   cadre 440 px (ng-frame.css, overflow-x:hidden) et RIEN ne défile. */
#batZoomWrap{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;
  background:#f2f4f8;padding:8px;-webkit-overflow-scrolling:touch;cursor:grab}
#batZoomWrap.grabbing{cursor:grabbing}
/* ⛔⛔ `max-width:none` : la règle globale `img{max-width:100%}` ramenait toute
   largeur de zoom à la largeur du cadre → les boutons +/− restaient sans effet. */
#batZoomWrap img{display:block;max-width:none;height:auto;background:#fff;user-select:none;
  box-shadow:0 6px 18px -6px rgba(15,23,42,.4)}

/* Repli des réglages avancés : un lien sous la grille. Surtout PAS une tuile — une tuile
   se lit comme un réglage du produit, et celle-ci n'en était pas un. */
.po-more{display:block;margin:6px 2px 2px auto;border:0;background:none;padding:4px 2px;
  font:inherit;font-size:12.5px;font-weight:700;color:#2f6bff;cursor:pointer;text-align:right}
.po-more:hover{text-decoration:underline}

/* Bouton « Détail » de l'en-tête : ouvre le descriptif produit à la demande, pour que
   le panneau de commande tienne sans défiler (l'écran doit rester simple). */
.po-help{display:inline-flex;align-items:center;gap:6px;margin-left:auto;margin-right:8px;
  border:1px solid #d3ddf0;background:#fff;color:#475569;border-radius:999px;
  padding:5px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.po-help:hover{border-color:#2f6bff;color:#1d4ed8}
.po-help svg{flex:0 0 auto}
#prodInfoSheet{z-index:70}   /* au-dessus du panneau qui l'a ouvert */
#prodInfoSheet .modal-card{height:auto;max-height:94vh;overflow:auto}
#prodInfoSheet .po-info-specs{gap:7px}

/* Bloc description + caractéristiques du produit sélectionné (données réelles) */
.po-info{background:linear-gradient(180deg,#fbfcff,#f4f7fe);border:1px solid #e5eaf5;border-radius:14px;padding:12px 14px;margin:0 0 12px}
.po-info-desc{margin:0 0 8px;font-size:13px;line-height:1.45;color:#2b3446;font-weight:600}
.po-info-specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.po-info-specs li{display:flex;gap:10px;align-items:baseline;font-size:12.5px}
.po-info-k{flex:0 0 92px;color:#8b93a7;font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.03em;padding-top:1px}
.po-info-v{color:#1f2937;font-weight:600;line-height:1.35}

.po-tsub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8b93a7;margin:14px 2px 2px}

.po-filebtn{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px dashed #c3ccde;border-radius:12px;padding:14px;cursor:pointer;color:#334155;font-weight:700;font-size:13px;box-shadow:0 3px 0 #e8ebf3;transition:transform .08s,border-color .15s}
.po-filebtn:hover{border-color:#2f6bff;color:#1d4ed8}
.po-filebtn:active{transform:translateY(2px)}
.po-filebtn svg{flex:0 0 auto;color:#2f6bff}
.po-filebtn.on{border-style:solid;border-color:#16a34a;color:#15803d;box-shadow:0 3px 0 #bbf7d0}
/* BAT (bon à tirer) : aperçu du fichier réel + constats + validation explicite.
   Rien ne part à l'impression tant que la case n'est pas cochée. */
.po-bat{background:#fff;border:1px solid #e5eaf5;border-radius:14px;padding:12px 14px;margin:10px 0 2px}
.po-bat-view{background:repeating-conic-gradient(#f2f4f8 0% 25%,#fff 0% 50%) 50%/16px 16px;
  border:1px solid #e5eaf5;border-radius:10px;padding:10px;display:flex;justify-content:center;align-items:center;min-height:140px}
.po-bat-view img{max-width:100%;max-height:46vh;height:auto;display:block;box-shadow:0 6px 18px -6px rgba(15,23,42,.4);background:#fff}
/* Attente : le bouton dit qu'il travaille (sinon on reclique, et on commande deux fois). */
.po-cta:disabled{opacity:.6;cursor:progress;box-shadow:none;transform:none}
.po-prog{height:6px;border-radius:999px;background:#e2e8f5;overflow:hidden;margin:8px 0 2px;position:relative}
.po-prog::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:999px;
  background:linear-gradient(90deg,#2f6bff,#16a34a);transition:width .18s linear}
/* Attente indéterminée : l'envoi est fini, le serveur analyse et rend le fichier. */
.po-prog--wait::after{width:38%;animation:po-slide 1.1s ease-in-out infinite}
@keyframes po-slide{0%{left:-38%}100%{left:100%}}
/* Navigation recto / verso du bon à tirer. */
.po-bat-nav{display:flex;gap:6px;margin:0 0 8px;flex-wrap:wrap}
.po-bat-nav button{border:1px solid #d3ddf0;background:#fff;color:#334155;border-radius:999px;
  padding:6px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.po-bat-nav button.on{border-color:#2f6bff;color:#1d4ed8;background:#f2f7ff;box-shadow:0 2px 0 #c7d9ff}
.po-bat-specs{margin:12px 0 0;background:linear-gradient(180deg,#fbfcff,#f4f7fe);border:1px solid #e5eaf5;border-radius:10px;padding:10px 12px;gap:6px}
.po-bat-checks{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.po-bat-checks li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4}
.po-bat-checks li.ok{color:#15803d}
.po-bat-checks li.warn{color:#b45309}
.po-bat-checks li.block{color:#b91c1c}
.po-bat-stop{margin:12px 0 2px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;
  padding:11px 13px;font-size:12.5px;line-height:1.45;color:#991b1b;font-weight:600}
.po-bat-checks li svg{flex:0 0 auto;margin-top:1px}
.po-bat-checks li span{color:#2b3446}
.po-bat-ok{display:flex;gap:9px;align-items:flex-start;margin:12px 0 10px;font-size:13px;font-weight:700;color:#1f2937;cursor:pointer}
.po-bat-ok input{width:20px;height:20px;flex:0 0 auto;accent-color:#16a34a;margin:0}
.po-filebtn.need{border-color:#dc2626;color:#b91c1c;box-shadow:0 3px 0 #fecaca;animation:po-need .5s ease 2}
.po-filebtn.need svg{color:#dc2626}
@keyframes po-need{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.po-filebtn.on svg{color:#16a34a}

#poPickSheet{z-index:70}   /* le sélecteur passe TOUJOURS au-dessus des panneaux commande/import */

/* Sélecteur de réglage THÉMATISÉ à la couleur du réglage (--pc) : en-tête + coche + hover colorés */
#poPickSheet .modal-head{gap:11px;border-bottom:2px solid color-mix(in srgb,var(--pc,#2563eb) 28%,#eef1f8);padding-bottom:10px}
#poPickSheet #poPickTitle{color:color-mix(in srgb,var(--pc,#2563eb) 62%,#111827);font-size:15px}
.po-pick-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--pc,#2563eb) 15%,#fff);color:var(--pc,#2563eb);flex:0 0 auto}
.po-pick-ic svg{width:19px;height:19px}
.po-pick-row{position:relative;padding-right:42px}
.po-pick-row:hover{border-color:color-mix(in srgb,var(--pc,#2563eb) 45%,#fff);transform:translateY(-1px);box-shadow:0 5px 0 color-mix(in srgb,var(--pc,#2563eb) 18%,#e8ebf3)}
.po-pick-row.on{border-color:var(--pc,#2563eb);background:color-mix(in srgb,var(--pc,#2563eb) 9%,#fff);color:color-mix(in srgb,var(--pc,#2563eb) 55%,#111827);box-shadow:0 3px 0 color-mix(in srgb,var(--pc,#2563eb) 40%,#dfe2ee)}
.po-pick-row.on::after{content:"";position:absolute;right:16px;top:44%;width:8px;height:15px;border:solid var(--pc,#2563eb);border-width:0 3px 3px 0;transform:translateY(-50%) rotate(45deg)}

/* ── Facturation à une organisation (repliée par défaut : la majorité des acheteurs
      sont des particuliers, et le tunnel ne doit pas s'allonger pour eux) ────────── */
.po-billing{margin-top:4px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fbfcfe}
.po-billing>summary{cursor:pointer;font-weight:700;font-size:13px;color:#1f2937;list-style:none}
.po-billing>summary::-webkit-details-marker{display:none}
.po-billing>summary::before{content:"+";display:inline-block;width:16px;font-weight:800;color:#2563eb}
.po-billing[open]>summary::before{content:"−"}
.po-billing .exp-info{margin:8px 2px 10px}
.po-billing .fld{margin:0 0 8px}
.po-billing input{flex:1;min-width:0}
.po-cta--ghost{background:#fff;color:#1d4ed8;border:1px solid #c7d6f7;box-shadow:0 3px 0 #e3eafc;padding:10px 13px;font-size:13px}
.po-cta--ghost:active{box-shadow:0 1px 0 #e3eafc}
.po-bill-found{font-size:12.5px;line-height:1.45;color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:10px;padding:8px 10px;margin:0 0 8px}
.po-bill-found[hidden]{display:none}
.po-bill-found--ko{color:#991b1b;background:#fef2f2;border-color:#fecaca}


/* Refus du colle-code : il s'affiche DANS la zone d'apercu, pas dans une ligne
   discrete sous les options. Un outil qui refuse sans le dire la ou l'on regarde
   passe pour un outil casse. */
.code-echec { padding: .7rem .85rem; text-align: left; line-height: 1.5; }
.code-echec b { display: block; color: #991b1b; font-size: .88rem; margin-bottom: .35rem; }
.code-echec span { display: block; color: #475569; font-size: .8rem; }

/* Confirmation de commande : récupérer sa facture sans dépendre du courriel. */
.od-facture { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .6rem; }
.od-facture a, .od-facture button { font: inherit; color: #2563eb; background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.od-facture button[disabled] { color: #94a3b8; cursor: default; text-decoration: none; }
.od-facture #odResendMsg { color: #475569; }