/* ============================================================
   COM À BORD — MODULE MODERNITÉ v3.0
   
   4 effets coordonnés :
   1. Aurora background — dégradé animé lent
   2. Séparateurs dorés vivants (entre sections)
   3. Logo "m" pulsant dans les filigranes
   4. Parallax souris sur le hero (JS minime)
   
   BONUS :
   5. Cartouche or pour les mots forts (<strong.gold> ou <span.highlight>)
   
   Tout est GPU-accéléré, zéro impact perf.
   ============================================================ */

/* ============================================================
   1. AURORA BACKGROUND — Dégradé animé
   
   Le body a déjà un dégradé fixe en fond. On ajoute par-dessus
   une couche animée qui se déplace très lentement.
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  inset: -20% -20% -20% -20%; /* dépasse pour que le mouvement ne laisse pas de trous */
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 25%, rgba(26, 90, 128, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(200, 169, 110, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(13, 68, 104, 0.25) 0%, transparent 60%);
  animation: auroraDrift 28s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes auroraDrift {
  0%, 100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
  25% {
    transform: translate(3%, -2%) scale(1.05);
    opacity: 0.9;
  }
  50% {
    transform: translate(-2%, 3%) scale(1.1);
    opacity: 1;
  }
  75% {
    transform: translate(2%, 2%) scale(1.03);
    opacity: 0.95;
  }
}

/* Accessibilité : désactiver l'animation si motion réduit */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ============================================================
   2. SÉPARATEURS DORÉS VIVANTS
   
   À placer entre les sections via <hr class="hr-gold">
   ou entre deux sections via un div séparateur.
   Le filet dégradé or + une petite vaguelette qui traverse.
   ============================================================ */

.hr-gold,
section + section::before {
  content: '';
  display: block;
  position: relative;
  height: 1px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(200, 169, 110, 0.15) 15%,
              rgba(200, 169, 110, 0.5) 45%,
              rgba(224, 201, 154, 0.7) 50%,
              rgba(200, 169, 110, 0.5) 55%,
              rgba(200, 169, 110, 0.15) 85%,
              transparent 100%);
  overflow: visible;
}

/* Vaguelette qui traverse — point lumineux animé */
.hr-gold::after,
section + section::before {
  /* réutiliser la règle existante, on ajoute juste le point qui traverse */
}

/* Séparateur standalone utilisable dans le HTML */
.hr-gold {
  position: relative;
  margin: 0 auto;
  border: 0;
  height: 1px;
}

.hr-gold::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), transparent);
  transform: translateY(-50%);
  filter: blur(1px);
  box-shadow: 0 0 12px rgba(224, 201, 154, 0.6);
  animation: hrWave 8s linear infinite;
}

.hr-gold::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-size: 14px;
  background: var(--bg);
  padding: 0 1rem;
  opacity: 0.8;
  animation: ornamentPulse 4s ease-in-out infinite;
}

@keyframes hrWave {
  0%   { left: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@keyframes ornamentPulse {
  0%, 100% { 
    opacity: 0.5; 
    transform: translate(-50%, -50%) scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.15) rotate(180deg); 
    text-shadow: 0 0 16px rgba(224, 201, 154, 0.8); 
  }
}

/* Alternative plus discrète : filet statique doré entre sections (auto) */
section.section--alt + section:not(.section--alt):not(.cta-band)::before,
section:not(.section--alt):not(.cta-band) + section.section--alt::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(200, 169, 110, 0.3) 30%,
              rgba(224, 201, 154, 0.5) 50%,
              rgba(200, 169, 110, 0.3) 70%,
              transparent);
  pointer-events: none;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .hr-gold::before,
  .hr-gold::after { animation: none; }
}

/* ============================================================
   3. LOGO "m" PULSANT DANS LES FILIGRANES
   
   Les filigranes existants prennent une animation discrète.
   Le logo tourne très lentement + léger scintillement.
   ============================================================ */

