/* =========================================================
   Fiche Technique — Générateur d'étiquettes multimédia
   Design "atelier" : chrome sombre chaleureux côté outil,
   étiquette papier lisible côté aperçu.
   ========================================================= */

@import url('fonts.css');   /* polices embarquées : aucun appel réseau */

:root{
  /* Jetons propres à l'étiquette papier (le reste vient de base.css) */
  --paper: #f7f5f0;
  --paper-ink: #17171a;
  --font-display: var(--font-titre);
  --green: var(--vert);
}

body{
  /* Halo discret sur le plan de travail */
  background-image:
    radial-gradient(900px 520px at 12% -10%, rgba(90,110,160,.16) 0%, transparent 62%),
    radial-gradient(760px 420px at 104% 0%, rgba(246,160,44,.08) 0%, transparent 58%);
  background-attachment:fixed;
  min-height:100vh;
}
body.theme-clair{
  background-image:
    radial-gradient(900px 520px at 12% -10%, rgba(120,150,210,.14) 0%, transparent 62%),
    radial-gradient(760px 420px at 104% 0%, rgba(246,160,44,.10) 0%, transparent 58%);
}

/* ---------- Layout ---------- */
.layout{
  display:grid;
  grid-template-columns: minmax(380px, 480px) 1fr;
  gap:20px;
  padding:20px 26px 70px;
  align-items:start;
  max-width:1600px;
  margin:0 auto;
}
.col-form{ display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (max-width: 1020px){
  .layout{ grid-template-columns:1fr; padding:16px 16px 60px; }
  .preview-wrap{ position:static !important; }
}

/* ---------- Panels repliables ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:var(--ombre-1);
  overflow:hidden;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.panel:hover{ border-color:var(--panel-border-fort); }
.panel[open]{ box-shadow:var(--ombre-2); }
.panel-title{
  display:flex; align-items:center; gap:9px;
  padding:14px 16px;
  font-family:var(--font-display);
  font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-dim);
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:.15s ease;
}
.panel-title::-webkit-details-marker{ display:none; }
.panel-title:hover{ color:var(--ink); background:rgba(255,255,255,.02); }
.panel-title .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none; }
.panel-chevron{
  margin-left:auto; flex:none;
  width:8px; height:8px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.panel[open] > .panel-title .panel-chevron{ transform:rotate(-135deg) translate(-2px,-2px); }
.panel-count{
  font-family:var(--font-mono); font-size:10.5px;
  background:var(--panel-3); color:var(--ink-dim);
  padding:2px 7px; border-radius:99px;
}
.panel-body{ padding:0 16px 16px; }
.panel-help{
  margin:0 0 12px; font-size:11.5px; line-height:1.5; color:var(--ink-faint);
}

/* ---------- Onglets catégorie ---------- */
.cat-tabs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.cat-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px;
  border-radius:var(--radius-full);
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  color:var(--ink-dim);
  font-size:var(--t-sm); font-weight:600;
  cursor:pointer;
  transition:var(--transition);
}
.cat-tab:hover{ color:var(--ink); border-color:#474d61; }
.cat-tab .sw{ width:7px; height:7px; border-radius:50%; flex:none; }
.cat-tab.active{
  color:#111319;
  background:var(--cat-color, var(--amber));
  border-color:transparent;
  font-weight:700;
}
.cat-tab.active .sw{ background:rgba(0,0,0,.55); }

/* ---------- Formulaire ---------- */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:11px; }
.field-row.full{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label{ font-size:11px; color:var(--ink-dim); font-weight:600; }
.with-unit{ position:relative; }
.with-unit input{ padding-right:42px; }
.unit-tag{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint);
  pointer-events:none;
}
input::placeholder, textarea::placeholder{ color:#5c6377; }
textarea{
  resize:vertical; min-height:110px;
  font-family:var(--font-mono); font-size:12px; line-height:1.55;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(255,176,32,.14);
  background:var(--panel-3);
}
input[type=color]{
  padding:3px; height:38px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--panel-border); border-radius:var(--radius-sm);
}
input[type=file]{
  font-size:12px; color:var(--ink-dim);
  background:var(--panel-2); border:1px dashed var(--panel-border);
  border-radius:var(--radius-sm); padding:9px 11px;
}
input[type=file]::file-selector-button{
  background:var(--panel-3); color:var(--ink); border:none;
  padding:5px 11px; border-radius:6px; margin-right:10px;
  font-family:var(--font-body); font-size:12px; font-weight:600; cursor:pointer;
}
select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.search-input{ margin-bottom:11px; }

/* ---------- Boutons ---------- */
.btn-block{ width:100%; }

/* ---------- Zone de collage ---------- */
.paste-box{
  border:1px solid var(--panel-border);
  border-radius:var(--radius-sm);
  padding:13px;
  background:linear-gradient(180deg, rgba(255,176,32,.05), transparent 70%);
}
.paste-box .btn{ margin-top:10px; }
.hint{ margin:9px 0 0; font-size:11px; line-height:1.5; color:var(--ink-faint); }

