/* assets/halloween/halloween.css — Thème Halloween Tradu-France — v2026-10
 * Activé automatiquement du 20 octobre au 2 novembre (include/layout/halloween.php).
 * Purement décoratif : aucun élément ne capte les clics.
 */
:root {
    --hw-orange: #ff7a1a; --hw-orange-d: #c94f05; --hw-purple: #8e44ff; --hw-green: #7dff4f; --hw-bone: #efeae0;
    --hw-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L96.0 0.0 M0 0 L91.3 29.7 M0 0 L77.7 56.4 M0 0 L56.4 77.7 M0 0 L29.7 91.3 M0 0 L0.0 96.0 M18.0 0.0 Q14.7 2.2 16.1 5.2 Q13.2 6.8 14.6 10.6 Q10.5 10.4 9.9 13.7 Q6.7 13.2 5.6 17.1 Q2.4 14.6 0.0 16.9 M34.0 0.0 Q27.7 4.2 30.4 9.9 Q24.9 12.8 27.5 20.0 Q19.9 19.7 18.8 25.9 Q12.6 25.0 10.5 32.3 Q4.5 27.6 0.0 32.0 M52.0 0.0 Q42.3 6.5 46.5 15.1 Q38.1 19.6 42.1 30.6 Q30.4 30.1 28.7 39.5 Q19.3 38.3 16.1 49.5 Q6.9 42.3 0.0 48.9 M72.0 0.0 Q58.6 9.0 64.4 20.9 Q52.7 27.2 58.2 42.3 Q42.2 41.7 39.8 54.8 Q26.7 53.0 22.2 68.5 Q9.6 58.5 0.0 67.7 M92.0 0.0 Q74.9 11.5 82.2 26.7 Q67.4 34.7 74.4 54.1 Q53.9 53.3 50.8 70.0 Q34.1 67.7 28.4 87.5 Q12.2 74.8 0.0 86.5' fill='none' stroke='%23e9e6f5' stroke-width='1.1' stroke-opacity='.78' stroke-linecap='round'/%3E%3C/svg%3E");
    --hw-pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cpath d='M30 10 q2 -8 9 -9 l1 4 q-5 1 -6 6 z' fill='%233d7a2a'/%3E%3Cellipse cx='20' cy='32' rx='15' ry='20' fill='%23e8650f'/%3E%3Cellipse cx='44' cy='32' rx='15' ry='20' fill='%23e8650f'/%3E%3Cellipse cx='32' cy='32' rx='14' ry='21' fill='%23ff7a1a'/%3E%3Cpath d='M20 26 l6 -6 l6 6 z M38 26 l6 -6 l6 6 z' fill='%23ffd84a' transform='translate%28-6 2%29'/%3E%3Cpath d='M16 38 q16 12 32 0 l-4 0 l-2 4 l-4 -4 l-4 4 l-4 -4 l-4 4 l-2 -4 z' fill='%23ffd84a'/%3E%3C/svg%3E");
}

/* ── Feuilles qui tombent (canvas plein écran) ──────────── */
#hw-leaves { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; }

/* ── Bannière ───────────────────────────────────────────── */
#header { position: relative; overflow: hidden; }
#header::after {                     /* voile violet nocturne, très léger */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to bottom, rgba(60, 10, 90, .18), rgba(255, 110, 20, .10));
}
#hamburger-btn { z-index: 7; }

.hw-pumpkins {
    position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 1.5%; pointer-events: none; z-index: 3;
}
.hw-pumpkins svg { display: block; height: 100%; width: auto; overflow: visible; }
.hw-pumpkins .p-s { height: 62%; }
.hw-pumpkins .p-m { height: 82%; }
.hw-pumpkins .p-hide-sm { display: block; }
.hw-glow { animation: hw-flicker 2.2s ease-in-out infinite; }
.hw-glow.d1 { animation-delay: .6s } .hw-glow.d2 { animation-delay: 1.3s }
@keyframes hw-flicker { 0%,100% { opacity: 1 } 40% { opacity: .65 } 55% { opacity: .95 } 70% { opacity: .5 } }

.hw-ground {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 10%; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(110, 255, 120, .28), rgba(110, 255, 120, 0));
}