.page-hero::after,
.hero::after,
.cta-band::after {
  animation: filigranePulse 12s ease-in-out infinite;
  transition: opacity 0.6s var(--ease);
}

@keyframes filigranePulse {
  0%, 100% {
    opacity: 0.025;
    filter: grayscale(1) brightness(2) hue-rotate(0deg);
  }
  50% {
    opacity: 0.045;
    filter: grayscale(0.8) brightness(2.3) hue-rotate(10deg);
  }
}

/* Version hero avec rotation très lente */
.hero::after {
  animation: filigraneHero 40s linear infinite, filigranePulse 12s ease-in-out infinite;
}

@keyframes filigraneHero {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::after,
  .hero::after,
  .cta-band::after {
    animation: none;
  }
}

/* ============================================================
   4. PARALLAX SOURIS (hero uniquement)
   
   Le JS détecte la position de la souris et met à jour
   les variables CSS --mx et --my.
   Le hero-bg et le filigrane bougent en sens opposé.
   ============================================================ */

.hero {
  --mx: 0;
  --my: 0;
}

.hero-bg {
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .hero-bg {
    transform: translate3d(calc(var(--mx) * -15px), calc(var(--my) * -10px), 0) scale(1.05);
  }
  .hero::after {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
    will-change: transform;
  }
}

/* ============================================================
   5. CARTOUCHE OR pour les mots forts
   
   Usage :
   <h1>Un <span class="cartouche">mot fort</span> dans un titre</h1>
   
   Effet : fond doré léger, bordure dorée nette, padding,
   text-color contrastant. Comme un tampon / médaille / sceau.
   ============================================================ */

.cartouche {
  display: inline-block;
  position: relative;
  padding: 0.08em 0.4em 0.12em;
  margin: 0 0.1em;
  color: #031824 !important;
  -webkit-text-fill-color: #031824 !important;
  background: linear-gradient(135deg,
              rgba(224, 201, 154, 0.95) 0%,
              rgba(200, 169, 110, 1) 50%,
              rgba(184, 149, 88, 0.95) 100%);
  border-radius: 3px;
  font-style: normal !important;
  font-family: var(--ff-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(200, 169, 110, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transform: skewX(-2deg); /* très léger italique géométrique */
  filter: none !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
}

/* Ornement aux coins du cartouche */
.cartouche::before,
.cartouche::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--gold-light);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(224, 201, 154, 0.8);
}
.cartouche::before { left: -10px; }
.cartouche::after  { right: -10px; }

/* Variante "cartouche--ligne" : juste un trait doré en dessous (plus subtil) */
.cartouche--ligne {
  background: none;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  font-family: var(--ff-expressive) !important;
  font-style: italic !important;
  padding: 0 0.1em;
  box-shadow: none;
  transform: none;
  position: relative;
  text-shadow: 0 0 20px rgba(200, 169, 110, 0.3);
}
.cartouche--ligne::before,
.cartouche--ligne::after { display: none; }
.cartouche--ligne::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg,
              transparent,
              var(--gold-light) 30%,
              var(--gold) 50%,
              var(--gold-light) 70%,
              transparent);
  border-radius: 2px;
  filter: blur(0.3px);
}

/* Cartouche avec halo animé (pour hero uniquement) */
.hero-title .cartouche {
  animation: cartoucheHalo 5s ease-in-out infinite;
}

@keyframes cartoucheHalo {
  0%, 100% {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.3),
      0 8px 20px rgba(200, 169, 110, 0.25),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.3),
      0 12px 30px rgba(200, 169, 110, 0.5),
      0 0 40px rgba(224, 201, 154, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

/* Responsive : sur mobile, le cartouche est moins marqué */
@media (max-width: 900px) {
  .cartouche {
    padding: 0.05em 0.3em 0.1em;
    transform: skewX(-1deg);
  }
  .cartouche::before,
  .cartouche::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .cartouche { animation: none; }
}