/* Thèmes par période (voir src/themes.js) : la classe theme-<nom> est posée sur <body> et le
   décor écrit dans #decor par mountTheme. Sans thème, #decor est vide et rien ne change.
   Animations : transform et opacity seulement (composées par le GPU, légères sur le Pi). */

/* Police auto-hébergée (SIL Open Font License, voir fonts/OFL.txt). */
@font-face {
  font-family: "Creepster";
  src: url('fonts/Creepster-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Socle (valable sans thème : #decor est vide) ---- */
#decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#root { position: relative; z-index: 1; }

/* ---- Éléments posés par ui.js seulement quand un thème est actif ---- */
.bandeau-theme {
  flex: none;
  background: var(--accent);
  color: var(--fond);
  font-weight: 800;
  font-size: 1.2rem; /* ≈ 0,85 × la date */
  line-height: 1.2;
  padding: 0.35rem 0.8rem;
  border-radius: 0.6rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.horloge.avec-icone { display: flex; align-items: center; gap: 0.8rem; }
.horloge.avec-icone > div { min-width: 0; }
/* Citrouille de l'horloge (≈ 0,9 × la hauteur de l'heure) ; la lueur est un pseudo-élément. */
.horloge.avec-icone > .citrouille {
  flex: none;
  position: relative;
  isolation: isolate;
  font-size: 4.5rem;
  line-height: 0;
}
.horloge.avec-icone > .citrouille svg { display: block; }
.horloge.avec-icone > .citrouille::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 160, 40, 0.6) 0%, rgba(255, 138, 0, 0) 65%);
  opacity: 0.3;
  animation: theme-lueur 2.4s ease-in-out infinite alternate;
}
.cit {
  display: inline-block;
  height: 1em;
  margin-right: 0.3em;
  line-height: 0;
  vertical-align: -0.15em;
}
.cit svg { display: block; }
.jour-fete { color: var(--accent); }
.jour-fete svg { vertical-align: -0.15em; }

/* ---- Halloween : nuit violette, accents orange citrouille ---- */
body.theme-halloween {
  --fond: #0d0716;
  --carte: rgba(30, 14, 48, 0.85);
  --carte-jour: rgba(40, 18, 64, 0.88);
  --texte: #f3eefc;
  --doux: #c9b8e8;
  --tres-doux: #7c6a99;
  --accent: #ffb347;
  --pluie: #8fdcff;
}
body.theme-halloween #decor {
  background: radial-gradient(ellipse at 75% -10%, #3b1d5e 0%, #1a0f2b 45%, #0d0716 100%);
}

/* Police Creepster pour l'heure et les titres seulement (le texte des événements reste lisible). */
body.theme-halloween #heure {
  font-family: "Creepster", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #ffb347;
  text-shadow: 0 0 1.2rem rgba(255, 138, 0, 0.5);
}
body.theme-halloween .aujourdhui h2 {
  font-family: "Creepster", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}
body.theme-halloween .jour h3 {
  font-family: "Creepster", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

body.theme-halloween .bandeau-theme {
  background: linear-gradient(90deg, #ff7a00, #ffb347);
  color: #2a0f00;
}
body.theme-halloween .aujourdhui {
  border-color: #ff8a00;
  box-shadow: 0 0 1.6rem rgba(255, 138, 0, 0.25);
}
body.theme-halloween .ev b { color: #e9e2f5; }
body.theme-halloween .ev.pastille { color: #1a0f2b; }
/* Fond orange seulement : la bordure gauche garde la couleur du calendrier (--c). */
body.theme-halloween .ev.halloween {
  background: rgba(255, 122, 0, 0.24);
}
/* Prochain événement : contour clair, lisible sur le fond orange. */
body.theme-halloween .ev.next.halloween { box-shadow: inset 0 0 0 2px #fff6e0; }
body.theme-halloween .ev.pastille.halloween {
  background: #ff8a00;
  color: #2a0f00;
}
body.theme-halloween .jour-fete { color: #ffb347; }
body.theme-halloween .points i.actif { background: var(--accent); }

/* ---- Décor Halloween (src/decor-halloween.js) : derrière le contenu, tailles suivant l'écran ---- */
body.theme-halloween #decor > * { position: absolute; display: block; }

/* Lune : au centre du pied de page, sous les deux colonnes (la seule zone libre à toutes les
   tailles : ni carte, ni horloge, ni météo derrière elle). Hauteur suivant l'écran (vh), car la
   marge sous les colonnes en dépend. */
body.theme-halloween #decor .lune {
  bottom: 0.7vh;
  left: calc(50% - 2.2vh);
  width: 4.4vh;
  height: 4.4vh;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 0 1.4vh 0.4vh rgba(245, 215, 122, 0.4);
}
body.theme-halloween #decor .toile {
  top: 0;
  left: 0;
  width: 9rem;
  height: 9rem;
  opacity: 0.3;
}
/* Entre l'horloge et la météo (place libre) ; le haut du fil reste collé au bord de l'écran
   au point le plus bas. */
body.theme-halloween #decor .araignee {
  top: -2.5rem;
  left: calc(22vw - 1.5rem);
  width: 3rem;
  height: 6rem;
  opacity: 0.85;
  will-change: transform;
  animation: theme-araignee 6s ease-in-out infinite alternate;
}
body.theme-halloween #decor .fantome {
  left: -4rem;
  width: 3rem;
  height: 3.5rem;
  opacity: 0.75;
  will-change: transform;
  animation: theme-fantome 14s linear infinite;
}
body.theme-halloween #decor .fantome.f1 { top: 62vh; }
body.theme-halloween #decor .fantome.f2 {
  top: 30vh;
  width: 2.2rem;
  height: 2.6rem;
  opacity: 0.55;
  animation-delay: -7s;
}
body.theme-halloween #decor .chauve {
  top: 10vh;
  left: -3.5rem;
  width: 3rem;
  height: 1.5rem;
  opacity: 0.9;
  will-change: transform;
  animation: theme-chauve 9s linear infinite;
}

@keyframes theme-lueur {
  from { opacity: 0.3; }
  to { opacity: 0.95; }
}
@keyframes theme-araignee {
  from { transform: translateY(0); }
  to { transform: translateY(2.5rem); }
}
@keyframes theme-fantome {
  0% { transform: translate(0, 0); }
  25% { transform: translate(28vw, -1.5vh); }
  50% { transform: translate(56vw, 0); }
  75% { transform: translate(84vw, -1.5vh); }
  100% { transform: translate(112vw, 0); }
}
@keyframes theme-chauve {
  0% { transform: translate(0, 0); }
  25% { transform: translate(28vw, -2.5vh); }
  50% { transform: translate(56vw, 0); }
  75% { transform: translate(84vw, -2vh); }
  100% { transform: translate(112vw, 1.5vh); }
}

/* Petit écran (1024×600) : bandeau et citrouille réduits pour laisser la place à « Aujourd'hui ». */
@media (max-height: 640px) {
  .bandeau-theme { font-size: 1rem; padding: 0.2rem 0.6rem; border-radius: 0.45rem; }
  .horloge.avec-icone > .citrouille { font-size: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  #decor *, .horloge.avec-icone > .citrouille::before { animation: none; }
}