/* ============================================
   BREAKPOINTS & SPACING SYSTEM
   Variables globales pour harmoniser le design
   ============================================ */

:root {
  /* === BREAKPOINTS === */
  --breakpoint-xl: 1200px;    /* Desktop large → Tablette */
  --breakpoint-lg: 992px;     /* Tablette → Mobile landscape */
  --breakpoint-md: 768px;     /* Mobile landscape → Mobile portrait */
  --breakpoint-sm: 480px;     /* Mobile portrait → Petit mobile */
  
  /* === SPACING === */
  --section-margin: 50px;
  
  /* Marges par breakpoint (multiplieurs) */
  --margin-desktop: 1;        /* 50px */
  --margin-tablet: 0.8;       /* 40px */
  --margin-mobile: 0.6;       /* 30px */
  --margin-small: 0.4;        /* 20px */
  
  /* Marges pour conteneurs internes */
  --inner-margin-desktop: 3;   /* 150px */
  --inner-margin-tablet: 2;    /* 100px */
  --inner-margin-mobile: 1;    /* 50px */
  --inner-margin-small: 0.5;   /* 25px */
}

/* ============================================
   CLASSES UTILITAIRES POUR CONTENEURS
   ============================================ */

/* Container standard (marges externes) */
.container,
.main-layout,
.single-container {
  margin: 0 calc(var(--section-margin) * var(--margin-desktop));
}

/* Container interne (marges plus importantes) */
.container-inner,
.single-container-content {
  margin: 0 calc(var(--section-margin) * var(--inner-margin-desktop));
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablette (≤ 992px) */
@media (max-width: 992px) {
  .container,
  .main-layout,
  .single-container {
    margin: 0 calc(var(--section-margin) * var(--margin-tablet));
  }
  
  .container-inner,
  .single-container-content {
    margin: 0 calc(var(--section-margin) * var(--inner-margin-tablet));
  }
}

/* Mobile landscape (≤ 768px) */
@media (max-width: 768px) {
  .container,
  .main-layout,
  .single-container {
    margin: 0 calc(var(--section-margin) * var(--margin-mobile));
  }
  
  .container-inner,
  .single-container-content {
    margin: 0 calc(var(--section-margin) * var(--inner-margin-mobile));
  }
}

/* Petit mobile (≤ 480px) */
@media (max-width: 480px) {
  .container,
  .main-layout,
  .single-container {
    margin: 0 calc(var(--section-margin) * var(--margin-small));
  }
  
  .container-inner,
  .single-container-content {
    margin: 0 calc(var(--section-margin) * var(--inner-margin-small));
  }
}

/* ============================================
   GUIDE D'UTILISATION
   ============================================
   
   1. Inclure ce fichier en premier dans functions.php
   
   2. Utiliser les classes .container ou .single-container 
      pour les marges standards
   
   3. Utiliser .container-inner ou .single-container-content 
      pour les marges plus importantes
   
   4. Les marges s'adaptent automatiquement selon le breakpoint
   
   Breakpoints:
   - Desktop:        > 992px  → 50px (1.0)
   - Tablette:      ≤ 992px  → 40px (0.8)
   - Mobile:        ≤ 768px  → 30px (0.6)
   - Petit mobile:  ≤ 480px  → 20px (0.4)
   
   ============================================ */