/*
 * HM Theme Rotation — 8 thèmes de couleurs auto-cyclants
 * Fichier : hm-theme-rotation.css
 * Chargé via wp_enqueue_style dans functions.php
 */

/* ══════════════════════════════════════════════════════
   TRANSITION GLOBALE (0.8s sur toutes les propriétés couleur)
══════════════════════════════════════════════════════ */
body {
  transition:
    background-color 0.8s ease,
    color 0.8s ease !important;
}
/* Exclure les transitions d'animation qui ne doivent pas être perturbées */
.hero-photo-frame,
.hero-photo-img,
.float-card-icon,
[class*="aos-"],
.btn,
.spec-card,
.temo-card {
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ══════════════════════════════════════════════════════
   THÈME 1 — CRÈME DORÉ (défaut, remplace le noir)
══════════════════════════════════════════════════════ */
body.theme-creme {
  --bg-deep:       #fdf9f0;
  --bg-primary:    #faf7f0;
  --bg-secondary:  #f2ede0;
  --bg-card:       #ffffff;
  --bg-card-hover: #fdf9f0;
  --bg-glass:      rgba(250,247,240,0.92);

  --gold:          #b8912e;
  --gold-light:    #c9a84c;
  --gold-pale:     #e8d090;
  --gold-glow:     rgba(184,145,46,0.15);
  --gold-border:   rgba(184,145,46,0.3);

  --violet:        #5a3490;
  --violet-light:  #7a54b0;
  --violet-glow:   rgba(90,52,144,0.15);

  --text-primary:  #2a1f0e;
  --text-secondary:#5a4a30;
  --text-muted:    #9a8a70;

  --border:        rgba(184,145,46,0.15);
  --border-gold:   rgba(184,145,46,0.3);
  --border-violet: rgba(90,52,144,0.2);

  --shadow-deep:   0 8px 40px rgba(184,145,46,0.12);
  --shadow-gold:   0 0 40px rgba(184,145,46,0.2);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.08);
}

body.theme-creme {
  background: #faf7f0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(184,145,46,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(90,52,144,0.05) 0%, transparent 60%);
}

body.theme-creme::before {
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(90,52,144,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(45,47,110,0.04) 0%, transparent 55%);
}

body.theme-creme #site-header.scrolled {
  background: rgba(250,247,240,0.96);
  border-bottom-color: rgba(184,145,46,0.3);
}

body.theme-creme .section-label { color: var(--gold); }
body.theme-creme .gold-text {
  background: linear-gradient(135deg, #b8912e 0%, #c9a84c 50%, #e8d090 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════
   THÈME 2 — BORDEAUX MYSTIQUE
══════════════════════════════════════════════════════ */
body.theme-bordeaux {
  --bg-deep:       #0e0204;
  --bg-primary:    #120408;
  --bg-secondary:  #1a0508;
  --bg-card:       #220a0e;
  --bg-card-hover: #2a0e12;
  --bg-glass:      rgba(18,4,8,0.9);

  --gold:          #c9a84c;
  --gold-light:    #e8c96a;
  --gold-pale:     #f5e4b0;
  --gold-glow:     rgba(201,168,76,0.18);
  --gold-border:   rgba(201,168,76,0.25);

  --violet:        #8b1a2a;
  --violet-light:  #b02a40;
  --violet-glow:   rgba(139,26,42,0.3);

  --text-primary:  #f0e0e0;
  --text-secondary:#c0a8a8;
  --text-muted:    #7a5a5a;

  --border:        rgba(255,255,255,0.06);
  --border-gold:   rgba(201,168,76,0.2);
  --border-violet: rgba(139,26,42,0.4);

  --shadow-deep:   0 8px 40px rgba(0,0,0,0.8);
  --shadow-gold:   0 0 40px rgba(201,168,76,0.15);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.6);
}

body.theme-bordeaux {
  background: #120408;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(139,26,42,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(201,168,76,0.06) 0%, transparent 60%);
}

body.theme-bordeaux .urgency-band {
  background: linear-gradient(135deg, rgba(139,26,42,0.3), rgba(80,10,20,0.4));
  border-color: rgba(139,26,42,0.4);
}

/* ══════════════════════════════════════════════════════
   THÈME 3 — FORÊT SACRÉE
══════════════════════════════════════════════════════ */
body.theme-foret {
  --bg-deep:       #f0f8f0;
  --bg-primary:    #f2f8f0;
  --bg-secondary:  #e8f2e5;
  --bg-card:       #ffffff;
  --bg-card-hover: #f5faf4;
  --bg-glass:      rgba(242,248,240,0.92);

  --gold:          #b8912e;
  --gold-light:    #c9a84c;
  --gold-pale:     #e8d090;
  --gold-glow:     rgba(184,145,46,0.15);
  --gold-border:   rgba(184,145,46,0.3);

  --violet:        #1a4a1a;
  --violet-light:  #2d6b2d;
  --violet-glow:   rgba(26,74,26,0.2);

  --text-primary:  #1a2a1a;
  --text-secondary:#3a5a3a;
  --text-muted:    #7a9a7a;

  --border:        rgba(26,74,26,0.12);
  --border-gold:   rgba(184,145,46,0.3);
  --border-violet: rgba(26,74,26,0.25);

  --shadow-deep:   0 8px 40px rgba(26,74,26,0.1);
  --shadow-gold:   0 0 40px rgba(184,145,46,0.2);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.06);
}

