/* ==========================================================================
   LE DÉCOR DE SAISON DE LA VITRINE (decor.js, dates dans saisons.js),
   14/10/2026. Celui de xtra-easy.com (src/saisons/decor.css), places,
   mouvements et écarts par thème compris, sur un fond VERT PASTEL au lieu du
   crème. Benoît : « le même décor [...] mais je voudrais que le fond soit
   dans un vert pastel, histoire de différencier les 2 sites ».

   Trois écarts avec la boutique : le vert pastel ; la colonne de la vitrine
   fait 1 210 px (.xc__in), d'où la marge calculée sur 1 210 px et le seuil à
   1 320 px (même marge minimale que la boutique à 1 400) ; le pied de page
   est .xc-pied.

   Deux calques fixes qui ne prennent aucun clic. .xs-fond, SOUS le contenu
   (z-index -1) : la page devient transparente pour le laisser voir, les
   cartes restent blanches. .xs, les objets, PAR-DESSUS (z-index 5, sous la
   barre du haut à 50) : ils vivent dans les MARGES LIBRES de chaque côté du
   contenu. Sans marge, un seul petit objet reste, sous la barre.
   ========================================================================== */

.xs,
.xs-fond {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  --xs-marge: calc((100vw - 1210px) / 2);
  --xs-t: clamp(36px, calc(var(--xs-marge) - 22px), 116px); /* le plus large qui tient dans la marge */
}

/* LE FOND D'ÉCRAN : le paysage, sous un voile vert pastel plus épais derrière
   le contenu et plus léger dans les marges (les opacités du voile crème de la
   boutique, que Benoît a gardé le 13/10 : « plus clair, c'était mieux »).
   --xs-cadrage garde le sujet du paysage à l'écran quand il est rogné. */
.xs-fond {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(200, 234, 207, .45), rgba(200, 234, 207, .7) 24% 76%, rgba(200, 234, 207, .45)),
    var(--xs-paysage) var(--xs-cadrage, 50% 100%) / cover no-repeat,
    #c8eacf;
}
/* Le vert pastel vaut même sans décor (?saison=aucune). Le crème de
   carton.css sur body et .xc couvrirait le calque du fond. */
html { background: #c8eacf; }
body,
.xc { background: transparent; }
.xs-fond, .xs { animation: xs-apparaitre .6s ease-out both; }
@keyframes xs-apparaitre { from { opacity: 0; } }

/* Le disque kraft derrière le comptoir du haut de page est en z-index -1 : il
   passerait sous le fond, posé plus loin dans la page. */
.xc-haut__visuel { isolation: isolate; }

/* L'astre (lune, soleil, étoile), en haut à droite, derrière ce qui vole. */
.xs-fond::after {
  --w: calc(var(--xs-t) * 1.5);
  content: '';
  position: absolute;
  top: 74px;
  right: calc(var(--xs-marge) / 2 - var(--w) / 2);
  width: var(--w);
  aspect-ratio: 1;
  background: var(--xs-astre) center / contain no-repeat;
}

/* Le pied de page est plus large que le contenu (les citrouilles mordaient sur
   la ligne du copyright) : il passe par-dessus le décor, comme un rideau. */
.xc-pied { position: relative; z-index: 6; }

/* Chaque objet donne sa largeur --w (au plus --xs-t) et ses proportions.
   --xs-g le centre dans la marge : déclaré ici, là où --w existe. */
.xs > i {
  --w: var(--xs-t);
  --xs-g: calc(var(--xs-marge) / 2 - var(--w) / 2);
  position: absolute;
  width: var(--w);
  aspect-ratio: 1;
  background: var(--xs-img) center / contain no-repeat;
}

/* a, SUSPENDU : descend et remonte au bout d'un fil qui part de sous l'en-tête. */
.xs .xs__a {
  --w: calc(var(--xs-t) * .6);
  top: 90px;
  left: var(--xs-g);
  animation: xs-descendre 11s ease-in-out infinite, xs-gigoter 2.8s ease-in-out infinite;
}
.xs .xs__a::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 62%;
  width: 1px;
  height: 100vh;
  background: rgba(59, 69, 64, .35);
}

/* b et c, VOLANT : planent dans la marge de GAUCHE, à mi-hauteur, et battent
   deux fois des ailes de temps en temps. Le second, plus petit, décalé dans le
   temps. Pas à droite : ils se posaient sur l'astre (Benoît, 13/10 : « le
   placement du soleil et des pigeons n'est pas bon »), et dans le ciel, pas
   dans les arbres du paysage. Les deux marges
   s'équilibrent : suspendu, volants, posé à gauche ; astre, flottant à droite. */
.xs .xs__b,
.xs .xs__c {
  top: 26vh;
  left: var(--xs-g);
  aspect-ratio: 1.6;
  animation: xs-planer 9s ease-in-out infinite, xs-battre 4.2s ease-in-out infinite;
}
.xs .xs__c {
  --w: calc(var(--xs-t) * .55);
  top: calc(26vh + 78px);
  left: calc(var(--xs-marge) / 2 - var(--w) * .1);
  opacity: .85;
  animation-duration: 11s, 5.3s;
  animation-delay: -4s, -1.6s;
}

