/* ============================================================
   ELnet — Peau v3 (déclinaison de l'accueil cinématique)
   Chargée APRÈS styles.css sur toutes les pages intérieures.
   Elle n'écrase que les couleurs et le « chrome » (header,
   heros, sections sombres, footer) — aucun composant retouché.
   ============================================================ */

/* Palette alignée sur l'accueil v3 : charbon plus profond, bleu plus lumineux */
:root{
  --ink:#0E1116;
  --ink-2:#131820;
  --ink-3:#1a212b;
  --blue:#3F9BE0;
  --blue-glow:rgba(63,155,224,.45);
}

/* ---------- Header : verre plus profond (identique accueil) ---------- */
.header-inner{background:rgba(14,17,22,.62)}
.header.scrolled .header-inner{background:rgba(11,14,19,.86);box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* Pastille « 4,9 Avis Google » : liseré doré permanent (comme l'accueil) */
.header-cta .hdr-reviews{border-color:rgba(245,166,35,.42)}
.header-cta .hdr-reviews:hover{border-color:#F5A623;background:rgba(245,166,35,.14)}
.header-cta .hdr-reviews .star{color:#F5A623}

/* ---------- Heros de pages : ambiance spatiale (aurora + grain) ---------- */
.page-hero,.article-hero{background:
  radial-gradient(120% 78% at 50% 0,#1a2536 0,transparent 48%),
  radial-gradient(80% 70% at 90% 100%,#112a2b 0,transparent 55%),
  var(--ink)}
.page-hero .hero-bg::before{content:"";position:absolute;top:-30%;left:-10%;width:120%;height:120%;
  background:conic-gradient(from 0deg at 50% 40%,rgba(63,155,224,0),rgba(63,155,224,.20),rgba(47,183,176,.18),rgba(46,134,235,.14),rgba(63,155,224,0));
  filter:blur(90px);opacity:.6;animation:v3spin 40s linear infinite;pointer-events:none}
@keyframes v3spin{to{transform:rotate(360deg)}}
.page-hero .hero-bg::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.page-hero .grid-overlay{opacity:.18}

/* ---------- Ciel étoilé scintillant sur les heros sombres ----------
   (version calme : les étoiles filantes restent réservées à l'accueil) */
.page-hero::after,.article-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='680'%3E%3Cg fill='%23dcecff'%3E%3Ccircle cx='60' cy='90' r='1.6' opacity='.9'/%3E%3Ccircle cx='240' cy='40' r='1.3' opacity='.7'/%3E%3Ccircle cx='430' cy='120' r='1.7' opacity='.85'/%3E%3Ccircle cx='600' cy='70' r='1.2' opacity='.6'/%3E%3Ccircle cx='150' cy='300' r='1.5' opacity='.8'/%3E%3Ccircle cx='360' cy='260' r='1.2' opacity='.6'/%3E%3Ccircle cx='560' cy='330' r='1.6' opacity='.85'/%3E%3Ccircle cx='80' cy='520' r='1.3' opacity='.65'/%3E%3Ccircle cx='300' cy='470' r='1.7' opacity='.9'/%3E%3Ccircle cx='500' cy='560' r='1.2' opacity='.6'/%3E%3Ccircle cx='640' cy='480' r='1.4' opacity='.75'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23bfd9f6'%3E%3Ccircle cx='23' cy='47' r='.9' opacity='.7'/%3E%3Ccircle cx='87' cy='15' r='.7' opacity='.5'/%3E%3Ccircle cx='140' cy='90' r='1' opacity='.75'/%3E%3Ccircle cx='200' cy='30' r='.8' opacity='.55'/%3E%3Ccircle cx='260' cy='70' r='.9' opacity='.65'/%3E%3Ccircle cx='330' cy='20' r='.7' opacity='.5'/%3E%3Ccircle cx='390' cy='60' r='1' opacity='.7'/%3E%3Ccircle cx='60' cy='140' r='.8' opacity='.55'/%3E%3Ccircle cx='180' cy='170' r='.9' opacity='.65'/%3E%3Ccircle cx='300' cy='150' r='.7' opacity='.5'/%3E%3Ccircle cx='380' cy='190' r='1' opacity='.75'/%3E%3Ccircle cx='40' cy='230' r='.9' opacity='.6'/%3E%3Ccircle cx='150' cy='260' r='.7' opacity='.5'/%3E%3Ccircle cx='250' cy='300' r='1' opacity='.7'/%3E%3Ccircle cx='350' cy='270' r='.8' opacity='.55'/%3E%3Ccircle cx='90' cy='330' r='.9' opacity='.65'/%3E%3Ccircle cx='210' cy='380' r='.8' opacity='.5'/%3E%3Ccircle cx='320' cy='360' r='.9' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  animation:v3twinkle 6s ease-in-out infinite}
@keyframes v3twinkle{0%,100%{opacity:.55}50%{opacity:.95}}

/* ---------- Vagues animées ELnet (identiques accueil) ---------- */
.wave-anim{position:absolute;left:0;right:0;bottom:-1px;height:clamp(58px,8vw,108px);overflow:hidden;z-index:1;pointer-events:none}
.wave-anim svg{position:absolute;bottom:0;left:0;width:4320px;max-width:none;height:100%;animation:waveMove 20s linear infinite;will-change:transform}
.wave-anim .w-back{fill:rgba(63,155,224,.62);animation-duration:34s;animation-direction:reverse;bottom:12px}
.wave-anim .w-mid{fill:rgba(53,198,207,.6);animation-duration:26s;bottom:6px}
.wave-anim.to-light .w-front{fill:#F4F7FA}
.wave-anim.to-white .w-front{fill:#FFFFFF}
.wave-anim.to-dark .w-front{fill:#0E1116}
@keyframes waveMove{to{transform:translateX(-1440px)}}

/* ---------- Sections sombres & footer : alignés sur l'accueil ---------- */
.dark-section{background:radial-gradient(70% 60% at 15% 6%,#12262a 0,transparent 55%),var(--ink)}
.footer{background:#0A0D12}

@media (prefers-reduced-motion:reduce){
  .page-hero .hero-bg::before{animation:none}
  .page-hero::after,.article-hero::after{animation:none}
  .wave-anim svg{animation:none}
}