/*
Theme Name: OFFGRID.QC Theme
Theme URI: https://offgrid.quebec
Author: OFFGRID.QC
Author URI: https://offgrid.quebec
Description: Thème WordPress personnalisé pour OFFGRID.QC - Autonomie énergétique au Québec
Version: 2.3.0 - CODE RESTRUCTURÉ
Version Date: 2025-12-30
Version Note: RESTRUCTURATION COMPLÈTE - Toutes sections regroupées (COHÉSION + LOCALITÉ)
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: offgrid-theme
Tags: off-grid, solar, energy, quebec, autonomy
*/

/* ============================================
   TABLE DES MATIÈRES - STRUCTURE RESTRUCTURÉE
   ============================================

   📌 PRINCIPE: Chaque section contient TOUT son code au même endroit
   ✅ Plus de code éparpillé sur 1000+ lignes!
   ✅ Media queries intégrées dans chaque section
   ✅ Modifications rapides et sans erreur

   1. Variables CSS
   2. Reset & Base
   3. Typography
   4. Header & Navigation (TOUT regroupé + responsive)
   5. Hero Section (TOUT regroupé + divider + responsive)
   6. Content Sections
   7. Boutons
   8. Cartes & Grilles
   9. Galerie
   10. Formulaires
   11. Footer (TOUT regroupé + responsive)
   12. Utilitaires
   13. Animations
   14. Accessibilité
   15. Iframes / Vidéos
   16. À propos / Stats
   17. Victron Monitor
   18. Caméra 24/7
   19. Pages & Posts
   20. Page Chauffage Propane
   21. Contact Notification

============================================ */


/* ============================================
   1. VARIABLES CSS
============================================ */
:root {
  /* Couleurs principales */
  --vert-foret: #2d5016;
  --vert-clair: #7cd97c;
  --vert-hover: #3a6322;
  --blanc-neige: #f8f9fa;
  --blanc-pur: #ffffff;
  --gris-fonce: #1a1a1a;
  --gris-moyen: #2d2d2d;
  --gris-clair: #e9ecef;

  /* Couleurs secondaires */
  --jaune-soleil: #ffc107;
  --bleu-ciel: #17a2b8;
  --rouge-alerte: #dc3545;

  /* ========================================
     MENU & DIVIDER - Contrôles Couleurs Faciles
     ======================================== */
  /* Couleur du menu (boutons navigation) */
  --menu-color: #00ff88;                    /* Vert OFFGRID par défaut */
  --menu-glow: rgba(0, 255, 136, 0.6);     /* Glow menu */

  /* Couleur du divider Hero (barre séparation) */
  --divider-color: #00ff88;                 /* Vert OFFGRID par défaut */
  --divider-glow: rgba(0, 255, 136, 0.8);  /* Glow divider */

  /* Couleur des boutons Hero CTA (Call-to-Action) */
  --hero-cta-color: #00ff88;                /* Vert OFFGRID par défaut */
  --hero-cta-glow: rgba(0, 255, 136, 0.7); /* Glow boutons Hero */

  /* Couleur des sections Caméra 24/7 */
  --camera-color: #00ff88;                  /* Vert OFFGRID par défaut */
  --camera-glow: rgba(0, 255, 136, 0.7);   /* Glow sections caméra */

  /* ========================================
     SÉPARATEURS VERTS NÉON - Contrôles Faciles
     ======================================== */
  /* Couleur et effet des séparateurs verts (hr-separator-green) */
  --separator-color: rgba(124, 217, 124, 0.5);  /* Couleur séparateur vert néon */
  --separator-pulse-speed: 3s;                   /* Vitesse pulsation (3s = lent, 1s = rapide) */
  --separator-max-width: 600px;                  /* Largeur max du séparateur */
  /* ======================================== */

  /* Épaisseur divider */
  --divider-thick: 3px;                     /* 1/8" - Hero divider */

  /* Animations divider (change direction/vitesse ici!) */
  --divider-animation-speed: 3s;            /* Vitesse du mouvement */
  --divider-animation-direction: normal;    /* normal ou reverse */
  /* ======================================== */

  /* Câble Photovoltaïque - Couleurs personnalisables */
  --cable-electricity: #00ff88;           /* Vert OFFGRID (changeable par saison) */
  --cable-electricity-glow: rgba(0, 255, 136, 0.4);
  --cable-metal: #c0c0c0;                 /* Gris métallique câble */
  --cable-dark: #4a4a4a;                  /* Gris foncé câble */
  --pv-cell-bg: rgba(100, 150, 200, 0.2); /* Fond cellule photovoltaïque */
  --pv-cell-border: rgba(200, 220, 255, 0.3);

  /* Typographie */
  --font-principale: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-taille-base: 16px;
  --font-taille-petit: 0.875rem;
  --font-taille-grand: 1.125rem;
  --line-height-base: 1.6;

  /* Espacements */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Bordures */
  --border-radius: 8px;
  --border-radius-lg: 16px;

  /* Ombres */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);

  /* Transitions */
  --transition-rapide: 0.2s ease;
  --transition-normale: 0.3s ease;
  --transition-lente: 0.5s ease;
}

/* ============================================
   2. RESET & BASE
============================================ */
/* ============================================
   2. RESET & BASE
============================================ */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

html {
  font-size: var(--font-taille-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-principale);
  line-height: var(--line-height-base);
  color: var(--blanc-neige);
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

a { 
  color: var(--vert-clair); 
  text-decoration: none; 
  transition: color var(--transition-rapide); 
}

a:hover, 
a:focus { 
  color: var(--blanc-pur); 
  text-decoration: underline; 
}


/* ============================================
   3. TYPOGRAPHY
============================================ */
/* ============================================
   3. TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 { 
  font-weight: 700; 
  line-height: 1.2; 
  margin-bottom: 1rem; 
  color: var(--blanc-pur); 
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { 
  margin-bottom: 1rem; 
  color: var(--blanc-neige); 
}

strong, b { 
  font-weight: 600; 
  color: var(--blanc-pur); 
}

em, i {
  font-style: italic;
}


/* ================================================
   4. HEADER & NAVIGATION - TOUT REGROUPÉ ICI
   Classes: .site-header, .header-container, .main-nav,
            .main-menu, .menu-toggle, .hamburger
   
   ⚡ REGROUPÉ: Base + Burger + Responsive mobile
   ⚡ Plus de code éparpillé!
================================================ */
/* Header principal */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(26, 26, 26, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

/* Navigation principale */
.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.1875rem 0;  /* 3/16" en haut et bas */
}

.main-menu li {
  margin: 0;
}

.main-menu a {
  display: block;
  padding: 0.5rem 1.25rem;          /* Réduit de 0.75rem → 0.5rem pour menu plus serré */
  color: var(--blanc-pur);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

/* Effet de shine animé au survol */
.main-menu a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.main-menu a:hover::before {
  left: 100%;
}

/* Effet glow au hover */
.main-menu a:hover,
.main-menu a:focus {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--menu-color);
  color: var(--blanc-pur);
  box-shadow:
    0 0 10px var(--menu-glow),
    0 0 20px var(--menu-glow),
    0 2px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 8px var(--menu-glow);
  transform: translateY(-2px);
}

/* Effet actif */
.main-menu a:active {
  transform: translateY(0);
  box-shadow:
    0 0 5px var(--menu-glow),
    0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Menu burger (mobile) - Couleur menu */
.menu-toggle {
  display: none;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--menu-color);
  border-radius: 8px;
  padding: 0.75rem;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px var(--menu-glow);
}

.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--menu-color);
  box-shadow:
    0 0 15px var(--menu-glow),
    0 0 25px var(--menu-glow);
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--menu-color);
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px var(--menu-glow);
}

