/* =========================================================
   SPITFIRE PROJECT — Webb.css (Clean + organisé)
   - Design : dark / gold, glass, animations propres
   - Pages : HOME, EYZEN, PROJETS, DONS, CONTACT
   ========================================================= */

/* -----------------------------
   0) VARIABLES / THEME
------------------------------ */
:root{
  --bg: #07080b;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --gold: #c49b63;
  --gold2: #d6b07a;

  --glass: rgba(0,0,0,.52);
  --glass2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);

  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --shadow2: 0 18px 60px rgba(0,0,0,.42);

  --r-lg: 26px;
  --r-md: 18px;
  --r-pill: 999px;

  --nav-h: 80px;
}

/* -----------------------------
   1) RESET / BASE
------------------------------ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  color: var(--text);
  font: 16px/1.55 Arial, Helvetica, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
a{ color: inherit; }
img{ max-width: 100%; height: auto; display:block; }
::selection{ background: rgba(196,155,99,.35); }

/* Fond par page (tu gardes tes images) */
body.HOME{ background: url("../IMAGES/BACKGROUND/ciel.png") center/cover fixed no-repeat; }
body.HOME-PROJETS{ background: url("../IMAGES/BACKGROUND/ciel2.png") center/cover fixed no-repeat; }
body.contact{ background: url("../IMAGES/BACKGROUND/ciel3.png") center/cover fixed no-repeat; }
body.shop{ background: url("../IMAGES/BACKGROUND/ciel4.png") center/cover fixed no-repeat; }
body.eyzen{ background: url("../IMAGES/BACKGROUND/ciel5.png") center/cover fixed no-repeat; }

/* Canvas FX (optionnel, utilisé sur Home/Projets) */
.fx-canvas{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  filter: blur(.0px);
}

/* Quand l'intro est active : on bloque le scroll + on cache la nav derrière */
body.intro-active{
  overflow: hidden;
}
body.intro-active .NAVIGATION{
  transform: translateY(-110%);
  opacity: 0;
}

/* -----------------------------
   2) NAVIGATION (COMMUNE)
------------------------------ */
.NAVIGATION{
  position: fixed;
  top:0; left:0;
  width:100%;
  height: var(--nav-h);
  z-index: 1200;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 28px;

  padding: 14px 40px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease;
}

.NAVIGATION .logo{ width: 200px; height: 40px; display:flex; align-items:center; }
.NAVIGATION .logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
  transition: transform .25s ease, filter .25s ease;
}
.NAVIGATION .logo-img:hover{
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.7));
}

.NAVIGATION .nav-container{ display:flex; align-items:center; gap: 24px; }
.NAVIGATION .nav-links{
  display:flex;
  align-items:center;
  gap: 24px;
}
.NAVIGATION .nav-links a{
  text-decoration:none;
  font-size: 18px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.88);
  position: relative;
  padding: 6px 2px;
  transition: color .25s ease;
}
.NAVIGATION .nav-links a:hover{ color: var(--gold); }
.NAVIGATION .nav-links a.active{ color: var(--gold); }

.NAVIGATION .nav-links a.active::after,
.NAVIGATION .nav-links a:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .95;
}

.btn-music{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  color: white;
  cursor:pointer;
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}
.btn-music:hover{
  transform: translateY(-1px) scale(1.08);
  background: rgba(196,155,99,.20);
  border-color: rgba(196,155,99,.45);
}

/* -----------------------------
   3) OVERLAYS / TRANSITIONS
------------------------------ */

/* Page overlay (fade in/out) */
#page-overlay{
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 700px at 50% 30%, rgba(196,155,99,.15), transparent 55%),
              rgba(0,0,0,.72);
  z-index: 1500;
  opacity: 1;
  transition: opacity .65s ease;
  pointer-events: none;
}

