/* ============================================================
   THEME BASE & VARIABLES - CASTAGNE
   ============================================================ */

:root {
  /* --- COULEURS --- */
  --color-black: #0a0a0a;
  --color-white: #ffffff;
  --color-beige: #F5EBD9;
  --color-blue: #2D9CDB;
  --color-gray-light: #e5e7eb;
  --color-gray-medium: #c1c1c1; /* Utilisé pour les lignes mobile */
  
  /* Thème dynamique (valeurs par défaut) */
  --theme-bg-default: rgba(210, 210, 210, 0.3);
  --theme-bg-sidebar: rgba(210, 210, 210, 0.3);

  /* --- DIMENSIONS --- */
  --sidebar-width-desktop: 48px;
  --sidebar-width-mobile: 34px;
  --header-height-mobile: 71px;
  --gallery-gap: 16px; /* Espacement global galerie (H/V) */
  
  /* --- Z-INDEX LAYERS --- */
  --z-read-more: 10;
  --z-sidebar-sticky: 20;
  --z-mobile-sidebar: 40;
  --z-header: 40;
  --z-mobile-nav: 45;
  --z-overlay: 50;
  --z-modal: 50;
}

/* --- TYPOGRAPHIE --- */
.font-inter { font-family: 'Inter', sans-serif; }
.font-space { font-family: 'Space Grotesk', sans-serif; }

/* --- UTILITAIRES DE THÈME --- */

/* Sidebar - couleur par défaut overridée par JS */
.side-navigation-container {
  background-color: var(--theme-bg-sidebar);
}

/* Boutons de navigation - couleur par défaut overridée par JS */
.nav-btn {
  background-color: var(--theme-bg-default);
}

/* Boutons scroll-to-top - couleur par défaut overridée par JS */
.scroll-to-top-btn {
  background-color: var(--theme-bg-default);
}

/* Hover uniquement: fond blanc */
.nav-button { 
  background-color: transparent; 
}

.nav-button:hover { 
  background-color: rgba(255,255,255,0.8); 
}

/* Rollover des boutons navigation - fond noir + picto + label blanc */
.nav-btn:hover {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

.nav-btn:hover svg {
  color: var(--color-white) !important;
}

.nav-btn:hover span {
  color: var(--color-white) !important;
}

.scroll-to-top-btn:hover {
  background-color: inherit !important;
}

.scroll-to-top-btn:hover svg {
  color: inherit !important;
}

/* Icônes unifiées */
.nav-icon { 
  color: var(--color-black); 
  opacity: 1; 
}

.nav-icon-img { 
  filter: none; 
  opacity: 1; 
}

.nav-button:hover .nav-icon,
.nav-button:hover .nav-icon-text {
  color: var(--color-white);
}

.nav-button:hover .nav-icon-img {
  filter: brightness(0) invert(1);
}

/* État actif: icône à 50% d'opacité, pas de fond */
.nav-button.active { 
  background-color: transparent !important; 
}

.nav-button.active .nav-icon { 
  opacity: 0.5; 
}

/* Smooth scrolling global */
html {
  scroll-behavior: smooth;
}