/* Animation burger actif */
.menu-toggle[aria-expanded="true"] .hamburger:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Responsive menu mobile */
@media (max-width: 768px) {
  /* Cacher le divider Hero sur mobile */
  .neon-hero-divider {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(26, 26, 26, 0.98);
    padding: 5rem 2rem 2rem;
    transition: left 0.3s ease;
    overflow-y: auto;
    /* Bordure menu mobile */
    border-right: 3px solid var(--menu-color);
    box-shadow:
      0 0 15px var(--menu-glow),
      0 0 30px var(--menu-glow),
      inset 0 0 20px rgba(0, 0, 0, 0.5);
  }

  .main-nav.active {
    left: 0;
  }

  .main-menu {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .main-menu a {
    text-align: center;
    font-size: 1.1rem;
    padding: 0.5rem 1.25rem;  /* Aligné avec desktop - Menu serré */
  }
}

/* ================================================
   5. HERO SECTION - TOUT REGROUPÉ ICI
   Classes: .hero-section, .hero-content, .hero-logo,
            .hero-title, .hero-subtitle, .hero-cta,
            .neon-line, .neon-thick, .neon-hero-divider
   
   ⚡ REGROUPÉ: Base + Divider + Responsive
   ⚡ Plus de code éparpillé sur 1224 lignes!
================================================ */

.hero-section {
  min-height: 90vh; /* 90vh pour performance desktop */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--blanc-pur);
  padding: 4rem 2rem;
  position: relative;

  /* Background Hero SANS filtre (pour ajouter un filtre: linear-gradient(...), avant url()) */
  background-image: url('images/hero-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.hero-content { 
  position: relative; 
  z-index: 2; 
  max-width: 900px; 
  margin: 0 auto; 
}

.logo-container { 
  margin-bottom: 2rem; 
  animation: fadeInDown 1s ease; 
}

.hero-logo { 
  max-width: 750px; 
  margin: 0 auto; 
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); 
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
  color: var(--blanc-pur);
  font-weight: 700;
  /* Effet 3D profondeur blanc */
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.5),
    2px 2px 0 rgba(255, 255, 255, 0.4),
    3px 3px 0 rgba(255, 255, 255, 0.3),
    4px 4px 0 rgba(255, 255, 255, 0.2),
    5px 5px 0 rgba(255, 255, 255, 0.1),
    6px 6px 10px rgba(0, 0, 0, 0.6),
    8px 8px 15px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1s ease 0.3s both;
}

.hero-subtitle {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
  color: var(--blanc-pur);              /* Blanc pur pour meilleur contraste */
  max-width: 900px;                     /* Largeur max pour meilleur rendu */
  margin-left: auto;
  margin-right: auto;
  /* CONTRASTE AMÉLIORÉ - Text-shadow multi-couches (SANS fond) */
  text-shadow:
    0 0 10px rgba(0, 0, 0, 1),          /* Halo noir proche fort */
    0 0 20px rgba(0, 0, 0, 0.9),        /* Halo noir moyen */
    0 0 30px rgba(0, 0, 0, 0.8),        /* Halo noir lointain */
    2px 2px 4px rgba(0, 0, 0, 1),       /* Ombre décalée forte */
    4px 4px 8px rgba(0, 0, 0, 0.9);     /* Ombre décalée lointaine */
  animation: fadeInUp 1s ease 0.6s both;
}

.hero-cta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease 0.9s both;
}

/* ===== HERO DIVIDER (Barre séparation néon) ===== */
/* Ligne divider - 100% largeur edge-to-edge */
.neon-line {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Hero divider épais (1/8") */
.neon-thick {
  height: var(--divider-thick);
  background: var(--divider-color);
  box-shadow:
    0 0 10px var(--divider-glow),
    0 0 20px var(--divider-glow),
    0 0 30px var(--divider-color),
    inset 0 0 10px var(--divider-glow);
  animation: divider-pulse var(--divider-animation-speed) ease-in-out infinite;
  animation-direction: var(--divider-animation-direction);
}

/* Effet de mouvement dynamique */
.neon-thick::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: divider-flow var(--divider-animation-speed) linear infinite;
  animation-direction: var(--divider-animation-direction);
}

/* Animation: Pulsation du divider */
@keyframes divider-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 10px var(--divider-glow),
      0 0 20px var(--divider-glow),
      0 0 30px var(--divider-color);
  }
  50% {
    opacity: 0.8;
    box-shadow:
      0 0 5px var(--divider-glow),
      0 0 10px var(--divider-glow),
      0 0 15px var(--divider-color);
  }
}

/* Animation: Flux de lumière */
@keyframes divider-flow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Espacement divider Hero */
.neon-hero-divider {
  margin: 0;
}

/* ===== RESPONSIVE HERO (Mobile ≤768px) ===== */
@media (max-width: 768px) {
  .hero-section {
    min-height: 100vh; /* Force 100vh sur mobile */
    padding: 2rem 1rem; /* Padding réduit mobile */
    background-attachment: scroll !important; /* Force scroll (pas fixed) */
  }

  .hero-logo {
    max-width: 90%;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================
   6. CÂBLE PHOTOVOLTAÏQUE (Divider décoratif)
============================================ */

/* Conteneur principal du câble */
.pv-cable-divider {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Les 3 câbles horizontaux */
.pv-cables {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* Style individuel de chaque câble */
.pv-cable {
  position: relative;
  width: 100%;
  height: 18px;
  background: linear-gradient(180deg, var(--cable-metal) 0%, var(--cable-dark) 50%, var(--cable-metal) 100%);
  border-radius: 9px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.3);
  overflow: hidden;
}

/* Cellules photovoltaïques sur les câbles */
.pv-cable::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 14px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--pv-cell-bg) 0px,
      var(--pv-cell-bg) 18px,
      var(--pv-cell-border) 18px,
      var(--pv-cell-border) 20px
    );
  border: 1px solid var(--pv-cell-border);
  border-radius: 3px;
  box-shadow:
    0 0 8px var(--cable-electricity-glow),
    inset 0 1px 2px rgba(255,255,255,0.2);
}

/* Point d'électricité central (statique - pas d'animation) */
.pv-cable::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--cable-electricity);
  border-radius: 50%;
  box-shadow:
    0 0 12px var(--cable-electricity),
    0 0 20px var(--cable-electricity-glow);
  z-index: 2;
}

/* Effet hover: électricité s'illumine */
.pv-cable-divider:hover .pv-cable::after {
  box-shadow:
    0 0 20px var(--cable-electricity),
    0 0 35px var(--cable-electricity-glow),
    0 0 50px var(--cable-electricity-glow);
  transition: box-shadow 0.3s ease;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .pv-cable-divider {
    height: 60px;
  }

  .pv-cable {
    height: 14px;
    border-radius: 7px;
  }

  .pv-cable::before {
    width: 80px;
    height: 10px;
  }

  .pv-cable::after {
    width: 6px;
    height: 6px;
  }
}