/* d, FLOTTANT : à droite, dans le ciel sous l'astre (à mi-hauteur, le nuage
   de Tournai tombait dans les collines : « bizarre », Benoît). */
.xs .xs__d {
  --w: calc(var(--xs-t) * .8);
  top: 34vh;
  right: var(--xs-g);
  opacity: .95;
  animation: xs-flotter 7s ease-in-out infinite;
}

/* e, POSÉ : en bas à gauche, plus grand sur grand écran, jamais plus large que
   la marge. L'image sur ::after, pour qu'un thème glisse une lueur dessous. */
.xs .xs__e {
  --w: min(calc(var(--xs-t) * 1.3), calc(var(--xs-marge) - 22px));
  bottom: 16px;
  left: var(--xs-g);
  aspect-ratio: 1.1;
  background: none;
}
.xs .xs__e::before,
.xs .xs__e::after { content: ''; position: absolute; inset: 0; }
.xs .xs__e::after { background: var(--xs-img) center bottom / contain no-repeat; }

/* Sans marge libre (tablette, téléphone, petit portable) : un seul petit objet
   sous les boutons de droite de l'en-tête, le suspendu, sinon un volant. */
@media (max-width: 1319.98px) {
  .xs > i,
  .xs-fond::after { display: none; }
  .xs .xs__a { display: block; --w: 26px; top: 74px; left: auto; right: 3px; }
  .xs:not(:has(.xs__a)) .xs__b { display: block; --w: 40px; top: 80px; left: auto; right: 8px; }
}

@media print { .xs, .xs-fond { display: none; } }

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

/* --------------------------------------------------------------------------
   LES ÉCARTS PAR THÈME
   -------------------------------------------------------------------------- */

/* Ce qui ne bat pas des ailes (confettis, étoiles, flocons) tourne doucement ;
   l'avion en papier plane, c'est tout. */
.xs--nouvel-an .xs__b, .xs--nouvel-an .xs__c,
.xs--carnaval .xs__b, .xs--carnaval .xs__c,
.xs--quatre-corteges .xs__b, .xs--quatre-corteges .xs__c,
.xs--fete-nationale .xs__b, .xs--fete-nationale .xs__c,
.xs--saint-nicolas .xs__b, .xs--saint-nicolas .xs__c,
.xs--noel .xs__b, .xs--noel .xs__c { aspect-ratio: 1; animation-name: xs-planer, xs-tourner; animation-timing-function: ease-in-out, linear; }
.xs--noel .xs__b, .xs--noel .xs__c { animation-duration: 9s, 24s; }
.xs--rentree .xs__b, .xs--rentree .xs__c { animation-name: xs-planer, none; }

/* Halloween : la bougie vacille derrière les citrouilles, la maison hantée
   reste à l'écran sur téléphone. Tournai garde sa cathédrale. */
.xs--halloween .xs__e::before {
  inset: -14% -18% 0;
  background: radial-gradient(closest-side, rgba(232, 114, 10, .3), rgba(232, 114, 10, 0));
  animation: xs-lueur 3.4s ease-in-out infinite;
}
.xs-fond--halloween { --xs-cadrage: 78% 100%; }
/* Rien ne se pose sur la lune (Benoît, 17/10 : « si c'est superposé, c'est
   pas beau ») : les chauves-souris volent à gauche comme les autres volants,
   le fantôme flotte sous la lune, dans le ciel et plus sur le toit du paysage.
   36 px sous la lune, il garde 20 px d'écart au haut de son flottement. */
.xs--halloween .xs__d { top: calc(110px + var(--xs-t) * 1.5); }
.xs-fond--quotidien,
.xs-fond--quatre-corteges { --xs-cadrage: 30% 100%; }
/* Le nuage de Tournai, haut dans le ciel juste sous le soleil (Benoît : « plus
   haut, et pas sur le soleil ») : le soleil finit à 74 px + 1,5 --xs-t, le
   nuage commence 24 px plus bas, ce qui couvre ses 16 px de flottement. */
.xs--quotidien .xs__d { top: calc(98px + var(--xs-t) * 1.5); }

@keyframes xs-descendre { 50% { transform: translateY(64px); } }
@keyframes xs-gigoter { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes xs-planer {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  33% { transform: translate(-10px, -8px) rotate(3deg); }
  66% { transform: translate(6px, -14px) rotate(-2deg); }
}
@keyframes xs-battre {
  0%, 78%, 86%, 94%, 100% { scale: 1 1; }
  82%, 90% { scale: 1 .78; }
}
@keyframes xs-tourner { to { rotate: 360deg; } }
@keyframes xs-flotter {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50% { transform: translate(-6px, -16px) rotate(3deg); }
}
@keyframes xs-lueur {
  0%, 100% { opacity: .55; }
  22% { opacity: .8; }
  38% { opacity: .5; }
  64% { opacity: .85; }
  82% { opacity: .6; }
}