/* ---------- Grille de thèmes ---------- */
.theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(112px, 1fr));
  gap:9px;
}
.theme-card{
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  border-radius:10px;
  padding:0; overflow:hidden;
  cursor:pointer; text-align:left;
  transition:.15s ease;
  font-family:var(--font-body);
}
.theme-card:hover{ border-color:#4b5165; transform:translateY(-1px); }
.theme-card.active{ border-color:var(--amber); box-shadow:0 0 0 2px rgba(255,176,32,.2); }
.theme-swatch{
  height:40px; width:100%; display:block; position:relative;
  border-bottom:1px solid var(--panel-border);
}
.theme-name{
  display:block; padding:7px 9px;
  font-size:11px; font-weight:600; color:var(--ink);
  line-height:1.3;
}
.theme-card.active .theme-name{ color:var(--amber); }

/* ---------- Interrupteurs & cases ---------- */
.switch-row{
  display:flex; align-items:flex-start; gap:10px;
  font-size:12.5px; color:var(--ink);
  cursor:pointer; margin-bottom:13px; line-height:1.45;
}
.switch-row em{ color:var(--ink-faint); font-style:normal; }
.switch{ position:relative; flex:none; margin-top:1px; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch-track{
  display:block; width:34px; height:19px; border-radius:99px;
  background:var(--panel-3); border:1px solid var(--panel-border);
  transition:.15s ease; position:relative;
}
.switch-thumb{
  position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:var(--ink-dim); transition:.15s ease;
}
.switch input:checked + .switch-track{ background:var(--amber); border-color:transparent; }
.switch input:checked + .switch-track .switch-thumb{ transform:translateX(15px); background:#16181f; }
.checkbox-row{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--ink);
  cursor:pointer; padding:4px 0;
}
.checkbox-row input{ width:15px; height:15px; accent-color:var(--amber); flex:none; }
.checkbox-row em{ color:var(--ink-faint); font-style:normal; }

/* Suggestion « Harmoniser le cadre », affichée sous le champ image quand un
   fond uni est détecté. */
.fond-suggestion{
  display:flex; align-items:center; gap:9px;
  margin-top:9px; padding:8px 10px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm);
}
.fond-apercu{
  width:22px; height:22px; border-radius:5px; flex:none;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.fond-texte{ font-size:11.5px; color:var(--ink-dim); flex:1; min-width:0; }
.fond-suggestion .btn{ flex:none; }
.style-custom-fields{ margin-bottom:6px; }

/* ---------- Liste des fiches ---------- */
.saved-list{ display:flex; flex-direction:column; gap:7px; max-height:320px; overflow:auto; padding-right:3px; }
.saved-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:8px 10px;
  transition:.15s ease;
}
.saved-item:hover{ border-color:#4b5165; }
.saved-item .meta{ display:flex; flex-direction:column; min-width:0; }
.saved-item .meta b{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-item .meta span{ color:var(--ink-faint); font-size:10.5px; }
.saved-item .actions{ display:flex; gap:5px; flex:none; }
.saved-group-header{
  display:flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--cat-color, var(--ink-dim));
  margin:3px 0 1px;
}
.saved-group-header .sw{ width:6px; height:6px; border-radius:50%; }
.saved-group-header:not(:first-child){ margin-top:11px; }
.empty-note{ color:var(--ink-faint); font-size:12px; text-align:center; padding:16px 0; }

/* =========================================================
   APERÇU
   ========================================================= */
.preview-wrap{ position:sticky; top:84px; min-width:0; }
.preview-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px; flex-wrap:wrap;
}
.sizes{ display:flex; gap:5px; background:var(--panel); padding:4px; border-radius:99px; border:1px solid var(--panel-border); }
.size-btn{
  font-family:var(--font-mono); font-size:11px; padding:5px 12px;
  border-radius:99px; border:none; background:transparent;
  color:var(--ink-dim); cursor:pointer; transition:.15s ease;
}
.size-btn:hover{ color:var(--ink); }
.size-btn.active{ color:#16181f; background:var(--amber); font-weight:600; }
.preview-actions{ display:flex; gap:8px; }

.stage{
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:24px 24px;
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:36px 24px;
  display:flex; align-items:center; justify-content:center;
  min-height:540px;
  overflow:auto;
}
.stage-hint{
  margin:10px 0 0; text-align:center;
  font-size:11px; color:var(--ink-faint);
}

/* ---------- L'étiquette ---------- */
.fiche-canvas{
  --cat-color:#3b82f6;
  --cat-soft:#dbe9ff;
  --fc-paper:var(--paper);
  --fc-ink:var(--paper-ink);
  --fc-ink-soft:#6b6b70;
  --fc-line:rgba(0,0,0,.09);
  --fc-rule:#17171a;

  width:460px; flex:none;
  background:var(--fc-paper);
  color:var(--fc-ink);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 48px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.05);
  font-family:var(--font-body);
}
/* Formats fixes : largeur d'aperçu à l'écran (la hauteur suit le contenu). */
.fiche-canvas.size-A6{ width:340px; }
.fiche-canvas.size-A5{ width:460px; }
.fiche-canvas.size-A4{ width:580px; }

/* Sur mesure : les dimensions réelles en mm, posées par le JS
   (--fc-l et --fc-h). L'aperçu montre donc la taille exacte du support. */
.fiche-canvas.size-custom{
  width:var(--fc-l, 250mm);
  height:var(--fc-h, 100mm);
  display:flex;
  overflow:hidden;
}
.fiche-canvas.size-custom .fc-content{
  flex:1; min-width:0; min-height:0;
  display:flex; flex-direction:column;
  padding:calc(14px * var(--fc-echelle, 1));
}

/* couche décorative (thèmes) */
.fc-deco{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.fc-content{ position:relative; z-index:1; padding:24px 24px 20px; }

.ribbon{
  position:absolute; top:0; right:0;
  background:var(--cat-color); color:#fff;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  padding:6px 13px 6px 18px;
  border-bottom-left-radius:12px;
  z-index:2;
}
.fc-badge{
  display:inline-block;
  background:var(--cat-color); color:#fff;
  font-family:var(--font-display); font-weight:700;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 12px; border-radius:99px;
  margin-bottom:9px;
}
.fc-brand{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--fc-ink-soft); margin-bottom:2px;
}
.fc-model{
  font-family:var(--font-display); font-weight:700;
  font-size:23px; line-height:1.15;
  margin:0 0 14px; padding-right:64px;
  color:var(--fc-ink);
}
.fc-image{
  width:100%; height:150px;
  border-radius:10px;
  background:var(--cat-soft);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin-bottom:15px;
  border:1px solid rgba(0,0,0,.07);
}
/* Le dimensionnement se fait par max-width/max-height et non par
   width:100% + object-fit:contain : html2canvas ignore object-fit et étirerait
   l'image sur toute la boîte à l'export PNG. Ici la boîte de mise en page de
   l'image a déjà le bon format, donc l'aperçu et l'export sont identiques. */
.fc-image img{
  display:block;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
}
.fc-image .ph{
  font-family:var(--font-mono); font-size:10.5px; color:#9a9a9e;
  text-transform:uppercase; letter-spacing:.09em;
}

.fc-specs{ display:flex; flex-direction:column; margin-bottom:14px; }
.fc-spec-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:6.5px 0;
  border-bottom:1px solid var(--fc-line);
}
.fc-spec-row:last-child{ border-bottom:none; }
.fc-spec-label{
  display:inline-flex; align-items:center; gap:0;
  font-size:11px; color:var(--fc-ink-soft); font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.fc-specs.with-icons .fc-spec-label{ gap:7px; }
.fc-spec-icon{ width:14px; height:14px; flex:none; color:var(--cat-color); }
.fc-spec-val{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--fc-ink); text-align:right; word-break:break-word;
}

