/* ===================================================================
   ASCENSION — HABILLAGE HALLOWEEN
   Pose le 2026-10-17, palette « Citrouille », validee par Zephyr.

   ⛔ CE FICHIER NE REMPLACE RIEN. Il se charge APRES ascension.css et
      se contente de redefinir ses variables et d'ajouter le decor.
      Pour retirer l'habillage en novembre, il suffit de supprimer,
      dans inc/entete.php :
         - la ligne <link ... href="/assets/halloween.css">
         - le bloc <div class="hw-decor"> ... </div> et les deux toiles
         - le bloc <div class="hw-coulure"> apres </header>
         - les deux entrees de menu 'presentation' et 'halloween'
      Rien d'autre n'a ete touche dans le site.
   =================================================================== */

/* ---------------------------------------------------------- palette
   On redefinit les variables D'ASCENSION.CSS : tout le site suit,
   y compris les pages qu'on n'a pas ouvertes. */
:root{
  --laque:#0A0708;
  --surface:#17100D;
  --surface-haute:#1F1611;
  --trait:#3A2518;
  --trait-vif:#6B3C19;
  --ambre:#FF8A2B;
  --or:#FFC472;
  --texte:#F3E7DA;
  --doux:#A3897A;
  --sang:#B4472F;
  --jade:#7FE3C0;
  /* propre a l'habillage : la couleur des halos, en composantes RVB */
  --halo:255,138,43;
}

/* ascension.css porte quelques ambres ecrits en dur : on les rattrape. */
.titre-apercu:hover{background:rgba(255,138,43,.09)}
.titre-apercu:focus-visible{outline-color:#FF8A2B}

/* ---------------------------------------------------------- decor
   Le decor est en position fixe au fond. On remonte tout le reste du
   corps au-dessus : sans ca, l'en-tete et les sections passeraient
   dessous. :not() vise les deux couches de decor, rien d'autre. */
body > *:not(.hw-decor):not(.hw-toile){position:relative;z-index:2}

.hw-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.hw-lune{
  position:absolute;top:56px;right:7vw;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#FFE2B0,#9d8c6e 72%,#6b5f4a);
  box-shadow:0 0 70px 18px rgba(var(--halo),.18),0 0 180px 60px rgba(var(--halo),.10);
  animation:hw-respire 7s ease-in-out infinite;
}
.hw-lune::before,.hw-lune::after{content:"";position:absolute;border-radius:50%;background:rgba(0,0,0,.09)}
.hw-lune::before{width:26px;height:26px;top:28px;left:26px}
.hw-lune::after{width:16px;height:16px;top:66px;left:62px;box-shadow:22px -26px 0 -3px rgba(0,0,0,.08)}
@keyframes hw-respire{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

.hw-nuage{
  position:absolute;height:40px;border-radius:40px;filter:blur(9px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055) 18%,
             rgba(255,255,255,.085) 50%,rgba(255,255,255,.055) 82%,transparent);
}
.hw-nuage.n1{top:72px;width:420px;left:-460px;animation:hw-derive 46s linear infinite}
.hw-nuage.n2{top:130px;width:620px;left:-680px;animation:hw-derive 72s linear infinite 9s;opacity:.7}
.hw-nuage.n3{top:34px;width:300px;left:-340px;animation:hw-derive 58s linear infinite 22s;opacity:.55}
@keyframes hw-derive{to{transform:translateX(calc(100vw + 700px))}}

.hw-brume{
  position:absolute;left:-50%;width:200%;height:300px;bottom:-60px;filter:blur(26px);
  background:radial-gradient(ellipse 50% 60% at 20% 70%,rgba(var(--halo),.07),transparent 60%),
             radial-gradient(ellipse 45% 55% at 62% 80%,rgba(var(--halo),.05),transparent 60%),
             radial-gradient(ellipse 40% 50% at 88% 65%,rgba(var(--halo),.06),transparent 60%);
}
.hw-brume.b1{animation:hw-glisse 38s ease-in-out infinite alternate}
.hw-brume.b2{bottom:30px;height:220px;opacity:.6;animation:hw-glisse 56s ease-in-out infinite alternate-reverse}
@keyframes hw-glisse{to{transform:translateX(9%)}}

.hw-braise{
  position:absolute;bottom:-14px;width:3px;height:3px;border-radius:50%;
  background:var(--ambre);box-shadow:0 0 7px 2px rgba(var(--halo),.55);
  animation:hw-monte linear infinite;
}
@keyframes hw-monte{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  12%{opacity:.9}
  100%{transform:translate(var(--dx,0),-104vh) scale(1.05);opacity:0}
}

.hw-chauve{position:absolute;width:34px;animation:hw-vole linear infinite}
.hw-chauve svg{width:100%;display:block;color:#0d0a0c;filter:drop-shadow(0 0 5px rgba(0,0,0,.6))}
.hw-aile{transform-origin:50% 50%;animation:hw-bat .34s ease-in-out infinite alternate}
.hw-aile.d{animation-delay:.02s}
@keyframes hw-bat{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(.32) rotate(-7deg)}}
@keyframes hw-vole{
  0%{transform:translate(-80px,0) scale(.8);opacity:0}
  8%{opacity:.85}
  50%{transform:translate(48vw,-70px) scale(1.05)}
  92%{opacity:.85}
  100%{transform:translate(104vw,22px) scale(.75);opacity:0}
}

.hw-toile{position:fixed;width:160px;opacity:.24;z-index:1;pointer-events:none;color:var(--doux)}
.hw-toile.tg{top:0;left:0}
.hw-toile.td{top:0;right:0;transform:scaleX(-1)}

/* ---------------------------------------------------------- en-tete */
.blason img{
  filter:drop-shadow(0 0 9px rgba(var(--halo),.6));
  animation:hw-veilleuse 4.5s ease-in-out infinite;
}
@keyframes hw-veilleuse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(var(--halo),.5))}
  38%{filter:drop-shadow(0 0 16px rgba(var(--halo),.85))}
  44%{filter:drop-shadow(0 0 6px rgba(var(--halo),.35))}
  60%{filter:drop-shadow(0 0 14px rgba(var(--halo),.75))}
}
/* L'entrée Halloween s'allume. On la vise par son adresse plutôt que par
   une classe : la boucle du menu d'entete.php n'a ainsi pas à être
   touchée, et l'entrée reprend son aspect normal le jour où on retire la
   page du tableau $menu. */
