/* ═══════════════════════════════════════════════════════════════
   sd-aurora.css v1 — Stratégie Dirigeants (cabinet conseil)
   Halos "aurora" ANIMÉS et VISIBLES dans les heros, palette
   maison exclusivement (caramel / or / mauve / brun profond).
   ADDITIF sur style.css + sd-modern.css — réversible : retirer
   le <link>. Animations transform/opacity uniquement (GPU).
   prefers-reduced-motion → halos statiques élégants.
   #GO_PROD_SD_AURORA_14_07 (poursuite modernisation demandée)
═══════════════════════════════════════════════════════════════ */

:root{
  --sda-caramel:222,179,118;  /* #deb376 */
  --sda-gold:241,221,165;     /* #f1dda5 */
  --sda-mauve:155,112,128;    /* #9b7080 */
  --sda-brown:120,74,55;      /* #784a37 */
  --sda-ease:cubic-bezier(.45,.05,.55,.95);
}

/* ── Dérives lentes des halos (GPU only) ─────────────────────── */
@keyframes sdaDriftA{
  0%   {transform:translate3d(-9%,-13%,0) rotate(-6deg) scale(1)}
  50%  {transform:translate3d(20%,24%,0) rotate(9deg)  scale(1.25)}
  100% {transform:translate3d(-9%,-13%,0) rotate(-6deg) scale(1)}
}
@keyframes sdaDriftB{
  0%   {transform:translate3d(13%,20%,0)   rotate(5deg)   scale(1.08)}
  50%  {transform:translate3d(-24%,-16%,0) rotate(-10deg) scale(1.32)}
  100% {transform:translate3d(13%,20%,0)   rotate(5deg)   scale(1.08)}
}
@keyframes sdaBreath{
  0%,100%{opacity:.82}
  50%    {opacity:1}
}

/* ═══ 1. HERO ACCUEIL (photo sombre) : aurores or + mauve ═════
   Scopé :has(.hero-bg-img) pour ne JAMAIS toucher d'autres
   sections .hero (ex: produit.html, structure BEM différente). */
.hero:has(.hero-bg-img)::before,
.hero:has(.hero-bg-img)::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  width:min(1080px,96vw);aspect-ratio:1;inset:auto;
  will-change:transform,opacity;
}
.hero:has(.hero-bg-img)::before{
  top:-34%;left:-18%;
  background:radial-gradient(closest-side,
    rgba(var(--sda-gold),1),
    rgba(var(--sda-caramel),.72) 44%,
    transparent 64%);
  mix-blend-mode:screen;
  animation:sdaDriftA 8s var(--sda-ease) infinite,
            sdaBreath 8.5s ease-in-out infinite;
}
.hero:has(.hero-bg-img)::after{
  bottom:-40%;right:-16%;
  background:radial-gradient(closest-side,
    rgba(var(--sda-mauve),.95),
    rgba(var(--sda-brown),.55) 46%,
    transparent 66%);
  mix-blend-mode:screen;
  animation:sdaDriftB 11s var(--sda-ease) infinite,
            sdaBreath 11s ease-in-out infinite reverse;
}
/* Vignette de protection du titre : scrim sombre derrière le
   texte (au-dessus des halos, sous le contenu) — lisibilité. */
.hero:has(.hero-bg-img) .hero-content::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1200px,140vw);height:320%;
  background:radial-gradient(closest-side,
    rgba(18,8,2,.78),rgba(18,8,2,.60) 52%,rgba(18,8,2,.30) 78%,transparent 100%);
}

/* ═══ 2. PAGE-HERO (pages internes) : halos chauds animés ═════
   Remplace le lavis statique de sd-modern (::after redéfini). */
.page-hero{position:relative;overflow:hidden}
.page-hero::before,
.page-hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(860px,90vw);aspect-ratio:1;inset:auto;
  will-change:transform,opacity;
}
/* Défaut = fonds CLAIRS (cream, blanc) : nuages caramel + mauve */
.page-hero::before{
  top:-30%;right:-6%;width:min(880px,88vw);
  background:radial-gradient(closest-side,
    rgba(var(--sda-caramel),1),
    rgba(var(--sda-caramel),.62) 46%,
    transparent 70%);
  animation:sdaDriftA 8s var(--sda-ease) infinite,
            sdaBreath 8.5s ease-in-out infinite;
}
.page-hero::after{
  bottom:-38%;left:-8%;width:min(820px,84vw);
  background:radial-gradient(closest-side,
    rgba(var(--sda-mauve),.9),
    rgba(var(--sda-mauve),.44) 48%,
    transparent 70%);
  animation:sdaDriftB 11s var(--sda-ease) infinite,
            sdaBreath 11s ease-in-out infinite reverse;
}
.page-hero>*{position:relative;z-index:1}

