/* Halloween 1.0.13 — illustrations validées, sans voile orange. */
html { background: #35150f url("./images/forest-background.jpg") center center / cover fixed no-repeat !important; }
body { background: transparent !important; background-image: none !important; color: #fff3e8; }
.wrap, #wrap, #page-body, #page-header, #page-footer { background: transparent !important; background-image: none !important; }
.wrap { border-color: #79321c; }
/* L'image de fond reste derrière les panneaux, sans gêner les textes. */
.headerbar { background-color: transparent; background-image: none; }
.forabg, .forumbg { background: linear-gradient(180deg, #57272c 0%, #391d23 100%); border: 1px solid #a35a36; box-shadow: 0 2px 5px #34120c66; }
.forabg .header, .forumbg .header, .forabg .header a, .forumbg .header a { color: #f8c75b; }
.navbar, .bg3 { background-color: #f7e9dc; color: #2b211c; }
.panel, .post, .panel-container .panel { background-color: #f7e9dc; color: #2b211c; }
.bg1, table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) { background-color: #f9eee4; }
.bg2, table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) { background-color: #f2e2d4; }
ul.forums, ul.topics { background: #f6e8dc; filter: none; }
ul.forums li.row:nth-child(odd), ul.topics li.row:nth-child(odd) { background-color: #f9eee4; }
ul.forums li.row:nth-child(even), ul.topics li.row:nth-child(even) { background-color: #f2e2d4; }
li.row { border-bottom-color: #c9a48e; }
ul.topiclist li, .postbody, .content, .panel p { color: #2b211c; }
/* Titres noirs, rappel de la typographie de la bannière. */
a.forumtitle, a.topictitle, .forumtitle, .topictitle { color: #17110e !important; }
a.forumtitle:hover, a.topictitle:hover { color: #a13d12 !important; }
a, a:visited, .postlink { color: #65301c; }
a:hover { color: #aa4319; }
.navbar a, .navbar a:visited, .panel a, .panel a:visited { color: #65301c; }
/* Icônes rondes d'Awesome : les états non lus gardent leur signal distinctif. */
.forums .row-item:before, .topics .row-item:before, .pmlist .row-item:before, .cplist .row-item:before { background-color: #8f4027; color: #f7c85e; }
.forums .row-item.unread:before, .topics .row-item.unread:before { background-color: #d80b42; }
/* Informations affichées directement sur l'arrière-plan. */
.stat-block, .stat-block h3, .stat-block p, .action-bar, .copyright, .index-left, .index-right, .time, .lastvisit, .board-time { color: #fff3e8; }
.stat-block a, .action-bar a, .copyright a { color: #fff3e8; }
input, textarea, select { color: #2b211c; }
@media (max-width: 700px) {
 html { background-attachment: fixed; background-size: cover; background-position: center center; }
 .wrap { border: 0; }
}

/* 1.0.10 : pictogrammes dorés sur les pastilles brun rouge. */
.forums .row-item:before, .topics .row-item:before { color: #f7c85e !important; }
/* Les bulles non lues restent rouges. */
.forums .row-item.unread:before, .topics .row-item.unread:before { color: #fff !important; }

/* Conserver la forêt visible entre les panneaux, sans voile opaque. */
html body, body #wrap, body .wrap, body #page-body, body #page-header, body #page-footer { background-color: transparent !important; }
/* Les panneaux de lecture restent opaques pour la lisibilité. */
.forabg, .forumbg, .navbar, .panel, .post, ul.forums, ul.topics { background-clip: padding-box; }

/* 1.0.14 : supprimer uniquement le cadre extérieur d’Awesome.
   Garder les marges internes et les ombres des catégories. */
html body .wrap, html body #wrap {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 1.0.15 — l'en-tête Awesome conserve normalement un padding de 5px,
   une ombre et un fond de couleur : les retirer pour laisser le visuel
   se fondre dans le paysage sans cadre ni bande périphérique. */
html body #page-header .headerbar {
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
}
html body #page-header .headerbar .banner-header,
html body #page-header .headerbar .header-banner,
html body #page-header .headerbar .mobile-header-banner {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
html body #page-header .headerbar img.header-banner,
html body #page-header .headerbar img.mobile-header-banner {
    border: 0 !important;
    box-shadow: none !important;
    vertical-align: top;
}
/* Conserver le dimensionnement prévu par Header Banner sur ordinateur. */
@media (max-width: 700px) {
    html body #page-header .headerbar .mobile-header-banner {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
}
/* Pastilles des forums lus : brun prune plus profond, icône dorée. */
html body .forums .row-item:not(.unread):before,
html body .topics .row-item:not(.unread):before {
    background-color: #642b25 !important;
    color: #f5c66d !important;
}

/* 1.0.17 — restore phpBB/Awesome unread forum icons.
   phpBB marks the icon with forum_unread, forum_unread_subforum,
   forum_unread_locked (and topic_unread variants), not only .unread. */
html body .forums .row-item[class*="forum_unread"]::before,
html body .forums .row-item[class*="forum_unread"]:before,
html body .topics .row-item[class*="topic_unread"]::before,
html body .topics .row-item[class*="topic_unread"]:before,
html body .forums .row-item.unread::before,
html body .topics .row-item.unread::before {
    background-color: #d91445 !important;
    color: #fff !important;
}
/* Some Awesome variants put the unread state on the row itself. */
html body .forums li.row[class*="forum_unread"] .row-item::before,
html body .topics li.row[class*="topic_unread"] .row-item::before {
    background-color: #d91445 !important;
    color: #fff !important;
}

/* 1.0.32 : sujets epingles / annonces non lus : dans phpBB la classe
   peut etre topic_sticky_unread, topic_announce_unread ou topic_global_unread.
   Garder la pastille rouge pour tous les types de sujets non lus. */
html body .topics .row-item[class*="_unread"]::before,
html body .topics li.row[class*="_unread"] .row-item::before {
    background-color: #d91445 !important;
    color: #fff !important;
}

/* Last Topic Cards 1.2.0: scope all adjustments to its own component. */
html body .topiccards {
    --tc-card-bg: #f7e9dc;
    --tc-border: #ad806b;
    --tc-muted: #594338;
    --tc-accent: #642b25;
    --tc-button-bg: #642b25;
    --tc-button-hover: #814137;
    color: #2b211c;
}
html body .topiccards .tc-card {
    background: #f7e9dc !important;
    color: #2b211c !important;
}
html body .topiccards .tc-title,
html body .topiccards .tc-title a,
html body .topiccards .tc-forum,
html body .topiccards .tc-username { color: #44251f !important; }
html body .topiccards .tc-meta,
html body .topiccards .tc-time,
html body .topiccards .tc-excerpt { color: #594338 !important; }
html body .topiccards .tc-read-more,
html body .topiccards .tc-more-btn {
    background: #642b25 !important;
    color: #fff5e7 !important;
    border-color: #814137 !important;
}
html body .topiccards .tc-read-more:hover,
html body .topiccards .tc-more-btn:hover { background: #814137 !important; }
html body .topiccards .tc-date { background: #642b25; color: #fff !important; }
/* Leave unread badges red to preserve the notification signal. */

/* 1.0.18 — test iOS only: fixed viewport layer instead of
   background-attachment: fixed on the root element. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 700px) {
    html {
      background: #35150f !important;
      background-image: none !important;
    }
    html body {
      position: relative;
      z-index: 0;
      background: transparent !important;
    }
    html body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: #35150f url("./images/forest-background.jpg") center center / cover no-repeat;
    }
  }
}

/* 1.0.21: taller desktop artwork; preserve natural aspect ratio. */
@media (min-width: 701px) {
  html body #page-header .headerbar img.header-banner {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* 1.0.22: mobile banner uses a taller 856x240 image without cropping. */
@media (max-width: 700px) {
  html body #page-header .headerbar img.mobile-header-banner {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* 1.0.23: new artwork, aspect-ratio-preserving header images. */

/* 1.0.25 — Readable moderation dropdown on the light Halloween palette. */
html body .dropdown .dropdown-contents,
html body .dropdown .dropdown-contents ul { background-color: #fff9f3; }
html body .dropdown .dropdown-contents a,
html body .dropdown .dropdown-contents a:visited,
html body .dropdown .dropdown-contents li,
html body .dropdown .dropdown-contents span { color: #552b21 !important; }
html body .dropdown .dropdown-contents a:hover { color: #a23f20 !important; }

/* Small decorative visitors: never intercept clicks or obscure interaction. */
.jc-halloween-visitor {
  position: fixed; left: 0; top: 0; width: 32px; height: 32px;
  z-index: 1100; pointer-events: none; opacity: 0;
  will-change: transform, opacity;
}
.jc-halloween-visitor svg { display: block; width: 100%; height: 100%; }
/* Articulated wing flaps: the body stays steady while each wing swings. */
.jc-halloween-visitor.jc-bat .jc-wing { transform-box: view-box; }
.jc-halloween-visitor.jc-bat .jc-wing-left { transform-origin: 44px 24px; animation: jc-wing-left .38s ease-in-out infinite alternate; }
.jc-halloween-visitor.jc-bat .jc-wing-right { transform-origin: 46px 24px; animation: jc-wing-right .38s ease-in-out infinite alternate; }
.jc-halloween-visitor.jc-ghost svg { animation: jc-ghost-float 2s ease-in-out infinite alternate; }
@keyframes jc-wing-left { from { transform: rotate(-28deg) scaleY(.72); } to { transform: rotate(24deg) scaleY(1.2); } }
@keyframes jc-wing-right { from { transform: rotate(28deg) scaleY(.72); } to { transform: rotate(-24deg) scaleY(1.2); } }
@keyframes jc-ghost-float { from { transform: translateY(-4px) rotate(-5deg); } to { transform: translateY(4px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .jc-halloween-visitor { display: none !important; } }

/* 1.0.27 — friendly roaming zombie, independent of bats and ghosts. */
.jc-halloween-visitor.jc-zombie { transform-origin: center bottom; }
.jc-halloween-visitor.jc-zombie svg { overflow: visible; }
.jc-halloween-visitor.jc-zombie .jc-zombie-body { animation: jc-zombie-bob .8s ease-in-out infinite alternate; transform-origin: center bottom; }
.jc-halloween-visitor.jc-zombie .jc-zombie-leg-left { animation: jc-zombie-step-left .65s ease-in-out infinite alternate; transform-origin: 22px 73px; }
.jc-halloween-visitor.jc-zombie .jc-zombie-leg-right { animation: jc-zombie-step-right .65s ease-in-out infinite alternate; transform-origin: 40px 73px; }
@keyframes jc-zombie-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-2px) rotate(2deg); } }
@keyframes jc-zombie-step-left { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes jc-zombie-step-right { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } }

/* 1.0.28 — heavy, dragging zombie gait (no hovering). */
.jc-halloween-visitor.jc-zombie .jc-zombie-body { animation: jc-zombie-heavy 2.5s ease-in-out infinite alternate; }
.jc-halloween-visitor.jc-zombie .jc-zombie-leg-left { animation: jc-zombie-drag-left 2.7s ease-in-out infinite alternate; }
.jc-halloween-visitor.jc-zombie .jc-zombie-leg-right { animation: jc-zombie-drag-right 2.7s ease-in-out infinite alternate; }
@keyframes jc-zombie-heavy { from { transform: rotate(-4deg); } to { transform: rotate(2deg); } }
@keyframes jc-zombie-drag-left { from { transform: rotate(-8deg); } to { transform: rotate(5deg); } }
@keyframes jc-zombie-drag-right { from { transform: rotate(5deg); } to { transform: rotate(-8deg); } }

/* 1.0.34 — Menu de l'extension paul999/mention (Tribute.js).
   Sélecteurs vérifiés dans mention 3.0.1 : tribute.css utilise
   .tribute-container, ul, li et li.highlight. Aucun changement à Mentions. */
html body .tribute-container {
    background: #fff9f3 !important;
    border: 1px solid #a97c66 !important;
    box-shadow: 0 4px 14px rgba(36, 18, 12, .22);
}
html body .tribute-container ul {
    background: #fff9f3 !important;
}
html body .tribute-container li,
html body .tribute-container li *,
html body .tribute-container .menu-highlighted {
    color: #48271f !important;
    text-shadow: none !important;
}
html body .tribute-container li.highlight,
html body .tribute-container li:hover {
    background: #ecd0b8 !important;
    color: #48271f !important;
}
html body .tribute-container li.highlight *,
html body .tribute-container li:hover * {
    color: #48271f !important;
}

/* 1.0.35 — Araignées suspendues uniquement dans la bannière. */
html body #page-header .headerbar { position: relative; }
.jc-halloween-spider-layer {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 5; isolation: isolate;
}
.jc-halloween-spider { position: absolute; top: 0; width: 34px; height: 140px;
  pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.jc-halloween-spider-rig { position: absolute; inset: 0; transform-origin: 50% 0;
  animation: jc-spider-rig-sway 6.5s ease-in-out infinite alternate;
}
.jc-halloween-spider-thread { position: absolute; top: 0; left: 50%; width: 1px;
  height: var(--jc-thread-length, 45px); background: rgba(239,225,211,.85);
  box-shadow: 1px 0 rgba(47,28,31,.5); transform: translateX(-50%);
}
.jc-halloween-spider-body { position: absolute; top: calc(var(--jc-thread-length, 45px) - 9px);
  left: 0; width: 100%; height: 32px; transform-origin: 50% 9px;
  animation: jc-spider-body-sway 5.5s ease-in-out infinite alternate;
}
.jc-halloween-spider-body svg { display: block; width: 100%; height: 100%; }
@keyframes jc-spider-rig-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes jc-spider-body-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .jc-halloween-spider-layer { display: none !important; } }

/* 1.0.38 — Citrouille volante : ailes de chauve-souris et léger flottement. */
.jc-halloween-visitor.jc-pumpkin svg { overflow: visible; animation: jc-pumpkin-float 2.8s ease-in-out infinite alternate; }
.jc-halloween-visitor.jc-pumpkin .jc-pumpkin-wing { transform-box: view-box; }
.jc-halloween-visitor.jc-pumpkin .jc-pumpkin-wing-left { transform-origin: 32px 38px; animation: jc-wing-left .48s ease-in-out infinite alternate; }
.jc-halloween-visitor.jc-pumpkin .jc-pumpkin-wing-right { transform-origin: 64px 38px; animation: jc-wing-right .48s ease-in-out infinite alternate; }
@keyframes jc-pumpkin-float { from { transform: translateY(-3px) rotate(-3deg); } to { transform: translateY(3px) rotate(3deg); } }

/* 1.0.40 — Paupieres verticales, deux chats, clignements independants. */
html body #page-header .headerbar { position: relative; }
.jc-halloween-cat-eyes { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.jc-cat-lid { position: absolute; display: block; border-radius: 48% 48% 50% 50%;
  background: #050504; opacity: 0; transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 0; }
.jc-cat-blinking .jc-cat-lid { opacity: 1; animation: jc-cat-close-vertical 220ms ease-in-out both; }
@keyframes jc-cat-close-vertical {
  0%, 100% { transform: translateX(-50%) scaleY(0); }
  37%, 65% { transform: translateX(-50%) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .jc-halloween-cat-eyes { display: none !important; } }

/* 1.0.42 — Un ovale noir par chat, fermeture verticale. */
.jc-halloween-cat-eyes .jc-cat-lid { border-radius: 48% / 50%; background: #050504; }