/** Shopify CDN: Minification failed

Line 194:27 Unexpected "*"

**/
/**
 * Styles pour l'éditeur de panneaux Konva
 * Compatible mobile et desktop
 * Updated: 2025-11-16 20:33
 */

/* ============================================================================
   CONTENEUR PREVIEW KONVA
   ============================================================================ */

/* Conteneur principal : empiler verticalement les deux panneaux */
.visuals-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Transition pour effet de fondu lors du changement de format */
  transition: opacity 0.2s ease;
}

/* Structure des conteneurs de preview (recto et verso) */
.personnalisation__visuel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  position: relative;
  min-height: fit-content;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Override des styles inline Liquid sur les conteneurs shape-container (ne pas toucher display) */
div[id^="shape-container-"] {
  background-color: transparent !important;
  border: none !important;
  height: auto !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  line-height: 0 !important;
}

/* Override des styles inline Liquid sur les conteneurs shape */
div[id^="shape-"] {
  background-color: transparent !important;
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  height: auto !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  line-height: 0 !important;
}

/* Preview Konva */
.panneau-konva-preview {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Conteneur Konva automatique */
.panneau-konva-preview .konvajs-content {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: block !important;
  position: relative !important;
  max-width: 100% !important;
}

/* Canvas Konva - garde ses proportions exactes */
.panneau-konva-preview canvas {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive : le canvas est maintenant adapté automatiquement par le JS */
@media screen and (max-width: 750px) {
  .panneau-konva-preview {
    margin: 1rem 0;
    overflow: hidden;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Centrer le conteneur Konva */
  .panneau-konva-preview .konvajs-content {
    margin: 0 auto !important;
  }

  /* Centrer le conteneur du canvas sur mobile */
  .personnalisation__visuel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Le canvas garde ses dimensions exactes (pas de déformation) */
}

/* ============================================================================
   MASQUER L'ANCIEN SYSTÈME DE PREVIEW
   ============================================================================ */

/* IMPORTANT : Ces règles masquent l'ancien preview HTML pour le remplacer par Konva */

/* Recto : masquer les conteneurs de texte et SVG (sélection par ID) */
div[id^="texte-container-"] {
  display: none !important;
}

div[id^="svg-container-"] {
  display: none !important;
}

/* Recto : masquer les anciens textes par classe */
.panneau_texte-principal,
.panneau_texte-secondaire,
.panneau_texte-secondaire-texte,
span[id^="texte-secondaire-texte-"] {
  display: none !important;
}

/* Recto : masquer l'ancienne flèche SVG */
svg[id^="svg-icon-"] {
  display: none !important;
}

/* Verso : masquer les conteneurs de texte verso */
div[id^="texte-container-verso-"] {
  display: none !important;
}

/* Verso : masquer l'ancien texte verso par classe */
.panneau_texte-verso,
p[id^="texte-verso-"] {
  display: none !important;
}

/* ============================================================================
   MESSAGES D'ERREUR
   ============================================================================ */

.panneau-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 2rem;
  background: #ffebee;
  border: 2px dashed #ef5350;
  border-radius: 8px;
  color: #c62828;
  text-align: center;
}

.panneau-error p {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}

/* ============================================================================
   INTÉGRATION AVEC SHOPIFY
   ============================================================================ */

/* Ajuster le conteneur de la section Shopify */
#shape-container-template--* .personnalisation__visuel {
  position: relative;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.panneau-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: #f5f5f5;
  border-radius: 8px;
}

.panneau-loading::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 4px solid #FDCF4A;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================================
   POLICE BASIER SQUARE (si non chargée par le thème)
   ============================================================================ */

/*
Note: Assurez-vous que la police Basier Square est bien chargée.
Si elle n'est pas disponible, le texte utilisera Arial comme fallback.
*/

/* ============================================================================
   RESPONSIVE - MOBILE
   ============================================================================ */

/* ============================================================================
   AMÉLIORATIONS UX
   ============================================================================ */

/* Hover effect désactivé (box-shadow supprimé) */

/* Focus visible pour accessibilité */
.panneau-konva-preview:focus-within {
  outline: 2px solid #FDCF4A;
  outline-offset: 4px;
}

/* ============================================================================
   MODE SOMBRE (optionnel)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  .panneau-konva-preview {
    background: #2a2a2a;
  }
}

/* ============================================================================
   PRINT (masquer le preview à l'impression)
   ============================================================================ */

@media print {
  .panneau-konva-preview {
    display: none;
  }
}