/* Chauves-souris qui traversent */
.hw-bat { position: absolute; left: 0; width: 46px; pointer-events: none; z-index: 4; transform: translateX(-120%); }
.hw-bat svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 4px rgba(255, 140, 40, .55)); }
.hw-bat .wing-l { transform-origin: 30px 16px; animation: hw-flap-l .32s ease-in-out infinite alternate; }
.hw-bat .wing-r { transform-origin: 34px 16px; animation: hw-flap-r .32s ease-in-out infinite alternate; }
@keyframes hw-flap-l { from { transform: rotate(18deg) } to { transform: rotate(-22deg) } }
@keyframes hw-flap-r { from { transform: rotate(-18deg) } to { transform: rotate(22deg) } }
.hw-bat.b1 { top: 12%; animation: hw-fly-a 14s linear infinite 1s; }
.hw-bat.b2 { top: 30%; width: 34px; animation: hw-fly-b 19s linear infinite 5s; }
.hw-bat.b3 { top: 6%;  width: 28px; animation: hw-fly-a 23s linear infinite 9s; }
@keyframes hw-fly-a {
    0% { transform: translate(-120%, 0) } 20% { transform: translate(400%, 22px) } 40% { transform: translate(900%, -6px) }
    60% { transform: translate(1400%, 18px) } 80% { transform: translate(1900%, 0) } 100% { transform: translate(2500%, 10px) }
}
@keyframes hw-fly-b {
    0% { transform: translate(2600%, 10px) scaleX(-1) } 30% { transform: translate(1700%, -12px) scaleX(-1) }
    60% { transform: translate(900%, 16px) scaleX(-1) } 100% { transform: translate(-150%, 0) scaleX(-1) }
}

/* Fantôme qui flotte */
.hw-ghost {
    position: absolute; right: 16%; top: 10%; width: 7%; min-width: 46px; max-width: 74px;
    pointer-events: none; z-index: 4; animation: hw-float 4.5s ease-in-out infinite;
}
.hw-ghost svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 8px rgba(220, 230, 255, .7)); }
@keyframes hw-float { 0%,100% { transform: translateY(0) rotate(-3deg); opacity: .92 } 50% { transform: translateY(-10px) rotate(3deg); opacity: .7 } }

/* Araignée qui descend au bout de son fil */
.hw-spider { position: absolute; left: 22%; top: 0; width: 26px; height: 100%; pointer-events: none; z-index: 4; animation: hw-drop 7s ease-in-out infinite; }
.hw-spider svg { position: absolute; left: 0; bottom: 0; width: 26px; height: auto; }
.hw-spider::before { content: ''; position: absolute; left: 12.5px; bottom: 18px; height: 400px; width: 1px; background: rgba(240, 240, 255, .75); }
@keyframes hw-drop { 0%,100% { transform: translateY(-62%) } 45%,60% { transform: translateY(-18%) } }

/* ── Fanions sous le menu « Accueil / Ressource / Contact » ── */
.hw-bunting-hook { position: relative; height: 0; z-index: 6; pointer-events: none; }
.hw-bunting { position: absolute; left: 0; right: 0; top: -2px; height: 24px; overflow: hidden; pointer-events: none; }
#header .hw-bunting { top: auto; bottom: 0; }
.hw-bunting svg { display: block; width: 100%; height: 100%; }

/* ── Toiles d'araignée sur le cadre principal ───────────── */
#container { position: relative; }
.hw-web-corner {
    position: absolute; top: 0; width: 90px; height: 90px; pointer-events: none; z-index: 5;
    background: var(--hw-web) no-repeat 0 0 / contain;
}
.hw-web-corner.l { left: 0; border-top-left-radius: 16px; }
.hw-web-corner.r { right: 0; transform: scaleX(-1); }

/* ── Bouton feuilles on/off ─────────────────────────────── */
.hw-toggle {
    position: fixed; right: 14px; bottom: 14px; z-index: 950;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: rgba(20, 6, 30, .88); color: #fff; font-size: 22px; line-height: 1;
    border: 1px solid rgba(255, 122, 26, .7); box-shadow: 0 0 12px rgba(255, 122, 26, .45);
}
.hw-toggle:hover, .hw-toggle:focus-visible { background: var(--hw-orange-d); outline: 2px solid #fff; outline-offset: 2px; }
.hw-toggle[aria-pressed="false"] { opacity: .65; }

/* ════════════ MENUS ════════════ */
#menu > ul > li.rubrique { position: relative; }
#menu > ul > li.rubrique::after {            /* citrouille au bout de la barre de titre */
    content: ''; position: absolute; top: 6px; left: 150px; width: 34px; height: 30px; z-index: 3; pointer-events: none;
    background: var(--hw-pumpkin) no-repeat center / contain;
    filter: drop-shadow(0 0 5px rgba(255, 140, 30, .7));
}
#menu > ul > li.rubrique::before {           /* toile dans le coin du titre */
    content: ''; position: absolute; top: 4px; left: 2px; width: 28px; height: 28px; z-index: 2; pointer-events: none;
    background: var(--hw-web) no-repeat 0 0 / contain; opacity: .55;
}
#mobile-menu .rubrique-header { background: var(--hw-pumpkin) no-repeat right 16px center / 30px 26px; }
.machine-list summary::before { content: '🦇'; font-size: .8em; }
.machine-list details[open] > summary::before { transform: none; }
#menu li li::marker, #mobile-menu li li::marker { color: var(--hw-orange); }
#menu li li:nth-child(even)::marker, #mobile-menu li li:nth-child(even)::marker { color: #b98bff; }
.machine-list summary:hover { background: rgba(255, 122, 26, .14); }

