/* LES FÊTES SUR LE SITE — un décor discret, jamais un déguisement.
 *
 * Le corps porte `fete fete-<cle>` (posé par layouts/site.php quand
 * App\Models\Fete::enCours() rend quelque chose). Ce fichier ne recolore
 * que deux choses : la bande sous l'en-tête, et un bandeau d'un ligne qui
 * dit la fête. Tout le reste de la charte reste intact — on décore, on ne
 * repeint pas.
 */
@layer fetes {
  :root {
    --fete-1: #f5b41c;
    --fete-2: #101838;
    --fete-encre: #fff;
  }
  body.fete-noel          { --fete-1: #1f8a4c; --fete-2: #c9342b; }
  body.fete-saint_nicolas { --fete-1: #c9342b; --fete-2: #f5b41c; }
  body.fete-nouvel_an     { --fete-1: #f5b41c; --fete-2: #101838; }
  body.fete-paques        { --fete-1: #8ec7a8; --fete-2: #f2c6d8; --fete-encre: #1d1838; }
  body.fete-travail       { --fete-1: #5cb56a; --fete-2: #fdf7f1; --fete-encre: #1d1838; }
  body.fete-ascension     { --fete-1: #7fb3e6; --fete-2: #fdf7f1; --fete-encre: #1d1838; }
  body.fete-pentecote     { --fete-1: #e27b4a; --fete-2: #f5b41c; --fete-encre: #1d1838; }
  body.fete-nationale     { --fete-1: #101838; --fete-2: #f5b41c; }
  body.fete-assomption    { --fete-1: #9dbce8; --fete-2: #fdf7f1; --fete-encre: #1d1838; }
  body.fete-toussaint     { --fete-1: #8e7cc3; --fete-2: #1d1838; }
  body.fete-armistice     { --fete-1: #c9342b; --fete-2: #1d1838; }
  body.fete-fete          { --fete-1: #f5b41c; --fete-2: #101838; }

  body.fete .bande {
    background: linear-gradient(90deg, var(--fete-1) 0 33.3%, var(--fete-2) 33.3% 66.6%, var(--fete-1) 66.6%);
  }
  body.fete-nationale .bande {
    background: linear-gradient(90deg, #101838 0 33.3%, #f5b41c 33.3% 66.6%, #c9342b 66.6%);
  }

  .fete-bandeau {
    margin: 0;
    padding: .55rem 1rem;
    text-align: center;
    font: 600 .92rem/1.4 Inter, system-ui, sans-serif;
    color: var(--fete-encre);
    background: color-mix(in oklab, var(--fete-1) 88%, black);
    text-wrap: balance;
  }
  .fete-bandeau-nom {
    font-family: "Caveat Brush", Inter, cursive;
    font-size: 1.25em;
    letter-spacing: .01em;
    margin-right: .35rem;
  }

  /* Le petit décor : quelques flocons, œufs ou confettis qui tombent, en
     CSS seul, coupés dès que quelqu'un demande moins de mouvement. */
  .fete-decor {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
  }
  .fete-decor span {
    position: absolute;
    top: -3vh;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--fete-1);
    opacity: .55;
    animation: fete-chute linear infinite;
  }
  body.fete-noel .fete-decor span { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); }
  body.fete-paques .fete-decor span { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; width: .6rem; height: .8rem; }
  body.fete-armistice .fete-decor span,
  body.fete-toussaint .fete-decor span { opacity: .25; }
  @keyframes fete-chute {
    to { transform: translateY(106vh) rotate(180deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fete-decor { display: none; }
  }

  /* Les anniversaires du mois, sur la page du club. */
  .liste-anniversaires {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .35rem 1rem;
  }
  .liste-anniversaires li strong {
    display: inline-block;
    min-width: 2.2rem;
    color: var(--jaune-profond, #d99a0e);
  }
  .liste-anniversaires li.est-aujourdhui {
    font-weight: 700;
  }
}