/* =========================================================
   LES LILOUS — Habillages saisonniers (« skins »)
   2026-08-26, demande explicite : pouvoir changer manuellement
   l'ambiance du site selon la période de vacances.

   Principe : on ne redéfinit QUE les variables de couleur de
   :root (style.css). Aucun composant n'est modifié ici — tout
   le site se re-teinte automatiquement, boutons, cartes, ombres
   et motif de fond compris.

   Les noms de variables restent ceux du thème d'origine
   (--violet, --or, --rose, --cyan) : ce sont des EMPLACEMENTS
   (couleur principale, accent 1, 2, 3), pas des noms de teintes.
   Sur le skin Noël par exemple, --violet porte le rouge et
   --rose porte le vert sapin.

   Ce fichier doit être chargé APRÈS style.css.
   ========================================================= */

/* ---------- 🎃 Halloween / Toussaint ---------- */
[data-skin="halloween"] {
  --encre:        #2A1636;
  --violet:       #7A3FA8;
  --lilas:        #A96FD4;
  --lilas-clair:  #D9BCEC;
  --lilas-voile:  #FBF3EA;
  --lilas-brume:  #F5E4D3;
  --gris-clair:   #E8DCCB;

  --or:           #FF9E1B;
  --or-fonce:     #C96A0E;
  --rose:         #E8542B;
  --cyan:         #6DBE45;

  --creme:        #FFF8F0;
  --gris:         #6E5A63;
  --texte:        #2A1636;
}

/* ---------- 🎄 Noël / Hiver ---------- */
[data-skin="noel"] {
  --encre:        #1E3A2F;
  --violet:       #C0243A;
  --lilas:        #E05A6C;
  --lilas-clair:  #F3B8BF;
  --lilas-voile:  #FDF4F5;
  --lilas-brume:  #F8E6E8;
  --gris-clair:   #E3E9E5;

  --or:           #F0C24B;
  --or-fonce:     #B98A18;
  --rose:         #2E7D52;
  --cyan:         #5BA9D4;

  --creme:        #FAFCFB;
  --gris:         #5F6F67;
  --texte:        #1E3A2F;
}

/* ---------- 🎭 Carnaval / Mardi gras ---------- */
[data-skin="carnaval"] {
  --encre:        #2B1B4A;
  --violet:       #7B3FB5;
  --lilas:        #B06FE0;
  --lilas-clair:  #DCC0F2;
  --lilas-voile:  #FFF6EC;
  --lilas-brume:  #FCE9D8;
  --gris-clair:   #EDE2D6;

  --or:           #FFD23F;
  --or-fonce:     #C89A10;
  --rose:         #F0246E;
  --cyan:         #17C3B2;

  --creme:        #FFFBF5;
  --gris:         #6A5C74;
  --texte:        #2B1B4A;
}

/* ---------- 🌸 Pâques / Printemps ---------- */
[data-skin="paques"] {
  --encre:        #2F4A36;
  --violet:       #59A86F;
  --lilas:        #8DC79B;
  --lilas-clair:  #C4E4CC;
  --lilas-voile:  #F3FAF4;
  --lilas-brume:  #E6F4E9;
  --gris-clair:   #DDEADF;

  --or:           #FFD86B;
  --or-fonce:     #C9A22A;
  --rose:         #F58BA8;
  --cyan:         #7FC8E8;

  --creme:        #FAFDF9;
  --gris:         #5E7264;
  --texte:        #2F4A36;
}

/* ---------- 🏖️ Été / Plage ---------- */
[data-skin="ete"] {
  --encre:        #123A4D;
  --violet:       #1B9AAA;
  --lilas:        #57C4D0;
  --lilas-clair:  #A8E0E6;
  --lilas-voile:  #EFFAFB;
  --lilas-brume:  #DCF1F4;
  --gris-clair:   #DFE9E6;

  --or:           #FFC93C;
  --or-fonce:     #C2900E;
  --rose:         #FF7A5C;
  --cyan:         #3FB8E8;

  --creme:        #FFF9EF;
  --gris:         #5E7480;
  --texte:        #123A4D;
}

/* =========================================================
   Décor saisonnier : quelques éléments qui tombent doucement.
   Généré par js/skin.js (rien sur le skin par défaut).
   Volontairement discret : peu d'éléments, opacité basse, et
   totalement désactivé si la personne préfère moins d'animations.
   ========================================================= */
.skin-deco {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.skin-deco span {
  position: absolute;
  top: -10vh;
  font-size: 1.7rem;
  line-height: 1;
  opacity: 0.8;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
  animation: skin-chute linear infinite;
  will-change: transform;
}
@keyframes skin-chute {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(118vh) rotate(320deg); }
}

/* Le décor ne doit jamais gêner la lecture sur petit écran. */
@media (max-width: 700px) {
  .skin-deco span { opacity: 0.6; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .skin-deco { display: none; }
}

/* Impression : ni décor, ni fond teinté. */
@media print {
  .skin-deco { display: none; }
}