/*
  variables.css
  Centralisation des variables globales : couleurs, breakpoints, fonts, tailles, espacements.
  Optimisé, factorisé, commentaires détaillés et à jour.
*/

/* ========================================
   VARIABLES CSS - ELECTRO LIBRE
   ======================================== */

/* Import Google Fonts */
/* Système de typographies globales ElectroLibre */
/* Les variables typographiques sont gérées via :root et utilisées dans les composants. */
@import url('https://fonts.googleapis.com/css2?family=Kings:wght@400;700&family=Yatra+One:wght@400;700&family=Roboto:wght@300;400;500;700&family=Nabla&family=Zen+Dots&family=Viga&display=swap');

/* Couleurs des ombres neumorphiques (réduites pour plus de discrétion) */
:root {
  --neomorphic-light-shadow: rgba(255, 255, 255, 0.3);
  --neomorphic-dark-shadow: rgba(163, 177, 198, 0.2);

  /* Couleurs spécifiques pour chaque gradient (réduites) */
  --neomorphic-grey-light: rgba(255, 255, 255, 0.4);
  --neomorphic-grey-dark: rgba(230, 230, 230, 0.3);

  --neomorphic-green-light: rgba(255, 255, 255, 0.4);
  --neomorphic-green-dark: rgba(131, 217, 91, 0.15);

  --neomorphic-purple-light: rgba(255, 255, 255, 0.4);
  --neomorphic-purple-dark: rgba(91, 99, 217, 0.15);

  --neomorphic-orange-light: rgba(255, 255, 255, 0.4);
  --neomorphic-orange-dark: rgba(217, 129, 91, 0.15);
}

     /* ========================================
     COULEURS
     ======================================== */
     /* ========================================
Couleurs principales :
======================================== */
:root {
     --font-zen-dots: 'Zen Dots', Arial, sans-serif;
  --color-green: #83D95B;
  --color-purple: #5B63D9;
  --color-orange: #D9815B;
  --color-black: #000000;
  --color-grey: #F2F2F2;
  --color-white: #FFFFFF;
}

     /* ========================================
     DEGRADES
     ======================================== */
     /* ========================================

/* ========================================
Gradient Principal : Grey
 ======================================== */
