/* ============================================================
   STUDIO — MISE EN PAGE v35 (12/10/2026)
   ============================================================
   Demande utilisateur :
     « les outils ne sont pas facilement accessibles, il faudrait
       une interface où le visuel se met à jour en temps réel et il
       prend le plus de place pour être visible, les outils eux
       doivent toujours être accessibles »

   ➜ PRINCIPE : LE VISUEL D'ABORD.
     • Le visuel occupe la PLUS GRANDE part de l'écran.
     • Les outils sont dans un panneau à ONGLETS (un seul à la fois),
       JAMAIS dans un long formulaire à faire défiler.
     • En mobile : visuel collant en haut + barre d'outils toujours
       visible en bas + un seul panneau à la fois.

   Chargé APRÈS style.css / visuels.css / mobile.css pour primer.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   DISPOSITION GÉNÉRALE : 2 COLONNES (visuel | outils)
   ══════════════════════════════════════════════════════════ */
body.studio .app-main,
body.studio .studio-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr);
  gap: 0 !important;
  align-items: start;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Colonne VISUEL : elle prend le maximum ── */
body.studio .preview-panel {
  position: sticky !important;
  top: 0;
  order: -1;
  padding: 12px 16px 14px !important;
  background: #0b1424 !important;
  border-right: 1px solid #1e293b;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100vh;
  overflow: auto;
}

/* LE CANVAS : aussi grand que possible, SANS jamais le déformer.
   ⚠️ NE PAS mettre `flex: 1` ni `object-fit` : le canvas se retrouve
   étiré et le visuel paraît étroit dans un grand aplat vide. On le
   laisse garder son ratio intrinsèque (attributs width/height). */
body.studio .preview-panel canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 190px) !important;
  margin: 0 auto !important;
  display: block;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  background: #fff;
  cursor: text;   /* indique que le texte est éditable */
}

