/* ============================================================
   MODÈLES PRÊTS — styles
   ============================================================
   La grille des métiers. Chaque carte est un BOUTON qui applique
   le modèle complet au visuel en un clic.

   Charte : bleu nuit #172554 → #1e3a8a · ambre #f59e0b
   ============================================================ */

.modeles-intro {
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
  background: #f8fafc;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.modeles-intro strong { color: #172554; }

/* ── LA GRILLE ── */
#modeles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}

/* ── LA CARTE ── */
.modele-carte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  font-family: inherit;
}
.modele-carte:hover {
  transform: translateY(-2px);
  border-color: #f59e0b;
  box-shadow: 0 6px 16px rgba(23, 37, 84, .16);
}
.modele-carte:active { transform: translateY(0); }

/* carte du modèle actuellement appliqué */
.modele-carte.actif {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .28);
}

/* ── L'APERÇU (miniature du fond + titre) ── */
.modele-apercu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 74px;
  padding: 6px;
  text-align: center;
}
.modele-emoji { font-size: 22px; line-height: 1; }
.modele-titre-apercu {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
  word-break: break-word;
}

/* ── LE NOM DU MÉTIER ── */
.modele-nom {
  display: block;
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  line-height: 1.2;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── SÉPARATEUR DE GROUPE (dans la grille) ── */
.modele-groupe {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  padding: 6px 2px 2px;
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
}

/* ── LES SECTIONS À L'INTÉRIEUR D'UN ONGLET ──
   ⚠️ CAUSE RACINE DU BUG « panneau à 0 pixel » (constaté en test v51) :

   studio.css contient (lignes 109-115) :
       body.studio .studio-outils .config-section { display: none !important }
       body.studio .studio-outils .config-panel.onglet-actif { display: block !important }

   La v35 supposait UNE SECTION = UN ONGLET : elle cachait toutes les
   sections et n'affichait que celle marquée .onglet-actif.

   En v36, UN ONGLET CONTIENT PLUSIEURS SECTIONS. L'enveloppe
   (.onglet-panneau) s'affichait bien, mais les sections À L'INTÉRIEUR
   restaient « display: none » à cause de la première règle (plus
   spécifique + !important) → le panneau mesurait 0 pixel de haut et
   les 19 cartes de métiers étaient invisibles.

   ➜ Correctif : quand l'enveloppe est active, on ré-affiche ses sections.
      MAIS on respecte le « display:none » EN LIGNE que le JS pose sur
      #format-section (pour masquer le format quand le produit n'en a pas).
      D'où le sélecteur d'attribut qui cible le style inline. */
body.studio .studio-outils .onglet-panneau.onglet-actif .config-section {
  display: block !important;
}
body.studio .studio-outils .onglet-panneau.onglet-actif
  .config-section[style*="display:none"],
body.studio .studio-outils .onglet-panneau.onglet-actif
  .config-section[style*="display: none"] {
  display: none !important;
}

/* ── APERÇU DE CONTRÔLE — cadrage (ajout 14/10/2026) ──
   ⚠️ Le rendu d'impression est une image TRÈS HAUTE (1200 × 2832 px pour
   un beach flag). Affichée en pleine largeur, elle débordait largement
   sous l'écran : le client ne voyait que le haut (le fond) et croyait
   que son texte avait disparu — alors que l'image était parfaite.
   ➜ On borne la hauteur et on laisse l'image ENTIÈRE visible :
     le client voit d'un coup d'œil ce qui sera fabriqué. */
#visual-preview img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 58vh !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: #0b1424;
}

/* Le bloc entier défile si besoin (sous-titre, notes, specs) */
#visual-preview {
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ── ONGLETS REGROUPÉS ── */

/* Le panneau d'un onglet : un seul défilement, sections empilées */
.onglet-panneau {
  display: none !important;   /* une seule section visible à la fois */
}
.onglet-panneau.onglet-actif {
  display: block !important;
}

/* Les sections à l'intérieur d'un onglet : plus de cadre ni de fond,
   elles sont déjà dans le panneau. On garde juste l'espacement. */
.onglet-panneau .config-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 6px !important;
  margin: 0 !important;
}

/* Titre de section à l'intérieur d'un onglet (2e section et suivantes) :
   une barre ambre rappelle la charte et sépare clairement les blocs. */
.onglet-panneau .sous-titre-section {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 2px solid #f59e0b !important;
  font-size: 15px !important;
  color: #172554 !important;
}

/* La barre d'onglets : 4 boutons tiennent à l'aise, y compris sur mobile */
.studio-barre {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.studio-onglet {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.studio-onglet > span:last-child {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Sur mobile, 4 onglets sur une ligne : on réduit un peu */
@media (max-width: 480px) {
  .studio-onglet { font-size: 11px !important; padding: 8px 4px !important; }
  .studio-onglet .so-ico { font-size: 15px !important; }
}

@media (max-width: 600px) {
  #modeles-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
  .modele-apercu { height: 66px; }
  .modele-emoji { font-size: 20px; }
  .modele-titre-apercu { font-size: 9px; }
  .modele-nom { font-size: 10px; padding: 6px 3px; }
}