/* ───────────────────────────────────────────────────────────────────────────
   PERSONNALISATION DE L'ÉDITEUR — éditable à la main, SANS recompiler.

   • Ce fichier n'est PAS généré par le build : tu peux le modifier librement sur
     le serveur ; un rechargement de page suffit (aucune recompilation).
   • Il doit être chargé par le hook PrestaShop APRÈS « la-label-editor.css »
     (sinon les surcharges ne prennent pas le dessus). Cf. INTEGRATION-EDITEUR.md.
   • Tout est volontairement scopé sous « .la-label-editor » pour ne PAS toucher
     au reste de la page CMS.
   ─────────────────────────────────────────────────────────────────────────── */

/* Exemple 1 — changer la couleur principale (navy) des boutons « Enregistrer »,
   « Ajouter au panier », etc. Décommente et adapte : */
/*
.la-label-editor button[class*="bg-[#072242]"] {
  background-color: #1b3a6b !important;
}
.la-label-editor button[class*="bg-[#072242]"]:hover {
  background-color: #142c52 !important;
}
*/

/* Exemple 2 — agrandir la hauteur de la fenêtre d'édition : */
/*
.la-label-editor {
  height: 88vh !important;
}
*/

/* Exemple 3 — changer la couleur d'accent (sélection d'outil, surbrillance) : */
/*
.la-label-editor .text-accent { color: #0a7c5a !important; }
.la-label-editor .bg-accent\/10 { background-color: rgba(10,124,90,0.10) !important; }
.la-label-editor .border-accent { border-color: #0a7c5a !important; }
*/

/* Ajoute tes règles ici 👇 */

/* ───────────────────────────────────────────────────────────────────────────
   FIX SCROLL DE PAGE (intégration in-page)
   Le bundle hérite de clawnify une règle plein écran NON scopée :
       html, body, #app { width:100%; height:100%; overflow:hidden }
   Montée dans une page CMS, elle bloque le scroll de toute la page (footer
   inaccessible). On restaure le scroll de la page et on borne l'éditeur en
   hauteur pour qu'il vive dans le flux du contenu.
   ─────────────────────────────────────────────────────────────────────────── */
html, body {
  height: auto !important;
  overflow: visible !important;
}

/* Le conteneur ne fait que WRAPPER l'éditeur : il prend la hauteur de son enfant
   (pas de hauteur forcée) et laisse le footer se placer juste après. */
#la-label-editor {
  height: auto !important;
  overflow: visible !important;
  position: relative;
  margin-bottom: 2.5rem;
}

/* La racine de l'éditeur (clawnify = h-[92vh] min-h-[600px] en dur, classe
   .la-label-editor). ATTENTION : elle n'est PAS enfant direct de #la-label-editor
   (le bundle insère un div intermédiaire) → on utilise le combinateur DESCENDANT
   (espace), pas « > », sinon la règle ne s'applique jamais.

   HAUTEUR RESPONSIVE = hauteur de l'écran − tout ce qui est au-dessus de l'éditeur
   (header, fil d'ariane, marges). La valeur est calculée par « la-label-custom.js »
   qui pose la variable --la-editor-h. Si le JS ne tourne pas, le repli
   calc(100vh - 300px) s'applique. min-height écrase le min-h-[600px] du bundle.
   → Pour figer une hauteur fixe : remplace var(--la-editor-h, …) par ex. 82vh. */
#la-label-editor .la-label-editor {
  height: var(--la-editor-h, calc(100vh - 300px)) !important;
  min-height: 300px !important;
  max-height: 1100px;
  overflow: hidden !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   BOUTONS PRINCIPAUX (Enregistrer, Ajouter au panier) — navy #072242.
   Ciblés par l'attribut de classe Tailwind « bg-[#072242] » (présent sur les deux).
   On adoucit les angles, on ajoute une ombre douce + un léger relief au survol.
   ─────────────────────────────────────────────────────────────────────────── */
#la-label-editor button[class*="bg-[#072242]"] {
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(7, 34, 66, 0.18) !important;
  letter-spacing: 0.01em;
  transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease !important;
}
#la-label-editor button[class*="bg-[#072242]"]:hover:not(:disabled) {
  box-shadow: 0 3px 10px rgba(7, 34, 66, 0.28) !important;
  transform: translateY(-1px);
}
#la-label-editor button[class*="bg-[#072242]"]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(7, 34, 66, 0.22) !important;
}

/* Notification de sauvegarde (toast) injectée par la-label-custom.js. */
.la-label-toast {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #072242;
  box-shadow: 0 6px 20px rgba(7, 34, 66, 0.32);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.la-label-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.la-label-toast.is-error {
  background: #b3261e;
  box-shadow: 0 6px 20px rgba(179, 38, 30, 0.32);
}