body.studio .preview-panel h2 {
  font-size: 12px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Encart d'aide sous le visuel */
.studio-astuce {
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 12.5px;
  color: #fcd34d;
  text-align: center;
  line-height: 1.5;
}
.studio-astuce b { color: #fff; }

/* ── Colonne OUTILS ── */
body.studio .studio-outils {
  background: #0f172a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  max-height: 100vh;
}

/* les sections du formulaire deviennent des ONGLETS : une seule visible.
   ⚠️ `!important` OBLIGATOIRE : designer.js pose un `style="display:…"`
   EN LIGNE sur #format-section (et d'autres) via updateFormats(). Un style
   en ligne bat une règle de feuille de style — sans `!important`, plusieurs
   panneaux s'affichent en même temps et l'isolation des onglets est cassée. */
body.studio .studio-outils > .config-panel,
body.studio .studio-outils .config-panel,
body.studio .studio-outils .config-section {
  display: none !important;
}
body.studio .studio-outils .config-panel.onglet-actif,
body.studio .studio-outils .config-section.onglet-actif {
  display: block !important;
}

/* le conteneur interne défile tout seul */
body.studio .studio-outils .studio-onglet-contenu {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 90px;
  scrollbar-width: thin;
}
body.studio .studio-outils .studio-onglet-contenu::-webkit-scrollbar { width: 8px; }
body.studio .studio-outils .studio-onglet-contenu::-webkit-scrollbar-thumb {
  background: #334155; border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   BARRE D'ONGLETS (toujours visible, en haut du panneau)
   ══════════════════════════════════════════════════════════ */
.studio-barre {
  display: flex;
  gap: 4px;
  padding: 10px 10px 0;
  background: #0b1424;
  border-bottom: 1px solid #1e293b;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.studio-barre::-webkit-scrollbar { display: none; }

.studio-onglet {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 13px 13px;
  background: none;
  border: none;
  border-radius: 9px 9px 0 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  position: relative;
}
.studio-onglet .so-ico { font-size: 19px; line-height: 1; }
.studio-onglet:hover { background: #16233a; color: #e2e8f0; }
.studio-onglet.actif {
  background: #0f172a;
  color: #f59e0b;
}
/* La barre ambre doit être SOUS le texte : on la place sur le bord bas
   du bouton, sans jamais recouvrir le libellé. */
.studio-onglet.actif::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 3px;
  background: #f59e0b;
  border-radius: 3px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   LE CHAMP D'ÉDITION DIRECTE (posé sur le visuel)
   ══════════════════════════════════════════════════════════ */
.edition-directe-champ {
  font-family: inherit;
  font-size: 16px;              /* 16px = pas de zoom auto sur iOS */
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  border: 3px solid #f59e0b;
  border-radius: 9px;
  padding: 9px 13px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  resize: none;
  outline: none;
  line-height: 1.35;
  caret-color: #f59e0b;
}

/* ══════════════════════════════════════════════════════════
   MOBILE — le visuel prend la moitié haute, les outils TOUJOURS là
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.studio .app-main,
  body.studio .studio-main {
    grid-template-columns: 1fr !important;
  }

  /* ── LE VISUEL : borné, collant, SANS le superflu ── */
  /* ⚠️ On borne la HAUTEUR TOTALE du panneau (pas seulement le canvas) :
     sinon le canvas déborde du panneau, la barre d'onglets qui suit dans
     le flux se retrouve DERRIÈRE le visuel et devient invisible. */
  body.studio .preview-panel {
    position: sticky !important;
    top: 0;
    z-index: 400;
    min-height: 0;
    max-height: 44vh !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    border-right: none;
    border-bottom: 2px solid #f59e0b;
    background: #0b1424 !important;
    display: block;
  }
  body.studio .preview-panel canvas {
    max-height: 31vh !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  }
  /* On masque tout ce qui n'est pas le visuel. Les VRAIS noms de classes
     (relevés dans le DOM) : .preview-title, .preview-hint, .gabarit-legend,
     .studio-astuce. Sans ça, le panneau d'aperçu est plus haut que le
     visuel et les onglets sont repoussés hors de l'écran — exactement la
     plainte « les outils ne sont pas facilement accessibles ». */
  body.studio .preview-panel .preview-title,
  body.studio .preview-panel .preview-hint,
  body.studio .preview-panel .gabarit-legend,
  .studio-astuce { display: none !important; }

  /* On compacte au maximum ce qui reste */
  body.studio .preview-panel .preview-status,
  body.studio .preview-panel .gabarit-toggle-wrap,
  body.studio .preview-panel .refresh-row {
    margin: 2px 0 !important;
    padding: 0 !important;
  }
  body.studio .preview-panel button {
    padding: 4px 10px !important;
    font-size: 11px !important;
    min-height: 28px !important;
  }
  /* Le bouton de repli reste accessible, discret */
  body.studio .preview-panel .preview-repli-btn {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    min-height: 26px !important;
    padding: 2px 9px !important;
  }

  /* ── LE PANNEAU OUTILS : juste sous le visuel ── */
  body.studio .studio-outils {
    position: static;
    min-height: 0;
    max-height: none;
    padding-bottom: 74px;   /* place pour la barre flottante */
  }
  body.studio .studio-outils .studio-onglet-contenu {
    padding: 14px 12px 30px;
    overflow: visible;
  }

  /* ⚠️ LA BARRE D'ONGLETS : collée EXACTEMENT sous le panneau d'aperçu.
     `top` doit valoir la hauteur du panneau (44vh / 40vh sous 420 px) :
     si la valeur est trop petite, la barre passe SOUS le visuel collant et
     devient invisible ; trop grande, elle laisse un trou. */
  .studio-barre {
    position: sticky;
    top: 44vh;
    z-index: 390;
    padding: 6px 6px 0;
    border-top: 2px solid #f59e0b;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .35);
    background: #0b1424;
  }
  .studio-onglet { padding: 7px 9px 9px; font-size: 10px; gap: 2px; }
  .studio-onglet .so-ico { font-size: 16px; }
}

/* ── Très petits écrans ── */
@media (max-width: 420px) {
  body.studio .preview-panel { max-height: 40vh !important; }
  body.studio .preview-panel canvas { max-height: 28vh !important; }
  .studio-barre { top: 40vh; }
  .studio-onglet { padding: 6px 7px 8px; font-size: 9.5px; }
  .studio-onglet .so-ico { font-size: 15px; }
  .edition-directe-champ { font-size: 16px; padding: 8px 11px; }
}

/* ══════════════════════════════════════════════════════════
   LA BARRE D'OUTILS FLOTTANTE EXISTANTE (barre-outils.js)
   devient la navigation principale sur mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav.barre-outils { z-index: 420 !important; }
}