/* ============================================================
   SAISONNALITÉ — décorations légères de l'intranet
   Chargée uniquement quand un thème est affiché (partials/saisonnalite.ejs).
   Tout est en pointer-events:none : rien ne gêne les clics ni la lecture.
   .saison-discrete / .saison-normale : intensité (les .saison-plus n'apparaissent qu'en « normale »)
   .saison-anim : petites animations (jamais si l'appareil demande « réduire les animations »)
   .sa-desk : masqué sur smartphone (≤ 640 px) pour rester léger
   --saison-top : hauteur du bandeau de menu, posée par le script du partial
   ============================================================ */

:root {
  --sa-encre: #2d3748;                 /* araignées, chauves-souris */
  --sa-fil: rgba(74, 85, 104, .5);     /* toiles, fils */
  --sa-neige: #8fc3e6;                 /* flocons sur fond clair */
  --sa-top: var(--saison-top, 0px);
}
.login-page {
  --sa-encre: #e2e8f0;
  --sa-fil: rgba(255, 255, 255, .55);
  --sa-neige: #ffffff;
}

.saison { position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow: visible; pointer-events: none; z-index: 98; }
.saison *, .saison-masquer, .saison-apercu { box-sizing: border-box; }
.saison svg { display: block; overflow: visible; }
.saison .sa-abs { position: absolute; top: var(--sa-top); }
.saison .sa-fix { position: fixed; }
.saison .saison-plus { display: none; }
.saison-normale .saison-plus { display: block; }
.saison.saison-cachee, .saison-masquer.saison-cachee { display: none !important; }

