/* Ajustements propres à MagicBanner 0.3.0, chargés après panneau.css et ui-common.css (origine : Documents/reprise-technique.md).
   Pas de nouveau style : seulement la place des blocs (règle ÉCRAN : l'aperçu garde la plus grande place, sans défiler). */
:root { --studio-accent: #ff8057; --collection-accent: #ff8057; --collection-secondary: #162f6f; --studio-bg: #162f6f; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111315; color: #f1f2f3; font-family: Arial, sans-serif; }
body { display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.studio-context-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 10px 18px; background: #151719; border-bottom: 1px solid #ffffff10; font-size: 11px; }
.studio-context-head select { margin-left: 6px; background: #111315; color: #fff; border: 1px solid #ffffff20; border-radius: 7px; padding: 6px; }
.editor-body { display: grid; grid-template-columns: 285px minmax(0, 1fr); flex: 1; min-height: 0; }
.control-panel { max-height: none; min-height: 0; overflow: auto; }
.stage-area { padding: 14px; overflow: hidden; min-height: 0; }
.scene { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.apercu-cadre { position: relative; overflow: hidden; }
.apercu-page { position: absolute; left: 0; top: 0; border: 0; transform-origin: top left; }
.project-actions { grid-template-columns: 1fr 1fr 1fr; }
.dark-field input[type=text], .dark-field input[type=number], .text-style-row input[type=text], .bloc-texte > input[type=text], .bloc-texte > textarea { width: 100%; box-sizing: border-box; border: 1px solid #ffffff15; border-radius: 8px; background: #111315; color: #fff; padding: 8px; font-size: 11px; }
.product-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.layers .layer { gap: 6px; }
.selection-bar { width: 100%; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 8px 10px; background: #1b1d20; border: 1px solid #ffffff10; border-radius: 9px; font-size: 11px; }
.selection-bar .dark-field { margin: 0; width: 82px; }
.selection-bar .dark-field input { width: 100%; box-sizing: border-box; background: #111315; color: #fff; border: 1px solid #ffffff20; border-radius: 6px; padding: 5px; }
.selection-menu { position: relative; }
.selection-menu summary { cursor: pointer; list-style: none; padding: 6px 10px; border: 1px solid #ffffff20; border-radius: 7px; }
.selection-menu[open] > button { display: block; margin-top: 4px; }
.editor-help { position: static; translate: none; margin: 6px 0 0; }
/* 0.3.1 — « Montrer plutôt que nommer » : ronds de couleur, logos et produits en miniatures. */
.rond-fond { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
/* Règle de Sarah (0.3.3) : aucun contour sur un visuel montré (ronds de couleur, dégradés, logos, miniatures). */
input[type=color] { border: 0; }
input[type=color]::-webkit-color-swatch { border: 0; }
input[type=color]::-moz-color-swatch { border: 0; }
.gradient-editor { display: flex; gap: 10px; align-items: center; margin-top: 10px; border: 0; } /* 1.0.1 : aucun contour autour du dégradé */
/* 1.19.2 (Sarah) : tous les logos sur une ligne qui défile vers la droite (doigt, pavé tactile, molette). */
.logo-choices { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 5px 5px 9px; scroll-snap-type: x proximity; scrollbar-width: thin; overscroll-behavior-x: contain; }
.logo-choices > *, .logos-ajoutes > * { scroll-snap-align: start; }
.logo-choices .logos-ajoutes { display: contents; }
/* 0.3.7 : les logos ajoutés font partie de la même rangée (même espacement, aucun chevauchement). */
.logos-ajoutes, .fonds-ajoutes { display: contents; }
.vignette-logo { position: relative; flex: 0 0 auto; width: 72px; height: 48px; padding: 4px; border-radius: 8px; border: 0; background: #111315; cursor: pointer; }
/* Règle CHOIX VISIBLE SANS CONTOUR (1.0.1) : une seule façon de montrer le choix, une petite coche au centre (provisoire). */
.rond-fond.active::after, .vignette-logo[aria-pressed="true"]::after, .product-counts .vignette-produit.active::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 900; text-shadow: 0 0 3px #000, 0 0 6px #000; pointer-events: none; }
.vignette-logo img, .vignette-produit img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Nombre de produits (0.3.3) : une seule case ; la flèche à droite ouvre la liste (menu invisible posé dessus). */
.nombre-produits { position: relative; }
.nombre-produits input { width: 100%; box-sizing: border-box; border: 1px solid #ffffff15; border-radius: 8px; background: #111315; color: #fff; padding: 8px 32px 8px 8px; }
.nombre-produits::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #aeb2b7; pointer-events: none; }
.nombre-produits select { position: absolute; top: 0; right: 0; bottom: 0; width: 30px; opacity: 0; cursor: pointer; }
/* Une miniature remplie est plus grande (0.3.3) ; la case vide « + » garde son pointillé (ce n'est pas un visuel). */
.product-counts .vignette-produit { width: 76px; height: 76px; padding: 3px; border-radius: 8px; border: 0; background: #111315; color: #aeb2b7; font-size: 20px; cursor: grab; }
.product-counts .vignette-produit.vide { width: 52px; height: 52px; cursor: pointer; border: 1px dashed #ffffff20; }
/* Textes (0.3.4) : un bloc identique par texte, colonnes fixes pour que tout soit aligné d'un bloc à l'autre. */
.bloc-texte { margin-bottom: 16px; }
.bloc-texte h3 { margin: 0 0 6px; font-size: 11px; font-weight: 800; color: #fff; }
.reglages-texte { display: grid; grid-template-columns: 1fr 52px; gap: 12px; align-items: start; margin-top: 8px; }
.reglages-texte .dark-field { margin: 0; }
.reglages-texte input[type=color] { width: 36px; height: 36px; }
.calque-montre { display: flex; align-items: center; gap: 6px; max-width: 170px; overflow: hidden; }
.calque-montre img { width: 34px; height: 24px; object-fit: contain; }
.layer { cursor: grab; }
.layer.depot-avant { box-shadow: 0 -3px 0 var(--studio-accent); }
.layer.depot-apres { box-shadow: 0 3px 0 var(--studio-accent); }
/* Textes : « Couleur » au même niveau que « Taille », le rond en dessous (ui-common.css met les couleurs en ligne). */
.reglages-texte .dark-field:has(> input[type=color]) { display: grid !important; justify-items: start; align-items: start !important; gap: 6px; }
/* 0.3.2 : fenêtre « Exporter » (reprise d'un studio existant, origine : Documents/reprise-technique.md ; couleurs de l'outil). */
.export-modal { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 20px; background: #000000c0; }
.export-dialog { width: min(520px, 100%); max-height: 90vh; overflow: auto; box-sizing: border-box; border: 1px solid #ffffff20; border-radius: 14px; background: #1b1d20; padding: 20px; box-shadow: 0 30px 90px #000b; }
.export-dialog h2 { margin: 0 0 6px; font-size: 18px; color: #fff; }
.export-section { margin: 14px 0; }
.export-section .label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; color: #b9bdc4; }
.export-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.export-option { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 12px; border: 1px solid #ffffff20; border-radius: 9px; background: #111315; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.export-option:has(input:checked) { border-color: var(--studio-accent); }
.export-option input { accent-color: var(--studio-accent); }
.export-dialog progress { width: 100%; height: 8px; accent-color: var(--studio-accent); }
.export-status { min-height: 18px; margin: 10px 0 0; font-size: 12px; font-weight: 800; color: #fff; }
.export-status.error { color: #ff9c9c; }
.export-actions { display: flex; gap: 9px; margin-top: 16px; }
.export-actions button { flex: 1; min-height: 42px; border: 1px solid #ffffff20; border-radius: 9px; background: #25282c; color: #fff; font-weight: 800; cursor: pointer; }
.export-actions .save { background: var(--studio-accent); border-color: var(--studio-accent); }
.export-actions button:disabled { opacity: .5; cursor: default; }
@media (max-width: 520px) { .export-options { grid-template-columns: 1fr; } }

/* 1.19.1 : texte sur plusieurs lignes dans le panneau. */
.bloc-texte > textarea { display: block; resize: vertical; min-height: 44px; font-family: inherit; line-height: 1.35; }