/* ════════════ NEWS ════════════ */
.cat-chip.is-active {
    background: linear-gradient(135deg, var(--hw-orange), var(--hw-orange-d)) !important;
    color: #1a0800 !important; border-color: #1a0800 !important; box-shadow: 0 0 10px rgba(255, 122, 26, .6);
}
.cat-chip:hover { border-color: var(--hw-orange); }

.news-card { position: relative; }
.news-card::before {                          /* toile dans le coin haut gauche */
    content: ''; position: absolute; top: 0; left: 0; width: 78px; height: 78px; z-index: 4; pointer-events: none;
    background: var(--hw-web) no-repeat 0 0 / contain; border-top-left-radius: 14px; opacity: .9;
}
.news-card::after {                           /* citrouille posée sur le coin */
    content: ''; position: absolute; top: -18px; right: -14px; width: 52px; height: 46px; z-index: 5; pointer-events: none;
    background: var(--hw-pumpkin) no-repeat center / contain;
    filter: drop-shadow(0 0 8px rgba(255, 140, 30, .75));
    transform: rotate(10deg);
}
.news-card:nth-child(even)::before { left: auto; right: 0; transform: scaleX(-1); }
.news-card:nth-child(even)::after { right: auto; left: -14px; transform: rotate(-10deg); }
.news-card:hover { box-shadow: 0 0 26px rgba(255, 122, 26, .75), 0 0 14px rgba(142, 68, 255, .5); border-color: var(--hw-orange); }

.news-card .title-category { position: relative; }
.news-card .title-category::after {            /* ruban orange / violet */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
    background: repeating-linear-gradient(-45deg, var(--hw-orange) 0 8px, #2a0d3d 8px 16px);
}
.read-more:hover, .read-more:focus {
    background: linear-gradient(135deg, var(--hw-orange), var(--hw-orange-d)) !important; color: #1a0800 !important;
    border-color: #1a0800 !important; box-shadow: 0 0 12px rgba(255, 122, 26, .6);
}
.read-more::before { content: '🎃 '; }

/* Page article */
.rn-article { position: relative; }
.rn-article::before {
    content: ''; position: absolute; top: 0; right: 0; width: 90px; height: 90px; z-index: 5; pointer-events: none;
    background: var(--hw-web) no-repeat 0 0 / contain; transform: scaleX(-1); opacity: .85;
}
.rn-section-title { border-bottom-color: rgba(255, 122, 26, .45) !important; }
.rn-section-title::after { background: linear-gradient(90deg, rgba(255,122,26,.55), rgba(142,68,255,.4), transparent) !important; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .hw-pumpkins { height: 52%; }
    .hw-pumpkins .p-hide-sm, .hw-bat.b3 { display: none; }
    .hw-bat { width: 30px; }
    .hw-bunting { height: 16px; }
    .hw-web-corner { width: 44px; height: 44px; }
    .hw-ghost { min-width: 30px; width: 8%; right: 4%; top: 4%; opacity: .8; }
    .news-card::after { width: 40px; height: 34px; top: -14px; right: -6px; }
    .news-card:nth-child(even)::after { left: -6px; }
    .news-card::before { width: 56px; height: 56px; }
}

/* ── Mouvements réduits : décor fixe ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hw-bat, .hw-spider { animation: none; }
    .hw-bat { display: none; }
    .hw-bat.b1 { display: block; transform: none; left: 30%; }
    .hw-spider { transform: translateY(-40%); }
    .hw-bat .wing-l, .hw-bat .wing-r, .hw-ghost, .hw-glow { animation: none; }
}
@media print {
    #hw-leaves, .hw-pumpkins, .hw-bat, .hw-ghost, .hw-spider, .hw-bunting-hook, .hw-web-corner, .hw-toggle, .hw-ground,
    #menu > ul > li.rubrique::before, #menu > ul > li.rubrique::after, .news-card::before, .news-card::after, .rn-article::before, #header::after { display: none !important; }
}