.menu a[href="/halloween.php"]{color:var(--ambre)}
.menu a[href="/halloween.php"]:hover{color:var(--or)}

.hw-coulure{position:relative;z-index:9;height:0}
.hw-coulure svg{display:block;width:100%;height:28px;color:var(--sang);opacity:.85}
.hw-goutte{animation:hw-tombe 4.2s ease-in infinite}
.hw-goutte.g2{animation-duration:6.1s;animation-delay:1.4s}
.hw-goutte.g3{animation-duration:5.2s;animation-delay:2.7s}
@keyframes hw-tombe{
  0%,62%{transform:translateY(0);opacity:0}
  70%{opacity:1}
  100%{transform:translateY(46px);opacity:0}
}

/* le heros de l'accueil prend la nuit */
.heros::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 80% at 50% 40%,transparent,rgba(0,0,0,.45) 75%);
}
.heros h1 .hw-vacille{display:inline-block;animation:hw-vacille 5.5s linear infinite}
@keyframes hw-vacille{
  0%,100%{opacity:1;text-shadow:0 0 22px rgba(var(--halo),.5)}
  41%{opacity:1}42%{opacity:.55;text-shadow:none}43%{opacity:1}
  58%{opacity:1}59%{opacity:.4;text-shadow:none}60.5%{opacity:1}
}

/* ---------------------------------------------------------- bandeau */
.hw-bandeau{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--surface-haute),var(--surface));
  border:1px solid var(--trait-vif);border-left:3px solid var(--ambre);
  border-radius:4px;padding:18px 22px;box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.hw-citrouille{width:46px;flex:0 0 46px;color:var(--ambre);animation:hw-balance 4s ease-in-out infinite}