:root {
     --gradient-principal-grey: linear-gradient(90deg, #FFFFFF 0%, #F2F2F2 65%, #F2F2F2 100%);
     }
:root {
     --gradient-secondary-grey: linear-gradient(90deg, #FFFFFF 0%, #F2F2F2 90%, #F2F2F2 100%);
     }
/* ========================================
Gradient Secondary : Green / Purple /Orange
======================================== */
:root {
     --gradient-secondary-green: linear-gradient(90deg, #FFFFFF 0%, #83D95B 100%);
     }

:root {
     --gradient-secondary-purple: linear-gradient(90deg, #FFFFFF 0%, #5B63D9 100%);
     }

:root {
     --gradient-secondary-orange: linear-gradient(90deg, #FFFFFF 0%, #D9815B 100%);
     }



     /* ========================================
     TYPOGRAPHIES
     ======================================== */
:root {
  /* Familles de polices principales */
  --font-paragraph: 'Roboto', Arial, sans-serif;
  --font-heading-h1: 'Zen Dots', Arial, sans-serif;
  --font-heading-secondary: 'Viga', Arial, sans-serif;
  --font-nav: 'Zen Dots', Arial, sans-serif;
  --font-zen-dots: 'Zen Dots', Arial, sans-serif;
}


     /* ========================================
     STYLES DE BASE
     ======================================== */
/* Style de base pour le corps du document */
body {
  color: #333;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titres */
h1, .h1 {
  font-family: var(--font-heading-h1) !important; /* Force l'application de la police */
  font-weight: 400;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h2, .h2, 
h3, .h3, 
h4, .h4, 
h5, .h5, 
h6, .h6 {
  font-family: var(--font-heading-secondary) !important; /* Force l'application de la police */
  font-weight: 400;
  margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
}

/* Spécification des tailles pour la hiérarchie visuelle */
h2, .h2 {
  font-size: 1.75rem;
}

h3, .h3 {
  font-size: 1.5rem;
}

h4, .h4 {
  font-size: 1.25rem;
}

/* Ajout de marges spécifiques pour l'espacement des sections */
h1 + p, .h1 + p,
h2 + p, .h2 + p {
  margin-top: 0.5rem;
}

/* Paragraphes */
p {
  margin-bottom: 1rem;
}

/* Liens */
a {
  transition: color 0.2s ease;
}

/* Listes */
ul, ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

     /* ======================================================
     STYLE CONTENERS / BORDER RADIUS / EFFETS ET OMBRES
     ====================================================== */ 
/* ========================================
     SECTION HEADER
     ======================================== */

:root {
  --header-display: flex;
  --header-flex-direction: column;
  --header-width: 100%;
  --header-gap: 0;
  --header-padding: 0;
  --header-margin: 0;
}

/* ========================================
     SECTION FOOTER
     ======================================== */

:root {
  --footer-display: flex;
  --footer-flex-direction: column;
  --footer-width: 100%;
  --footer-gap: 0;
  --footer-padding: 0;
  --footer-margin: 0;
}

/* ========================================
     SECTION HERO
     ======================================== */
:root {
  --hero-display: flex;
  --hero-flex-direction: row;
  --hero-width: 100%;
  --hero-gap: 0;
  --hero-padding: 0;
  --hero-margin: 0;
}

/* ========================================
     SECTION BASE
     ======================================== */

:root {
  --base-display: flex;
  --base-flex-direction: column;
  --base-width: 100%;
  --base-height: auto;
     --base-gap: 50px;
     --base-padding: 50px;
     --base-margin: 0;
}

:root {
  /* ...autres variables... */
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
}

     /* ========================================
     VARIABLES ADMINISTRATION
     ======================================== */

/* ========================================
     VARIABLES BOUTONS FICHE
     ======================================== */
:root {
  /* Styles de base pour les boutons de fiche */
  --btn-fiche-width: fit-content;
  --btn-fiche-margin: 0 16px;
  --btn-fiche-padding: 12px 20px;
  --btn-fiche-background: var(--gradient-secondary-grey);
  --btn-fiche-border: none;
  --btn-fiche-border-radius: 50px;
  --btn-fiche-color: var(--color-purple);
  --btn-fiche-font-size: 16px;
  --btn-fiche-font-weight: 600;
  --btn-fiche-box-shadow: 0 3px 6px rgba(91, 99, 217, 0.3);
  --btn-fiche-transition: all 0.3s ease;

  /* Styles au survol pour les boutons de fiche */
  --btn-fiche-hover-background: var(--gradient-secondary-purple);
  --btn-fiche-hover-color: var(--color-white);
  --btn-fiche-hover-box-shadow: 0 3px 8px rgba(255, 255, 255, 0.5);
  --btn-fiche-hover-transform: translateY(-1px);
}

     /* ========================================
     VARIABLES NEUMORPHISME
     ======================================== */

:root {
  /* ========================================
     NEUMORPHISME - COULEURS DE BASE
     ======================================== */
  
  /* Couleurs pour les ombres neumorphiques (réduites pour plus de discrétion) */
  --neomorphic-light-shadow: rgba(255, 255, 255, 0.3);
  --neomorphic-dark-shadow: rgba(163, 177, 198, 0.2);
  
  /* Couleurs spécifiques pour chaque gradient (réduites) */
  --neomorphic-grey-light: rgba(255, 255, 255, 0.4);
  --neomorphic-grey-dark: rgba(230, 230, 230, 0.3);
  
  --neomorphic-green-light: rgba(255, 255, 255, 0.4);
  --neomorphic-green-dark: rgba(131, 217, 91, 0.15);
  
  --neomorphic-purple-light: rgba(255, 255, 255, 0.4);
  --neomorphic-purple-dark: rgba(91, 99, 217, 0.15);
  
  --neomorphic-orange-light: rgba(255, 255, 255, 0.4);
  --neomorphic-orange-dark: rgba(217, 129, 91, 0.15);

  /* ========================================
     NEUMORPHISME - OMBRES OPTIMISÉES
     ======================================== */
  
  /* 
   * Ombres de base neumorphiques avec distances réduites (50% de réduction)
   * Distances initiales 8px/16px réduites à 4px/8px pour plus de subtilité
   */
  --neomorphic-shadow-inset: inset 4px 4px 8px var(--neomorphic-dark-shadow), 
                             inset -4px -4px 8px var(--neomorphic-light-shadow);
  --neomorphic-shadow-outset: 4px 4px 8px var(--neomorphic-dark-shadow), 
                              -4px -4px 8px var(--neomorphic-light-shadow);
  
  /* 
   * Ombres adaptées aux gradients avec distances réduites 
   * Distances initiales 12px/24px réduites à 6px/12px pour effet plus discret
   */
  --neomorphic-shadow-grey: 6px 6px 12px var(--neomorphic-grey-dark), 
                            -6px -6px 12px var(--neomorphic-grey-light);
  
  --neomorphic-shadow-green: 6px 6px 12px var(--neomorphic-green-dark), 
                             -6px -6px 12px var(--neomorphic-green-light);
  
  --neomorphic-shadow-purple: 6px 6px 12px var(--neomorphic-purple-dark), 
                              -6px -6px 12px var(--neomorphic-purple-light);
  
  --neomorphic-shadow-orange: 6px 6px 12px var(--neomorphic-orange-dark), 
                              -6px -6px 12px var(--neomorphic-orange-light);

  /* ========================================
     NEUMORPHISME - BORDURES SUBTILES
     ======================================== */
  
  /* Bordures avec opacité réduite pour integration harmonieuse */
  --neomorphic-border-grey: 1px solid rgba(255, 255, 255, 0.3);
  --neomorphic-border-green: 1px solid rgba(131, 217, 91, 0.2);
  --neomorphic-border-purple: 1px solid rgba(91, 99, 217, 0.2);
  --neomorphic-border-orange: 1px solid rgba(217, 129, 91, 0.2);

  /* ========================================
     NEUMORPHISME - STYLES VARIABLES (DEPRECATED)
     ======================================== */
  
  /* 
   * Styles complets en variables CSS (non utilisés - conservés pour compatibilité)
   * Les styles réels sont appliqués via les classes CSS ci-dessous
   */
  --neomorphic-style-grey: {
    background: var(--gradient-secondary-grey);
    opacity: 0.8;
    box-shadow: var(--neomorphic-shadow-grey);
    border: var(--neomorphic-border-grey);
    transition: all 0.3s ease;
  }
  
  /* Style neumorphique pour blocs avec gradient green */
  --neomorphic-style-green: {
    background: var(--gradient-secondary-green);
    opacity: 0.8;
    box-shadow: var(--neomorphic-shadow-green);
    border: var(--neomorphic-border-green);
    transition: all 0.3s ease;
  }
  
  /* Style neumorphique pour blocs avec gradient purple */
  --neomorphic-style-purple: {
    background: var(--gradient-secondary-purple);
    opacity: 0.8;
    box-shadow: var(--neomorphic-shadow-purple);
    border: var(--neomorphic-border-purple);
    transition: all 0.3s ease;
  }
  
  /* Style neumorphique pour blocs avec gradient orange */
  --neomorphic-style-orange: {
    background: var(--gradient-secondary-orange);
    opacity: 0.8;
    box-shadow: var(--neomorphic-shadow-orange);
    border: var(--neomorphic-border-orange);
    transition: all 0.3s ease;
  }
}

/* ========================================
   CLASSES UTILITAIRES NEUMORPHIQUES
   ======================================== */

/* Classe de base pour tous les éléments neumorphiques */
.neomorphic-base {
  opacity: 0.8;
  transition: all 0.3s ease;
  position: relative;
}

/* Classes spécifiques par couleur */
.neomorphic-grey {
  background: var(--gradient-secondary-grey);
  box-shadow: var(--neomorphic-shadow-grey);
  border: var(--neomorphic-border-grey);
}

.neomorphic-green {
  background: var(--gradient-secondary-green);
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
}

.neomorphic-purple {
  background: var(--gradient-secondary-purple);
  box-shadow: var(--neomorphic-shadow-purple);
  border: var(--neomorphic-border-purple);
}

.neomorphic-orange {
  background: var(--gradient-secondary-orange);
  box-shadow: var(--neomorphic-shadow-orange);
  border: var(--neomorphic-border-orange);
}

/* Effet au survol pour les éléments neumorphiques */
.neomorphic-base:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Variantes d'intensité */
.neomorphic-subtle {
  opacity: 0.6;
}

.neomorphic-intense {
  opacity: 0.95;
}

/* ========================================
   STYLES NEUMORPHIQUES - ELECTROLIBRE
   Application du style neumorphique sur tous les blocs ciblés
   ======================================== */

/* ========================================
   BLOCS PAGE ACCUEIL
   ======================================== */

/* Bloc présentation accueil (gradient green) */
.bloc1-accueil-presentation {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
  transition: all 0.3s ease;
}

.bloc1-accueil-presentation:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Bloc événements accueil (gradient green) */
.bloc1-accueil-events {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
  transition: all 0.3s ease;
}

.bloc1-accueil-events:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Bloc artistes accueil (gradient green) */
.bloc1-accueil-artists {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
  transition: all 0.3s ease;
}

.bloc1-accueil-artists:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Bloc contact CTA (gradient green) */
.bloc-contact-cta {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
  transition: all 0.3s ease;
}

.bloc-contact-cta:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Bloc réseaux sociaux CTA (gradient green) */
.bloc-rs-cta {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
  transition: all 0.3s ease;
}

.bloc-rs-cta:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   BLOCS PAGE ASSOCIATION
   ======================================== */

/* Bloc 1 présentation association (gradient green) */
.bloc1-association-presentation {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
  transition: all 0.3s ease;
}

.bloc1-association-presentation:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Bloc 3 présentation association (gradient green) */
.bloc3-association-presentation {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-green);
  border: var(--neomorphic-border-green);
  transition: all 0.3s ease;
}

.bloc3-association-presentation:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   BLOCS PAGE ÉVÉNEMENTS
   ======================================== */

/* Bloc présentation événements (gradient purple) */
.bloc-presentation-events {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-purple);
  border: var(--neomorphic-border-purple);
  transition: all 0.3s ease;
}

.bloc-presentation-events:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Bloc grille événements (gradient purple) */
.bloc-events-grid {
  opacity: 0.8;
  transition: all 0.3s ease;
}

.bloc-events-grid:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   BLOCS PAGE ARTISTES
   ======================================== */

/* Bloc présentation artistes (gradient purple) */
.bloc-presentation-artists {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-purple);
  border: var(--neomorphic-border-purple);
  transition: all 0.3s ease;
}

.bloc-presentation-artists:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Bloc galerie artistes (gradient purple) */
.bloc-gallerie-artistes {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-purple);
  border: var(--neomorphic-border-purple);
  transition: all 0.3s ease;
}

.bloc-gallerie-artistes:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   BLOCS PAGE CONTACT
   ======================================== */

/* Bloc contact (gradient orange) */
.bloc-contact {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-orange);
  border: var(--neomorphic-border-orange);
  transition: all 0.3s ease;
}

.bloc-contact:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   BLOCS PAGE MENTIONS LÉGALES
   ======================================== */

/* Bloc mentions légales (gradient grey) - déjà appliqué dans section-mentionslegales.css */

/* ========================================
   STYLES SPÉCIAUX POUR CTA SELON LA PAGE
   ======================================== */

/* CTA sur pages événements/artistes (purple) */
.page-evenements .bloc-contact-cta,
.page-artists .bloc-contact-cta {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-purple);
  border: var(--neomorphic-border-purple);
  transition: all 0.3s ease;
}

.page-evenements .bloc-contact-cta:hover,
.page-artists .bloc-contact-cta:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   STYLES STELLAR BACKGROUND (ANTI-FLASH)
   ======================================== */

/* Canvas pour les effets stellaires - préchargé pour éviter le flash */
#stellar-canvas,
#stellar-canvas-dynamic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* État actif du canvas */
#stellar-canvas.active,
#stellar-canvas-dynamic.active {
  opacity: 1;
}