/* ============================================
   7. CONTENT SECTIONS
============================================ */
/* ============================================
   5. CONTENT SECTIONS
============================================ */
.content-section {
  padding: var(--spacing-lg) 2rem;
  max-width: 1400px;
  margin: 0 auto;
  background: transparent;
  color: var(--blanc-neige);
}

.content-section.bg-dark { 
  background: rgba(0, 0, 0, 0.4); 
  color: var(--blanc-pur); 
}

.content-section h2,
.content-section h3,
.content-section h4,
.content-section p,
.content-section li {
  color: var(--blanc-neige);
  /* Centrage RETIRÉ - Desktop/tablette alignement normal */
}

.content-section h2 {
  color: var(--blanc-pur);
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(0, 255, 136, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4);
  /* Centrage RETIRÉ - Desktop/tablette alignement normal */
}

.section-title {
  text-align: center !important;  /* Force centrage TOUS devices (mobile inclus) */
  margin-bottom: var(--spacing-md);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--blanc-pur);
  font-weight: 700;
  /* Effet 3D relief blanc moderne - PAS de barre dessous */
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.6),
    2px 2px 0 rgba(255, 255, 255, 0.5),
    3px 3px 0 rgba(255, 255, 255, 0.4),
    4px 4px 0 rgba(255, 255, 255, 0.3),
    5px 5px 8px rgba(0, 0, 0, 0.5),
    7px 7px 12px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

/* SUPPRIMÉ - Pas de barre sous les titres (demandé par utilisateur) */

.section-intro {
  max-width: 800px; 
  margin: 0 auto 2rem; 
  text-align: center;
  font-size: 1.1rem; 
  line-height: 1.8; 
  color: var(--blanc-neige);
}

.emoji { 
  font-style: normal; 
  margin: 0 0.25rem; 
}


/* ============================================
   8. BOUTONS
============================================ */
/* ============================================
   6. BOUTONS
============================================ */
.btn {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.5rem;
  padding: 1rem 2rem; 
  font-size: 1rem; 
  font-weight: 600; 
  text-decoration: none;
  border-radius: var(--border-radius); 
  border: 2px solid transparent; 
  cursor: pointer;
  transition: all var(--transition-normale); 
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
  color: var(--blanc-pur);
  border: 2px solid var(--hero-cta-color);
  box-shadow:
    0 0 10.5px var(--hero-cta-glow),  /* Réduit -30% (15px → 10.5px) */
    0 0 21px var(--hero-cta-glow),     /* Réduit -30% (30px → 21px) */
    0 4px 15px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 0 10px var(--hero-cta-glow),
    0 2px 4px rgba(0, 0, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Effet brillance subtile */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
  border-color: var(--hero-cta-color);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 14px var(--hero-cta-glow),    /* Réduit -30% (20px → 14px) */
    0 0 28px var(--hero-cta-glow),    /* Réduit -30% (40px → 28px) */
    0 0 42px var(--hero-cta-color),   /* Réduit -30% (60px → 42px) */
    0 8px 25px rgba(0, 0, 0, 0.6);
  text-shadow:
    0 0 15px var(--hero-cta-glow),
    0 2px 4px rgba(0, 0, 0, 0.9);
  text-decoration: none;
}

.btn-primary:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 0 7px var(--hero-cta-glow),     /* Réduit -30% (10px → 7px) */
    0 4px 15px rgba(0, 0, 0, 0.5);
}

.btn-secondary {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
  color: var(--blanc-pur);
  border: 2px solid var(--hero-cta-color);
  box-shadow:
    0 0 10.5px var(--hero-cta-glow),  /* Réduit -30% (15px → 10.5px) */
    0 0 21px var(--hero-cta-glow),     /* Réduit -30% (30px → 21px) */
    0 4px 15px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 0 10px var(--hero-cta-glow),
    0 2px 4px rgba(0, 0, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

/* Effet brillance subtile pour btn-secondary */
.btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-secondary:hover::before {
  left: 100%;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
  color: var(--blanc-pur);
  border-color: var(--hero-cta-color);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 14px var(--hero-cta-glow),    /* Réduit -30% (20px → 14px) */
    0 0 28px var(--hero-cta-glow),    /* Réduit -30% (40px → 28px) */
    0 0 42px var(--hero-cta-color),   /* Réduit -30% (60px → 42px) */
    0 8px 25px rgba(0, 0, 0, 0.6);
  text-shadow:
    0 0 15px var(--hero-cta-glow),
    0 2px 4px rgba(0, 0, 0, 0.9);
  text-decoration: none;
}

.btn-secondary:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 0 7px var(--hero-cta-glow),     /* Réduit -30% (10px → 7px) */
    0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Bouton Caméra 24/7 - Coming Soon */
.btn-camera {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
  color: var(--blanc-pur);
  border: 2px solid var(--camera-color);
  box-shadow:
    0 0 10.5px var(--camera-glow),    /* Réduit -30% (15px → 10.5px) */
    0 0 21px var(--camera-glow),       /* Réduit -30% (30px → 21px) */
    0 4px 15px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 0 10px var(--camera-glow),
    0 2px 4px rgba(0, 0, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-camera::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-camera:hover::before {
  left: 100%;
}

.btn-camera:hover,
.btn-camera:focus {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
  border-color: var(--camera-color);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 14px var(--camera-glow),      /* Réduit -30% (20px → 14px) */
    0 0 28px var(--camera-glow),      /* Réduit -30% (40px → 28px) */
    0 0 42px var(--camera-color),     /* Réduit -30% (60px → 42px) */
    0 8px 25px rgba(0, 0, 0, 0.6);
  text-shadow:
    0 0 15px var(--camera-glow),
    0 2px 4px rgba(0, 0, 0, 0.9);
  text-decoration: none;
}

.btn-camera:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 0 7px var(--camera-glow),       /* Réduit -30% (10px → 7px) */
    0 4px 15px rgba(0, 0, 0, 0.5);
}


/* ============================================
   9. SECTIONS CAMÉRA 24/7
============================================ */
/* ============================================
   SECTIONS CAMÉRA 24/7 - Style global
   ============================================ */
.camera-section {
  max-width: 680px;              /* Réduit de 800px → 680px (~15%) */
  margin: 1.7rem auto;           /* Réduit de 2rem → 1.7rem */
  margin-bottom: 5.1rem;         /* TRIPLÉ pour espace photo (1.7 × 3) */
  padding: 1.7rem;               /* Réduit de 2rem → 1.7rem */
  background: transparent;       /* Fond transparent au lieu de noir */
  border-radius: 12px;
  border: 2px solid var(--camera-color);
  box-shadow:
    0 0 20px var(--camera-glow),
    0 0 40px var(--camera-glow);
  text-align: center;
}

.camera-section h3 {
  color: var(--blanc-pur);
  margin-bottom: 0.85rem;        /* Réduit de 1rem → 0.85rem */
  font-size: 1.36rem;            /* Réduit de 1.6rem → 1.36rem (~15%) */
  text-shadow: 0 0 10px var(--camera-glow);
}

.camera-section p {
  margin-bottom: 1.275rem;       /* Réduit de 1.5rem → 1.275rem */
  line-height: 1.8;
  color: var(--blanc-neige);
}

/* Centrage bouton caméra sur mobile */
@media (max-width: 768px) {
  .camera-section {
    max-width: 100%;
    margin: 1.5rem auto;
    margin-bottom: 4.5rem;         /* TRIPLÉ pour espace photo mobile (1.5 × 3) */
    padding: 1.5rem 1rem;
  }

  .camera-section h3 {
    font-size: 1.2rem;
  }

  .camera-section p {
    font-size: 0.95rem;
  }

  .btn-camera {
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto;
  }
}

/* Boutons réseaux sociaux */
.btn-social { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.75rem; 
  padding: 1rem 2rem; 
  font-weight: bold; 
  text-decoration: none; 
  border-radius: 50px; 
  transition: all var(--transition-normale); 
  border: 2px solid transparent; 
}

.btn-social:hover, 
.btn-social:focus { 
  transform: translateY(-3px); 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
  text-decoration: none; 
}

.btn-tiktok { 
  background: #000; 
  color: #fff; 
  border-color: #00f2ea; 
}

.btn-tiktok:hover { 
  background: #00f2ea; 
  color: #000; 
  border-color: #00f2ea; 
}

.btn-youtube { 
  background: #F00; 
  color: #fff; 
}

.btn-youtube:hover { 
  background: #c00; 
}

.btn-facebook { 
  background: #1877F2; 
  color: #fff; 
}

.btn-facebook:hover { 
  background: #145dbf; 
}


/* ============================================
   10. CARTES & GRILLES
============================================ */
/* ============================================
   7. CARTES & GRILLES
============================================ */
.features-grid, 
.daily-grid, 
.testimonials-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 2rem; 
  margin-top: 2rem;
}

.feature-card, 
.daily-card, 
.testimonial-card {
  background: rgba(255, 255, 255, 0.08); 
  padding: 2rem; 
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md); 
  transition: all var(--transition-normale); 
  text-align: center; 
  color: var(--blanc-neige);
}

.feature-card:hover, 
.daily-card:hover, 
.testimonial-card:hover { 
  transform: translateY(-5px); 
  box-shadow: var(--shadow-lg); 
  background: rgba(255, 255, 255, 0.12); 
}

.feature-icon { 
  font-size: 3rem; 
  display: block; 
  margin-bottom: 1rem; 
}

.feature-title,
.daily-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--blanc-pur);
  text-align: center;              /* Centrage titres tuiles */
}

