/*
 * Habillages saisonniers du site : Noël, Halloween et Pâques.
 * Le mode est choisi dans l'administration (Paramètres) et s'applique à
 * tous les visiteurs. Les palettes reprennent les variables du thème
 * (--sc-*) ; Halloween, en mode sombre, corrige aussi les surfaces que la
 * feuille principale peint en blanc en dur.
 */

/* ---------- Noël ---------- */
html[data-theme="noel"] {
    --sc-50: #fff6f6;
    --sc-100: #ffe1e1;
    --sc-200: #ffc4c4;
    --sc-500: #c0182b;
    --sc-600: #a51122;
    --sc-700: #7d0c19;
    --sc-900: #4a0710;
    --sc-950: #2b040a;
    --sc-ink: #33091a;
    --sc-muted: #6d4a55;
    --sc-line: #f7dfe2;
}
html[data-theme="noel"] body {
    background:
        radial-gradient(1100px 420px at 85% -10%, rgba(192, 24, 43, .08), transparent 70%),
        radial-gradient(900px 380px at 10% -6%, rgba(92, 154, 255, .10), transparent 70%),
        #fffdfa;
}

/* ---------- Halloween : orange de citrouille sur fond clair, touche violette ---------- */
html[data-theme="halloween"] {
    --sc-50: #fff5ec;
    --sc-100: #ffe8d2;
    --sc-200: #ffd4ab;
    --sc-500: #ea580c;
    --sc-600: #d64a08;
    --sc-700: #a83806;
    --sc-900: #622004;
    --sc-950: #381202;
    --sc-ink: #43210b;
    --sc-muted: #7c5138;
    --sc-line: #fbe6d4;
}
html[data-theme="halloween"] body {
    background:
        radial-gradient(1100px 420px at 85% -10%, rgba(234, 88, 12, .10), transparent 70%),
        radial-gradient(900px 380px at 10% -6%, rgba(126, 87, 194, .12), transparent 70%),
        #fffcf7;
}
html[data-theme="halloween"] ::selection { background: #ffd4ab; }
html[data-theme="halloween"] .sc-hero {
    background:
        radial-gradient(38rem 22rem at 90% -10%, rgba(234, 88, 12, .18), transparent 60%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(255, 212, 171, .5), transparent 60%),
        linear-gradient(180deg, #fffcf7, var(--sc-50));
}
html[data-theme="halloween"] .sc-dom-hero {
    background:
        radial-gradient(38rem 24rem at 85% -10%, rgba(234, 88, 12, .18), transparent 60%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(255, 212, 171, .55), transparent 60%),
        linear-gradient(180deg, #fffcf7, var(--sc-50));
}
html[data-theme="halloween"] .sc-visual { box-shadow: 0 1.5rem 3.5rem rgba(234, 88, 12, .28); }
html[data-theme="halloween"] .sc-visual-cloud { color: #ffedd8; }

/* ---------- Pâques : préAU printanier, rose, menthe et soleil ---------- */
html[data-theme="paques"] {
    --sc-50: #fdf6fa;
    --sc-100: #fce8f2;
    --sc-200: #f9d3e6;
    --sc-500: #e0559b;
    --sc-600: #cc4187;
    --sc-700: #a4316a;
    --sc-900: #5e1c3e;
    --sc-950: #381025;
    --sc-ink: #3a1630;
    --sc-muted: #7a5b6c;
    --sc-line: #f6e3ee;
}
html[data-theme="paques"] body {
    background:
        radial-gradient(1100px 420px at 85% -10%, rgba(224, 85, 155, .09), transparent 70%),
        radial-gradient(900px 380px at 10% -6%, rgba(255, 214, 102, .18), transparent 70%),
        radial-gradient(700px 320px at 50% 110%, rgba(140, 216, 173, .16), transparent 70%),
        #fffcf7;
}
html[data-theme="paques"] ::selection { background: #ffe3a3; }
html[data-theme="paques"] .sc-hero {
    background:
        radial-gradient(38rem 22rem at 90% -10%, rgba(224, 85, 155, .16), transparent 60%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(255, 214, 102, .30), transparent 60%),
        linear-gradient(180deg, #fffcf7, var(--sc-50));
}
html[data-theme="paques"] .sc-dom-hero {
    background:
        radial-gradient(38rem 24rem at 85% -10%, rgba(224, 85, 155, .16), transparent 60%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(140, 216, 173, .30), transparent 60%),
        linear-gradient(180deg, #fffcf7, var(--sc-50));
}

/* ---------- Particules décoratives, coupées si le visiteur réduit les animations ---------- */
html[data-theme] .sc-saison-effets {
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    overflow: hidden;
}
html[data-theme] .sc-saison-effets span {
    position: absolute;
    top: -6vh;
    animation: sc-saison-tombe linear infinite;
}

/* Noël : flocons ronds, bleutés et blancs. */
html[data-theme="noel"] .sc-saison-effets span {
    border-radius: 50%;
    background: rgba(160, 190, 235, .55);
}
html[data-theme="noel"] .sc-saison-effets span:nth-child(3n) { background: rgba(255, 255, 255, .8); }

/* Halloween : feuilles d'automne qui virevoltent — orange, ambre et une violette. */
html[data-theme="halloween"] .sc-saison-effets span {
    width: 8px !important;
    height: 6px !important;
    border-radius: 70% 30% 65% 35% / 60% 55% 45% 40%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    opacity: .7;
    animation-name: sc-saison-feuille;
}
html[data-theme="halloween"] .sc-saison-effets span:nth-child(2n) {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border-radius: 35% 65% 40% 60% / 55% 45% 60% 40%;
}
html[data-theme="halloween"] .sc-saison-effets span:nth-child(4n) {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    opacity: .55;
}

@keyframes sc-saison-tombe {
    0% { transform: translateY(-6vh) translateX(0) rotate(0deg); }
    100% { transform: translateY(106vh) translateX(6vw) rotate(240deg); }
}
@keyframes sc-saison-feuille {
    0% { transform: translateY(-6vh) translateX(0) rotate(0deg); opacity: 0; }
    8% { opacity: .8; }
    30% { transform: translateY(30vh) translateX(3.5vw) rotate(160deg); }
    55% { transform: translateY(60vh) translateX(-3vw) rotate(320deg); opacity: .7; }
    80% { transform: translateY(88vh) translateX(2.5vw) rotate(460deg); opacity: .5; }
    100% { transform: translateY(106vh) translateX(-1vw) rotate(560deg); opacity: 0; }
}
@keyframes sc-saison-petale {
    0% { transform: translateY(-6vh) translateX(0) rotate(0deg) scaleX(1); }
    25% { transform: translateY(25vh) translateX(2vw) rotate(120deg) scaleX(.6); }
    50% { transform: translateY(55vh) translateX(-2vw) rotate(200deg) scaleX(1); }
    75% { transform: translateY(80vh) translateX(4vw) rotate(300deg) scaleX(.5); }
    100% { transform: translateY(106vh) translateX(2vw) rotate(380deg) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] .sc-saison-effets { display: none; }
}

/* Bandeau de saison : l'emoji prend un peu d'aisance. */
.sc-announce-saison [aria-hidden] { font-size: 1.05rem; }