.fc-footer{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-top:4px; padding-top:13px;
  border-top:2px solid var(--fc-rule);
}
.fc-footer-left{ min-width:0; }
/* Sans bloc prix, le pied n'a plus qu'une colonne : on laisse le code-barres
   s'élargir un peu pour occuper l'espace libéré. */
.fc-footer-sans-prix .fc-barcode-svg{ max-width:80%; }
.fc-ref{ font-family:var(--font-mono); font-size:9px; color:var(--fc-ink-soft); }
.fc-ref b{ color:var(--fc-ink); }
.fc-garantie{ font-size:9.5px; font-weight:600; color:var(--cat-color); margin-top:3px; }

.fc-price-block{ text-align:right; flex:none; }
.fc-price-old{ font-family:var(--font-mono); font-size:11.5px; color:#a3a3a8; text-decoration:line-through; }
.fc-price{
  font-family:var(--font-display); font-weight:700;
  font-size:33px; color:var(--cat-color); line-height:1;
}
.fc-price sup{ font-size:15px; }

/* ---------- Formes ---------- */
.fiche-canvas.fc-shape-square{ border-radius:3px; }
.fiche-canvas.fc-shape-square .fc-image{ border-radius:3px; }
.fiche-canvas.fc-shape-square .ribbon{ border-bottom-left-radius:3px; }
.fiche-canvas.fc-shape-square .fc-badge{ border-radius:3px; }
.fiche-canvas.fc-shape-rounded{ border-radius:16px; }
.fiche-canvas.fc-shape-pill{ border-radius:30px; }
.fiche-canvas.fc-shape-pill .fc-image{ border-radius:22px; }
.fiche-canvas.fc-shape-pill .ribbon{ border-bottom-left-radius:22px; padding-right:18px; }

/* ---------- Fonds personnalisés (mode style libre) ---------- */
.fiche-canvas.fc-bg-gradient .fc-deco{
  background:linear-gradient(155deg, transparent 30%, var(--cat-soft) 140%);
}
.fiche-canvas.fc-bg-grid .fc-deco{
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:15px 15px;
}
.fiche-canvas.fc-bg-dark{
  --fc-paper:#1b1b1f;
  --fc-ink:#f2f2f5;
  --fc-ink-soft:#9a9aa2;
  --fc-line:rgba(255,255,255,.11);
  --fc-rule:#f2f2f5;
}
.fiche-canvas.fc-bg-dark .fc-image{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
.fiche-canvas.fc-bg-dark .fc-price-old{ color:#77777f; }

/* =========================================================
   THÈMES ÉVÉNEMENTIELS
   Chaque thème redéfinit l'accent, le papier et une déco.
   (Motifs génériques : ni logo, ni marque, ni compétition nommée.)
   ========================================================= */

/* — Football / grand tournoi : pelouse et lignes de touche — */
.fiche-canvas.fc-theme-football{
  --cat-color:#0f7a3d;
  --cat-soft:#d8f2e1;
  --fc-paper:#f4faf5;
}
.fiche-canvas.fc-theme-football .fc-deco{
  background:
    linear-gradient(180deg, rgba(15,122,61,.14) 0 88px, transparent 88px),
    repeating-linear-gradient(90deg, rgba(15,122,61,.05) 0 26px, transparent 26px 52px);
}
.fiche-canvas.fc-theme-football .fc-badge{
  background:linear-gradient(90deg, #0f7a3d, #16a34a);
}

/* — Compétition multisport : podium or / argent / bronze — */
.fiche-canvas.fc-theme-competition{
  --cat-color:#b45309;
  --cat-soft:#fdeccd;
  --fc-paper:#fdfaf3;
}
.fiche-canvas.fc-theme-competition .fc-deco{
  background:
    linear-gradient(180deg, rgba(234,179,8,.2) 0 6px, transparent 6px),
    linear-gradient(200deg, rgba(234,179,8,.15) 0%, transparent 45%);
}

/* — Soldes : rouge et jaune, bandes diagonales — */
.fiche-canvas.fc-theme-soldes{
  --cat-color:#dc2626;
  --cat-soft:#ffe0e0;
  --fc-paper:#fffaf6;
}
/* Bandeau à hauteur fixe plutôt qu'un dégradé de fondu par mask-image :
   html2canvas ne gère pas les masques et aurait étalé les rayures sur toute
   l'étiquette à l'export. */
.fiche-canvas.fc-theme-soldes .fc-deco{
  background:repeating-linear-gradient(-45deg,
    rgba(220,38,38,.11) 0 13px,
    rgba(250,204,21,.16) 13px 26px);
  inset:0 0 auto 0;
  height:76px;
}

/* — Déstockage : bandes chantier noir / jaune — */
.fiche-canvas.fc-theme-destockage{
  --cat-color:#c2410c;
  --cat-soft:#ffe4d0;
  --fc-paper:#fffdf7;
}
.fiche-canvas.fc-theme-destockage .fc-deco{
  background:repeating-linear-gradient(-45deg,
    rgba(23,23,26,.85) 0 16px,
    rgba(250,204,21,.95) 16px 32px);
  height:9px; inset:auto 0 0 0;
}

/* — Vendredi noir : sombre et néon — */
.fiche-canvas.fc-theme-blackfriday{
  --cat-color:#facc15;
  --cat-soft:rgba(250,204,21,.16);
  --fc-paper:#111114;
  --fc-ink:#f5f5f7;
  --fc-ink-soft:#9c9ca6;
  --fc-line:rgba(255,255,255,.13);
  --fc-rule:#facc15;
}
.fiche-canvas.fc-theme-blackfriday .fc-deco{
  background:radial-gradient(420px 200px at 92% -8%, rgba(250,204,21,.22), transparent 70%);
}
.fiche-canvas.fc-theme-blackfriday .fc-badge{ color:#111114; }
.fiche-canvas.fc-theme-blackfriday .ribbon{ color:#111114; }
.fiche-canvas.fc-theme-blackfriday .fc-image{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.fiche-canvas.fc-theme-blackfriday .fc-price-old{ color:#77777f; }

/* — Fêtes de fin d'année : sapin, rouge, flocons — */
.fiche-canvas.fc-theme-fetes{
  --cat-color:#b91c1c;
  --cat-soft:#ffe1e1;
  --fc-paper:#fbf8f4;
}
.fiche-canvas.fc-theme-fetes .fc-deco{
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.9) 2.2px, transparent 2.6px),
    radial-gradient(circle at 34% 7%, rgba(255,255,255,.8) 1.8px, transparent 2.2px),
    radial-gradient(circle at 62% 17%, rgba(255,255,255,.9) 2.4px, transparent 2.8px),
    radial-gradient(circle at 86% 9%, rgba(255,255,255,.8) 2px, transparent 2.4px),
    linear-gradient(180deg, rgba(21,128,61,.22) 0 96px, transparent 96px);
}

/* — Rentrée : bleu et papier quadrillé — */
.fiche-canvas.fc-theme-rentree{
  --cat-color:#1d4ed8;
  --cat-soft:#dbe6ff;
  --fc-paper:#f8fafd;
}
.fiche-canvas.fc-theme-rentree .fc-deco{
  background-image:
    linear-gradient(rgba(29,78,216,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,78,216,.09) 1px, transparent 1px);
  background-size:17px 17px;
}

/* — Été austral / tropical : dégradé chaud et turquoise — */
.fiche-canvas.fc-theme-tropical{
  --cat-color:#0d9488;
  --cat-soft:#cdf3ef;
  --fc-paper:#fbfdfc;
}
.fiche-canvas.fc-theme-tropical .fc-deco{
  background:
    linear-gradient(200deg, rgba(249,115,22,.2) 0%, transparent 42%),
    linear-gradient(340deg, rgba(13,148,136,.22) 0%, transparent 45%);
}

/* — Gaming / eSport : sombre violet néon — */
.fiche-canvas.fc-theme-gaming{
  --cat-color:#c084fc;
  --cat-soft:rgba(192,132,252,.18);
  --fc-paper:#15121f;
  --fc-ink:#f3effc;
  --fc-ink-soft:#a39bb8;
  --fc-line:rgba(255,255,255,.12);
  --fc-rule:#c084fc;
}
.fiche-canvas.fc-theme-gaming .fc-deco{
  background:
    radial-gradient(360px 180px at 8% 0%, rgba(192,132,252,.3), transparent 70%),
    radial-gradient(340px 190px at 100% 100%, rgba(34,211,238,.22), transparent 70%);
}
.fiche-canvas.fc-theme-gaming .fc-badge{ color:#15121f; }
.fiche-canvas.fc-theme-gaming .ribbon{ color:#15121f; }
.fiche-canvas.fc-theme-gaming .fc-image{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.fiche-canvas.fc-theme-gaming .fc-price-old{ color:#7c7490; }

/* — Anniversaire du magasin : confettis — */
.fiche-canvas.fc-theme-anniversaire{
  --cat-color:#db2777;
  --cat-soft:#ffe0ef;
  --fc-paper:#fffbfd;
}
.fiche-canvas.fc-theme-anniversaire .fc-deco{
  background:
    radial-gradient(circle at 9% 11%, rgba(219,39,119,.55) 3px, transparent 3.4px),
    radial-gradient(circle at 27% 6%, rgba(250,204,21,.6) 2.6px, transparent 3px),
    radial-gradient(circle at 48% 13%, rgba(56,189,248,.55) 3px, transparent 3.4px),
    radial-gradient(circle at 71% 5%, rgba(34,197,94,.5) 2.6px, transparent 3px),
    radial-gradient(circle at 90% 12%, rgba(168,85,247,.5) 3px, transparent 3.4px);
}

/* — Nouveauté / lancement : bleu nuit épuré — */
.fiche-canvas.fc-theme-nouveaute{
  --cat-color:#0284c7;
  --cat-soft:#d6eefc;
  --fc-paper:#fafcfe;
}
.fiche-canvas.fc-theme-nouveaute .fc-deco{
  background:linear-gradient(120deg, rgba(2,132,199,.16) 0%, transparent 38%);
}

/* ---------- Toast ---------- */


/* =========================================================
   NOUVEAUX ÉLÉMENTS D'INTERFACE
   ========================================================= */

/* ---- Champs affichés sur l'étiquette ---- */
.champs-liste{ display:flex; flex-direction:column; gap:5px; max-height:300px; overflow:auto; padding-right:3px; }
.champ-item{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:6px 9px;
  transition:.15s ease;
}
.champ-item.masque{ opacity:.45; }
.champ-check{ display:flex; align-items:center; gap:8px; font-size:12px; cursor:pointer; min-width:0; }
.champ-check input{ width:14px; height:14px; accent-color:var(--amber); flex:none; }
.champ-check span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.champ-val{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.champ-actions{ display:flex; gap:3px; }
.btn-icone{
  width:22px; height:22px; padding:0; line-height:1;
  border:1px solid var(--panel-border); background:var(--panel-3);
  color:var(--ink-dim); border-radius:5px; cursor:pointer; font-size:9px;
}
.btn-icone:hover:not(:disabled){ color:var(--ink); border-color:#4b5165; }
.btn-icone:disabled{ opacity:.3; cursor:default; }

/* ---- Alerte d'affichage obligatoire ---- */
.alerte-conformite{
  background:#3a2e14; border:1px solid #6b5420; color:#f3d99b;
  border-radius:var(--radius-sm); padding:10px 13px; margin-bottom:12px;
  font-size:12px; line-height:1.5;
}
.alerte-conformite .alerte-titre{ font-weight:700; color:var(--amber); }
.alerte-conformite b{ color:#ffe7b5; }
.alerte-note{ display:block; margin-top:4px; font-size:11px; opacity:.75; }

/* ---- Barre de la planche d'impression ---- */
.planche-barre{
  margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--panel-border);
  display:flex; flex-direction:column; gap:9px;
}
.planche-info{ font-size:12px; color:var(--ink-dim); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.planche-info b{ color:var(--amber); font-family:var(--font-mono); }
.lien-discret{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--ink-faint); font-size:11.5px; text-decoration:underline;
  font-family:var(--font-body);
}
.lien-discret:hover{ color:var(--ink); }
.planche-controles{ display:flex; gap:8px; }
.planche-controles select{ flex:1; font-size:12px; padding:7px 10px; }
.saved-check{ display:flex; align-items:center; flex:none; cursor:pointer; }
.saved-check input{ width:15px; height:15px; accent-color:var(--amber); }

/* ---- Code-barres ---- */
.fc-barcode{ margin-top:8px; }
.fc-barcode-deco{ display:flex; gap:1.5px; align-items:flex-end; height:22px; }
.fc-barcode-deco span{ width:2px; background:var(--fc-rule); display:block; }
/* Le SVG garde sa taille native (barres assez larges/hautes pour être scannées) ;
   on le borne juste en largeur pour qu'il ne déborde pas de la fiche. */
.fc-barcode-svg{ height:auto; width:auto; max-width:60%; display:block; }
.fc-theme-blackfriday .fc-barcode, .fc-theme-gaming .fc-barcode,
.fc-bg-dark .fc-barcode{
  /* Sur fond sombre : encart blanc autour du code (le scanner exige un fond
     clair). On l'applique au conteneur, sans toucher aux barres elles-mêmes. */
  display:inline-block;
  background:#fff; padding:5px 8px; border-radius:5px;
}
.fc-theme-blackfriday .fc-barcode-svg, .fc-theme-gaming .fc-barcode-svg,
.fc-bg-dark .fc-barcode-svg{ max-width:none; }

/* ---- Mode compact (8 étiquettes par page) ---- */
.fc-compact .fc-content{ padding:14px 15px 12px; }
.fc-compact .fc-model{ font-size:16px; margin-bottom:8px; padding-right:52px; }
.fc-compact .fc-spec-row{ padding:4px 0; }
.fc-compact .fc-price{ font-size:25px; }
.fc-compact .fc-barcode{ margin-top:5px; }
.fc-compact .fc-barcode-svg{ max-width:52%; }

/* =========================================================
   PLANCHE D'IMPRESSION
   Masquée à l'écran, affichée uniquement pendant l'impression.

   Principe : chaque page A4 est une grille de cases. La vignette est une fiche
   à sa taille réelle (largeur A5 = 460px) que l'on réduit avec `zoom`. On
   utilise `zoom` et non `transform:scale()` car zoom réduit la place réellement
   occupée dans le flux : la fiche entière tient dans la case, aucun débordement,
   aucune découpe. (transform:scale garde la taille d'origine dans le flux, ce
   qui provoquait la troncature vue à l'impression.)
   ========================================================= */
.planche{ display:none; }
.planche-page{
  width:210mm; height:296mm;
  padding:10mm;
  display:grid;
  grid-template-columns:repeat(var(--colonnes), 1fr);
  grid-template-rows:repeat(var(--lignes), 1fr);
  gap:6mm;
  background:#fff;
  box-sizing:border-box;
  overflow:hidden;
}
.planche-cellule{
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:0;
  overflow:hidden;
}
/* Facteur de réduction par format : la largeur A5 (460px ≈ 122mm) est ramenée
   à la largeur de case disponible. 2/page : case ≈ 95mm -> ~0.62 ;
   4/page : case ≈ 95mm -> ~0.62 ; 8/page : deux colonnes plus serrées. */
.planche-2 .planche-vignette{ zoom:0.78; }
.planche-4 .planche-vignette{ zoom:0.62; }
.planche-8 .planche-vignette{ zoom:0.46; }
.planche-vignette{
  box-shadow:none !important;
  border:1px solid #d8d8d8;
}

/* Repli pour les navigateurs sans `zoom` (Firefox ancien) : on bascule sur une
   réduction transform, la fiche reste entière même si l'espacement est moins
   parfait. Chrome/Edge/Safari — les cibles ici — gèrent tous `zoom`. */
@supports not (zoom: 1){
  .planche-vignette{ transform-origin:top center; }
  .planche-2 .planche-vignette{ transform:scale(0.78); margin-bottom:-22%; }
  .planche-4 .planche-vignette{ transform:scale(0.62); margin-bottom:-38%; }
  .planche-8 .planche-vignette{ transform:scale(0.46); margin-bottom:-54%; }
}

/* =========================================================
   IMPRESSION
   Deux modes : étiquette unique, ou planche de plusieurs.
   ========================================================= */
@media print{
  @page{ size:A4; margin:0; }

  html, body{
    /* Sans ça, la hauteur de la page écran (fond sombre) est reportée à
       l'impression et déborde sur plusieurs feuilles. */
    height:auto !important;
    min-height:0 !important;
    background:#fff !important;
  }
  /* Aucun élément ne doit forcer un saut de page en mode étiquette unique. */
  body:not(.impression-planche) *{ break-inside:avoid; }
  body:not(.impression-planche) .stage{ min-height:0 !important; }

  /* --- Mode étiquette unique --- */
  /* On masque VRAIMENT tout (display:none) sauf la fiche et ses ancêtres :
     visibility:hidden gardait la place occupée par l'interface, ce qui
     poussait des pages blanches supplémentaires. */
  body:not(.impression-planche) .topbar,
  body:not(.impression-planche) .col-form,
  body:not(.impression-planche) .preview-toolbar,
  body:not(.impression-planche) .stage-hint,
  body:not(.impression-planche) .alerte-conformite,
  body:not(.impression-planche) .toast,
  body:not(.impression-planche) #planche{
    display:none !important;
  }
  body:not(.impression-planche) .layout,
  body:not(.impression-planche) .preview-wrap,
  body:not(.impression-planche) .stage{
    display:block !important;
    padding:0 !important; margin:0 !important;
    border:0 !important; background:#fff !important;
    overflow:visible !important; height:auto !important;
    max-width:none !important; width:auto !important;
  }
  body:not(.impression-planche) #ficheCanvas{
    position:static !important;
    margin:8mm auto 0 !important;   /* pas de marge basse : évite le débordement */
    box-shadow:none !important;
    page-break-after:avoid !important;
    page-break-inside:avoid !important;
  }

  /* --- Mode planche --- */
  body.impression-planche > *:not(#planche){ display:none !important; }
  body.impression-planche #planche{ display:block; }
  body.impression-planche .planche-page:not(:last-child){ page-break-after:always; }

  /* Les fonds de thème doivent être imprimés, pas ignorés par le navigateur */
  .fc-deco, .fiche-canvas{
    -webkit-print-color-adjust:exact;
            print-color-adjust:exact;
  }
}

/* =========================================================
   RESPONSIVE — générateur de fiches
   ========================================================= */
@media (max-width:900px){
  /* Deux colonnes -> une seule pile */
  .layout{ grid-template-columns:1fr !important; padding:var(--e3); gap:var(--e3); }
  .col-form, .preview-wrap{ min-width:0; }
  .preview-wrap{ position:static; }

  /* Les libellés des boutons d'action laissent la place aux icônes */
  .topbar-actions .btn span{ display:none; }
  .topbar-actions .btn{ padding:9px; }
  .topbar-actions #btnSave{ padding:9px 14px; }
  .topbar-actions #btnSave span{ display:inline; }

  /* L'aperçu de l'étiquette est mis à l'échelle pour tenir dans l'écran.
     zoom (plutôt que transform) recalcule le flux : pas d'espace fantôme. */
  .stage{ overflow-x:auto; padding:var(--e3) 0; }
  .fiche-canvas.size-A5{ zoom:.78; }
  .fiche-canvas.size-A4{ zoom:.62; }

  .preview-toolbar{ flex-wrap:wrap; gap:var(--e2); }
  .sizes{ flex:none; }
  .preview-actions{ margin-left:auto; }
}

@media (max-width:420px){
  .fiche-canvas.size-A5{ zoom:.66; }
  .fiche-canvas.size-A4{ zoom:.52; }
  .fiche-canvas.size-A6{ zoom:.9; }
  .cat-tabs{ gap:var(--e1); }
  .cat-tab{ padding:7px 11px; font-size:var(--t-xs); }
}

/* =========================================================
   ANALYSE DU TEXTE COLLÉ (moteur IA / local)
   ========================================================= */
.analyse-actions{ display:flex; gap:var(--e2); margin-top:var(--e3); }
.analyse-actions .btn{ flex:1; }
.analyse-actions .btn[hidden]{ display:none; }

.analyse-etat{
  display:flex; align-items:center; gap:var(--e2);
  margin-top:var(--e2); padding:8px 11px;
  border-radius:var(--radius-sm); font-size:var(--t-xs);
  border:1px solid var(--panel-border); background:var(--panel-2); color:var(--ink-dim);
}
.analyse-etat[hidden]{ display:none; }
.analyse-etat.etat-ia{ background:var(--bleu-sourd); border-color:transparent; color:var(--bleu); }
.analyse-etat.etat-local{ background:var(--panel-3); color:var(--ink-dim); }
.analyse-etat.etat-alerte{ background:var(--amber-sourd); border-color:transparent; color:var(--amber); }
.analyse-etat.etat-attente .ico{ animation:tourne 1s linear infinite; }
@keyframes tourne{ to{ transform:rotate(360deg); } }

/* =========================================================
   DISPOSITIONS ADAPTATIVES DE L'ÉTIQUETTE
   La classe fc-dispo-* est posée par le JS selon les proportions
   réelles du support. Le corps de texte suit --fc-echelle, calculée
   à partir de la plus petite dimension : une bande de 100 mm de haut
   ne peut pas porter la même typographie qu'une A4.
   ========================================================= */

/* ---- Échelle typographique commune au sur-mesure ---- */
.size-custom .fc-brand{ font-size:calc(10px * var(--fc-echelle)); letter-spacing:.14em; }
.size-custom .fc-model{ font-size:calc(23px * var(--fc-echelle)); line-height:1.12; margin:calc(2px * var(--fc-echelle)) 0 calc(8px * var(--fc-echelle)); }
.size-custom .fc-spec-label{ font-size:calc(11px * var(--fc-echelle)); }
.size-custom .fc-spec-value{ font-size:calc(12px * var(--fc-echelle)); }
.size-custom .fc-spec-row{ padding:calc(5px * var(--fc-echelle)) 0; }
.size-custom .fc-spec-icon{ width:calc(14px * var(--fc-echelle)); height:calc(14px * var(--fc-echelle)); }
.size-custom .fc-price{ font-size:calc(40px * var(--fc-echelle)); line-height:1; }
.size-custom .fc-price sup{ font-size:calc(15px * var(--fc-echelle)); }
.size-custom .fc-price-old{ font-size:calc(13px * var(--fc-echelle)); }
.size-custom .fc-ref{ font-size:calc(9px * var(--fc-echelle)); }
.size-custom .ribbon{ font-size:calc(9px * var(--fc-echelle)); padding:calc(4px * var(--fc-echelle)) calc(10px * var(--fc-echelle)); }
.size-custom .fc-badge{ font-size:calc(9px * var(--fc-echelle)); padding:calc(3px * var(--fc-echelle)) calc(9px * var(--fc-echelle)); }
.size-custom .fc-footer{ padding-top:calc(8px * var(--fc-echelle)); margin-top:auto; }

/* Le sur-mesure ne doit jamais déborder : on rogne proprement plutôt que
   de laisser le contenu sortir du support imprimé. */
.size-custom .fc-specs{ min-height:0; }
.size-custom .fc-image{ overflow:hidden; }

/* ---- Contrôles de dimensions libres ---- */
.taille-perso{
  display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap;
  padding:var(--e2) var(--e3);
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm);
  font-size:var(--t-xs);
}
.taille-perso[hidden]{ display:none; }
.taille-perso label{ color:var(--ink-dim); font-weight:700; }
.taille-perso input{
  width:62px; padding:6px 8px; font-family:var(--font-mono); text-align:center;
}
.taille-perso .unite{ color:var(--ink-faint); }
.taille-presets{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.chip-btn{
  background:var(--panel-3); border:1px solid var(--panel-border);
  color:var(--ink-dim); border-radius:var(--radius-full);
  padding:4px 10px; font-size:var(--t-xs); font-family:var(--font-mono);
  transition:var(--transition);
}
.chip-btn:hover{ background:var(--amber); border-color:var(--amber); color:var(--amber-ink); }
.size-btn[data-size="custom"]{ display:inline-flex; align-items:center; gap:5px; }

/* ---- Impression au format personnalisé ----
   La page prend exactement les dimensions du support : pas de marge
   perdue, l'étiquette sort à la taille demandée. */
@media print{
  /* La feuille fait exactement la taille de l'étiquette : aucune marge, sinon
     le débordement d'un millimètre suffit à générer une seconde page. */
  body.print-custom, body.print-custom html{ margin:0 !important; padding:0 !important; }
  body.print-custom .layout,
  body.print-custom .preview-wrap,
  body.print-custom .stage{ padding:0 !important; margin:0 !important; }
  /* On sort la fiche du flux et on la colle en haut à gauche : c'est le seul
     moyen fiable d'obtenir une page unique exactement à la bonne taille. */
  /* Sélecteur par identifiant : les règles d'impression générales ciblent
     #ficheCanvas, une simple classe ne suffirait pas à les surcharger. */
  body.print-custom #ficheCanvas.size-custom{
    position:absolute !important; top:0 !important; left:0 !important;
    width:var(--fc-l) !important;
    height:var(--fc-h) !important;
    margin:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    page-break-after:avoid !important;
    page-break-inside:avoid !important;
    overflow:hidden !important;
  }
  /* Le code-barres doit rester lisible par un lecteur même sur un petit
     support : on lui garantit une largeur minimale. */
  /* Sur un petit support, les barres deviennent trop fines pour un lecteur :
     on impose une largeur plancher au code-barres. */
  body.print-custom #ficheCanvas .fc-barcode svg{ width:38mm !important; height:auto !important; }
}

/* =========================================================
   BANDE ET PAYSAGE : trois zones
   [ visuel ] [ marque + caractéristiques ] [ colonne latérale ]
   La colonne latérale occupe toute la hauteur : logo en haut,
   prix au centre, référence et code-barres calés en bas à droite.
   C'est ce qui libère la place pour plus de caractéristiques.
   ========================================================= */

.fiche-canvas.size-custom.fc-dispo-bande .fc-content,
.fiche-canvas.size-custom.fc-dispo-paysage .fc-content{
  flex-direction:row; align-items:stretch;
  gap:calc(11px * var(--fc-echelle));
  padding:calc(11px * var(--fc-echelle));
}

/* -- Visuel produit -- */
/* Colonne visuelle : le cadre teinté occupe toute la hauteur, le badge se
   pose dessus en haut à gauche comme sur une étiquette de rayon. */
.size-custom .fc-visuel{
  position:relative;
  flex:0 0 21%; min-width:0;
  display:flex; align-items:stretch;
}
.size-custom.fc-dispo-paysage .fc-visuel{ flex-basis:30%; }
.size-custom .fc-visuel .fc-badge{
  position:absolute; top:calc(7px * var(--fc-echelle)); left:calc(7px * var(--fc-echelle));
  z-index:2; margin:0;
  font-size:calc(9px * var(--fc-echelle));
  padding:calc(3px * var(--fc-echelle)) calc(9px * var(--fc-echelle));
}
.size-custom.fc-dispo-bande .fc-image,
.size-custom.fc-dispo-paysage .fc-image{
  flex:1; margin:0; align-self:stretch;
  height:auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.size-custom.fc-dispo-bande .fc-image img,
.size-custom.fc-dispo-paysage .fc-image img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}

/* -- Colonne centrale : marque, modèle, caractéristiques -- */
.size-custom .fc-col-centre{
  flex:1; min-width:0; display:flex; flex-direction:column; min-height:0;
}
.size-custom .fc-col-centre .fc-entete{ flex:none; }
.size-custom .fc-col-centre .fc-specs{
  flex:1; min-height:0; margin:calc(5px * var(--fc-echelle)) 0 0; overflow:hidden;
}

/* Deux colonnes de caractéristiques sur les bandes larges.
   display:block est indispensable : column-count est ignoré sur un flex. */
.size-custom .fc-specs-2col{
  display:block !important;
  column-count:2;
  column-fill:balance;   /* répartit équitablement entre les deux colonnes */
  column-gap:calc(22px * var(--fc-echelle));
}
.size-custom .fc-specs-2col .fc-spec-row{
  break-inside:avoid; -webkit-column-break-inside:avoid;
}

/* -- Colonne latérale -- */
/* Colonne latérale : aucun trait, la séparation se fait par l'espace. */
.size-custom .fc-cote{
  flex:0 0 15%; min-width:22mm;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-left:calc(10px * var(--fc-echelle));
  text-align:right;
}
.size-custom.fc-dispo-paysage .fc-cote{ flex-basis:26%; }
.size-custom .fc-cote-haut{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:calc(4px * var(--fc-echelle)); min-height:0;
}
.size-custom .fc-cote-milieu{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  flex:1; min-height:0;
}
/* Le code-barres est calé en bas à droite, comme sur une étiquette de rayon */
.size-custom .fc-cote-haut{ align-items:flex-end; }
.size-custom .fc-cote-bas{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:calc(2px * var(--fc-echelle));
  flex:none;
}

/* Référence + code-barres, sous les caractéristiques et alignés à droite */
.size-custom .fc-pied-code{
  flex:none; margin-top:calc(6px * var(--fc-echelle));
  display:flex; flex-direction:column; align-items:flex-end;
  gap:calc(2px * var(--fc-echelle));
}
.size-custom .fc-pied-code .fc-ref{ text-align:right; font-size:calc(9px * var(--fc-echelle)); }
.size-custom .fc-pied-code .fc-barcode{ margin:0; }
.size-custom .fc-pied-code .fc-barcode svg{
  /* Taille physique : c'est elle qui conditionne la lecture par un scanner.
     Bornée haut et bas — sans maximum, le SVG s'étire sur toute la colonne. */
  width:auto; min-width:32mm; max-width:52mm;
  height:auto; min-height:8mm; max-height:13mm;
}

.size-custom .fc-cote .fc-price-block{ text-align:right; }
.size-custom .fc-cote .fc-garantie{ margin-top:calc(2px * var(--fc-echelle)); }

.size-custom .fc-cote .fc-ref{ font-size:calc(8px * var(--fc-echelle)); }

/* Le ruban de catégorie n'a pas sa place sur un support court */
.size-custom.fc-dispo-bande .ribbon,
.size-custom.fc-dispo-paysage .ribbon{ display:none; }

/* Le badge revient dans la colonne latérale : il ne déborde plus du cadre */
.size-custom .fc-cote .fc-badge{
  position:static; margin:0; align-self:flex-end;
  font-size:calc(8px * var(--fc-echelle));
  padding:calc(2px * var(--fc-echelle)) calc(7px * var(--fc-echelle));
}

/* -- Logo de l'enseigne -- */
.fc-logo{ display:flex; align-items:center; justify-content:flex-end; }
.fc-logo img{
  max-height:calc(52px * var(--fc-echelle, 1));
  max-width:100%; width:auto; object-fit:contain;
}
/* En portrait, le logo se place en haut à droite, au-dessus du contenu */
.fc-dispo-portrait .fc-logo{
  position:absolute; top:16px; right:16px; z-index:2;
  justify-content:flex-end; max-width:32%;
}
.fc-dispo-portrait .fc-logo img{ max-height:30px; }

/* ---- Réglage du logo d'enseigne (panneau de style) ---- */
.logo-enseigne{
  margin-top:var(--e2); padding:var(--e3);
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm);
}
.logo-apercu{
  height:56px; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(45deg, var(--panel-3) 25%, transparent 25%, transparent 75%, var(--panel-3) 75%) 0 0/14px 14px,
    linear-gradient(45deg, var(--panel-3) 25%, transparent 25%, transparent 75%, var(--panel-3) 75%) 7px 7px/14px 14px,
    var(--panel);
  border:1px solid var(--panel-border); border-radius:var(--radius-xs);
  margin-bottom:var(--e2); overflow:hidden;
}
.logo-apercu img{ max-height:44px; max-width:90%; object-fit:contain; }
.logo-vide{ font-size:var(--t-xs); color:var(--ink-faint); font-style:italic; }
.logo-actions{ display:flex; gap:var(--e2); }
.logo-actions .btn{ cursor:pointer; }
.logo-enseigne .hint{ margin:var(--e2) 0 0; }