@keyframes hw-balance{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.hw-bandeau h3{color:var(--or);margin:0 0 3px}
.hw-bandeau p{margin:0;color:var(--doux);font-size:14.5px}
.hw-minuteur{display:flex;gap:9px;margin-left:auto}
.hw-case{min-width:58px;text-align:center;background:var(--laque);border:1px solid var(--trait);border-radius:3px;padding:7px 9px}
.hw-case b{display:block;font-family:Cinzel,Georgia,serif;font-size:21px;color:var(--ambre);line-height:1}
.hw-case span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}

/* ---------------------------------------------------------- les tetes */
.hw-tete{
  position:relative;background:var(--surface);border:1px solid var(--trait);
  border-radius:4px;padding:26px;overflow:hidden;transition:all .35s cubic-bezier(.22,.61,.36,1);text-align:center;
}
.hw-tete::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(ellipse 60% 70% at 50% 110%,rgba(var(--halo),.22),transparent 70%);
}
.hw-tete:hover{transform:translateY(-5px);border-color:var(--trait-vif);box-shadow:0 22px 48px rgba(0,0,0,.5)}
.hw-tete:hover::before{opacity:1}
.hw-tete-ic{
  width:76px;height:76px;margin:0 auto 16px;position:relative;color:var(--ambre);
  animation:hw-flotte 5s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(var(--halo),.4));
}
.hw-tete:nth-child(2) .hw-tete-ic{animation-delay:.6s}
.hw-tete:nth-child(3) .hw-tete-ic{animation-delay:1.2s}
@keyframes hw-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hw-tete h3{color:var(--or);margin:0 0 9px;position:relative}
.hw-tete p{color:var(--doux);font-size:15px;position:relative;margin:0}

/* ---------------------------------------------------------- recompenses */
.hw-recompense{
  position:relative;display:flex;gap:22px;align-items:flex-start;
  background:linear-gradient(135deg,var(--surface-haute),var(--surface));
  border:1px solid var(--trait);border-radius:4px;padding:28px;overflow:hidden;
  transition:all .35s cubic-bezier(.22,.61,.36,1);
}
.hw-recompense::after{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--halo),.16),transparent 70%);
  animation:hw-respire 6s ease-in-out infinite;
}
.hw-recompense:hover{border-color:var(--ambre);box-shadow:0 24px 54px rgba(0,0,0,.55);transform:translateY(-4px)}
.hw-recompense-ic{width:64px;flex:0 0 64px;color:var(--ambre);position:relative;z-index:2;filter:drop-shadow(0 0 14px rgba(var(--halo),.45))}
.hw-recompense-corps{position:relative;z-index:2;flex:1}
.hw-recompense h3{color:var(--or);margin:0 0 8px;font-size:21px}
.hw-recompense p{color:var(--doux);font-size:15px}
.hw-bonus{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.hw-bonus li{
  display:flex;align-items:center;gap:11px;padding:9px 13px;background:var(--laque);
  border:1px solid var(--trait);border-radius:3px;font-size:14.5px;
}
.hw-bonus li b{color:var(--ambre);font-family:Cinzel,Georgia,serif;font-size:16px;min-width:52px}
.hw-bonus li svg{width:18px;height:18px;color:var(--doux);flex:0 0 18px}
.hw-sceau{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 14px;
  background:rgba(180,71,47,.14);border:1px solid var(--sang);border-radius:3px;
  color:var(--sang);font-size:13px;font-weight:700;letter-spacing:.04em;
}
.hw-sceau svg{width:15px;height:15px;flex:0 0 15px}

.hw-grille2{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.hw-liste{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:10px;max-width:640px}
.hw-liste li{
  padding:12px 18px;background:var(--surface);border:1px solid var(--trait);
  border-left:2px solid var(--ambre);border-radius:3px;font-size:15.5px;
}

/* ---------------------------------------------------------- sobriete */
@media (prefers-reduced-motion:reduce){
  .hw-braise,.hw-chauve,.hw-nuage{display:none}
  .hw-lune,.hw-brume,.blason img,.hw-citrouille,.hw-tete-ic,.hw-goutte,
  .heros h1 .hw-vacille,.hw-recompense::after{animation:none!important}
}
@media (max-width:900px){
  .hw-toile{display:none}
  .hw-minuteur{margin-left:0}
  .hw-recompense{flex-direction:column}
}