/* Intro overlay (HOME) */
.intro{
  position: fixed;
  inset: 0;
  z-index: 1600;
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 520px at 30% 30%, rgba(196,155,99,.22), transparent 60%),
    radial-gradient(1100px 700px at 70% 55%, rgba(255,255,255,.08), transparent 55%),
    rgba(0,0,0,.92);
  overflow:hidden;
}
.intro-inner{
  text-align:center;
  padding: 30px 18px;
  width: min(680px, 92vw);
  position: relative;
  z-index: 2;
}
.intro-logo{
  width: min(420px, 72vw);
  margin: 0 auto 14px;
  filter: drop-shadow(0 25px 70px rgba(0,0,0,.65));
  animation: introFloat 3.8s ease-in-out infinite;
}
.intro-tagline{
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  margin-bottom: 20px;
}
.intro-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 16px 44px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #080808;
  border: none;
  font-weight: 900;
  letter-spacing: 4px;
  cursor:pointer;
  box-shadow: 0 25px 90px rgba(196,155,99,.28);
  transition: transform .25s ease, filter .25s ease;
}
.intro-btn:hover{ transform: translateY(-2px) scale(1.04); filter: brightness(1.05); }
.intro-sub{
  margin-top: 18px;
  color: rgba(255,255,255,.68);
  letter-spacing: 2px;
  font-size: 13px;
}
.intro-noise{
  position:absolute;
  inset:-20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: .12;
  mix-blend-mode: overlay;
  animation: noiseMove 7s linear infinite;
}
.intro.hide{
  animation: introOut .7s ease forwards;
}
@keyframes introOut{
  to{ opacity:0; transform: scale(1.02); pointer-events:none; }
}
@keyframes introFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes noiseMove{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-8%, -12%, 0); }
}

/* -----------------------------
   4) COMPONENTS
------------------------------ */
.section-pad{ padding: 110px 0; }
.glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow2);
}
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 16px 40px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: 3px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.btn-pill:hover{
  transform: translateY(-2px) scale(1.04);
  background: rgba(196,155,99,.18);
  border-color: rgba(196,155,99,.45);
}
.gold{ color: var(--gold); }

/* Reveal (utilisé par JS) */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s ease, transform .85s ease;
  will-change: opacity, transform;
}
.visible{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* -----------------------------
   5) HOME
------------------------------ */
/* ✅ (note) La vraie correction de centrage est en bas du fichier (FIXES) */

.TITRE-HAUT{
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + 20px);
  position: relative;
  z-index: 1;
}
.TITRE-HAUT::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(196,155,99,.22), transparent 60%),
    radial-gradient(900px 520px at 80% 55%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.25));
  pointer-events:none;
  z-index: -1;
}
.TITRE-Intérieur h1{
  font-size: clamp(56px, 6.6vw, 118px);
  line-height: .95;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0 30px 110px rgba(0,0,0,.60);
}
.TITRE-Intérieur h1::after{
  content:"";
  position:absolute;
  bottom:-16px; left:0;
  width: 140px; height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .95;
}
.script{
  font-family: cursive;
  font-size: clamp(28px, 4vw, 66px);
  display:inline-block;
  opacity: 0;
  animation: fadeInUp .9s ease forwards;
  animation-delay: .2s;
}
.TITRE-IMAGE img{
  width: min(560px, 92vw);
  border-radius: 22px;
  box-shadow: var(--shadow);
  transform: translateZ(0);
  animation: floatSoft 5.2s ease-in-out infinite;
}
@keyframes floatSoft{
  0%,100%{ transform: translateY(0) rotate(-.2deg); }
  50%{ transform: translateY(-14px) rotate(.2deg); }
}

/* Bouton HOME (utilise .btn bootstrap dans HTML => on force style propre) */
a.btn{
  border: none;
  border-radius: var(--r-pill);
  padding: 18px 44px;
  letter-spacing: 3px;
  font-weight: 900;
  background: rgba(0,0,0,.70);
  color: rgba(255,255,255,.95);
  box-shadow: 0 25px 90px rgba(0,0,0,.35);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
a.btn:hover{
  background: var(--gold);
  color: #090909;
  transform: translateY(-2px) scale(1.04);
}

/* HOME sections */
.PROJET, .DON-preview, .CONTACT-preview{
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,.45);
}
.PROJET{ padding: 110px 0; }
.PROJET .clickable-img{
  width: min(380px, 92vw);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  transition: transform .25s ease, opacity .25s ease;
}
.PROJET-TEXT h2{
  font-size: clamp(32px, 4.2vw, 56px);
  margin-bottom: 14px;
}
.PROJET-TEXT span{ color: var(--gold); }
.PROJET-TEXT ul{ padding-left:0; margin:0; }
.PROJET-TEXT li{ list-style:none; color: rgba(255,255,255,.78); }

.DON-preview{ padding: 110px 0; background: rgba(0,0,0,.38); }
.DON-text h2{ font-size: clamp(32px, 4.2vw, 56px); color: var(--gold); }
.DON-text p{ color: rgba(255,255,255,.80); max-width: 520px; }
.DON-image img{ border-radius: 22px; box-shadow: var(--shadow2); }

