/* 
 * Plugin MAX - Styles modulaires
 * Version: 2.0
 * Organisation: Structure modulaire pour une meilleure maintenabilité
 */

/* ========================================
   IMPORTS DES MODULES
   ======================================== */

/* Variables et configuration de base */
@import url('./base/variables.css');
@import url('./base/reset.css');

/* Composants principaux */
@import url('./components/layout.css');
@import url('./components/carousel.css');
@import url('./components/ticker.css');
@import url('./components/images.css');
@import url('./components/tables.css');
@import url('./components/admin.css');
@import url('./components/fullscreen.css');

/* Responsive design */
@import url('./components/responsive.css');

/* Utilitaires et debug */
@import url('./utilities/debug.css');

/* ========================================
   STYLES GLOBAUX SPÉCIFIQUES
   ======================================== */

/* S'assurer que les styles du plugin ne interfèrent pas avec le thème */
.max-plugin-reset {
  all: initial;
  font-family: var(--max-font-primary);
  line-height: 1.6;
  color: #ffffff;
}

.max-plugin-reset *,
.max-plugin-reset *::before,
.max-plugin-reset *::after {
  box-sizing: border-box;
}

/* ========================================
   COMPATIBILITÉ ET FALLBACKS
   ======================================== */

/* Fallback pour les navigateurs qui ne supportent pas les variables CSS */
.max-tile-image {
  height: 270px; /* Fallback si variables non supportées */
}

/* Support des anciens navigateurs */
@supports not (display: flex) {
  .max-carousel-container {
    display: block;
  }
  
  .max-tile {
    display: inline-block;
    vertical-align: top;
  }
}

/* ========================================
   OPTIMISATIONS PERFORMANCE
   ======================================== */

/* Optimisation des animations */
.max-tile-image,
.max-product-img,
.max-coin-face {
  will-change: transform;
}

/* Réduction des reflows */
.max-carousel-container {
  contain: layout style paint;
}