/* ===== 1-VARIABLES.CSS - SYSTÈME FLUIDE MODERNE ===== */
/* 🎯 Valeurs qui s'adaptent automatiquement à tous les écrans */
/* Les dimensions des diagrammes sont dans diagrammes.css */

:root {
  /* ========================================
     COULEURS
     ======================================== */
  
  /* Couleur principale */
  --couleur-primaire: #808000;
  --couleur-primaire-foncee: #6b6b00;
  --couleur-primaire-claire: rgba(128, 128, 0, 0.1);
  
  /* Couleurs de fond */
  --fond-creme: #FFF8DC;
  --fond-clair: #faf8f3;
  --fond-blanc: #ffffff;
  
  /* Couleurs de texte */
  --texte-principal: #333;
  --texte-secondaire: #666;
  --texte-tertiaire: #999;
  --texte-blanc: #ffffff;
  
  /* Couleurs de bordure */
  --bordure-principale: #808000;
  --bordure-claire: #e0e0e0;
  --bordure-creme: #e0d5a0;
  
  --couleur-orange: #FF8C00;
  
  /* ========================================
     HAUTEURS FLUIDES (GÉNÉRALES)
     ======================================== */
  
  --hauteur-conteneur: clamp(21.875rem, 50vh, 28.125rem);
  --hauteur-conteneur-piano: clamp(18.75rem, 45vh, 28.125rem);
  
  /* Hauteurs composants */
  --hauteur-navbar: 3.75rem;
  --hauteur-controle: clamp(2.5rem, 5vw, 2.75rem);
  --hauteur-bouton: clamp(2.5rem, 5vw, 2.75rem);
  
  /* Hauteurs minimales */
  --min-hauteur-diagramme: clamp(15rem, 30vh, 18.75rem);
  
  /* ========================================
     LARGEURS FLUIDES
     ======================================== */
  
  /* Largeurs maximales */
  --largeur-max-page: 87.5rem;
  --largeur-max-conteneur: 71.875rem;
  --largeur-max-modal: 50rem;
  
  /* 🎯 PANNEAU DE CONTRÔLE */
  --largeur-panneau-controle: clamp(18rem, 85vw, 38rem);
  
  /* Largeurs de contrôles */
  --largeur-controle: clamp(5.5rem, 12vw, 7rem);
  --largeur-bouton-enrichir: clamp(2.5rem, 4.5vw, 2.75rem);
  
  /* ⚠️ LEGACY - Anciennes variables (conservées pour compatibilité) */
  --taille-carte-guitare: clamp(18rem, 26vw, 18rem);
  --taille-carte-ukulele: clamp(15rem, 21vw, 15.5rem);
  --taille-carte-charango: clamp(15rem, 21vw, 15.5rem);
  --taille-carte-piano: clamp(22rem, 30vw, 25rem);
  
  /* ========================================
     ESPACEMENTS FLUIDES
     ======================================== */
  
  /* Gaps - espaces entre éléments */
  --gap-xs: clamp(0.25rem, 0.5vw, 0.375rem);
  --gap-sm: clamp(0.375rem, 0.75vw, 0.5rem);
  --gap-md: clamp(0.5rem, 1vw, 0.75rem);
  --gap-lg: clamp(0.75rem, 1.5vw, 1rem);
  --gap-xl: clamp(1rem, 2vw, 1.25rem);
  --gap-xxl: clamp(1.25rem, 2.5vw, 1.875rem);
  
  /* Padding - espaces intérieurs */
  --padding-xs: clamp(0.375rem, 0.75vw, 0.5rem);
  --padding-sm: clamp(0.5rem, 1vw, 0.625rem);
  --padding-md: clamp(0.625rem, 1.25vw, 0.75rem);
  --padding-lg: clamp(0.75rem, 1.5vw, 1rem);
  --padding-xl: clamp(1rem, 2vw, 1.25rem);
  --padding-xxl: clamp(1.25rem, 2.5vw, 1.875rem);
  
  /* Margin - espaces extérieurs */
  --margin-xs: clamp(0.375rem, 0.75vw, 0.5rem);
  --margin-sm: clamp(0.5rem, 1vw, 0.625rem);
  --margin-md: clamp(0.75rem, 1.5vw, 1rem);
  --margin-lg: clamp(1rem, 2vw, 1.25rem);
  --margin-xl: clamp(1.25rem, 2.5vw, 1.875rem);
  
  /* ========================================
     BORDURES
     ======================================== */
  
  --bordure-fine: 0.0625rem;
  --bordure-normale: 0.125rem;
  --bordure-epaisse: 0.1875rem;
  
  /* Border radius */
  --rayon-sm: 0.375rem;
  --rayon-md: 0.5rem;
  --rayon-lg: 0.75rem;
  --rayon-xl: 1rem;
  --rayon-rond: 50%;
  
  /* ========================================
     TYPOGRAPHIE FLUIDE
     ======================================== */
  
  /* Tailles de police - s'adaptent automatiquement */
  --texte-xxs: clamp(0.625rem, 1.5vw, 0.6875rem);
  --texte-xs: clamp(0.6875rem, 1.75vw, 0.75rem);
  --texte-sm: clamp(0.75rem, 2vw, 0.8125rem);
  --texte-md: clamp(0.8125rem, 2.25vw, 0.875rem);
  --texte-base: clamp(0.875rem, 2.5vw, 0.9375rem);
  --texte-lg: clamp(0.9375rem, 2.75vw, 1rem);
  --texte-xl: clamp(1rem, 3vw, 1.125rem);
  --texte-xxl: clamp(1.125rem, 3.5vw, 1.375rem);
  --texte-titre: clamp(1.25rem, 4vw, 1.75rem);
  
  /* Poids de police */
  --poids-normal: 400;
  --poids-medium: 500;
  --poids-semi-bold: 600;
  --poids-bold: 700;
  
  /* Line height */
  --hauteur-ligne-serree: 1.3;
  --hauteur-ligne-normale: 1.6;
  
  /* ========================================
     OMBRES
     ======================================== */
  
  --ombre-xs: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
  --ombre-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --ombre-md: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  --ombre-lg: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  --ombre-xl: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  --ombre-xxl: 0 0.5rem 2rem rgba(128, 128, 0, 0.5);
  
  /* Ombres spécifiques */
  --ombre-bouton: 0 0.125rem 0.375rem rgba(128, 128, 0, 0.3);
  --ombre-bouton-hover: 0 0.25rem 0.75rem rgba(128, 128, 0, 0.4);
  --ombre-navbar: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  
  /* ========================================
     TRANSITIONS
     ======================================== */
  
  --transition-rapide: 0.2s ease;
  --transition-normale: 0.3s ease;
  --transition-lente: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ========================================
     Z-INDEX
     ======================================== */
  
  --z-normal: 1;
  --z-dropdown: 1000;
  --z-sticky: 100;
  --z-modal: 100002;
  --z-navbar: 100001;
}