/* Container pour les effets de particules */
.stellar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* Particules stellaires */
.stellar-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.7;
  animation: twinkle 3s infinite ease-in-out;
}

/* Animation de scintillement */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Effet de nébuleuse de fond */
.stellar-nebula {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, 
    rgba(91, 99, 217, 0.1) 0%, 
    rgba(131, 217, 91, 0.05) 40%, 
    transparent 70%);
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.stellar-nebula.active {
  opacity: 1;
}

/* Styles pour les effets stellaires sur sections */
.stellar-effect-active {
  position: relative !important;
  overflow: hidden !important;
}

.stellar-canvas-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.stellar-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.stellar-effect-active > *:not(.stellar-canvas-container) {
  position: relative !important;
  z-index: 10 !important;
}
.page-artists .bloc-contact-cta:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.page-evenements .bloc-rs-cta,
.page-artists .bloc-rs-cta {
  opacity: 0.8;
  box-shadow: var(--neomorphic-shadow-purple);
  border: var(--neomorphic-border-purple);
  transition: all 0.3s ease;
}

.page-evenements .bloc-rs-cta:hover,
.page-artists .bloc-rs-cta:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   ADAPTATIONS RESPONSIVES
   ======================================== */

/* Réduction de l'effet sur mobile pour les performances */
@media (max-width: 768px) {
  [class*="bloc"]:hover {
    transform: none;
  }
  
  [class*="bloc"] {
    transition: opacity 0.2s ease;
  }
}

/* ========================================
   VARIANTES D'INTENSITÉ SUPPLÉMENTAIRES
   ======================================== */

/* Version subtile pour certains blocs si besoin */
.neomorphic-subtle {
  opacity: 0.6;
  box-shadow: var(--neomorphic-shadow-grey);
}

/* Version intense pour les éléments importants */
.neomorphic-intense {
  opacity: 0.95;
  box-shadow: var(--neomorphic-shadow-grey);
}

@media (max-width: 900px) {
  .header-separation,
  .header-separation-green,
  .header-separation-purple,
  .separation-green,
  .separation-purple {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 900px) {
  body {
    --base-padding: 8px;
    --base-gap: 8px;
    --base-margin: 0;
  }
  main {
    padding: 0 !important;
    margin: 0 !important;
  }
}