/* ============================================================
   Ambiances de saison — la mécanique commune à tous les décors.
   Chaque décor apporte sa feuille (ambiance-{clé}.css) qui règle
   ses couleurs et ses variables :
     --amb-ribbon   fond du bandeau de saison (dégradé)
     --amb-garland  image de la guirlande sous l'en-tête (motif répété)
     --amb-garland-w / --amb-garland-h  taille d'un motif de guirlande
     --amb-footer   fond du pied de page
     --amb-bubble-bg / --amb-bubble-fg  bulle de la mascotte
   et son gabarit (views/partials/ambiance-{clé}.php).
   ============================================================ */

/* --- Bandeau de saison : un dégradé qui ondule lentement ---- */
.ambiance .season-ribbon {
  background: var(--amb-ribbon, var(--vieux-rose));
  background-size: 200% 100%;
  animation: amb-ondule 14s ease-in-out infinite alternate;
}
@keyframes amb-ondule { to { background-position: 100% 0; } }

/* --- Guirlande sous l'en-tête ------------------------------ */
.ambiance .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: var(--amb-garland-h, 16px); pointer-events: none;
  background: var(--amb-garland, none) repeat-x 0 0 / var(--amb-garland-w, 96px) var(--amb-garland-h, 16px);
}

/* --- Ce qui s'accroche sous l'en-tête (coins, suspension) --- */
.amb > [data-amb-hang] { display: none; }

.site-header .amb-corner {
  position: absolute; top: 100%; width: 92px; height: 92px;
  pointer-events: none;
}
.site-header .amb-corner--left  { left: 0; }
.site-header .amb-corner--right { right: 0; transform: scaleX(-1); }

.site-header .amb-hanger {
  position: absolute; top: 100%; right: 14%;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; transform-origin: top center;
  animation: amb-balance 4s ease-in-out infinite;
}
.amb-hanger__thread {
  display: block; width: 1px; height: 26px; background: var(--amb-thread, rgba(43, 30, 46, .45));
}
.amb-hanger--yoyo .amb-hanger__thread { animation: amb-fil 9s cubic-bezier(.45, 0, .3, 1) infinite; }
.amb-hanger svg { display: block; margin-top: -2px; }

@keyframes amb-fil {
  0%, 18%   { height: 10px; }
  45%, 70%  { height: 78px; }
  100%      { height: 10px; }
}
@keyframes amb-balance {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* --- Le ciel : ce qui tombe, monte ou traverse l'écran ------ */
.amb-sky {
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none; overflow: hidden;
}
.amb-sky > * {
  position: absolute; left: 0; top: 0;
  will-change: transform; display: block;
}
/* Les ailes battent : chauves-souris, papillons, mouettes. */
.amb-flap {
  transform-box: fill-box; transform-origin: center;
  animation: amb-battement var(--flap, .22s) ease-in-out infinite alternate;
}
@keyframes amb-battement { to { transform: scaleY(.35); } }
/* Vus de face (papillons) : les ailes se replient sur les côtés. */
.amb-flap--x { animation-name: amb-battement-x; }
@keyframes amb-battement-x { to { transform: scaleX(.25); } }

/* --- La mascotte du coin de l'écran ------------------------- */
.amb-mascot {
  position: fixed; right: clamp(.6rem, 2vw, 1.4rem); bottom: 0; z-index: 56;
  width: 58px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(var(--amb-hide, 42%));
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
  -webkit-tap-highlight-color: transparent;
}
.amb-mascot__body {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
  animation: amb-flotte 3.2s ease-in-out infinite;
}
.amb-eye { transform-box: fill-box; transform-origin: center; animation: amb-cligne 5s infinite; }

.amb-mascot:hover, .amb-mascot:focus-visible, .amb-mascot.is-peeking { transform: translateY(6%); }
.amb-mascot:focus-visible { outline: 2px dashed var(--vieux-rose); outline-offset: 4px; border-radius: 40% 40% 10% 10%; }
.amb-mascot.is-scared { transform: translateY(-30%) rotate(8deg); }
.amb-mascot.is-scared .amb-eye { transform: scale(1.35); animation: none; }

.amb-mascot__bubble {
  position: absolute; right: 70%; bottom: 88%;
  padding: .25rem .7rem; border-radius: 1rem 1rem .2rem 1rem;
  background: var(--amb-bubble-bg, var(--brun)); color: var(--amb-bubble-fg, #fff);
  font: 800 .85rem/1.3 var(--texte); white-space: nowrap;
  opacity: 0; transform: scale(.6) translateY(6px); transform-origin: bottom right;
  transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.amb-mascot.is-scared .amb-mascot__bubble { opacity: 1; transform: none; }

@keyframes amb-flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes amb-cligne {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}

/* --- Pied de page ------------------------------------------- */
.ambiance .site-footer {
  position: relative;
  background: var(--amb-footer, var(--brun));
}

/* --- Petits écrans ------------------------------------------ */
@media (max-width: 719px) {
  body:has(.space-tabs) .amb-mascot { bottom: 3.6rem; }
  .site-header .amb-corner { width: 64px; height: 64px; }
  .site-header .amb-hanger { right: 22%; }
  .amb-mascot { width: 46px; }
}

/* --- Moins de mouvement demandé : le décor reste, immobile -- */
@media (prefers-reduced-motion: reduce) {
  .ambiance .season-ribbon, .ambiance .site-header::after,
  .site-header .amb-hanger, .amb-hanger__thread,
  .amb-mascot__body, .amb-eye, .amb-flap, .amb-anim { animation: none !important; }
  .amb-hanger--yoyo .amb-hanger__thread { height: 40px; }
  .amb-sky { display: none; }
}

@media print {
  .amb, .amb-mascot, .amb-preview { display: none !important; }
}

/* --- Barre d'aperçu (admin connectée seulement) ------------- */
.amb-preview {
  position: fixed; left: 50%; bottom: .8rem; z-index: 95;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 1.6rem);
  padding: .45rem .55rem .45rem 1rem; border-radius: 999px;
  background: #2B2230; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font: 600 .82rem/1.3 var(--texte);
}
.amb-preview select {
  font: inherit; color: #2B2230; background: #fff; border: 0; border-radius: 999px; padding: .3rem .6rem;
}
.amb-preview a {
  color: #2B2230; background: #FFE9B8; border-radius: 999px; padding: .3rem .8rem; white-space: nowrap;
}
.amb-preview a:hover { color: #2B2230; background: #fff; }
@media (max-width: 719px) {
  /* En bas à gauche, en laissant la place de la mascotte à droite. */
  .amb-preview {
    left: .5rem; bottom: .5rem; transform: none; max-width: calc(100vw - 4.5rem);
    gap: .4rem; padding: .35rem .4rem .35rem .7rem; border-radius: 1rem; flex-wrap: nowrap;
  }
  .amb-preview select { min-width: 0; max-width: 8.5rem; }
  .amb-preview__hint { display: none; }
  body:has(.space-tabs) .amb-preview { bottom: 4.2rem; }
}