.CONTACT-preview{ padding: 110px 0; background: rgba(0,0,0,.52); }
.CONTACT-box{
  border-radius: var(--r-lg);
  padding: 48px 40px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(196,155,99,.35);
  box-shadow: var(--shadow2);
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.CONTACT-box:hover{
  transform: translateY(-6px);
  background: rgba(196,155,99,.10);
  border-color: rgba(196,155,99,.55);
}

/* -----------------------------
   6) EYZEN
------------------------------ */
.artist-hero{
  min-height: 72vh;
  padding-top: calc(var(--nav-h) + 18px);
  position: relative;
  z-index: 1;
  overflow:hidden;
}

.hero-img-container{
  position:absolute;
  inset:0;
  z-index:0;
  opacity: .22;
  filter: blur(0px);
}
.hero-img-container img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.05);
}
.artist-hero h1{
  font-size: clamp(52px, 7vw, 96px);
  letter-spacing: 6px;
  text-shadow: 0 30px 100px rgba(0,0,0,.65);
  position: relative;
  z-index: 1;
}
.artist-hero p{
  color: rgba(255,255,255,.85);
  font-size: 18px;
  position: relative;
  z-index: 1;
}

.artist-bio{
  padding: 110px 0;
}
.artist-bio-image img{
  width: min(440px, 92vw);
  border-radius: 22px;
  box-shadow: var(--shadow2);
  transition: transform .25s ease;
}
.artist-bio-image img:hover{ transform: translateY(-2px) scale(1.03); }
.artist-bio-text h2{ color: var(--gold); font-size: clamp(28px, 4.2vw, 54px); }
.artist-bio-text p{ color: rgba(255,255,255,.80); }

.artist-links{ padding: 90px 0 110px; }
.artist-link.btn{
  border-radius: var(--r-pill) !important;
  letter-spacing: 2px;
  font-weight: 900;
}

/* -----------------------------
   7) PROJETS
------------------------------ */
.projects-section{
  padding: 110px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78));
}
.projet-feature{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  padding: 44px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow2);
}
.projet-feature img{
  border-radius: 22px;
  box-shadow: var(--shadow2);
}
.btn-feature{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 42px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #090909;
  font-weight: 900;
  letter-spacing: 2px;
  text-decoration:none;
  transition: transform .25s ease, filter .25s ease, background .25s ease;
}
.btn-feature:hover{ transform: translateY(-2px) scale(1.04); filter: brightness(1.05); }

.project-card{
  text-decoration:none;
  color: white;
  max-width: 280px;
  display:block;
  border-radius: 22px;
  transition: transform .25s ease, filter .25s ease;
}
.project-card img{
  border-radius: 22px;
  aspect-ratio: 1;
  box-shadow: var(--shadow2);
}
.project-card:hover{
  transform: translateY(-10px) rotate(.2deg);
  filter: brightness(1.06);
}

