/* assets/themes/base.css — Moteur des thèmes saisonniers Tradu-France — v2026-10
 * Mise en page commune ; chaque thème (paques.css, saint-valentin.css, automne.css, hiver.css)
 * ne fait que définir ses couleurs et ses illustrations dans des variables.
 * Purement décoratif : aucun élément ne capte les clics.
 */

/* ── Particules (canvas plein écran) ───────────────────── */
#tf-particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; }

/* ── Bannière ───────────────────────────────────────────── */
#header { position: relative; overflow: hidden; }
#header::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: var(--tf-banner-tint, none);
}
#hamburger-btn { z-index: 7; }
.tf-group {
    position: absolute; bottom: 0; height: 40%; display: flex; align-items: flex-end; gap: .6%;
    pointer-events: none; z-index: 3;
}
.tf-group.l { left: 1.5%; }
.tf-group.r { right: 1.5%; flex-direction: row-reverse; }
.tf-group svg { display: block; height: 100%; width: auto; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.tf-group .s { height: 60%; }
.tf-group .m { height: 80%; }
.tf-ground {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 10%; z-index: 2; pointer-events: none;
    background: var(--tf-ground, none);
}

/* Éléments qui traversent la bannière */
.tf-flyer { position: absolute; left: 0; width: 44px; pointer-events: none; z-index: 4; transform: translateX(-130%); }
.tf-flyer svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.tf-flyer.f1 { top: 10%; animation: tf-fly-a 18s linear infinite 1s; }
.tf-flyer.f2 { top: 30%; width: 32px; animation: tf-fly-b 24s linear infinite 6s; }
.tf-flyer .flap-l { transform-box: fill-box; transform-origin: right center; animation: tf-flap-l .35s ease-in-out infinite alternate; }
.tf-flyer .flap-r { transform-box: fill-box; transform-origin: left center;  animation: tf-flap-r .35s ease-in-out infinite alternate; }
@keyframes tf-flap-l { from { transform: scaleX(1) } to { transform: scaleX(.35) } }
@keyframes tf-flap-r { from { transform: scaleX(1) } to { transform: scaleX(.35) } }
@keyframes tf-fly-a {
    0% { transform: translate(-130%, 0) } 25% { transform: translate(550%, 18px) } 50% { transform: translate(1150%, -4px) }
    75% { transform: translate(1750%, 14px) } 100% { transform: translate(2500%, 0) }
}
@keyframes tf-fly-b {
    0% { transform: translate(2700%, 8px) scaleX(-1) } 50% { transform: translate(1300%, -10px) scaleX(-1) } 100% { transform: translate(-160%, 6px) scaleX(-1) }
}

/* Élément qui flotte sur place */
.tf-floater {
    position: absolute; right: 16%; top: 8%; width: 6%; min-width: 40px; max-width: 70px;
    pointer-events: none; z-index: 4; animation: tf-float 5s ease-in-out infinite;
}
.tf-floater svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 6px var(--tf-glow, rgba(255,255,255,.5))); }
@keyframes tf-float { 0%,100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-10px) rotate(4deg) } }
.tf-floater.spin svg { animation: tf-spin 14s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg) } }

/* Petits éléments qui scintillent / battent */
.tf-pulse { transform-box: fill-box; transform-origin: center; animation: tf-pulse 1.8s ease-in-out infinite; }
.tf-pulse.d1 { animation-delay: .5s } .tf-pulse.d2 { animation-delay: 1s }
@keyframes tf-pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.12); opacity: .75 } }

/* ── Guirlande sous le menu « Accueil / Ressource / Contact » ── */
.tf-hang-hook { position: relative; height: 0; z-index: 6; pointer-events: none; }
.tf-hang { position: absolute; left: 0; right: 0; top: -2px; height: var(--tf-hang-h, 22px); overflow: hidden; pointer-events: none; }
#header .tf-hang { top: auto; bottom: 0; }
.tf-hang svg { display: block; width: 100%; height: 100%; }

/* ── Coins du cadre principal ───────────────────────────── */
#container { position: relative; }
.tf-corner {
    position: absolute; top: 0; width: 84px; height: 84px; pointer-events: none; z-index: 5;
    background: var(--tf-corner-art, none) no-repeat 0 0 / contain;
}
.tf-corner.l { left: 0; }
.tf-corner.r { right: 0; transform: scaleX(-1); }