/* Bouton « Masquer la décoration » (collaborateur) : dans le pied de page, ou flottant sur la page de connexion */
.saison-masquer {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: .8rem; vertical-align: middle;
  min-height: 36px; padding: .3rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid #d8eaf3; color: #1a3a5c;
  font: 600 .75rem/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(26, 58, 92, .12); cursor: pointer; opacity: .85;
}
.saison-masquer:hover { opacity: 1; }
.footer .footer-content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem .2rem; }
.footer .footer-content p { margin: 0; }
.saison-masquer-flottant { position: fixed; left: 10px; bottom: 10px; z-index: 98; margin: 0; }
.login-page .saison-masquer { background: rgba(13, 33, 55, .75); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* Bandeau d'aperçu (administrateur) */
.saison-apercu {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 99;
  max-width: calc(100% - 24px); padding: .5rem .9rem; border-radius: 999px;
  background: #1a3a5c; color: #fff; font-size: .82rem; line-height: 1.3; text-align: center;
  box-shadow: 0 4px 16px rgba(26, 58, 92, .25);
}
.saison-apercu a { color: #9fd6ff; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ------------------------------------------------------------
   HALLOWEEN — toiles dans les coins, araignées suspendues, citrouilles
   ------------------------------------------------------------ */
.sa-toile { width: 150px; height: 150px; }
.sa-toile path { fill: none; stroke: var(--sa-fil); stroke-width: 1.2; stroke-linecap: round; }
.sa-toile-g { left: 0; }
.sa-toile-d { right: 0; transform: scaleX(-1); }
.sa-araignee { width: 34px; height: 100px; transform-origin: 50% 0; }
.sa-araignee-1 { left: 21%; }
.sa-araignee-2 { right: 30%; height: 70px; width: 26px; }
.sa-araignee .sa-fil { stroke: var(--sa-fil); stroke-width: 1; }
.sa-araignee .sa-corps { fill: var(--sa-encre); }
.sa-araignee .sa-patte { fill: none; stroke: var(--sa-encre); stroke-width: 1.6; stroke-linecap: round; }
.sa-araignee .sa-oeil { fill: #ffd166; }
.saison-anim .sa-araignee-1 { animation: saBalance 5.5s ease-in-out infinite; }
.saison-anim .sa-araignee-2 { animation: saBalance 4.2s ease-in-out -1.5s infinite; }
@keyframes saBalance { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.sa-citrouille { right: 12px; bottom: 10px; width: 80px; height: 68px; }
.sa-citrouille-2 { right: 92px; bottom: 8px; width: 50px; height: 42px; }
.sa-citrouille .sa-lueur { opacity: .35; }
.saison-anim .sa-citrouille .sa-lueur { animation: saLueur 2.8s ease-in-out infinite; }
.saison-anim .sa-citrouille-2 .sa-lueur { animation-delay: -1.2s; }
@keyframes saLueur { 0%, 100% { opacity: .22; } 50% { opacity: .5; } }
.sa-chauve { width: 54px; height: 22px; }
.sa-chauve path { fill: var(--sa-encre); }
.sa-chauve-1 { right: 14%; margin-top: 28px; }
.sa-chauve-2 { right: 8%; margin-top: 66px; width: 38px; height: 16px; }
.saison-anim .sa-chauve-1 { animation: saVol 6s ease-in-out infinite; }
.saison-anim .sa-chauve-2 { animation: saVol 7s ease-in-out -2s infinite; }
@keyframes saVol { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ------------------------------------------------------------
   NOËL — guirlande sous le menu, flocons, sapin et cadeaux
   ------------------------------------------------------------ */
.sa-guirlande { left: 0; width: 100%; height: 34px; }
.sa-guirlande .sa-ampoules { opacity: 1; }
.saison-anim .sa-guirlande .sa-ampoules { animation: saScintille 2.4s ease-in-out infinite; }
@keyframes saScintille { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.sa-flocon { top: -30px; width: 16px; height: 16px; color: var(--sa-neige); opacity: .75; }
.sa-flocon path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.saison:not(.saison-anim) .sa-flocon { display: none; }
.saison-anim .sa-flocon { animation: saNeige linear infinite; }
@keyframes saNeige {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(12px, 25vh, 0) rotate(90deg); }
  50%  { transform: translate3d(-8px, 50vh, 0) rotate(180deg); }
  75%  { transform: translate3d(10px, 75vh, 0) rotate(270deg); }
  100% { transform: translate3d(0, 105vh, 0) rotate(360deg); }
}
.sa-sapin { right: 10px; bottom: 6px; width: 120px; height: 100px; }

/* ------------------------------------------------------------
   NOUVEL AN — vœux, feux d'artifice, étoiles, coupes
   ------------------------------------------------------------ */
.sa-voeux {
  left: 50%; transform: translateX(-50%); margin-top: 10px;
  padding: .35rem 1rem; border-radius: 999px; white-space: nowrap;
  background: #1a3a5c; color: #ffd166; font: 700 .95rem/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: .02em; box-shadow: 0 3px 12px rgba(26, 58, 92, .25);
}
.login-page .sa-voeux { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 209, 102, .5); }
.sa-feu { width: 90px; height: 90px; opacity: .9; }
.sa-feu line { stroke-width: 1.5; stroke-linecap: round; }
.sa-feu-1 { right: 3%; margin-top: 8px; }
.sa-feu-2 { right: 12%; margin-top: 44px; width: 60px; height: 60px; }
.sa-feu-3 { right: 22%; margin-top: 16px; width: 44px; height: 44px; }
.saison-anim .sa-feu { animation: saFeu 4s ease-in-out infinite; }
.saison-anim .sa-feu-2 { animation-delay: -1.3s; }
.saison-anim .sa-feu-3 { animation-delay: -2.6s; }
@keyframes saFeu { 0% { opacity: .15; transform: scale(.8); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: .15; transform: scale(1.05); } }
.sa-etoile { width: 14px; height: 14px; }
.sa-etoile path { fill: #f0a500; }
.saison-anim .sa-etoile { animation: saEtoile 2.2s ease-in-out infinite; }
@keyframes saEtoile { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.sa-confetti { top: -20px; width: 7px; height: 12px; border-radius: 2px; opacity: .8; }
.saison:not(.saison-anim) .sa-confetti { display: none; }
.saison-anim .sa-confetti { animation: saNeige linear infinite; }
.sa-coupes { right: 12px; bottom: 8px; width: 74px; height: 64px; }

/* ------------------------------------------------------------
   PÂQUES — œufs décorés, lapin, fleurs, papillon
   ------------------------------------------------------------ */
.sa-oeufs { right: 94px; bottom: 4px; width: 150px; height: 74px; }
.sa-lapin { right: 10px; bottom: 0; width: 86px; height: 86px; }
.saison-anim .sa-lapin { animation: saLapin 3.6s ease-in-out infinite; }
@keyframes saLapin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sa-papillon { right: 9%; margin-top: 22px; width: 34px; height: 28px; }
.saison-anim .sa-papillon { animation: saVol 5s ease-in-out infinite; }
.saison-anim .sa-papillon .sa-aile-g { transform-origin: 17px 14px; animation: saAileG 1.6s ease-in-out infinite; }
.saison-anim .sa-papillon .sa-aile-d { transform-origin: 17px 14px; animation: saAileD 1.6s ease-in-out infinite; }
@keyframes saAileG { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
@keyframes saAileD { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }

/* ------------------------------------------------------------
   Smartphone : moins d'éléments, plus petits
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .saison .sa-desk { display: none !important; }
  .sa-toile { width: 110px; height: 110px; }
  .sa-araignee-1 { left: 14%; height: 80px; width: 28px; }
  .sa-citrouille { width: 58px; height: 50px; right: 8px; bottom: 8px; }
  .sa-guirlande { height: 28px; }
  .sa-sapin { width: 84px; height: 70px; right: 6px; }
  .sa-voeux { font-size: .8rem; padding: .3rem .8rem; }
  .sa-feu-1 { width: 46px; height: 46px; margin-top: 2px; right: 2%; }
  .sa-coupes { width: 54px; height: 46px; }
  .sa-oeufs { width: 96px; height: 48px; right: 66px; }
  .sa-lapin { width: 64px; height: 64px; }
  .saison-masquer { font-size: .7rem; min-height: 34px; margin-left: 0; }
}

/* Accessibilité : aucune animation si l'appareil le demande */
@media (prefers-reduced-motion: reduce) {
  .saison * { animation: none !important; }
  .saison .sa-flocon, .saison .sa-confetti { display: none !important; }
}