body.theme-foret {
  background: #f2f8f0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(26,74,26,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(184,145,46,0.06) 0%, transparent 60%);
}

body.theme-foret #site-header.scrolled {
  background: rgba(242,248,240,0.96);
}

/* ══════════════════════════════════════════════════════
   THÈME 4 — OCÉAN SACRÉ
══════════════════════════════════════════════════════ */
body.theme-ocean {
  --bg-deep:       #e8f0f8;
  --bg-primary:    #f0f5fa;
  --bg-secondary:  #e5eff8;
  --bg-card:       #ffffff;
  --bg-card-hover: #f5f8fd;
  --bg-glass:      rgba(240,245,250,0.92);

  --gold:          #b8912e;
  --gold-light:    #c9a84c;
  --gold-pale:     #e8d090;
  --gold-glow:     rgba(184,145,46,0.15);
  --gold-border:   rgba(184,145,46,0.3);

  --violet:        #0d2b45;
  --violet-light:  #1a4a70;
  --violet-glow:   rgba(13,43,69,0.2);

  --text-primary:  #0a1a2a;
  --text-secondary:#2a4a6a;
  --text-muted:    #6a8aaa;

  --border:        rgba(13,43,69,0.1);
  --border-gold:   rgba(184,145,46,0.3);
  --border-violet: rgba(13,43,69,0.25);

  --shadow-deep:   0 8px 40px rgba(13,43,69,0.1);
  --shadow-gold:   0 0 40px rgba(184,145,46,0.2);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.06);
}

body.theme-ocean {
  background: #f0f5fa;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(13,43,69,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(184,145,46,0.06) 0%, transparent 60%);
}

body.theme-ocean #site-header.scrolled {
  background: rgba(240,245,250,0.96);
}

/* ══════════════════════════════════════════════════════
   THÈME 5 — ROSE ANCESTRAL
══════════════════════════════════════════════════════ */
body.theme-rose {
  --bg-deep:       #f8eeee;
  --bg-primary:    #fdf5f5;
  --bg-secondary:  #f8eaed;
  --bg-card:       #ffffff;
  --bg-card-hover: #fdf8f8;
  --bg-glass:      rgba(253,245,245,0.92);

  --gold:          #c07848;
  --gold-light:    #d4956a;
  --gold-pale:     #ecc8a8;
  --gold-glow:     rgba(192,120,72,0.15);
  --gold-border:   rgba(192,120,72,0.3);

  --violet:        #7a2040;
  --violet-light:  #a03060;
  --violet-glow:   rgba(122,32,64,0.2);

  --text-primary:  #2a0a10;
  --text-secondary:#5a2030;
  --text-muted:    #9a6070;

  --border:        rgba(122,32,64,0.1);
  --border-gold:   rgba(192,120,72,0.3);
  --border-violet: rgba(122,32,64,0.25);

  --shadow-deep:   0 8px 40px rgba(122,32,64,0.1);
  --shadow-gold:   0 0 40px rgba(192,120,72,0.2);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.06);
}

