/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Google Fonts locally hosted */
@import url("/assets/fonts-dedb9d58.css");

/* Stabilo Highlighter Styles */
@import url("/assets/stabilo-3b8b4268.css");

/* Template Blocks Management Styles */
@import url("/assets/template_blocks-0f320c66.css");

/* Tailwind CSS is loaded separately via tailwind.css */

/* Styles personnalisés pour SiteBuilder2 */

/* ===== EDITOR UI STYLES - SCOPED TO PREVENT PREVIEW POLLUTION ===== */

/* Scoper les styles au conteneur éditeur */
/* #editor-root ruleset removed */

/* Règle pour corriger le positionnement de la flèche des éléments select - EDITOR ONLY */
#editor-root select {
  padding-right: 2.5rem !important; /* Ajoute de l'espace à droite pour la flèche */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  appearance: none; /* Supprime la flèche par défaut du navigateur */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Focus state pour maintenir la cohérence - EDITOR ONLY */
#editor-root select:focus {
  padding-right: 2.5rem !important;
}

/* Améliorations pour mobile - EDITOR ONLY */
@media (max-width: 640px) {
  /* Améliorer la lisibilité sur mobile - EDITOR ONLY */
  #editor-root {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Optimiser les inputs pour mobile - EDITOR ONLY */
  #editor-root input,
  #editor-root textarea,
  #editor-root select {
    font-size: 16px !important; /* Évite le zoom automatique sur iOS */
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0.5rem;
  }
  
  /* Améliorer les boutons tactiles - EDITOR ONLY */
  #editor-root button,
  #editor-root input[type="submit"] {
    min-height: 44px; /* Taille minimale recommandée pour les zones tactiles */
    touch-action: manipulation;
  }
  
  /* Optimiser les transitions pour mobile - EDITOR ONLY */
  #editor-root * {
    transition-duration: 0.2s;
  }
}

/* Améliorations pour les très petits écrans - EDITOR ONLY */
@media (max-width: 375px) {
  #editor-root .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Réduire les espacements sur très petits écrans - EDITOR ONLY */
  #editor-root .space-y-4 > * + * {
    margin-top: 0.75rem;
  }
}

/* ===== EDITOR UI COMPONENTS - SCOPED STYLES ===== */

/* Fix pour le sélecteur de taille d'écran - EDITOR ONLY */
#editor-root .device-button.hidden {
  display: none !important;
}

#editor-root .device-button {
  transition: all 0.2s ease;
  flex-shrink: 0; /* Empêche les boutons de se rétrécir */
}

#editor-root .device-button:hover {
  transform: translateY(-1px);
}

/* S'assurer que le conteneur des boutons a un espacement correct - EDITOR ONLY */
#editor-root #device-selector .flex {
  gap: 0.25rem; /* 4px d'espacement entre les boutons */
}

/* Breakpoint personnalisé pour cacher "Prévisualisation" et "Taille" en dessous de 1175px - EDITOR ONLY */
@media (max-width: 1175px) {
  #editor-root .hide-below-1175 {
    display: none !important;
  }
}

/* ===== SIDEBAR BLOCK ANIMATIONS - EDITOR ONLY ===== */

/* Animations pour les blocs de la sidebar */
#editor-root .block-item {
  transition: all 0.2s ease;
  cursor: pointer;
  scroll-margin-block: 100px;
}

/* #editor-root .block-item:hover removed */

/* Preview-triggered highlight for sidebar blocks - Styles managed via class theme-item-selected in JS now */
/* See editor_controller.js updateThemeColors() */

/* Preview iframe styles */
#preview-iframe {
  display: block;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: white;
}

#editor-root .block-moving {
  opacity: 0.6;
  transform: scale(0.98);
  transition: all 0.2s ease;
}

#editor-root .block-animation-clone {
  border-radius: 0.5rem;
}

/* ===== PREVIEW CONTAINER ANIMATIONS - EDITOR ONLY ===== */

/* Animations pour la prévisualisation */
#editor-root .preview-updating {
  position: relative;
}

#editor-root .preview-updating::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: editor-shimmer 0.8s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes editor-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

#editor-root .block-preview {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#editor-root .block-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ===== SIDEBAR BUTTON ANIMATIONS - EDITOR ONLY ===== */

/* Animation pour les boutons de déplacement */
#editor-root .block-move-up,
#editor-root .block-move-down {
  transition: all 0.2s ease;
  border-radius: 0.25rem;
}

#editor-root .block-move-up:hover,
#editor-root .block-move-down:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.1);
}

#editor-root .block-move-up:active,
#editor-root .block-move-down:active {
  transform: scale(0.95);
  background-color: rgba(0, 0, 0, 0.1);
}

/* ===== FEEDBACK ANIMATIONS - EDITOR ONLY ===== */

/* Animation de feedback pour les actions réussies */
@keyframes editor-success-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

#editor-root .block-move-success {
  animation: editor-success-pulse 0.6s ease-out;
}

/* ===== MODAL STYLES - EDITOR ONLY ===== */

/* Fix pour les modals - s'assurer qu'elles sont toujours au-dessus - EDITOR ONLY */
#editor-root .modal-overlay {
  z-index: 99999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* ===== PREVIEW CONTENT STACKING - EDITOR ONLY ===== */

/* S'assurer que le contenu de prévisualisation a un z-index plus bas - EDITOR ONLY */
#editor-root .preview-content {
  position: relative;
  z-index: 1;
}

/* S'assurer que les boutons dans les blocs n'interfèrent pas avec les modals - EDITOR ONLY */
#editor-root .block-preview button,
#editor-root .block-preview a {
  position: relative;
  z-index: 2;
}

/* ===== CSS CONTAINMENT FOR PREVIEW AUTONOMY ===== */

/* Isoler la preview du reste de l'éditeur */
/* #site-container ruleset removed */

/* Preview iframe isolation is handled by the iframe element itself */

/* Scoper les styles de l'éditeur UI */
/* .editor-ui ruleset removed */

/* La preview est complètement isolée et peut fonctionner en standalone */
.preview-content {
  position: relative;
  z-index: 1;
}

/* ===== PUBLIC SITE STYLES ===== */

/* Reset browser default margin on public site body */
body.public-site {
  margin: 0;
}

/* Desktop max width for public site container */
@media (min-width: 1024px) {
  .public-site-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}