/* ── Bouton particules on/off ───────────────────────────── */
.tf-toggle {
    position: fixed; right: 14px; bottom: 14px; z-index: 950;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: var(--tf-btn-bg, rgba(4, 18, 31, .88)); color: #fff; font-size: 22px; line-height: 1;
    border: 1px solid var(--tf-accent, #fff); box-shadow: 0 0 12px var(--tf-glow, rgba(255,255,255,.4));
}
.tf-toggle:hover, .tf-toggle:focus-visible { background: var(--tf-accent-d, #333); outline: 2px solid #fff; outline-offset: 2px; }
.tf-toggle[aria-pressed="false"] { opacity: .65; }

/* ════════════ MENUS ════════════ */
#menu > ul > li.rubrique { position: relative; }
#menu > ul > li.rubrique::after {
    content: ''; position: absolute; top: 5px; left: 150px; width: 34px; height: 32px; z-index: 3; pointer-events: none;
    background: var(--tf-menu-art, none) no-repeat center / contain;
    filter: drop-shadow(0 0 4px var(--tf-glow, rgba(255,255,255,.4)));
}
#menu > ul > li.rubrique::before {
    content: ''; position: absolute; top: 4px; left: 4px; right: 12px; height: 10px; z-index: 2; pointer-events: none;
    background: var(--tf-menu-top, none);
}
#mobile-menu .rubrique-header { background: var(--tf-menu-art, none) no-repeat right 16px center / 30px 26px; }
.machine-list summary::before { content: var(--tf-bullet, '▸'); color: var(--tf-accent, inherit); font-size: .85em; }
.machine-list details[open] > summary::before { transform: none; }
#menu li li::marker, #mobile-menu li li::marker { color: var(--tf-accent); }
#menu li li:nth-child(even)::marker, #mobile-menu li li:nth-child(even)::marker { color: var(--tf-accent-2); }
.machine-list summary:hover { background: var(--tf-hover-bg, rgba(255,255,255,.08)); }

/* ════════════ NEWS ════════════ */
.cat-chip.is-active {
    background: var(--tf-chip-bg) !important; color: var(--tf-chip-fg, #fff) !important;
    border-color: var(--tf-chip-border, #fff) !important; box-shadow: 0 0 10px var(--tf-glow);
}
.cat-chip:hover { border-color: var(--tf-accent); }

.news-card { position: relative; }
.news-card::before {
    content: ''; position: absolute; top: var(--tf-card-top-y, -10px); left: 18px; right: 18px; height: var(--tf-card-top-h, 14px);
    z-index: 4; pointer-events: none; background: var(--tf-card-top, none);
    border-radius: 7px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.news-card::after {
    content: ''; position: absolute; top: -18px; right: -12px; width: 56px; height: 48px; z-index: 5; pointer-events: none;
    background: var(--tf-card-art, none) no-repeat center / contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); transform: rotate(10deg);
}
.news-card:nth-child(even)::after { right: auto; left: -12px; transform: rotate(-10deg) scaleX(-1); }
.news-card:hover { box-shadow: 0 0 26px var(--tf-glow), 0 0 12px var(--tf-glow-2, transparent); border-color: var(--tf-accent); }

.news-card .title-category { position: relative; }
.news-card .title-category::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
    background: repeating-linear-gradient(-45deg, var(--tf-stripe-a) 0 8px, var(--tf-stripe-b) 8px 16px);
}
.read-more::before { content: var(--tf-btn-icon, ''); }
.read-more:hover, .read-more:focus {
    background: var(--tf-chip-bg) !important; color: var(--tf-chip-fg, #fff) !important;
    border-color: var(--tf-chip-border, #fff) !important; box-shadow: 0 0 12px var(--tf-glow);
}

/* Page article */
.rn-article { position: relative; }
.rn-article::before {
    content: ''; position: absolute; top: -14px; right: -8px; width: 62px; height: 52px; z-index: 5; pointer-events: none;
    background: var(--tf-card-art, none) no-repeat center / contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); transform: rotate(10deg);
}
.rn-section-title { border-bottom-color: var(--tf-accent) !important; }
.rn-section-title::after { background: linear-gradient(90deg, var(--tf-accent), var(--tf-accent-2), transparent) !important; opacity: .7; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .tf-group { height: 50%; }
    .tf-group .hide-sm, .tf-flyer.f2 { display: none; }
    .tf-flyer { width: 30px; }
    .tf-floater { min-width: 28px; right: 4%; top: 4%; opacity: .85; }
    .tf-hang { height: calc(var(--tf-hang-h, 22px) * .7); }
    .tf-corner { width: 46px; height: 46px; }
    .news-card::after { width: 40px; height: 34px; top: -14px; right: -6px; }
    .news-card:nth-child(even)::after { left: -6px; }
    .rn-article::before { width: 44px; height: 36px; right: -4px; }
}

/* ── Mouvements réduits : décor fixe ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tf-flyer { display: none; }
    .tf-floater, .tf-floater.spin svg, .tf-pulse, .tf-flyer .flap-l, .tf-flyer .flap-r { animation: none; }
}
@media print {
    #tf-particles, .tf-group, .tf-flyer, .tf-floater, .tf-hang-hook, .tf-corner, .tf-toggle, .tf-ground, #header::after,
    #menu > ul > li.rubrique::before, #menu > ul > li.rubrique::after, .news-card::before, .news-card::after, .rn-article::before { display: none !important; }
}