.feature-description,
.daily-desc,
.testimonial-text {
  color: var(--blanc-neige);
  line-height: 1.6;
  text-align: center;              /* Centrage textes tuiles */
}

.daily-stat {
  font-weight: 700;
  color: var(--vert-clair);
  text-align: center;              /* Centrage stats quotidien */
}

.testimonial-author { 
  display: block; 
  margin-top: 1rem; 
  font-weight: 600; 
  color: var(--vert-clair); 
  font-style: normal; 
}

/* Système specs */
.system-specs {
  max-width: 900px; 
  margin: 2rem auto; 
  background: rgba(255, 255, 255, 0.05); 
  border-radius: var(--border-radius-lg); 
  padding: 2rem;
}

.spec-item { 
  padding: 1rem; 
  border-bottom: 1px solid rgba(255,255,255,0.1); 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 1rem; 
}

.spec-item:last-child { 
  border-bottom: none; 
}

.spec-label { 
  font-weight: 600; 
  color: var(--vert-clair); 
  min-width: 180px; 
}

.spec-value { 
  color: var(--blanc-neige); 
  text-align: right; 
}

/* Équipements liste */
.equipment-list {
  list-style: none;
  max-width: 900px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.equipment-list li {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--vert-clair);
  transition: all var(--transition-rapide);
  color: var(--blanc-neige);
  height: 90px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.equipment-list li .emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.equipment-list li .equipment-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.equipment-list li .equipment-name {
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.3;
}

.equipment-list li .equipment-detail {
  font-size: 0.875rem;
  opacity: 0.85;
  line-height: 1.2;
}

.equipment-list li:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}


/* ============================================
   11. GALERIE
============================================ */
/* ============================================
   8. GALERIE
============================================ */
.gallery-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: 1.5rem; 
  margin-top: 2rem; 
}

.gallery-item { 
  position: relative; 
  overflow: hidden; 
  border-radius: var(--border-radius); 
  box-shadow: var(--shadow-md); 
  transition: all var(--transition-normale); 
  background: rgba(255, 255, 255, 0.05); 
}

.gallery-item:hover { 
  transform: scale(1.03); 
  box-shadow: var(--shadow-lg); 
}

.gallery-image { 
  width: 100%; 
  height: 300px; 
  object-fit: cover; 
  display: block; 
}

.gallery-caption { 
  padding: 1rem; 
  text-align: center; 
  font-weight: 500; 
  background: rgba(0, 0, 0, 0.6); 
  color: var(--blanc-pur); 
}


/* ============================================
   12. FORMULAIRES
============================================ */
/* ============================================
   9. FORMULAIRES
============================================ */
.contact-form { 
  max-width: 700px; 
  margin: 2rem auto; 
}

.form-group { 
  margin-bottom: 1.5rem; 
}

.form-group label { 
  display: block; 
  margin-bottom: 0.5rem; 
  font-weight: 600; 
  color: var(--blanc-neige); 
}

.form-group input, 
.form-group textarea {
  width: 100%; 
  padding: 1rem; 
  border: 2px solid rgba(255, 255, 255, 0.2); 
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.05); 
  color: var(--blanc-pur); 
  font-family: var(--font-principale); 
  font-size: 1rem; 
  transition: all var(--transition-rapide);
}

.form-group input:focus, 
.form-group textarea:focus { 
  outline: none; 
  border-color: var(--vert-clair); 
  background: rgba(255, 255, 255, 0.1); 
}

.form-group textarea { 
  resize: vertical; 
  min-height: 150px; 
}

.required { 
  color: var(--rouge-alerte); 
}


/* ================================================
   13. FOOTER - TOUT REGROUPÉ ICI
   Classes: .site-footer, .footer-container, .footer-nav,
            .footer-links, .footer-copyright, .footer-tagline
   
   ⚡ REGROUPÉ: Base + Responsive
================================================ */

.site-footer { 
  background: rgba(0, 0, 0, 0.8); 
  color: var(--blanc-neige); 
  padding: 3rem 2rem 2rem; 
  text-align: center; 
}

.footer-container { 
  max-width: 1400px; 
  margin: 0 auto; 
}

.footer-nav ul,
.footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.footer-nav a { 
  color: var(--blanc-neige); 
  text-decoration: none; 
  transition: color var(--transition-rapide); 
}

.footer-nav a:hover, 
.footer-nav a:focus { 
  color: var(--vert-clair); 
  text-decoration: underline; 
}