/* Titres renforcés sur fonds clairs (ratio WCAG même sous halo) */
.page-hero--cream h1,
.page-hero--orange h1,
.page-hero:not([class*="page-hero--"]) h1{color:var(--brown-dk)!important}

/* ── Variante ORANGE (fond #deb377) : or lumineux + mauve ───── */
.page-hero--orange::before{
  background:radial-gradient(closest-side,
    rgba(var(--sda-gold),.95),
    rgba(var(--sda-gold),.45) 44%,
    transparent 72%);
  mix-blend-mode:screen;
}
/* screen-blend : le halo ECLAIRCIT le fond orange -> contraste du
   titre sombre AMELIORE (jamais assombri). Teinte mauve->rose chaud. */
.page-hero--orange::after{
  background:radial-gradient(closest-side,
    rgba(var(--sda-caramel),.75),
    rgba(var(--sda-mauve),.34) 48%,
    transparent 72%);
  mix-blend-mode:screen;
}
/* Titre orange : brun le plus profond pour marge WCAG confortable */
.page-hero--orange h1{color:var(--brown-dk)!important;text-shadow:0 1px 0 rgba(248,238,210,.35)}

/* ── Variantes SOMBRES (brown / dark) : lueurs or + mauve ───── */
.page-hero--brown::before,
.page-hero--dark::before{
  top:-28%;right:-4%;width:min(760px,86vw);
  background:radial-gradient(closest-side,
    rgba(var(--sda-gold),.92),
    rgba(var(--sda-caramel),.44) 46%,
    transparent 72%);
  mix-blend-mode:screen;
}
.page-hero--brown::after,
.page-hero--dark::after{
  bottom:-32%;left:-4%;width:min(720px,84vw);
  background:radial-gradient(closest-side,
    rgba(var(--sda-mauve),.95),
    rgba(var(--sda-caramel),.40) 48%,
    transparent 72%);
  mix-blend-mode:screen;
}
/* Voile sombre PLEIN derriere le bloc texte des heros sombres :
   couvre uniformement toute la zone titre (le halo or derive
   top-right et passait derriere le titre or -> pic or-sur-or a
   1.77 en mobile 390). Voile plat = contraste garanti partout ;
   les halos restent visibles dans les marges hors bloc texte. */
.page-hero--brown>*::before,
.page-hero--dark>*::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-60% -28%;
  background:radial-gradient(ellipse 80% 80% at 32% 46%,
    rgba(15,7,2,.88) 0%, rgba(15,7,2,.64) 38%,
    rgba(15,7,2,.24) 62%, transparent 78%);
}

/* ═══ 3. PROFILE-HERO (fiches consultants, fond cream) ════════ */
.profile-hero{position:relative;overflow:hidden}
.profile-hero::before,
.profile-hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(860px,90vw);aspect-ratio:1;inset:auto;
  will-change:transform,opacity;
}
.profile-hero::before{
  top:-58%;right:-12%;
  background:radial-gradient(closest-side,
    rgba(var(--sda-caramel),.98),
    rgba(var(--sda-caramel),.52) 44%,
    transparent 66%);
  animation:sdaDriftA 8s var(--sda-ease) infinite,
            sdaBreath 8.5s ease-in-out infinite;
}
.profile-hero::after{
  bottom:-72%;left:-14%;
  background:radial-gradient(closest-side,
    rgba(var(--sda-mauve),.74),
    rgba(var(--sda-mauve),.36) 46%,
    transparent 66%);
  animation:sdaDriftB 11s var(--sda-ease) infinite,
            sdaBreath 11s ease-in-out infinite reverse;
}
.profile-hero>*{position:relative;z-index:1}

/* ═══ 4. REDUCED MOTION : halos statiques, zéro animation ═════ */
@media (prefers-reduced-motion:reduce){
  .hero:has(.hero-bg-img)::before,.hero:has(.hero-bg-img)::after,
  .page-hero::before,.page-hero::after,
  .profile-hero::before,.profile-hero::after{
    animation:none!important;opacity:.7;
  }
}

/* ═══ 5. MOBILE : halos réduits, jamais de débordement ════════ */
@media (max-width:640px){
  .hero:has(.hero-bg-img)::before,.hero:has(.hero-bg-img)::after,
  .page-hero::before,.page-hero::after,
  .profile-hero::before,.profile-hero::after{
    width:min(420px,120vw);
  }
}