body.theme-rose {
  background: #fdf5f5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(122,32,64,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(192,120,72,0.06) 0%, transparent 60%);
}

body.theme-rose #site-header.scrolled {
  background: rgba(253,245,245,0.96);
}

/* ══════════════════════════════════════════════════════
   THÈME 6 — ARDOISE ROYALE
══════════════════════════════════════════════════════ */
body.theme-ardoise {
  --bg-deep:       #e8ecf5;
  --bg-primary:    #f2f4f8;
  --bg-secondary:  #e8ecf5;
  --bg-card:       #ffffff;
  --bg-card-hover: #f5f7fc;
  --bg-glass:      rgba(242,244,248,0.92);

  --gold:          #b8912e;
  --gold-light:    #c9a84c;
  --gold-pale:     #e8d090;
  --gold-glow:     rgba(184,145,46,0.15);
  --gold-border:   rgba(184,145,46,0.3);

  --violet:        #2d3a5c;
  --violet-light:  #445080;
  --violet-glow:   rgba(45,58,92,0.2);

  --text-primary:  #1a2030;
  --text-secondary:#3a4a6a;
  --text-muted:    #7a8aaa;

  --border:        rgba(45,58,92,0.1);
  --border-gold:   rgba(184,145,46,0.3);
  --border-violet: rgba(45,58,92,0.25);

  --shadow-deep:   0 8px 40px rgba(45,58,92,0.1);
  --shadow-gold:   0 0 40px rgba(184,145,46,0.2);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.06);
}

body.theme-ardoise {
  background: #f2f4f8;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(45,58,92,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(184,145,46,0.05) 0%, transparent 60%);
}

body.theme-ardoise #site-header.scrolled {
  background: rgba(242,244,248,0.96);
}

/* ══════════════════════════════════════════════════════
   THÈME 7 — TERRE VODUN
══════════════════════════════════════════════════════ */
body.theme-terre {
  --bg-deep:       #f8f0e8;
  --bg-primary:    #fdf8f0;
  --bg-secondary:  #f5ede0;
  --bg-card:       #fffdf8;
  --bg-card-hover: #fdf8f0;
  --bg-glass:      rgba(253,248,240,0.92);

  --gold:          #c07830;
  --gold-light:    #d4956a;
  --gold-pale:     #ecc8a0;
  --gold-glow:     rgba(192,120,48,0.15);
  --gold-border:   rgba(192,120,48,0.3);

  --violet:        #5c3010;
  --violet-light:  #7a4820;
  --violet-glow:   rgba(92,48,16,0.2);

  --text-primary:  #2a1505;
  --text-secondary:#5a3a20;
  --text-muted:    #9a7a60;

  --border:        rgba(92,48,16,0.1);
  --border-gold:   rgba(192,120,48,0.3);
  --border-violet: rgba(92,48,16,0.25);

  --shadow-deep:   0 8px 40px rgba(92,48,16,0.1);
  --shadow-gold:   0 0 40px rgba(192,120,48,0.2);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.06);
}

body.theme-terre {
  background: #fdf8f0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(92,48,16,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(192,120,48,0.07) 0%, transparent 60%);
}

body.theme-terre #site-header.scrolled {
  background: rgba(253,248,240,0.96);
}

