/* Thèmes saisonniers (assets/js/cos-season.js) : particules, guirlande sous le menu, décor du logo, menu caché à droite. */

.cos-season-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 190; }

/* ── Guirlande accrochée sous la barre de navigation ── */
.cs-garland { position: absolute; left: 0; right: 0; top: 100%; height: 26px; display: flex; justify-content: space-around; align-items: flex-start;
  pointer-events: none; overflow: hidden; }
.cs-garland--lights::before { content: ''; position: absolute; left: -2%; right: -2%; top: -14px; height: 22px;
  border-bottom: 1.5px solid rgba(40, 60, 40, .9); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.cs-bulb { position: relative; width: 8px; height: 13px; margin-top: 5px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--c); box-shadow: 0 0 8px 2px var(--c); animation: cs-twinkle 1.8s ease-in-out infinite; animation-delay: var(--d); }
.cs-bulb::before { content: ''; position: absolute; left: 1.5px; top: -3px; width: 5px; height: 4px; border-radius: 1px; background: #4b5563; }
.cs-bulb:nth-child(even) { margin-top: 9px; }
@keyframes cs-twinkle { 50% { opacity: .35; box-shadow: 0 0 2px 0 var(--c); } }

.cs-garland--bunting_pastel::before, .cs-garland--bunting_blue::before, .cs-garland--bunting_color::before, .cs-garland--bunting_tricolor::before,
.cs-garland--hearts::before, .cs-garland--stars::before, .cs-garland--flowers::before, .cs-garland--pink_ribbon::before, .cs-garland--pumpkins::before {
  content: ''; position: absolute; left: 0; right: 0; top: 1px; border-top: 1px solid rgba(230, 205, 149, .45); }
.cs-pennant { width: 0; height: 0; margin-top: 1px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid var(--c);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); transform-origin: top center; animation: cs-sway 3.2s ease-in-out infinite; }
.cs-pennant:nth-child(odd) { animation-delay: -1.6s; }
.cs-flag { font-size: 13px; line-height: 1; margin-top: 2px; color: var(--c, #E6CD95); transform-origin: top center; animation: cs-sway 3.6s ease-in-out infinite; }
.cs-flag:nth-child(odd) { animation-delay: -1.8s; }
.cs-star { color: #E6CD95; text-shadow: 0 0 6px rgba(230,205,149,.8); animation: cs-twinkle-star 2.2s ease-in-out infinite; animation-delay: var(--d); }
.cs-svg { line-height: 0; }
.cs-svg svg { display: block; }
@keyframes cs-sway { 50% { transform: rotate(6deg); } }
@keyframes cs-twinkle-star { 50% { opacity: .4; } }

/* ── Décor posé sur le logo ── */
.cs-has-logo { position: relative; }
.cs-logo { position: absolute; pointer-events: none; line-height: 0; z-index: 1; }
.cs-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cs-logo--baubles { left: 3px; top: calc(50% + 14px); width: 38px; height: 26px; transform-origin: top center; animation: cs-sway 3s ease-in-out infinite; }
.cs-logo--party_hat { left: 13px; top: calc(50% - 38px); width: 17px; height: 20px; transform: rotate(-14deg); }
.cs-logo--witch_hat { left: 5px; top: calc(50% - 36px); width: 30px; height: 22px; transform: rotate(-10deg); }
.cs-logo--bunny_ears { left: 6px; top: calc(50% - 40px); width: 30px; height: 22px; }
.cs-logo--heart, .cs-logo--flower, .cs-logo--cockade, .cs-logo--leaf, .cs-logo--notes { left: 28px; top: calc(50% - 24px); width: 17px; height: 17px; }
.cs-logo--heart { animation: cs-beat 1.4s ease-in-out infinite; }
.cs-logo--pink_ribbon { left: 29px; top: calc(50% - 24px); width: 14px; height: 18px; }
.cs-logo--bow_tie { left: 12px; top: calc(50% + 15px); width: 19px; height: 10px; }
@keyframes cs-beat { 15%, 45% { transform: scale(1.15); } 30% { transform: scale(1); } }

/* ── Menu caché à droite (onglet + panneau) ── */
.cs-menu { position: fixed; right: 0; top: 50%; z-index: 14200; transform: translate(calc(100% - 34px), -50%); transition: transform .3s ease;
  display: flex; align-items: center; font-family: inherit; }
.cs-menu.is-open { transform: translate(0, -50%); }
.cs-menu__tab { width: 34px; height: 46px; border: 1px solid rgba(230,205,149,.35); border-right: 0; border-radius: 12px 0 0 12px;
  background: rgba(7, 12, 20, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 18px; cursor: pointer;
  opacity: .7; transition: opacity .2s; padding: 0; }
.cs-menu__tab:hover, .cs-menu__tab:focus-visible, .cs-menu.is-open .cs-menu__tab { opacity: 1; outline: none; }
.cs-menu__panel { width: 210px; padding: 14px 16px; background: rgba(7, 12, 20, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(230,205,149,.35); border-right: 0; border-radius: 14px 0 0 14px; color: #f3f6fc; box-shadow: -10px 10px 40px -10px rgba(0,0,0,.6); }
.cs-menu__title { margin: 0 0 10px; font-weight: 800; font-size: .92rem; color: #E6CD95; }
.cs-menu__title small { font-weight: 600; color: #9fb0d1; }
.cs-menu__note { margin: 8px 0 0; font-size: .74rem; color: #9fb0d1; line-height: 1.4; }
.cs-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: .86rem; cursor: pointer; }
.cs-row input[type="checkbox"] { position: absolute; opacity: 0; width: 40px; height: 22px; right: 0; margin: 0; cursor: pointer; z-index: 1; }
.cs-row i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); flex-shrink: 0; transition: background .2s; }
.cs-row i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cs-row input:checked + i { background: #E6CD95; }
.cs-row input:checked + i::after { transform: translateX(16px); background: #0b1626; }
.cs-row input:focus-visible + i { outline: 2px solid #E6CD95; outline-offset: 2px; }
.cs-row--vol input { width: 110px; accent-color: #E6CD95; }
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

html.light .cs-menu__tab, html.light .cs-menu__panel { background: rgba(255,255,255,.92); color: #1f2937; border-color: rgba(176, 141, 60, .4); }
html.light .cs-menu__title { color: #8a6a1f; }
html.light .cs-row i { background: rgba(0,0,0,.15); }

@media (prefers-reduced-motion: reduce) {
  .cs-bulb, .cs-pennant, .cs-flag, .cs-star, .cs-logo { animation: none !important; }
  .cs-menu { transition: none; }
}
@media print { .cos-season-canvas, .cs-garland, .cs-logo, .cs-menu { display: none !important; } }

/* ═════════ Surprises (assets/js/cos-season-extras.js) ═════════ */
.cx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 14100; /* au-dessus de la fenêtre promo (14000) et du bandeau cookies */ overflow: hidden; }
.cx-sprite { position: absolute; left: 0; top: 0; will-change: transform; line-height: 0; }
.cx-sprite svg { display: block; overflow: visible; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.cx-bit { width: 16px; height: 16px; }
.cx-bit svg { width: 100%; height: 100%; filter: none; }
.cx-ghost { pointer-events: auto; cursor: pointer; }
.cx-ghost svg { filter: drop-shadow(0 0 14px rgba(199,210,254,.55)); }
.cx-nose { filter: drop-shadow(0 0 4px #ef4444); animation: cx-glow 1s ease-in-out infinite; }
.cx-legs { animation: cx-gallop .35s linear infinite alternate; transform-origin: 18px 44px; }
.cx-deer:nth-child(2) .cx-legs { animation-delay: -.17s; }
.cx-wing { transform-box: fill-box; animation: cx-flap .18s ease-in-out infinite alternate; }
.cx-wing--l { transform-origin: right center; } .cx-wing--r { transform-origin: left center; }
.cx-butterfly .cx-wing { animation-duration: .12s; }
.cx-flame { animation: cx-glow .12s linear infinite alternate; }
@keyframes cx-glow { to { opacity: .45; } }
@keyframes cx-gallop { to { transform: skewX(14deg); } }
@keyframes cx-flap { to { transform: scaleX(.35); } }
.cx-speech { position: absolute; white-space: nowrap; line-height: 1.2; padding: 5px 10px; border-radius: 12px; background: #fff; color: #111827;
  font: 800 13px/1.2 system-ui, sans-serif; box-shadow: 0 6px 16px rgba(0,0,0,.3); animation: cx-pop .25s ease-out; }
.cx-speech::after { content: ''; position: absolute; left: 10px; bottom: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
@keyframes cx-pop { from { transform: scale(.4); opacity: 0; } }
.cx-sparkle { width: 5px; height: 5px; border-radius: 50%; background: #fde68a; box-shadow: 0 0 8px 2px rgba(230,205,149,.9); animation: cx-fade 1.2s ease-out forwards; }
.cx-puff { width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: .85; animation: cx-puff 2.6s ease-out forwards; }
@keyframes cx-fade { to { opacity: 0; transform: translateY(14px) scale(.3); } }
@keyframes cx-puff { to { opacity: 0; transform: scale(3.4) translateY(4px); } }
.cx-bigtext { left: 50% !important; top: 34% !important; transform: translate(-50%, -50%); }
.cx-bigtext span { display: block; font: 700 clamp(2rem, 7vw, 4.4rem)/1 'Playfair Display', Georgia, serif; text-shadow: 0 4px 24px rgba(0,0,0,.6);
  white-space: nowrap; animation: cx-big 2.6s ease-out forwards; }
@keyframes cx-big { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.05); } 25% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.cs-logo.cx-clickable { pointer-events: auto; cursor: pointer; }
.cx-wiggle { animation: cx-wiggle .4s ease-in-out !important; }
@keyframes cx-wiggle { 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(10deg) scale(1.1); } }
.cx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 14300; transform: translate(-50%, 20px); opacity: 0; transition: .35s ease;
  padding: 10px 18px; border-radius: 999px; background: rgba(7,12,20,.92); color: #f3f6fc; border: 1px solid rgba(230,205,149,.4);
  font: 700 .9rem/1.3 system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: calc(100vw - 32px); text-align: center; }
.cx-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.cx-dark { position: fixed; inset: 0; z-index: 14150; /* au-dessus des personnages (14100) : on ne les voit que dans le faisceau */ pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle 130px at var(--x) var(--y), transparent 0, transparent 60%, rgba(0,0,0,.94) 100%); }
.cx-dark.is-on { opacity: 1; }
.cx-hunt { position: absolute; z-index: 5; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .2s, transform .2s; }
.cx-hunt:hover, .cx-hunt:focus-visible { opacity: 1; transform: scale(1.35); outline: none; }
.cx-hunt svg { width: 100%; height: 100%; display: block; }
.cx-modal { position: fixed; inset: 0; z-index: 14400; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 18px; }
.cx-modal__box { width: 100%; max-width: 380px; background: #0b1220; color: #f3f6fc; border: 1px solid rgba(230,205,149,.4); border-radius: 18px; padding: 26px 22px; text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.6); animation: cx-pop .3s ease-out; font-family: system-ui, sans-serif; }
.cx-modal__icon { width: 56px; height: 56px; margin: 0 auto 12px; }
.cx-modal__icon svg { width: 100%; height: 100%; }
.cx-modal__box h2 { margin: 0 0 8px; font: 700 1.4rem/1.2 'Playfair Display', Georgia, serif; color: #E6CD95; }
.cx-modal__box p { margin: 0 0 14px; color: #cbd5e1; line-height: 1.55; }
.cx-code { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 14px; }
.cx-code code { padding: 8px 14px; border: 1px dashed #E6CD95; border-radius: 10px; font: 800 1.1rem ui-monospace, monospace; letter-spacing: .06em; color: #E6CD95; }
.cx-code button, .cx-modal__close { border: 1px solid rgba(255,255,255,.2); background: transparent; color: #f3f6fc; border-radius: 10px; padding: 8px 14px; font: 700 .9rem system-ui, sans-serif; cursor: pointer; }
.cx-modal__close { background: #E6CD95; color: #0b1220; border-color: #E6CD95; }
html.light .cx-modal__box { background: #fff; color: #1f2937; } html.light .cx-modal__box p { color: #475569; }
@media (prefers-reduced-motion: reduce) { .cx-layer, .cx-dark { display: none; } }
@media print { .cx-layer, .cx-toast, .cx-hunt, .cx-dark { display: none !important; } }

/* Araignées d'Halloween (cos-season-extras.js) */
.cx-spider { position: absolute; display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: pointer;
  transform-origin: top center; z-index: 1; padding: 0 6px; }
.cx-spider__thread { display: block; width: 1px; height: 0; background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.45)); }
.cx-spider__body { display: block; line-height: 0; margin-top: -3px; filter: drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.cx-spider__body svg { display: block; }
.cx-spider.is-down { animation: cx-spider-sway 2.4s ease-in-out infinite; }
.cx-spider.is-down .cx-spider__legs, .cx-spider.is-scared .cx-spider__legs { animation: cx-spider-legs .25s linear infinite alternate; transform-origin: 20px 18px; }
.cx-spider.is-scared .cx-spider__legs { animation-duration: .08s; }
@keyframes cx-spider-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes cx-spider-legs { to { transform: scaleY(.85) translateY(1px); } }
@media (prefers-reduced-motion: reduce) { .cx-spider { display: none; } }

/* Compte Fondateur : objet de la chasse au trésor bien visible (pour vérifier où il est caché) */
.cx-hunt--reveal { opacity: 1; animation: cx-hunt-pulse 1.6s ease-out infinite; border-radius: 50%; }
@keyframes cx-hunt-pulse { 0% { box-shadow: 0 0 0 0 rgba(230,205,149,.85); } 100% { box-shadow: 0 0 0 16px rgba(230,205,149,0); } }

/* Colombe de la Saint-Valentin : ailes qui battent depuis l'épaule */
.cx-dwing { transform-box: fill-box; transform-origin: 50% 100%; animation: cx-dflap .34s ease-in-out infinite alternate; }
.cx-dwing--back { animation-delay: -.05s; }
@keyframes cx-dflap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }