/* =====================================================================
   Will Ergo — Thème Halloween (couche saisonnière)
   ---------------------------------------------------------------------
   Ce fichier vient PAR-DESSUS style.css. Tout l'habillage est rangé sous
   la classe html.hw : le bouton « Version sage » retire cette classe et le
   site retrouve instantanément son apparence normale.
   Pour supprimer complètement le thème : republier les pages sans ce
   fichier (voir LISEZ-MOI).
   ===================================================================== */

/* ---------- Éléments réservés au thème : masqués par défaut ---------- */
.hw-only{display:none}

/* ---------- Bouton de bascule (visible dans les deux modes) ---------- */
.theme-toggle{
  position:fixed;left:16px;bottom:16px;z-index:900;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  font:600 .85rem/1 "Inter",system-ui,sans-serif;
  background:#201436;color:#f7efe3;border:1px solid rgba(255,186,120,.35);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  transition:transform .15s ease,background .15s ease;
}
.theme-toggle:hover{transform:translateY(-2px);background:#2c1b4a}
html:not(.hw) .theme-toggle{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
@media (max-width:640px){.theme-toggle{left:10px;bottom:10px;padding:8px 12px;font-size:.8rem}}

/* =====================================================================
   PALETTE « nuit d'Halloween »
   ===================================================================== */
html.hw{
  --green-dark:#b8470a;
  --green:#ff7518;          /* citrouille : couleur principale */
  --green-light:#ffa04d;
  --lime:#a6ff4d;           /* vert « bave de monstre » : liens et accroches */
  --orange:#ff7518;
  --gold:#ffc53d;
  --red:#ff4d6d;

  --bg:#110a1b;
  --bg-alt:#170d25;
  --surface:#201436;
  --surface-2:#2c1b4a;
  --border:rgba(255,186,120,.13);
  --border-strong:rgba(255,186,120,.26);

  --ink:#f7efe3;
  --muted:#c4b6d9;
  --glow:0 0 0 1px rgba(255,117,24,.4),0 18px 40px -16px rgba(255,117,24,.6);
}
html.hw body{
  background:
    radial-gradient(1200px 600px at 110% 40%,rgba(122,47,143,.18),transparent 60%),
    radial-gradient(900px 500px at -10% 80%,rgba(255,117,24,.07),transparent 60%),
    var(--bg);
}
html.hw ::selection{background:#ff7518;color:#1a0b00}

/* ---------- Titres « qui dégoulinent » ---------- */
html.hw h1,
html.hw .section-head h2,
html.hw .cta-band h2,
html.hw .hw-title{
  font-family:"Creepster","Poppins",system-ui,sans-serif;
  font-weight:400;letter-spacing:.03em;
}
html.hw h1{color:#ffb066;text-shadow:0 0 22px rgba(255,117,24,.35),0 3px 0 #3a1500}
html.hw .section-head h2{color:#f7efe3;text-shadow:0 0 18px rgba(166,255,77,.18)}
html.hw h1 em{color:var(--lime)!important}
html.hw .brand-name{font-family:"Creepster","Poppins",sans-serif;font-weight:400;letter-spacing:.04em;font-size:1.3rem}
html.hw .brand-name span{color:#ff9a3c}

/* ---------- Bandeaux ---------- */
html.hw .hw-only.announce-bar{display:block}
html.hw .announce-bar .container{padding-top:8px;padding-bottom:8px}
html.hw .hw-announce{
  background:linear-gradient(90deg,#3a1d5c 0%,#6b2a86 55%,#a3378f 100%);
  color:#f7efe3;
}
html.hw .hw-announce strong{color:#ffc53d}
@media (max-width:640px){
  html.hw .announce-bar:not(.hw-announce){display:none}
  .hw-announce .hw-long{display:none}
}
html.hw .hw-announce a.announce-link{color:#a6ff4d}
html.hw .hw-announce .announce-close{color:#f7efe3}

/* ---------- En-tête ---------- */
html.hw .site-header{background:rgba(17,10,27,.86);border-bottom-color:rgba(255,117,24,.25)}
html.hw .site-header .container{justify-content:flex-start;gap:12px;position:relative}
html.hw nav.main-nav,html.hw .nav-toggle{margin-left:auto}
html.hw nav.main-nav a{color:#e3d6f2}
html.hw nav.main-nav a:hover,html.hw nav.main-nav a.active{background:#2c1b4a;color:#ffa04d}
@media (max-width:1300px){html.hw nav.main-nav{background:#170d25}}
html.hw .nav-toggle span{background:#ffa04d}

html.hw .hw-pumpkin-wrap{display:block;position:relative;flex-shrink:0}
.hw-pumpkin-btn{
  background:none;border:0;padding:4px;cursor:pointer;display:block;
  animation:hw-bob 3.2s ease-in-out infinite;
}
.hw-pumpkin-btn img{width:46px;height:auto;border-radius:0;filter:drop-shadow(0 0 6px rgba(255,170,0,.55));animation:hw-flicker 2.6s infinite}
.hw-pumpkin-btn:hover img{transform:scale(1.12) rotate(-6deg);transition:transform .2s}
.hw-pumpkin-btn:focus-visible{outline:2px solid #a6ff4d;outline-offset:2px;border-radius:12px}
.hw-bubble{
  position:absolute;top:calc(100% + 10px);left:-20px;z-index:60;
  width:min(320px,80vw);padding:14px 16px;border-radius:14px;
  background:#f7efe3;color:#1b0b2a;font-size:.92rem;line-height:1.45;font-weight:500;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.hw-bubble::before{
  content:"";position:absolute;top:-8px;left:38px;width:16px;height:16px;
  background:#f7efe3;transform:rotate(45deg);border-radius:3px;
}
.hw-bubble.show{opacity:1;transform:none;pointer-events:auto}
@media (max-width:760px){
  .hw-bubble{position:fixed;top:86px;left:12px;right:12px;width:auto}
  .hw-bubble::before{display:none}
}

/* Araignée suspendue sous l'en-tête */
html.hw .hw-spider{
  display:block;position:absolute;top:100%;right:6%;width:40px;
  transform-origin:50% 0;animation:hw-swing 4s ease-in-out infinite;
  pointer-events:auto;cursor:pointer;
}
.hw-spider::before{
  content:"";position:absolute;left:50%;top:0;width:1.5px;height:var(--fil,46px);
  background:rgba(205,184,255,.75);transition:height .6s cubic-bezier(.5,1.6,.4,1);
}
.hw-spider img{position:absolute;left:0;top:var(--fil,46px);width:40px;border-radius:0;transition:top .6s cubic-bezier(.5,1.6,.4,1)}
.hw-spider:hover{--fil:10px}
@media (max-width:640px){html.hw .hw-spider{right:22%}}

/* =====================================================================
   HÉROS : ciel nocturne, lune, chauves-souris, citrouilles, brume
   ===================================================================== */
html.hw .hero{
  background:
    radial-gradient(900px 420px at 80% -20%,rgba(122,47,143,.55),transparent 65%),
    radial-gradient(700px 380px at -10% 120%,rgba(255,117,24,.20),transparent 60%),
    linear-gradient(180deg,#1d0f33 0%,#140b24 70%,#110a1b 100%);
  border-bottom-color:rgba(255,117,24,.22);
}
html.hw .hw-sky{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hw-stars{
  position:absolute;inset:0;opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff 60%,transparent),
    radial-gradient(1px 1px at 22% 62%,#fff 60%,transparent),
    radial-gradient(1.6px 1.6px at 34% 28%,#ffe9b0 60%,transparent),
    radial-gradient(1px 1px at 47% 12%,#fff 60%,transparent),
    radial-gradient(1.2px 1.2px at 58% 44%,#fff 60%,transparent),
    radial-gradient(1.6px 1.6px at 66% 8%,#fff 60%,transparent),
    radial-gradient(1px 1px at 74% 70%,#fff 60%,transparent),
    radial-gradient(1.3px 1.3px at 86% 32%,#ffe9b0 60%,transparent),
    radial-gradient(1px 1px at 93% 58%,#fff 60%,transparent),
    radial-gradient(1.2px 1.2px at 6% 84%,#fff 60%,transparent);
  animation:hw-twinkle 5s ease-in-out infinite alternate;
}
.hw-moon{
  position:absolute;top:26px;right:40%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fffbe6 0%,#ffe9a6 45%,#f3c45a 100%);
  box-shadow:0 0 50px 14px rgba(255,214,120,.28),0 0 140px 40px rgba(255,170,60,.12);
}
.hw-moon::before,.hw-moon::after{content:"";position:absolute;border-radius:50%;background:rgba(214,160,60,.35)}
.hw-moon::before{width:22px;height:22px;top:30px;left:58px}
.hw-moon::after{width:14px;height:14px;top:70px;left:34px}
.hw-bat{position:absolute;left:-120px;width:70px;border-radius:0;animation:hw-fly linear infinite}
.hw-bat img{width:100%;border-radius:0;animation:hw-flap .35s ease-in-out infinite alternate;transform-origin:50% 50%}
.hw-bat.b1{top:16%;animation-duration:17s;animation-delay:-3s}
.hw-bat.b2{top:38%;width:46px;animation-duration:23s;animation-delay:-14s}
.hw-bat.b3{top:8%;width:56px;animation-duration:20s;animation-delay:-9s}
.hw-bat.b4{top:58%;width:38px;animation-duration:27s;animation-delay:-20s}
.hw-pumpkins{position:absolute;left:-6px;bottom:-8px;display:flex;align-items:flex-end;gap:2px}
.hw-pumpkins img{border-radius:0;filter:drop-shadow(0 0 10px rgba(255,150,0,.45))}
.hw-pumpkins img:nth-child(1){width:76px;animation:hw-flicker 3.1s infinite}
.hw-pumpkins img:nth-child(2){width:50px;animation:hw-flicker 2.3s infinite .4s}
.hw-fog{
  position:absolute;left:-10%;right:-10%;bottom:-30px;height:110px;
  background:radial-gradient(ellipse at 30% 60%,rgba(205,184,255,.16),transparent 60%),
             radial-gradient(ellipse at 75% 70%,rgba(205,184,255,.12),transparent 60%);
  filter:blur(6px);animation:hw-fog 14s ease-in-out infinite alternate;
}
@media (max-width:900px){
  .hw-moon{width:84px;height:84px;right:8%;top:14px}
  .hw-pumpkins img:nth-child(1){width:54px}
  .hw-pumpkins img:nth-child(2){width:36px}
}

/* Portrait en tenue d'Halloween (chemise à citrouilles) */
html.hw .hw-hide{display:none}
html.hw img.hw-only.hw-portrait{display:block}

/* Chapeau de sorcier posé sur le portrait de l'accueil */
html.hw .hero-photo{position:relative;overflow:visible}
html.hw .hero-photo > img{border-radius:20px}
html.hw .hero-photo .hw-hat{
  display:block;position:absolute;width:46%;height:auto;object-fit:contain;left:30%;top:-17%;z-index:2;
  transform:rotate(9deg);border-radius:0;pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));
  animation:hw-hat 5s ease-in-out infinite;
}

/* Petite note sur la page 404 */
html.hw .hw-404-note{display:block;margin:-6px 0 14px;color:#a6ff4d;font-weight:600}

/* =====================================================================
   COMPOSANTS
   ===================================================================== */
html.hw .btn-primary{color:#1a0b00}
html.hw .btn-primary:hover{background:#a6ff4d;color:#0d1a00;box-shadow:0 0 0 1px rgba(166,255,77,.4),0 18px 40px -16px rgba(166,255,77,.55)}
html.hw .btn-outline:hover{border-color:#ffa04d;color:#ffa04d}
html.hw .steps li::before{color:#1a0b00}

html.hw .card,
html.hw .media-card,
html.hw .testimonial-card,
html.hw .project{position:relative}
html.hw .card:hover,html.hw .media-card:hover,html.hw .testimonial-card:hover{
  transform:translateY(-4px) rotate(-.5deg);border-color:rgba(255,117,24,.5);
}
html.hw .project:hover,html.hw .source-links li:hover{border-color:rgba(255,117,24,.5)}
/* toile d'araignée dans le coin des encarts */
html.hw .card::after,
html.hw .media-card::after,
html.hw .project::after{
  content:"";position:absolute;top:0;right:0;width:64px;height:64px;pointer-events:none;opacity:.45;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d9ccff' stroke-width='1.1'%3E%3Cpath d='M64 0 L0 0 M64 0 L64 64 M64 0 L10 54 M64 0 L30 62 M64 0 L2 30'/%3E%3Cpath d='M50 0 Q52 8 64 14 M36 0 Q40 18 64 28 M22 0 Q28 28 64 42 M8 0 Q16 38 64 56'/%3E%3C/svg%3E") no-repeat top right/contain;
}
html.hw .media-card.contain img,html.hw .media-card img{background:#fff}
html.hw .card-icon{background:#2c1b4a;box-shadow:inset 0 0 0 1px rgba(255,117,24,.25)}
html.hw .section-head .kicker{color:#a6ff4d;text-shadow:0 0 12px rgba(166,255,77,.35)}
html.hw .section-head .kicker::before{content:"🦇 ";}
html.hw .badge{background:#2c1b4a;color:#ffa04d}
html.hw .stat-tile{box-shadow:inset 0 -40px 60px -50px rgba(255,117,24,.35)}

html.hw .cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#3a1d5c 0%,#6b2a86 50%,#ff7518 130%);
  box-shadow:0 30px 60px -25px rgba(255,117,24,.45);
}
html.hw .cta-band > *{position:relative;z-index:1}
html.hw .cta-band .btn-primary{background:#ffc53d;color:#1a0b00}
html.hw .cta-band .btn-primary:hover{background:#a6ff4d}
html.hw .cta-band::before{
  content:"";position:absolute;right:-10px;bottom:-14px;width:120px;height:146px;opacity:.9;
  background:url("../img/halloween/fantome.svg") no-repeat center/contain;
  animation:hw-float 4.5s ease-in-out infinite;
}
@media (max-width:640px){html.hw .cta-band::before{width:70px;height:86px;opacity:.5}}

html.hw .quote-block{border-left-color:#ff7518}
html.hw .article-empty{border-color:rgba(255,117,24,.35)}
html.hw .cookie-banner{background:#201436;border-top-color:rgba(255,117,24,.35)}

/* ---------- Bloc partage, version Halloween ---------- */
html.hw .share-bar .share-inner{border-color:rgba(255,117,24,.35);background:linear-gradient(120deg,#201436,#2c1b4a)}
html.hw .share-bar .share-title::before{content:"🎃 "}

/* =====================================================================
   CIMETIÈRE DES MAUVAISES POSTURES (au-dessus du pied de page)
   ===================================================================== */
html.hw .hw-cemetery{
  display:block;position:relative;overflow:hidden;padding:56px 0 0;margin-top:40px;
  background:linear-gradient(180deg,transparent 0%,#140b24 40%,#0d0717 100%);
}
html.hw .hw-cemetery + .site-footer{margin-top:0}
.hw-cemetery-title{
  text-align:center;font-family:"Creepster","Poppins",sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);
  color:#c4b6d9;margin:0 0 6px;letter-spacing:.04em;
}
.hw-cemetery-sub{text-align:center;color:#8f80a8;font-size:.9rem;margin:0 0 30px}
.hw-graves{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3vw,40px);flex-wrap:wrap;position:relative}
.hw-grave{
  position:relative;width:180px;height:206px;padding:46px 26px 0;text-align:center;
  background:url("../img/halloween/pierre-tombale.svg") no-repeat bottom/100% 100%;
  color:#ece6ff;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.hw-grave:nth-child(2){height:190px;padding-top:38px}
.hw-grave:nth-child(3){height:214px}
.hw-grave strong{font-family:"Creepster","Poppins",sans-serif;font-weight:400;font-size:1.35rem;color:#fff;letter-spacing:.05em}
.hw-grave span{font-weight:700;font-size:.92rem;line-height:1.2}
.hw-grave em{font-style:normal;font-size:.76rem;color:#d5ccef;line-height:1.3;margin-top:6px}
.hw-grave .hw-ghost{
  position:absolute;width:62px;top:-58px;left:50%;margin-left:-31px;border-radius:0;opacity:.92;
  animation:hw-float 3.8s ease-in-out infinite;
}
.hw-grave .hw-alien{
  position:absolute;width:70px;right:-52px;bottom:6px;border-radius:0;
  transform:rotate(14deg);animation:hw-peek 6s ease-in-out infinite;
}
.hw-ground{height:26px;background:linear-gradient(180deg,#2c5a1e,#1d3d14);border-top:3px solid #1b0b2a;margin-top:-4px}
@media (max-width:640px){
  .hw-grave{width:150px;height:180px;padding:40px 12px 0}
  .hw-grave:nth-child(2),.hw-grave:nth-child(3){height:180px;padding-top:40px}
  .hw-grave .hw-alien{display:none}
}

/* =====================================================================
   PAGE « Sièges de l'horreur » et réalisations d'outre-tombe
   ===================================================================== */
html.hw .hw-only.hw-beyond{display:block}
.hw-beyond .project-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.hw-beyond .project{grid-template-columns:140px 1fr;align-items:start;gap:18px;padding:16px;border-style:dashed;border-color:rgba(255,117,24,.45)}
.hw-beyond .project-photos.hw-art{background:#1d1030;display:flex;align-items:center;justify-content:center;padding:10px;height:140px}
.hw-beyond .project-photos.hw-art img{width:auto;height:100%;object-fit:contain;background:transparent;border-radius:0;aspect-ratio:auto}
.hw-beyond .project-body{padding-right:26px}
.hw-beyond .project-body p{font-size:.9rem}
.hw-beyond .project-meta{color:#ffa04d}
@media (max-width:900px){.hw-beyond .project-list{grid-template-columns:1fr}}
@media (max-width:520px){.hw-beyond .project{grid-template-columns:90px 1fr}.hw-beyond .project-photos.hw-art{height:96px}}

html.hw .hw-only.horror-teaser-card{display:block}
html.hw .horror-teaser-card img{background:#1d1030!important;padding:18px}
html.hw .horror-teaser-card{border-color:rgba(255,117,24,.55);box-shadow:0 0 0 1px rgba(255,117,24,.25)}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes hw-fly{
  0%{transform:translate(0,0)}
  25%{transform:translate(32vw,30px)}
  50%{transform:translate(62vw,-12px)}
  75%{transform:translate(90vw,22px)}
  100%{transform:translate(118vw,0)}
}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes hw-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes hw-flicker{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,170,0,.55)) brightness(1)}
  42%{filter:drop-shadow(0 0 12px rgba(255,190,40,.8)) brightness(1.08)}
  46%{filter:drop-shadow(0 0 4px rgba(255,150,0,.4)) brightness(.94)}
  60%{filter:drop-shadow(0 0 10px rgba(255,190,40,.7)) brightness(1.05)}
}
@keyframes hw-swing{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
@keyframes hw-twinkle{from{opacity:.45}to{opacity:.85}}
@keyframes hw-fog{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes hw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hw-peek{0%,60%,100%{transform:translateX(0) rotate(14deg)}70%,90%{transform:translateX(-16px) rotate(4deg)}}
@keyframes hw-hat{0%,100%{transform:rotate(9deg)}50%{transform:rotate(5deg) translateY(-3px)}}


/* =====================================================================
   PETIT SQUELETTE QUI COURT APRÈS LE POINTEUR (ordinateur uniquement)
   ===================================================================== */
.hw-runner{position:fixed;left:0;top:0;z-index:950;width:56px;height:86px;pointer-events:none;display:none;will-change:transform}
html.hw .hw-runner.on{display:block}
.hw-runner-body{width:100%;height:100%;transform-origin:50% 50%}
.hw-runner svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.hw-runner .r-leg{transform-origin:28px 56px}
.hw-runner .r-shin{transform-origin:28px 71px}
.hw-runner .r-arm{transform-origin:30px 31px}
.hw-runner .r-fore{transform-origin:29px 43px}
.hw-runner .r-head{transform-origin:34px 26px}
.hw-runner.running .r-leg-a{animation:hw-run-leg .36s linear infinite}
.hw-runner.running .r-leg-b{animation:hw-run-leg .36s linear infinite -.18s}
.hw-runner.running .r-shin{animation:hw-run-shin .36s linear infinite}
.hw-runner.running .r-leg-b .r-shin{animation-delay:-.18s}
.hw-runner.running .r-arm-a{animation:hw-run-arm .36s linear infinite -.18s}
.hw-runner.running .r-arm-b{animation:hw-run-arm .36s linear infinite}
.hw-runner.running .hw-runner-body svg{animation:hw-run-bob .18s ease-in-out infinite alternate}
.hw-runner.running .r-head{transform:rotate(8deg)}
.hw-runner.idle .r-arm-a{transform:rotate(-35deg)}
.hw-runner.idle .r-arm-b{transform:rotate(30deg)}
.hw-runner.idle .hw-runner-body svg{animation:hw-hop .55s ease-in-out infinite}
.hw-runner.idle .r-head{animation:hw-nod 1.2s ease-in-out infinite}
.hw-runner-coucou{
  position:absolute;left:40px;top:-18px;white-space:nowrap;padding:4px 9px;border-radius:10px;
  background:#f7efe3;color:#1b0b2a;font:700 .75rem/1 "Inter",sans-serif;
  opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;
}
.hw-runner.idle .hw-runner-coucou{opacity:1;transform:none}
@keyframes hw-run-leg{0%{transform:rotate(38deg)}50%{transform:rotate(-34deg)}100%{transform:rotate(38deg)}}
@keyframes hw-run-shin{0%{transform:rotate(0)}25%{transform:rotate(55deg)}50%{transform:rotate(10deg)}100%{transform:rotate(0)}}
@keyframes hw-run-arm{0%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}100%{transform:rotate(-40deg)}}
@keyframes hw-run-bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes hw-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px)}60%{transform:translateY(-9px)}}
@keyframes hw-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}

@media (prefers-reduced-motion:reduce){
  html.hw *,html.hw *::before,html.hw *::after{animation:none!important;transition:none!important}
  .hw-bat,.hw-runner{display:none!important}
}