/* -----------------------------
   8) CONTACT
------------------------------ */
.contact-section{
  min-height: 100vh;
  padding: calc(var(--nav-h) + 70px) 20px 90px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-box{
  width: min(520px, 92vw);
  padding: 50px;
  border-radius: var(--r-lg);
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.contact-box h1{ font-size: 48px; letter-spacing: 6px; margin-bottom: 10px; }
.contact-box p{ color: rgba(255,255,255,.76); margin-bottom: 26px; }
.contact-box input,
.contact-box textarea{
  width:100%;
  padding: 15px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid rgba(196,155,99,.35);
  background: rgba(255,255,255,.05);
  color: white;
  outline: none;
}
.contact-box button{
  width:100%;
  padding: 16px 18px;
  border-radius: var(--r-pill);
  border:none;
  background: var(--gold);
  color: #090909;
  font-weight: 900;
  letter-spacing: 3px;
  transition: transform .25s ease, filter .25s ease;
}
.contact-box button:hover{ transform: translateY(-2px) scale(1.02); filter: brightness(1.05); }
.contact-info strong{ color: var(--gold); }

/* -----------------------------
   9) DONS (Impact) — repris + compatible
------------------------------ */
/* (inchangé — ton code dons ici) */
.don-hero{
  min-height: 100vh;
  padding: 120px 0 70px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
/* ... (reste inchangé) ... */

/* -----------------------------
   10) FOOTER (COMMUN)
------------------------------ */
footer{
  background: rgba(0,0,0,.85);
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  padding: 55px 0;
  position: relative;
  z-index: 1;
}
footer h4{ color: var(--gold); margin-bottom: 12px; letter-spacing: 2px; }
footer p{ margin: 4px 0; }

/* -----------------------------
   11) ANIMATIONS UTILES
------------------------------ */
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(26px); }
  to{ opacity:1; transform: translateY(0); }
}

/* -----------------------------
   12) RESPONSIVE
------------------------------ */
@media (max-width: 900px){
  .NAVIGATION{ padding: 12px 18px; }
  .NAVIGATION .logo{ width: 150px; }
  .NAVIGATION .nav-links a{ font-size: 16px; letter-spacing: 1px; }
  .projet-feature{ padding: 28px; }
}

@media (max-width: 600px){
  .NAVIGATION{ height: 74px; }
  :root{ --nav-h: 74px; }
  a.btn{ padding: 16px 32px; }
  .contact-box{ padding: 36px 22px; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal, .intro-logo, .TITRE-IMAGE img, .btn-don.pulse, .don-hero .hero-glow, .scroll-mouse::after{
    transition:none !important;
    animation:none !important;
  }
}

/* =========================================================
   FIXES — HOME / EYZEN / PROJETS (match HTML réel)
   (Important : conserve bien l'overlay INTRO + bouton Entrer)
   Colle / garde ça en bas pour override tout le reste.
   ========================================================= */

/* HOME : centrer parfaitement au milieu de l’écran */
.TITRE-HAUT{
  padding-top: var(--nav-h);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.TITRE-HAUT .container{
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
}
.TITRE-HAUT .row{
  width: 100%;
  align-items: center;
}
.TITRE-Intérieur{ text-align: center; }
.TITRE-Intérieur h1::after{
  left: 50%;
  transform: translateX(-50%);
}

/* EYZEN : enlever l’image “moche” derrière + titre visible */
/* ✅ EYZEN : garder ton fond ciel5.png + overlay dark propre */
body.eyzen{
  background: url("../IMAGES/BACKGROUND/ciel5.png") center/cover fixed no-repeat !important;
  position: relative;
}
/* Remonte le contenu au-dessus de l'overlay */
body.eyzen > *:not(.fx-canvas){
  position: relative;
  z-index: 1;
}

.artist-hero{
  min-height: 70vh;
  padding-top: calc(var(--nav-h) + 40px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.artist-hero h1{
  margin: 0 !important;
  font-size: clamp(60px, 8vw, 110px);
  letter-spacing: 10px;
  text-shadow: 0 30px 100px rgba(0,0,0,.75);
  text-align: center;
}
.artist-hero p{
  margin-top: 14px !important;
  opacity: .9;
  text-align: center;
}

/* PROJETS : titre visible (hero = .SHOP-TITRE) */
.SHOP-TITRE{
  min-height: 45vh;
  padding-top: calc(var(--nav-h) + 70px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.20)) !important;
}
.SHOP-TITRE h1{
  font-size: clamp(50px, 7vw, 90px);
  text-shadow: 0 0 20px rgba(0,0,0,0.7);
  margin-bottom: 10px !important;
  text-align: center;
}
.SHOP-TITRE p{
  font-size: 18px;
  opacity: .85;
  text-align: center;
}


/* =========================================================
   V4 PATCH — EYZEN cadres + titre plus haut / DONS réparé
   (colle en bas, override safe)
   ========================================================= */

/* -----------------------------
   EYZEN — Titre plus haut + cadres (glass)
------------------------------ */
/* Le hero doit être visible et un peu plus haut (comme autres pages) */
body.eyzen{
  position: relative;
}
body.eyzen::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 0;
  pointer-events: none;
}
body.eyzen > *:not(.fx-canvas){
  position: relative;
  z-index: 1;
}

/* Hero : on aligne en haut, mais on garde un beau centrage horizontal */
.artist-hero{
  min-height: 62vh !important;
  padding-top: calc(var(--nav-h) + 70px) !important;
  padding-bottom: 60px;
  display: flex;
  align-items: flex-start !important;
  justify-content: center;
}

/* Cadre glass pour le hero */
.artist-hero .container{
  width: min(980px, 92vw);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  padding: 56px 28px;
}

.artist-hero h1{
  font-size: clamp(56px, 7.5vw, 108px) !important;
  letter-spacing: 12px;
  margin-top: 0 !important;
  margin-bottom: 12px;
  text-align: center;
}

.artist-hero p{
  margin-top: 0 !important;
  opacity: .9;
  text-align: center;
}

/* Bio : cadre + spacing plus clean */
.artist-bio{
  padding: 90px 0 110px !important;
  background: transparent !important;
}
.artist-bio .container > .row{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(196,155,99,.22);
  backdrop-filter: blur(14px);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  padding: 34px;
}

/* Image bio plus premium */
.artist-bio-image img{
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.10);
}

/* Links : cadre */
.artist-links{
  padding: 70px 0 110px !important;
}
.artist-links .container{
  width: min(980px, 92vw);
  background: rgba(0,0,0,.52);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.40);
  padding: 40px 26px;
}

/* -----------------------------
   DONS — réparer (style “première version” propre + compatible)
   (ta page utilise : don-hero, don-why, don-faq, glass-card, btn-don, btn-contact…)
------------------------------ */

/* HERO */
.don-hero{
  min-height: 100vh;
  padding: calc(var(--nav-h) + 70px) 0 70px !important;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.don-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 25% 25%, rgba(196,155,99,.18), transparent 60%),
    radial-gradient(900px 520px at 75% 55%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  pointer-events:none;
}
.don-hero .container{ position: relative; z-index: 2; }

.hero-glow{
  position:absolute;
  inset:-35% -25%;
  background:
    radial-gradient(600px 380px at 30% 30%, rgba(196,155,99,0.18), transparent 60%),
    radial-gradient(850px 520px at 70% 55%, rgba(255,255,255,0.06), transparent 55%);
  filter: blur(12px);
  pointer-events:none;
  opacity: .9;
  z-index: 1;
}

.don-title{
  font-size: clamp(40px, 5.8vw, 86px);
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-shadow: 0 25px 80px rgba(0,0,0,.65);
  margin-bottom: 16px;
}
.don-lead{
  max-width: 900px;
  margin: 0 auto;
  font-size: 18px;
  opacity: .9;
}

/* Boutons dons */
.btn-don{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 18px 46px;
  border-radius: 999px;
  background: var(--gold);
  color: #090909;
  font-weight: 900;
  letter-spacing: 3px;
  text-decoration:none;
  border: none;
  cursor: pointer;
  box-shadow: 0 25px 90px rgba(196,155,99,0.24);
  transition: transform .25s ease, filter .25s ease, background .25s ease;
}
.btn-don:hover{ transform: translateY(-2px) scale(1.04); filter: brightness(1.05); }
.btn-don:active{ transform: translateY(0) scale(0.99); }

.btn-don.outline{
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(196,155,99,0.35);
  box-shadow: 0 25px 90px rgba(0,0,0,0.35);
}
.btn-don.outline:hover{
  background: rgba(196,155,99,.18);
  border-color: rgba(196,155,99,0.55);
}

/* Petits badges */
.don-badges{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.badge-soft{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(196,155,99,0.25);
  background: rgba(0,0,0,0.40);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  letter-spacing: 1px;
}

/* Scroll hint */
.don-scroll{ display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.85; }
.scroll-label{ letter-spacing: 4px; text-transform: uppercase; font-size: 12px; }
.scroll-mouse{
  width: 26px; height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.45);
  position: relative;
}
.scroll-mouse::after{
  content:"";
  position:absolute;
  left:50%; top:10px;
  width:4px; height:4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  transform: translateX(-50%);
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{
  0%,100%{ transform: translateX(-50%) translateY(0); opacity: .9; }
  60%{ transform: translateX(-50%) translateY(14px); opacity: .2; }
}

/* Sections DONS */
.don-why, .don-faq{
  padding: 90px 0;
  background: rgba(0,0,0,.40);
}
.don-faq{ background: rgba(0,0,0,.52); }

/* Cartes glass utilisées dans DONS.html */
.glass-card{
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}
.section-title{
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.section-sub{ opacity: .85; }
.don-list{
  list-style: none;
  padding-left: 0;
  margin: 18px 0 18px;
}
.don-list li{ padding: 6px 0; opacity: .92; }
.small-muted{ opacity: .78; }

/* FAQ items glass */
.faq-item{
  background: rgba(0,0,0,0.50) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.faq-item .accordion-button{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
}
.accordion-button:not(.collapsed){
  background: rgba(196,155,99,.10) !important;
  color: rgba(255,255,255,.98) !important;
}
.faq-item .accordion-body{
  color: rgba(255,255,255,0.92) !important;
  font-size: 15px;
  line-height: 1.6;
}
.accordion-item{ border: none !important; }
.accordion-button::after{ filter: invert(1); }

/* Bouton contact DONS */
.btn-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 34px;
  border-radius: 999px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  letter-spacing: 2px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.btn-contact:hover{
  transform: translateY(-2px) scale(1.03);
  background: rgba(196,155,99,.18);
  border-color: rgba(196,155,99,.45);
}