/* ══════════════════════════════════════════════════════
   THÈME 8 — NUIT ÉTOILÉE (défaut actuel du site)
══════════════════════════════════════════════════════ */
body.theme-nuit {
  --bg-deep:       #080a14;
  --bg-primary:    #0c0f1e;
  --bg-secondary:  #10142a;
  --bg-card:       #141830;
  --bg-card-hover: #1a1f3a;
  --bg-glass:      rgba(20,24,48,0.85);

  --gold:          #c9a84c;
  --gold-light:    #e8c96a;
  --gold-pale:     #f5e4b0;
  --gold-glow:     rgba(201,168,76,0.18);
  --gold-border:   rgba(201,168,76,0.25);

  --violet:        #6b3fa0;
  --violet-light:  #8b5fc0;
  --violet-glow:   rgba(107,63,160,0.25);

  --text-primary:  #f0ece0;
  --text-secondary:#b8b0a0;
  --text-muted:    #6e6860;

  --border:        rgba(255,255,255,0.07);
  --border-gold:   rgba(201,168,76,0.25);
  --border-violet: rgba(107,63,160,0.3);

  --shadow-deep:   0 8px 40px rgba(0,0,0,0.7);
  --shadow-gold:   0 0 40px rgba(201,168,76,0.15);
  --shadow-card:   0 4px 30px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════════════
   AJUSTEMENTS COMMUNS THÈMES CLAIRS
══════════════════════════════════════════════════════ */
body.theme-creme,
body.theme-foret,
body.theme-ocean,
body.theme-rose,
body.theme-ardoise,
body.theme-terre {
  /* Header transparent sur fond clair */
  color: var(--text-primary);
}

body.theme-creme #site-nav ul li a,
body.theme-foret #site-nav ul li a,
body.theme-ocean #site-nav ul li a,
body.theme-rose #site-nav ul li a,
body.theme-ardoise #site-nav ul li a,
body.theme-terre #site-nav ul li a {
  color: var(--text-secondary);
}

body.theme-creme #site-nav ul li a:hover,
body.theme-foret #site-nav ul li a:hover,
body.theme-ocean #site-nav ul li a:hover,
body.theme-rose #site-nav ul li a:hover,
body.theme-ardoise #site-nav ul li a:hover,
body.theme-terre #site-nav ul li a:hover {
  color: var(--text-primary);
}

/* Logo texte sur fond clair */
body.theme-creme .logo-name,
body.theme-foret .logo-name,
body.theme-ocean .logo-name,
body.theme-rose .logo-name,
body.theme-ardoise .logo-name,
body.theme-terre .logo-name {
  color: var(--text-primary);
}

/* Titres sur fond clair */
body.theme-creme h1, body.theme-creme h2, body.theme-creme h3,
body.theme-foret h1, body.theme-foret h2, body.theme-foret h3,
body.theme-ocean h1, body.theme-ocean h2, body.theme-ocean h3,
body.theme-rose h1, body.theme-rose h2, body.theme-rose h3,
body.theme-ardoise h1, body.theme-ardoise h2, body.theme-ardoise h3,
body.theme-terre h1, body.theme-terre h2, body.theme-terre h3 {
  color: var(--text-primary);
}

/* Body background override */
body.theme-creme, body.theme-foret, body.theme-ocean,
body.theme-rose, body.theme-ardoise, body.theme-terre {
  background-color: var(--bg-primary);
}

body.theme-bordeaux, body.theme-nuit {
  background-color: var(--bg-primary);
}

/* ══════════════════════════════════════════════════════
   INDICATEUR DE THÈME (injecté par JS)
══════════════════════════════════════════════════════ */
.hm-theme-indicator {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(10,10,20,0.85);
  color: #c9a84c;
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .5rem 1.4rem;
  border-radius: 30px;
  border: 1px solid rgba(201,168,76,.4);
  backdrop-filter: blur(12px);
  z-index: 99999;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hm-theme-indicator.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Barre de progression */
.hm-theme-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #c9a84c), var(--gold-light, #e8c96a));
  width: 0%;
  z-index: 99999;
  transition: none;
}

.hm-theme-progress.animating {
  transition: width 10s linear;
  width: 100%;
}

/* Thèmes clairs : indicateur fond clair */
body.theme-creme .hm-theme-indicator,
body.theme-foret .hm-theme-indicator,
body.theme-ocean .hm-theme-indicator,
body.theme-rose .hm-theme-indicator,
body.theme-ardoise .hm-theme-indicator,
body.theme-terre .hm-theme-indicator {
  background: rgba(30,20,10,0.85);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body, body * {
    transition: none !important;
    animation: none !important;
  }
}