/* ============================================
   COLOR HARMONY CSS
   Palette harmonisée : 3 couleurs max
   - Noir (#000) : textes principaux
   - Blanc (#fff) : fonds
   - Marron bois (#5C3317) : accents
   ============================================ */

:root {
  /* Palette principale - 3 couleurs */
  --color-primary: #000;           /* Noir - textes */
  --color-secondary: #fff;         /* Blanc - fonds */
  --color-accent: #5C3317;         /* Marron bois - accents */
  --color-accent-light: #8B4513;   /* Marron plus clair pour hover */

  /* Opacités du noir pour hiérarchie */
  --text-100: #000;
  --text-80: rgba(0, 0, 0, 0.80);
  --text-60: rgba(0, 0, 0, 0.60);
  --text-40: rgba(0, 0, 0, 0.40);

  /* Opacités du blanc */
  --white-100: #fff;
  --white-80: rgba(255, 255, 255, 0.80);
  --white-60: rgba(255, 255, 255, 0.60);

  /* Suppression des couleurs parasites */
  --color-blue: var(--color-accent) !important;
  --color-evergreen: var(--color-accent) !important;
  --color-red: var(--color-accent) !important;
  --color-orange: var(--color-accent) !important;
}

/* ============================================
   TEXTE SUR IMAGES UNIQUEMENT
   Ombre uniquement sur les textes superposés à des images
   ============================================ */

/* "A lot can happen" - texte sur cartes avec images de fond */
.a-lot-can-happen-title h1 {
  text-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   HARMONISATION DES BOUTONS
   ============================================ */

/* Boutons principaux - marron bois */
.button-rounded-blue,
.button-rounded-blue:visited {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}

.button-rounded-blue:hover {
  background: var(--color-accent-light) !important;
  border-color: var(--color-accent-light) !important;
}

/* Boutons outline */
.button-rounded-transparent {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.button-rounded-transparent:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
}

/* ============================================
   HARMONISATION DES FONDS
   ============================================ */

/* Sections beige -> blanc cassé cohérent */
.insights-story-footer,
.three-sizes-layouts,
.interior-carousel-white {
  background: #fdfdf7 !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Éléments de navigation actifs */
.main-navigation a:hover,
.main-navigation a.active {
  color: var(--color-accent) !important;
}

/* Indicateurs de pagination */
.paging-indicator li.paging-indicator-current {
  background: var(--color-accent) !important;
}

/* ============================================
   CORRECTIONS SPÉCIFIQUES
   ============================================ */

/* Suppression du bleu professionnel */
.professionnels .page-header,
.professionnels .hero-gradient {
  background: linear-gradient(135deg, var(--color-accent), #3a1f0d) !important;
}

/* Témoignages */
.testimonials-card {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Spécifications expertise */
.expertise-specs {
  background: #fafaf8 !important;
}

/* Footer */
footer {
  background: #000 !important;
  color: #fff !important;
}

footer a {
  color: rgba(255, 255, 255, 0.7) !important;
}

footer a:hover {
  color: #fff !important;
}