.footer-copyright { 
  margin-top: 2rem; 
  padding-top: 2rem; 
  border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

.footer-tagline { 
  font-style: italic; 
  opacity: 0.8; 
}

/* ===== RESPONSIVE FOOTER (Mobile ≤768px) ===== */
@media (max-width: 768px) {
  .footer-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  /* Réseaux sociaux */
}

/* ============================================
   14. UTILITAIRES
============================================ */
/* ============================================
   11. UTILITAIRES
============================================ */

/* Classes utilitaires de base */
.container { 
  max-width: 1400px; 
  margin: 0 auto; 
  padding: 0 2rem; 
}

.text-center { 
  text-align: center; 
}

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

/* Classes additionnelles pour template-parts */
.max-width-800 { max-width: 800px; margin: 0 auto; }
.max-width-900 { max-width: 900px; margin: 0 auto; }
.text-large { font-size: 1.2rem; }
.text-medium { font-size: 1.1rem; }
.text-medium-plus { font-size: 1.15rem; }
.text-small { font-size: 0.95rem; }
.text-bold { font-weight: bold; }
.text-italic-subtle { font-style: italic; opacity: 0.9; }
.text-left-inline { text-align: left; display: inline-block; }
.spacing-top-2 { margin-top: 2rem; }
.spacing-bottom-1 { margin-bottom: 1rem; }
.spacing-bottom-1-5 { margin-bottom: 1.5rem; }
.spacing-bottom-2 { margin-bottom: 2rem; }
.spacing-bottom-3 { margin-bottom: 3rem; }
.spacing-top-neg-1 { margin-top: -1rem; }
.spacing-vertical-2 { margin: 2rem 0; }
.spacing-vertical-half { margin: 0.5rem 0; }
.flex-center { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.flex-buttons { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-bottom: 2rem; }
.btn-full-width { width: 100%; justify-content: center; }
.social-links-container { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.social-link { color: var(--vert-clair); text-decoration: none; font-weight: 600; }
.social-divider { color: rgba(255, 255, 255, 0.3); }
.reseaux-intro { max-width: 900px; margin: 0 auto 3rem; text-align: center; color: var(--blanc-neige); }
.reseaux-hashtags { text-align: center; color: var(--vert-clair); font-size: 0.95rem; font-weight: bold; }
.contact-footer-divider { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; color: var(--blanc-neige); }
.monitor-intro { text-align: center; margin-bottom: 2rem; font-size: 1.1rem; }
.monitor-note { text-align: center; margin-top: 1.5rem; font-style: italic; opacity: 0.9; }

/* Classes utilitaires additionnelles */
.bg-transparent { background: transparent; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Spacing spécifiques */
.mb-1-5 { margin-bottom: 1.5rem; }
.mb-2-5 { margin-bottom: 2.5rem; }
.mt-1-75 { margin: 1.75rem 0 0.75rem 0; }
.p-75 { padding: 0.75rem; }
.lh-1-8 { line-height: 1.8; }

/* Paragraphes standards */
.paragraph-standard { margin-bottom: 2rem; line-height: 1.8; }
.paragraph-standard-alt { margin-bottom: 2.5rem; line-height: 1.8; }
.paragraph-compact { margin-bottom: 1.75rem; line-height: 1.8; }

/* HR separators (utilisés dans pages équipement) */
.hr-separator { margin: 2rem 0; border: none; border-top: 1px solid rgba(255,255,255,0.1); }
.hr-separator-lg { margin: 3rem 0; border: none; border-top: 1px solid rgba(255,255,255,0.1); }

/* ========================================
   HR SÉPARATEUR VERT NÉON (Style Moderne)
   Couleur/pulse ajustables via variables CSS
   ======================================== */
.hr-separator-green {
  display: block;              /* Force le rendu du background sur HR */
  overflow: visible;           /* Permet au box-shadow d'apparaître */
  margin: 2.5rem auto;
  max-width: var(--separator-max-width);
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--separator-color), transparent);
  animation: pulse-separator var(--separator-pulse-speed) ease-in-out infinite;
}

/* Animation pulsation douce */
@keyframes pulse-separator {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 5px var(--separator-color);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 10px var(--separator-color);
  }
}

/* Images responsive */
.img-responsive { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.img-block { width: 100%; height: auto; display: block; }
.img-block-mt { width: 100%; height: auto; display: block; margin-top: 0.5rem; }

/* Meta text & colors */
.meta-text { color: #9aa3ab; font-size: 0.9rem; margin-top: 0.75rem; }
.text-green { color: #7cd97c; }

/* Max-width containers */
.max-w-900 { max-width: 900px; margin: 0 auto; }
.max-w-1100 { max-width: 1100px; margin: 0 auto; }


/* ============================================
   15. ANIMATIONS
============================================ */
/* ============================================
   12. ANIMATIONS
============================================ */
@keyframes fadeInUp { 
  from { 
    opacity: 0; 
    transform: translateY(30px);
  } 
  to { 
    opacity: 1; 
    transform: translateY(0);
  } 
}

@keyframes fadeInDown { 
  from { 
    opacity: 0; 
    transform: translateY(-30px);
  } 
  to { 
    opacity: 1; 
    transform: translateY(0);
  } 
}

@keyframes fadeIn { 
  from { 
    opacity: 0;
  } 
  to { 
    opacity: 1;
  } 
}


/* ============================================
   16. ACCESSIBILITÉ
============================================ */
/* ============================================
   13. ACCESSIBILITÉ
============================================ */
.sr-only {
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden;
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border-width: 0;
}

:focus-visible { 
  outline: 3px solid var(--vert-clair); 
  outline-offset: 3px; 
}

@media (prefers-reduced-motion: reduce) {
  * { 
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
  }
}


/* ============================================
   17. IFRAMES / VIDÉOS
============================================ */
/* ============================================
   14. IFRAMES / VIDÉOS
============================================ */
.iframe-container {
  position: relative; 
  width: 100%; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  border-radius: var(--border-radius); 
  box-shadow: var(--shadow-lg);
}

.iframe-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: none;
}

.video-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 2rem; 
  margin-top: 2rem; 
}

.video-item { 
  background: rgba(255, 255, 255, 0.05); 
  border-radius: var(--border-radius-lg); 
  overflow: hidden; 
  box-shadow: var(--shadow-md); 
  transition: all var(--transition-normale); 
}

.video-item:hover { 
  transform: translateY(-5px); 
  box-shadow: var(--shadow-lg); 
}

.video-title { 
  padding: 1rem; 
  text-align: center; 
  font-size: 1.1rem; 
  color: var(--blanc-pur); 
}


/* ============================================
   18. À PROPOS / STATS
============================================ */
/* ============================================
   15. À PROPOS / STATS
============================================ */
.about-content { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 3rem; 
  margin-top: 2rem; 
}

.about-text { 
  font-size: 1.1rem; 
  line-height: 1.8; 
}

.about-stats { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  gap: 2rem; 
}

.stat-box { 
  background: rgba(124, 217, 124, 0.1); 
  padding: 2rem; 
  border-radius: var(--border-radius); 
  text-align: center; 
  border: 2px solid var(--vert-clair); 
}

.stat-number { 
  display: block; 
  font-size: 2.5rem; 
  font-weight: 700; 
  color: var(--vert-clair); 
  margin-bottom: 0.5rem; 
}

.stat-label { 
  display: block; 
  font-size: 0.9rem; 
  color: var(--blanc-neige); 
  text-transform: uppercase; 
  letter-spacing: 1px; 
}


/* ============================================
   19. VICTRON MONITOR HELPERS
============================================ */
/* ============================================
   16. VICTRON MONITOR HELPERS
============================================ */
.monitor-wrapper { 
  max-width: 1200px; 
  margin: 0 auto; 
}

.monitor-intro { 
  text-align: center; 
  margin-bottom: 2rem; 
  font-size: 1.1rem; 
  color: var(--blanc-neige); 
}

.monitor-note {
  text-align: center;
  margin-top: 1.5rem;
  font-style: italic;
  opacity: 0.9;
  color: var(--blanc-neige);
}

/* ============================================
   VICTRON MONITOR - ANIMATIONS (EFFETS VISUELS ORIGINAUX)
============================================ */
/* Animation badge LIVE - Effet de lueur pulsante */
@keyframes pulse-live {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255,51,51,0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 4px 30px rgba(255,51,51,0.9), 0 0 40px rgba(255,51,51,0.5);
    transform: scale(1.05);
  }
}

/* Animation point scintillant - Change couleur avec lueur */
@keyframes dotColorPulse {
  0%   { background: #ff4747; box-shadow: 0 0 14px rgba(255,71,71,.65); }
  50%  { background: #2ddc64; box-shadow: 0 0 14px rgba(45,220,100,.6); }
  100% { background: #ff4747; box-shadow: 0 0 14px rgba(255,71,71,.65); }
}

/* ============================================
   VICTRON MONITOR - RESPONSIVE OPTIMISÉ
============================================ */
/* Mobile (≤480px) : Très petits écrans */
@media (max-width: 480px) {
  #victron-monitor .monitor-wrapper {
    padding: 0 0.5rem;
  }

  #victron-monitor .iframe-container {
    padding-bottom: 0 !important;
    height: 500px !important;
    border-radius: 8px;
  }

  #victron-monitor .monitor-intro {
    font-size: 1rem;
    padding: 0 0.75rem;
  }
}

/* Mobile standard (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  #victron-monitor .iframe-container {
    padding-bottom: 0 !important;
    height: 600px !important;
    border-radius: 10px;
  }
}

/* Tablette (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  #victron-monitor .iframe-container {
    padding-bottom: 0 !important;
    height: 700px !important;
  }
}

/* Desktop (≥1025px) : Garder ratio 16:9 original */
@media (min-width: 1025px) {
  #victron-monitor .iframe-container {
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
  }
}


