/* ideAI 30/10/2026 : socle commun des thèmes de saison de Sortir Lyon.
   Chaque saison (saisons/<slug>.css) ne fait que redéfinir les jetons ci-dessous et dessiner son décor.
   Jetons du site : --sl-rose (accent), --sl-rouge (accent foncé, textes et boutons), --sl-bleu (accent secondaire).
   Jetons de saison : --saison-nuit, --saison-nuit-2, --saison-accent, --saison-accent-2, --saison-texte, --saison-lueur. */

html.saison {
  --saison-nuit: #16141a;
  --saison-nuit-2: #2a2433;
  --saison-accent: var(--sl-rose, #fb9792);
  --saison-accent-2: var(--sl-bleu, #74cad4);
  --saison-texte: #ffffff;
  --saison-lueur: rgba(251, 151, 146, .45);
}

/* Une page restée en cache après la fin de la saison : le script de base.html.twig retire la classe, tout se masque. */
html:not(.saison) .saison-bandeau,
html:not(.saison) .saison-une,
html:not(.saison) .saison-decor { display: none !important; }

/* Bandeau sous l'en-tête */
.saison-bandeau { background: linear-gradient(90deg, var(--saison-nuit), var(--saison-nuit-2) 50%, var(--saison-nuit)); position: relative; overflow: hidden; }
.saison-bandeau a {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 11px 16px; color: var(--saison-texte) !important; text-decoration: none;
  font: 500 15px/1.3 Jost, Arial, sans-serif; text-align: center;
}
.saison-bandeau i { font-style: normal; font-size: 20px; line-height: 1; display: inline-block; margin-right: 6px; vertical-align: -3px; }
.saison-bandeau b { font-weight: 600; }
.saison-bandeau span {
  background: var(--saison-accent); color: #fff; padding: 6px 15px; border-radius: 999px;
  font-weight: 600; font-size: 13.5px; white-space: nowrap; box-shadow: 0 0 0 0 var(--saison-lueur);
}
@media (max-width: 600px) {
  .saison-bandeau a { font-size: 14px; padding: 10px 12px; }
}

/* Bloc de saison sur l'accueil */
.saison-une { background: var(--saison-nuit); color: var(--saison-texte); position: relative; overflow: hidden; }
.saison-une-in { max-width: 1180px; margin: 0 auto; padding: 34px 20px 30px; position: relative; z-index: 1; }
.saison-une-sur { margin: 0 0 6px; color: var(--saison-accent); font: 600 12.5px Jost, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.saison-une h2 { margin: 0 0 8px; color: var(--saison-texte) !important; font: 700 clamp(26px, 4.2vw, 40px)/1.1 Jost, Arial, sans-serif; }
.saison-une-txt { margin: 0 0 20px; max-width: 680px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; }
.saison-une-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; }
.saison-une-liste a {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 15px 16px; border-radius: 16px; text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--saison-texte) !important;
  transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
}
.saison-une-liste a:hover { transform: translateY(-3px); border-color: var(--saison-accent); box-shadow: 0 10px 30px -8px var(--saison-lueur); background: rgba(255,255,255,.09); }
.saison-une-quand { align-self: flex-start; background: var(--saison-accent); color: #fff; font: 700 13px Jost, Arial, sans-serif; padding: 4px 11px; border-radius: 999px; }
.saison-une-quoi { display: flex; flex-direction: column; gap: 3px; }
.saison-une-quoi b { font: 600 17px/1.25 Jost, Arial, sans-serif; }
.saison-une-quoi small { color: rgba(255,255,255,.7); font-size: 13.5px; }
.saison-une-quoi em { font-style: normal; color: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1.45; }
.saison-une-liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.saison-une-liens a {
  padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: var(--saison-texte) !important;
  text-decoration: none; font: 600 14.5px Jost, Arial, sans-serif;
}
.saison-une-liens a.principal { background: var(--saison-accent); border-color: var(--saison-accent); }
@media (max-width: 640px) {
  .saison-une-in { padding: 26px 16px 24px; }
  /* Sur téléphone : une rangée de cartes à faire défiler du doigt */
  .saison-une-liste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .saison-une-liste::-webkit-scrollbar { display: none; }
  .saison-une-liste li { flex: 0 0 76%; scroll-snap-align: start; }
  .saison-une-liens a { flex: 1 1 auto; text-align: center; }
}

/* Calque de décor dans l'en-tête photo de l'accueil (au-dessus du voile, sous le texte) */
.saison-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.saison-decor i, .saison-decor .saison-brume { position: absolute; display: block; }

@media (prefers-reduced-motion: reduce) {
  html.saison *, html.saison *::before, html.saison *::after { animation: none !important; }
}

/* ===== Effets communs (saisons.js) ===== */
html:not(.saison) .saison-sym, html:not(.saison) .saison-marges, html:not(.saison) .saison-apparition, html:not(.saison) .saison-eclair { display: none !important; }
.saison-sym { display: inline-block; margin-left: .35em; font-size: .7em; vertical-align: .12em; animation: saison-balance 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes saison-balance { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.saison-marges { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.saison-marge { position: absolute; opacity: .55; animation: saison-flotte 7s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
@keyframes saison-flotte { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }
.saison-apparition { position: fixed; right: 18px; bottom: -80px; z-index: 50; pointer-events: none; font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.saison-apparition.vu { animation: saison-coucou 4.2s ease-in-out 1; }
@keyframes saison-coucou {
  0% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-110px) rotate(-8deg); }
  45% { transform: translateY(-104px) rotate(8deg); }
  65% { transform: translateY(-110px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(0); }
}
@media (max-width: 640px) { .saison-apparition { right: 10px; font-size: 42px; } }
/* Laisser la place au bouton WhatsApp s'il est affiché */
#btnWhatsApp ~ .saison-apparition, body:has(#btnWhatsApp) .saison-apparition { right: auto; left: 14px; }
.saison-eclair { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(110% 90% at 70% 0%, rgba(240, 236, 255, .85), rgba(200, 190, 255, .35) 55%, rgba(200, 190, 255, .1) 85%); }
.saison-eclair.on { animation: saison-eclair 1.4s ease-out 1; }
@keyframes saison-eclair { 0% { opacity: 0; } 4% { opacity: .75; } 9% { opacity: .08; } 15% { opacity: .55; } 32% { opacity: 0; } 100% { opacity: 0; } }
/* Araignée au bout de son fil (effet « araignee ») */
html:not(.saison) .saison-araignee { display: none !important; }
.saison-araignee { position: fixed; top: 0; right: 14px; z-index: 40; pointer-events: none; width: 34px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; visibility: hidden; }
.saison-araignee .fil { display: block; width: 1px; height: 0; background: linear-gradient(rgba(120, 110, 130, .2), rgba(120, 110, 130, .75)); }
.saison-araignee svg { display: block; margin-top: -2px; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.saison-araignee.vu { visibility: visible; animation: saison-balancier 9s ease-in-out 1; }
.saison-araignee.vu .fil { animation: saison-fil 9s ease-in-out 1; }
@keyframes saison-fil {
  0% { height: 0; }
  30% { height: var(--saison-fil, 180px); }
  38% { height: calc(var(--saison-fil, 180px) - 14px); }
  46% { height: var(--saison-fil, 180px); }
  70% { height: var(--saison-fil, 180px); }
  100% { height: 0; }
}
@keyframes saison-balancier { 0%, 30% { transform: rotate(0); } 40% { transform: rotate(5deg); } 52% { transform: rotate(-5deg); } 62% { transform: rotate(3deg); } 70%, 100% { transform: rotate(0); } }
@media (max-width: 640px) { .saison-araignee svg { width: 28px; height: 26px; } }

/* ===== Boîte à effets (saisons.js) ===== */
html:not(.saison) .saison-pluie, html:not(.saison) .saison-guirlande, html:not(.saison) .saison-lumieres,
html:not(.saison) .saison-feux, html:not(.saison) .saison-lucioles, html:not(.saison) .saison-bulles { display: none !important; }

/* Pluie : neige, pétales, feuilles, cœurs, confettis */
.saison-pluie { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.saison-pluie.dans-hero { position: absolute; z-index: 1; }
.saison-pluie span { position: absolute; top: -40px; display: block; line-height: 1; font-size: var(--t, 18px); animation-name: saison-chute, saison-roulis; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; will-change: transform; }
.saison-pluie .flocon { width: var(--t, 5px); height: var(--t, 5px); border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,0) 72%); }
@keyframes saison-chute { from { top: -40px; } to { top: calc(100% + 40px); } }
@keyframes saison-roulis { from { transform: translateX(calc(var(--x, 20px) * -1)) rotate(-18deg); } to { transform: translateX(var(--x, 20px)) rotate(18deg); } }

/* Guirlande sous l'en-tête */
.saison-guirlande { position: absolute; left: 0; right: 0; bottom: -16px; height: 22px; pointer-events: none; display: flex; justify-content: space-around; z-index: 2;
  background: radial-gradient(120% 70% at 50% -20%, transparent 62%, rgba(40, 40, 40, .55) 63%, transparent 66%) 0 0 / 44px 22px repeat-x; }
.saison-guirlande .ampoule { position: relative; display: block; width: 8px; height: 12px; border-radius: 50% 50% 45% 45%; background: var(--c); box-shadow: 0 0 8px 2px var(--c); opacity: .95; animation: saison-scintille 2.4s ease-in-out infinite; }
.saison-guirlande .ampoule::before { content: ""; position: absolute; left: 2px; top: -4px; width: 4px; height: 5px; background: #3a3a3a; border-radius: 1px; }
.saison-guirlande .g1 { animation-delay: -.8s; } .saison-guirlande .g2 { animation-delay: -1.6s; }
@keyframes saison-scintille { 0%, 100% { opacity: 1; box-shadow: 0 0 10px 3px var(--c); } 50% { opacity: .35; box-shadow: 0 0 2px 0 var(--c); } }

/* Lumières projetées sur la photo d'accueil */
.saison-lumieres { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.saison-lumieres .halo { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 62%); opacity: .38; filter: blur(10px); animation: saison-halo 18s ease-in-out infinite alternate; }
.saison-lumieres .h0 { left: -15%; top: -30%; }
.saison-lumieres .h1 { right: -20%; top: -10%; animation-duration: 23s; animation-delay: -6s; }
.saison-lumieres .h2 { left: 20%; bottom: -45%; animation-duration: 27s; animation-delay: -12s; }
@keyframes saison-halo { 0% { transform: translate(0, 0) scale(1); opacity: .25; } 50% { opacity: .45; } 100% { transform: translate(14vw, 8vh) scale(1.15); opacity: .3; } }

/* Feux d'artifice */
.saison-feux { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.saison-feux .bouquet { position: absolute; width: 0; height: 0; }
.saison-feux .bouquet i { position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; animation: saison-etincelle 2s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes saison-etincelle { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 70% { opacity: .9; } 100% { transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(.4); opacity: 0; } }

/* Lucioles */
.saison-lucioles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.saison-lucioles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px 3px var(--c); animation-name: saison-errance, saison-pulse; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: alternate, alternate; }
@keyframes saison-errance { from { transform: translate(0, 0); } to { transform: translate(var(--x), var(--y)); } }
@keyframes saison-pulse { 0% { opacity: .15; } 100% { opacity: .95; } }

/* Bulles */
.saison-bulles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.saison-bulles i { position: absolute; bottom: -20px; border-radius: 50%; border: 1px solid rgba(255, 240, 200, .7); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(255, 230, 170, .12) 60%); animation: saison-monte linear infinite; }
@keyframes saison-monte { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(14px, -110vh); opacity: 0; } }

/* Silhouette de Lyon (Fourvière et toits, fenêtres allumées) au pied de la page sombre : effet « pied-lyon » */
html.saison-pied-lyon .slx-pied { position: relative; padding-bottom: 104px !important; overflow: hidden; }
html.saison-pied-lyon .slx-pied::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110'%3E%3Cg fill='%231a1c2e'%3E %3Cpath d='M0 110 V78 H30 V70 H52 V82 H70 V64 H96 V76 H118 V60 H130 V54 H142 V60 H154 V74 H176 V66 H198 V80 H220 V58 H236 V50 H252 V58 H268 V72 H290 V110Z'/%3E %3Cpath d='M290 110 V60 Q330 40 380 46 Q420 38 470 52 V110Z'/%3E %3Cpath d='M330 50 V30 H334 V24 H338 V30 H346 V24 H350 V30 H360 V30 H364 V24 H368 V30 H376 V24 H380 V30 H384 V50Z'/%3E %3Cpath d='M436 46 L442 6 L448 46Z'/%3E %3Cpath d='M470 110 V68 H492 V60 H512 V72 H530 V56 H548 V66 H566 V74 H600 V110Z'/%3E%3C/g%3E %3Cg fill='%23ffd36b'%3E%3Crect x='40' y='86' width='4' height='5'/%3E%3Crect x='80' y='72' width='4' height='5'/%3E%3Crect x='104' y='84' width='4' height='5'/%3E%3Crect x='136' y='66' width='4' height='5'/%3E%3Crect x='186' y='76' width='4' height='5'/%3E%3Crect x='240' y='66' width='4' height='5'/%3E%3Crect x='258' y='80' width='4' height='5'/%3E%3Crect x='352' y='38' width='3' height='4'/%3E%3Crect x='500' y='70' width='4' height='5'/%3E%3Crect x='538' y='66' width='4' height='5'/%3E%3Crect x='580' y='84' width='4' height='5'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 600px 110px;
}
html.saison-pied-lyon .slx-pied > * { position: relative; z-index: 1; }

/* Derniers métros dans le bandeau (mode soirée) */
.saison-metros { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 0 12px 10px; margin-top: -4px; color: rgba(255, 255, 255, .85); font: 500 13.5px/1.2 Jost, Arial, sans-serif; }
.saison-metros small { font-size: 12.5px; color: rgba(255, 255, 255, .65); width: 100%; text-align: center; }
@media (min-width: 700px) { .saison-metros small { width: auto; } }
.saison-metros em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.saison-metros em i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; }

/* Ciel étoilé et lune sur la photo d'accueil (effet « ciel ») */
html:not(.saison) .saison-ciel { display: none !important; }
.saison-ciel { position: absolute; left: 0; right: 0; top: 0; height: 55%; z-index: 1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.saison-ciel i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px 1px rgba(255, 255, 255, .7); animation: saison-etoile 3s ease-in-out infinite alternate; }
.saison-ciel i.g { width: 3px; height: 3px; }
@keyframes saison-etoile { from { opacity: .15; } to { opacity: .95; } }
.saison-ciel .lune { position: absolute; right: 9%; top: 14%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffaf0, #f3e3bf 62%, #d9c08e); box-shadow: 0 0 30px 8px rgba(255, 240, 200, .25), inset -8px -6px 0 0 rgba(0, 0, 0, .12); animation: none; }
@media (max-width: 640px) { .saison-ciel .lune { width: 24px; height: 24px; right: 5%; top: 9px; } }

/* « Ouvert en ce moment » et météo du soir en tête de l'accueil (effet « ce-soir-haut ») */
html.saison.saison-fx-ce-soir-haut .sla-main > #sla-ouvert { order: -2; }
html.saison.saison-fx-ce-soir-haut .sla-main > #sl-meteo-accueil { order: -1; }