/* ============================================
   20. RESPONSIVE GLOBAL
   Note: Les responsive spécifiques sont maintenant
   intégrés dans chaque section (Hero, Header, Footer)
============================================ */
/* ============================================
   17. RESPONSIVE GLOBAL
============================================ */
/* Optimisations mobiles consolidées (< 768px) */
@media (max-width: 768px) {
  /* Fix background mobile (évite bug rendering) */
  body {
    background-attachment: scroll !important;
  }

  /* Layout principal */
  main#main-content {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Sections de contenu */
  .content-section,
  .detail-section {
    margin: 0;
    padding: 1.25rem 0;
    background: transparent;
    border-radius: 0;
  }

  .content-section.bg-dark {
    background: rgba(0,0,0,0.35);
    padding: 1.25rem 0;
  }

  /* En-têtes et titres */
  .detail-header {
    margin: 0 0 1rem 0;
    padding: 0 0.5rem;
    text-align: center;
  }

  .section-title,
  .detail-header .section-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    padding: 0;
    text-align: center;
    word-break: break-word;
  }

  .section-intro,
  .detail-header .section-intro {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    line-height: 1.6;
    margin: 0 auto 1rem auto;
    padding: 0 0.5rem;
    text-align: center;
    max-width: 100%;
  }

  /* Hero section */
  .hero-section {
    min-height: 100vh; /* Force 100vh sur mobile */
    padding: 2rem 1rem; /* Padding réduit mobile */
    background-attachment: scroll !important; /* Force scroll (pas fixed) */
  }

  .hero-logo {
    max-width: 90%;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  /* Images et figures */
  .hero-image,
  .inline-image,
  .hero-image figure,
  .inline-image figure {
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .hero-image img,
  .inline-image img,
  figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  figcaption {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.6rem 0.75rem;
    text-align: center;
    opacity: .9;
    background: rgba(255,255,255,0.05);
  }

  /* Grilles et cartes */
  .features-grid,
  .daily-grid,
  .testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin: 1rem 0 0 0;
    padding: 0 0.5rem;
  }

  .feature-card,
  .daily-card,
  .testimonial-card {
    padding: 1rem;
    border-radius: 10px;
    text-align: left;
    background: rgba(255,255,255,0.06);
    box-shadow: none;
  }

  .feature-title,
  .daily-title {
    font-size: clamp(1.05rem, 4.2vw, 1.3rem);
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
    color: var(--blanc-pur);
  }

  .feature-description,
  .daily-desc {
    font-size: clamp(0.95rem, 3.6vw, 1.05rem);
    line-height: 1.65;
    margin: 0 0 0.6rem 0;
    padding: 0;
  }

  .daily-stat {
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    font-weight: 700;
    margin: 0 0 0.35rem 0;
  }

  /* Spécifications techniques */
  .tech-specs-container {
    width: 100%;
    margin: 0;
    padding: 0 0.5rem;
  }

  .tech-spec-block {
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem;
  }

  .spec-block-title {
    font-size: clamp(1.1rem, 4.2vw, 1.35rem);
    margin: 0 0 0.75rem 0;
    color: var(--vert-clair);
    font-weight: 700;
    border: none;
  }

  .spec-grid {
    display: grid;
    gap: 0.55rem;
  }

  .spec-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .spec-row:last-child {
    border-bottom: none;
  }

  .spec-item {
    flex-direction: column;
    text-align: center;
  }

  .spec-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    text-align: center;
  }

  .spec-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--blanc-neige);
    text-align: center;
  }

  .spec-row.highlight .spec-value {
    color: var(--vert-clair);
  }

  .spec-row.critical .spec-value {
    color: #ff6b6b;
  }

  /* Liste d'équipements */
  .equipment-list {
    max-width: 100%;
    margin: 1.25rem 0;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0 0.5rem;
  }

  .equipment-list li {
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border-left: 4px solid var(--vert-clair);
    height: 95px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .equipment-list li .emoji {
    font-size: 1.3rem;
  }

  .equipment-list li .equipment-content {
    gap: 0.2rem;
  }

  .equipment-list li .equipment-name {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .equipment-list li .equipment-detail {
    font-size: 0.8rem;
    line-height: 1.1;
  }

  /* Callouts et éléments divers */
  .callout {
    width: 100%;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 10px;
  }

  .callout p {
    margin: 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  hr {
    margin: 1.5rem 0;
  }

  /* Boutons */
  .btn,
  .btn-primary {
    padding: 0.95rem 1.5rem;
    font-size: 1rem;
    border-radius: 8px;
  }

  .btn-social {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  .footer-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  /* Réseaux sociaux */
  .reseaux-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  /* Typographie responsive */
  h1, h2, h3, p, li,
  .feature-title,
  .section-title,
  .daily-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  p, li {
    font-size: clamp(0.95rem, 3.6vw, 1.05rem);
    line-height: 1.65;
    margin: 0 0 0.6rem 0;
    padding: 0;
  }

  /* ============================================
     CENTRAGE MOBILE - SECTIONS PAGE ACCUEIL
     ============================================ */

  /* Section "À propos de moi" - centrage contenu mobile */
  .about-text {
    text-align: center;
  }

  .about-text p {
    text-align: center;
  }

  /* Section "réseau" - forcer centrage mobile (override text-left-inline) */
  .text-left-inline {
    text-align: center !important;
    display: block;
  }

  .reseaux-intro .text-left-inline p {
    text-align: center;
  }

  /* Section "Mon quotidien" - centrage textes tuiles mobile */
  .daily-desc,
  .daily-stat {
    text-align: center;
  }

  .daily-card p {
    text-align: center;
  }

  /* ============================================
     CENTRAGE MOBILE - "Gauche MAIS Centré"
     ============================================ */

  /* Titres CENTRÉS */
  .content-section h2,
  .content-section h3,
  .content-section h4 {
    text-align: center;
  }

  /* Textes alignés GAUCHE MAIS bloc centré */
  .content-section p,
  .content-section li {
    text-align: left;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .content-section ul {
    text-align: left;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    list-style-position: inside;  /* Puces à l'intérieur */
  }
}

/* Tablette paysage (Fold6 paysage + tablettes) */
@media (min-width: 501px) and (max-width: 1000px) and (orientation: landscape) {
  main#main-content {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .content-section,
  .detail-section {
    padding: 1.25rem 0.75rem;
    background: transparent;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0 0.5rem;
  }

  .spec-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .spec-label {
    flex: 0 0 42%;
  }

  .spec-value {
    flex: 1;
    text-align: right;
  }
}

/* Grand écran (desktop + écran ouvert Fold) */
@media (min-width: 1080px) {
  main#main-content {
    /* max-width: 1100px -- SUPPRIMÉ: causait ligne noire sur côtés */
    /* Les sections individuelles ont leur propre max-width (ex: content-section: 1400px) */
    margin: 0 auto;
    padding: 0;
  }

  .hero-image,
  .inline-image {
    border-radius: 12px;
  }

  .hero-image img,
  .inline-image img {
    border-radius: 12px;
  }

  .detail-section,
  .content-section {
    border-radius: 12px;
  }
}


/* ============================================
   21. PAGES & POSTS
============================================ */
/* ============================================
   18. PAGES & POSTS (index.php, page.php)
   Ajouté le: 2025
   Classes manquantes pour pages génériques
============================================ */

/* Content wrapper */
.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* Entry header */
.entry-header {
  margin-bottom: 2rem;
}

.entry-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 0.5rem;
  color: var(--blanc-pur);
}

.entry-title a {
  color: var(--blanc-pur);
  text-decoration: none;
  transition: color var(--transition-rapide);
}

.entry-title a:hover {
  color: var(--vert-clair);
  text-decoration: none;
}

.entry-meta {
  font-size: 0.9rem;
  color: var(--blanc-neige);
  opacity: 0.8;
}

.entry-meta time {
  color: var(--vert-clair);
}

/* Entry content */
.entry-content {
  margin-bottom: 2rem;
  line-height: 1.8;
  color: var(--blanc-neige);
}

.entry-content p {
  margin-bottom: 1rem;
}

.featured-image {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-md);
}

/* Entry footer */
.entry-footer {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* No results */
.no-results {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--border-radius-lg);
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--blanc-pur);
  margin-bottom: 1rem;
}

.page-content {
  max-width: 600px;
  margin: 0 auto;
}

.page-content p {
  margin-bottom: 2rem;
  color: var(--blanc-neige);
  font-size: 1.1rem;
}

/* Footer widgets */
.footer-widgets {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-widgets .widget {
  margin-bottom: 1.5rem;
}

.footer-widgets .widget-title {
  color: var(--vert-clair);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer-widgets ul {
  list-style: none;
  padding: 0;
}

.footer-widgets li {
  margin-bottom: 0.5rem;
}

.footer-widgets a {
  color: var(--blanc-neige);
  text-decoration: none;
  transition: color var(--transition-rapide);
}

.footer-widgets a:hover {
  color: var(--vert-clair);
}

/* Responsive pour pages/posts */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 2rem 1rem;
  }

  .entry-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .page-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }
}


/* ============================================
   22. PAGE SYSTÈME CHAUFFAGE PROPANE
============================================ */
/* ============================================
   19. PAGE-SPECIFIC: SYSTÈME CHAUFFAGE PROPANE
   Animations et styles spécifiques à la page Chauffage
============================================ */

/* Danger Box - Avertissements sécurité */
    @keyframes pulse-danger {
      0%, 100% { 
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7),
                    0 8px 32px rgba(239, 68, 68, 0.3);
      }
      50% { 
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0),
                    0 8px 32px rgba(239, 68, 68, 0.5);
      }
    }
    
    @keyframes flash-icon {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.1); }
    }

    .danger-box {
      background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.15) 0%, 
        rgba(220, 38, 38, 0.1) 100%);
      border: 3px solid #ef4444;
      border-radius: 16px;
      padding: 2.5rem 2rem;
      animation: pulse-danger 2.5s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }

    .danger-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
      animation: shine 3s infinite;
    }

    @keyframes shine {
      0% { left: -100%; }
      50%, 100% { left: 100%; }
    }

    .danger-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }

    .danger-icon {
      font-size: 3rem;
      animation: flash-icon 1.5s ease-in-out infinite;
      filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
    }

    .danger-title {
      font-size: 1.8rem;
      font-weight: 800;
      color: #fca5a5;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 0 2px 10px rgba(239, 68, 68, 0.5);
      margin: 0;
    }

    .danger-content {
      position: relative;
      z-index: 1;
    }

    .danger-intro {
      font-size: 1.2rem;
      color: #fecaca;
      text-align: center;
      margin-bottom: 2rem;
      font-weight: 600;
      line-height: 1.6;
    }

    .danger-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .danger-item {
      background: rgba(0, 0, 0, 0.3);
      border-left: 4px solid #ef4444;
      padding: 1.25rem;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .danger-item:hover {
      background: rgba(0, 0, 0, 0.5);
      border-left-width: 6px;
      transform: translateX(5px);
    }

    .danger-item-title {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 1.1rem;
      font-weight: 700;
      color: #fca5a5;
      margin-bottom: 0.75rem;
    }

    .danger-item-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .danger-item-text {
      color: #e5e7eb;
      line-height: 1.6;
      font-size: 0.95rem;
    }

    .danger-footer {
      background: rgba(239, 68, 68, 0.2);
      border: 2px solid #ef4444;
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
      margin-top: 2rem;
    }

    .danger-footer-title {
      font-size: 1.3rem;
      font-weight: 800;
      color: #fca5a5;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
    }

    .danger-footer-text {
      color: #fecaca;
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 1rem;
    }

    .danger-footer-highlight {
      background: rgba(239, 68, 68, 0.3);
      border-radius: 8px;
      padding: 1rem;
      color: #fff;
      font-weight: 700;
      font-size: 1.1rem;
    }

    @media (max-width: 768px) {
      .danger-box {
        padding: 2rem 1.5rem;
      }
      .danger-title {
        font-size: 1.4rem;
      }
      .danger-icon {
        font-size: 2.5rem;
      }
      .danger-intro {
        font-size: 1.05rem;
      }
    }

/* Glassmorphism - Section "Voir Aussi" */
  /* ============================================
     GLASSMORPHISM COMPACT +23.9% - AVEC EFFETS
     TITRE +10% SUPPLÉMENTAIRE
     ============================================ */

  /* Bulles de fond animées */
  .glass-bg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .glass-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.03));
    opacity: 0.6;
    box-shadow: 0 0 80px rgba(0, 255, 136, 0.3);
    /* Animation supprimée - bulles immobiles comme demandé */
  }

  @keyframes float-bubble {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
  }

  .glass-bubble:nth-child(2) {
    animation-delay: -10s;
    animation-duration: 25s;
  }

  /* Titre Compact +10% SUPPLÉMENTAIRE (×1.10) AVEC TOUS LES EFFETS */
  .glass-title-compact {
    text-align: center;
    margin-bottom: 1.8711rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9351rem;
  }

  .glass-icon-compact {
    font-size: 1.56816rem;
    filter: drop-shadow(0 0 11px rgba(0, 255, 136, 0.5));
    animation: pulse-icon-compact 3s ease-in-out infinite;
  }

  .glass-icon-left {
    animation-delay: 0s;
  }

  .glass-icon-right {
    animation-delay: 1.5s;
  }

  @keyframes pulse-icon-compact {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 11px rgba(0, 255, 136, 0.5));
    }
    50% {
      transform: scale(1.15);
      filter: drop-shadow(0 0 16.5px rgba(0, 255, 136, 0.8));
    }
  }

  .glass-text-compact {
    font-size: 1.56816rem;
    font-weight: 900;
    background: linear-gradient(135deg, #00ff88 0%, #00ffaa 50%, #00ff88 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 2.6136px;
    position: relative;
    animation: gradient-shift-compact 4s ease infinite;
    text-shadow: 0 0 22px rgba(0, 255, 136, 0.5);
  }

  @keyframes gradient-shift-compact {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  /* Effet glow en arrière-plan du texte (PERFORMANT - pas de blur) */
  .glass-text-compact::before {
    content: 'VOIR AUSSI';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
    background: linear-gradient(135deg, #00ff88 0%, #00ffaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Ligne animée sous le titre */
  .glass-title-compact::after {
    content: '';
    position: absolute;
    bottom: -0.6237rem;
    left: 50%;
    transform: translateX(-50%);
    width: 104.544px;
    height: 2.6136px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    border-radius: 11.88px;
    box-shadow: 0 0 11.88px rgba(0, 255, 136, 0.6);
    animation: pulse-line-compact 2s ease-in-out infinite;
  }

  @keyframes pulse-line-compact {
    0%, 100% {
      opacity: 0.6;
      transform: translateX(-50%) scaleX(1);
    }
    50% {
      opacity: 1;
      transform: translateX(-50%) scaleX(1.2);
    }
  }

  /* Liste Compacte +23.9% (×1.05 supplémentaire) */
  .glass-list-compact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(249.48px, 1fr));
    gap: 0.6237rem;
  }

  /* Item Compact +23.9% (PERFORMANT - pas de backdrop-filter) */
  .glass-item-compact {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9.9792px;
    padding: 0.6237rem 0.93555rem;
    height: 90px;                /* UNIFORM HEIGHT - Desktop */
    width: 100%;                 /* UNIFORM WIDTH */
    display: flex;
    align-items: center;
    gap: 0.6237rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2.4948px 9.9792px rgba(0, 0, 0, 0.2);
  }

  /* Effet de brillance */
  .glass-item-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.4s;
  }

  .glass-item-compact:hover::before {
    left: 100%;
  }

  /* Hover */
  .glass-item-compact:hover {
    transform: translateX(6.237px);
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4.9896px 19.9584px rgba(0, 255, 136, 0.15);
  }

  /* Emoji Compact +23.9% */
  .glass-emoji-compact {
    font-size: 1.2474rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1.2474px 2.4948px rgba(0, 255, 136, 0.3));
    transition: transform 0.3s ease;
  }

  .glass-item-compact:hover .glass-emoji-compact {
    transform: scale(1.15) rotate(8deg);
  }

  /* Lien Compact +23.9% */
  .glass-link-compact {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1.06029rem;
    font-weight: 500;
    flex-grow: 1;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;              /* Centrage texte liens */
  }

  .glass-item-compact:hover .glass-link-compact {
    color: #00ff88;
  }

  /* Item NOUVEAU */
  .glass-item-new-compact {
    border-color: rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.04);
  }

  /* Badge NOUVEAU Compact +23.9% (PERFORMANT - pas de backdrop-filter) */
  .glass-badge-compact {
    background: rgba(0, 255, 136, 0.95);
    color: #000;
    padding: 0.18711rem 0.49896rem;
    border-radius: 12.474px;
    font-size: 0.74844rem;
    font-weight: 800;
    letter-spacing: 0.6237px;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 1.2474px 4.9896px rgba(0, 255, 136, 0.4);
    animation: pulse-badge-compact 2s ease-in-out infinite;
  }

  @keyframes pulse-badge-compact {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 1.2474px 4.9896px rgba(0, 255, 136, 0.4);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 2.4948px 7.4844px rgba(0, 255, 136, 0.6);
    }
  }

  /* Bouton Retour Compact +23.9% (PERFORMANT - pas de backdrop-filter) */
  .glass-btn-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.6237rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 0.74844rem 1.8711rem;
    border-radius: 37.422px;
    text-decoration: none;
    color: #00ff88;
    font-weight: 600;
    font-size: 1.12266rem;
    transition: all 0.3s ease;
    box-shadow: 0 4.9896px 14.9688px rgba(0, 0, 0, 0.2);
  }

  .glass-btn-compact:hover {
    transform: translateY(-3.7422px);
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.08);
    box-shadow: 0 9.9792px 24.948px rgba(0, 255, 136, 0.25);
  }

  .glass-btn-icon-compact {
    font-size: 1.2474rem;
    transition: transform 0.3s ease;
  }

  .glass-btn-compact:hover .glass-btn-icon-compact {
    transform: translateX(-3.7422px);
  }

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

  @media (max-width: 768px) {
    .glass-list-compact {
      grid-template-columns: repeat(auto-fit, minmax(224.532px, 1fr));
      gap: 0.49896rem;
    }

    .glass-item-compact {
      padding: 0.49896rem 0.74844rem;
      height: 85px;                /* UNIFORM HEIGHT - Tablet */
      width: 100%;                 /* UNIFORM WIDTH */
    }

    .glass-emoji-compact {
      font-size: 1.12266rem;
    }

    .glass-link-compact {
      font-size: 0.99792rem;
    }

    .glass-title-compact {
      font-size: 1.2474rem;
      gap: 0.6237rem;
    }

    .glass-icon-compact {
      font-size: 1.2474rem;
    }

    .glass-text-compact {
      font-size: 1.2474rem;
      letter-spacing: 1.2474px;
    }

    .glass-title-compact::after {
      width: 74.844px;
      height: 1.8711px;
    }

    .glass-btn-compact {
      padding: 0.6237rem 1.55925rem;
      font-size: 1.06029rem;
    }
  }

  @media (max-width: 480px) {
    .glass-list-compact {
      grid-template-columns: 1fr;
      gap: 0.43659rem;
    }

    .glass-item-compact {
      padding: 0.49896rem 0.74844rem;
      height: 95px;                /* UNIFORM HEIGHT - Mobile */
      width: 100%;                 /* UNIFORM WIDTH */
    }

    .glass-link-compact {
      font-size: 0.99792rem;
    }

    .glass-badge-compact {
      font-size: 0.68607rem;
      padding: 0.12474rem 0.43659rem;
    }

    .glass-icon-compact {
      font-size: 0.99792rem;
    }

    .glass-text-compact {
      font-size: 0.99792rem;
      letter-spacing: 0.6237px;
    }

    .glass-title-compact {
      gap: 0.49896rem;
    }
  }


/* ============================================
   23. CONTACT NOTIFICATION
============================================ */
/* ============================================
   20. CONTACT NOTIFICATION
============================================ */

#contact-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  color: white;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 99999;
  max-width: 400px;
  animation: slideIn 0.5s ease;
}

#contact-notification.success {
  background: #00cc66;
}

#contact-notification.error {
  background: #ff3333;
}

#contact-notification strong {
  font-size: 1.2em;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}