/* Couche décor saisonnier + bursts panier — pointer-events: none partout. */

/* ── Motif hero (Classique printemps / Halloween / Noël) ──
   Motif = massif central du panorama + son miroir, coupé pour que le massif
   d'origine tombe au centre et sans couture en répétition (même principe que
   le bandeau catalogue, header-montagne-motif). Calé sur la HAUTEUR du hero :
   jamais zoomé ; la chaîne de montagnes se répète sur les écrans larges. */
.v-hero > .v-hero-pano { display: none; }
body[data-theme="halloween"] .v-hero {
  background-color: #4a2006;
}
body[data-theme="halloween"] .v-hero::before { display: none; }
body[data-theme="halloween"] .v-hero > .v-hero-pano {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/static/themes/halloween/decor/home-montagne-motif.webp?v=2") center top / auto 100% repeat-x;
}
body[data-theme="default"] .v-hero {
  background-color: #4a96d1;
}
body[data-theme="default"] .v-hero::before { display: none; }
body[data-theme="default"] .v-hero > .v-hero-pano {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/static/themes/default/decor/home-montagne-motif.webp?v=1") center top / auto 100% repeat-x;
}
body[data-theme="noel"] .v-hero {
  background-color: #0e2b4a;
}
body[data-theme="noel"] .v-hero::before { display: none; }
body[data-theme="noel"] .v-hero > .v-hero-pano {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/static/themes/noel/decor/home-montagne-motif.webp?v=5") center top / auto 100% repeat-x;
}

/* Slogan : `--sky` = couleur du ciel du thème → invisible sur ce ciel.
   Thème à paysage → crème ombré (même règle dans web/src/styles.css). */
body[data-theme="default"] .v-tagline,
body[data-theme="halloween"] .v-tagline,
body[data-theme="noel"] .v-tagline {
  color: #f8edca;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.55);
}

.theme-decor {
  position: fixed;
  inset: 0;
  /* Derrière le contenu (cartes, nav, texte) — jamais par-dessus. */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Contenu UI au-dessus du décor fixe. Les particules restent visibles dans
   les gouttières / entre les cards (fonds opaques), jamais devant badges,
   tableaux, boutons. .site-chrome a déjà z-index 1 dans styles.css.
   Le footer reste à auto : s'il partage le z-index 1 de main, il se peint
   par-dessus (DOM après) et recouvre le dock admin (fixe, z-index enfermé
   dans le contexte de main). */
main {
  position: relative;
  z-index: 1;
}
.site-footer {
  position: relative;
}

/* Fond un peu plus froid : blanc sur pearl crème = neige invisible.
   Visibilité = contraste, pas un z-index au-dessus des cards. */
/* Halloween admin : pas de particules viewport (voir theme-decor.js). Filet CSS si cache JS. */
body.admin-body .theme-decor-particle--leaf,
body.admin-body .theme-decor-particle--bat {
  display: none !important;
}

body.admin-body[data-theme="noel"] {
  background: rgb(232, 232, 232);
}
body.admin-body[data-theme="noel"] .admin-recherche {
  background: rgb(232, 232, 232);
}
body.admin-body .theme-decor[data-particles="snow"]:not(.theme-decor--header-snow)
  .theme-decor-particle {
  opacity: 0.92;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 8px rgba(200, 220, 255, 0.85),
    0 1px 2px rgba(14, 43, 74, 0.18);
}

/* Noël : cap + flocons calés sur le header réel (--theme-header-* posé par JS). */
.theme-decor--header-snow {
  bottom: auto;
  left: 0;
  right: 0;
  top: var(--theme-header-top, 0);
  height: var(--theme-header-h, 72px);
  z-index: 35; /* sous le menu compte (z-index ~50) */
  overflow: hidden;
}

.theme-decor-header-snow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: clamp(18px, 3vw, 28px);
  object-fit: cover;
  object-position: bottom center;
  opacity: 0.98;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

/* Cap de neige en mode shell (admin) : root full-page, cap fixe sur le chrome. */
.theme-decor--has-header-cap .theme-decor-header-snow {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--theme-header-top, 0);
  width: 100%;
  height: clamp(20px, 3.2vw, 30px);
  z-index: 36;
  object-fit: cover;
  object-position: bottom center;
}

.theme-decor--header-snow .theme-decor-particle {
  animation-name: theme-fall-header;
  opacity: 0.72;
}

/* Neige full-page (admin shell) : un peu plus dense / lisible, derrière le contenu. */
.theme-decor[data-particles="snow"]:not(.theme-decor--header-snow) .theme-decor-particle {
  opacity: 0.7;
}

@keyframes theme-fall-header {
  0% { transform: translateY(-6px) translateX(0); opacity: 0; }
  12% { opacity: 0.75; }
  100% {
    transform: translateY(calc(var(--theme-header-h, 72px) - 8px)) translateX(12px);
    opacity: 0;
  }
}

.theme-decor-slot {
  position: absolute;
  width: min(168px, 26vw);
  height: auto;
  opacity: 0.55;
  user-select: none;
  /* Pas d'ombre lourde : les PNG ont déjà le volume. */
  filter: none;
}

.theme-decor-corner-tl { top: 0; left: 0; }
.theme-decor-corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.theme-decor-corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.theme-decor-corner-br { bottom: 0; right: 0; transform: scale(-1); }

.theme-decor-sprite {
  position: absolute;
  width: 56px;
  height: auto;
  opacity: 0.85;
  user-select: none;
}

.theme-decor-sprite[data-place="viewport:home-hero-right"] {
  top: 12%;
  right: 6%;
}
.theme-decor-sprite[data-place="viewport:home-vip-top"] {
  top: 42%;
  left: 8%;
  width: 48px;
}

.theme-decor-sprite[data-motion="dangle"] {
  animation: theme-dangle 4.5s ease-in-out infinite;
  transform-origin: top center;
}
.theme-decor-sprite[data-motion="crawl-slow"] {
  animation: theme-crawl 18s linear infinite;
}
.theme-decor-sprite[data-motion="drift"] {
  animation: theme-drift 9s ease-in-out infinite;
}

@keyframes theme-dangle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(7deg); }
}
@keyframes theme-crawl {
  0% { transform: translateX(0); }
  40% { transform: translateX(40vw); }
  50% { transform: translateX(40vw); }
  90% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes theme-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50% { transform: translateY(18px) rotate(12deg); opacity: 0.95; }
}

.theme-decor-particle {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.55;
  animation: theme-fall linear infinite;
  background: currentColor;
}
.theme-decor[data-particles="snow"] .theme-decor-particle {
  background: #fff;
  box-shadow: 0 0 3px rgba(255,255,255,0.95), 0 0 1px rgba(180, 210, 255, 0.8);
  opacity: 0.85;
  border-radius: 50%;
}
.theme-decor[data-particles="leaves"] .theme-decor-particle {
  border-radius: 0;
  background: none;
  opacity: 0.45;
  animation-name: theme-fall-leaf;
}
.theme-decor-particle--leaf {
  display: block;
  height: auto !important;
}
.theme-decor-particle--leaf img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* Ombre légère — pas un sticker noir. */
  filter: drop-shadow(0 1px 1px rgba(40, 24, 8, 0.12));
  opacity: 0.75;
}

.theme-decor-particle--bat {
  top: auto;
  bottom: auto;
  border-radius: 0;
  background: none;
  opacity: 0.72;
  animation: theme-fly-bat linear infinite;
}
.theme-decor-particle--bat img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(10, 8, 20, 0.45));
}
.theme-decor--header-snow .theme-decor-particle--bat {
  animation-name: theme-fly-bat-header;
  opacity: 0.6;
}

@keyframes theme-fly-bat {
  0% { transform: translateX(-18vw) translateY(0); opacity: 0; }
  8% { opacity: 0.75; }
  92% { opacity: 0.65; }
  100% { transform: translateX(118vw) translateY(var(--bat-drift, 0)); opacity: 0; }
}
@keyframes theme-fly-bat-header {
  0% { transform: translateX(-12vw) translateY(0); opacity: 0; }
  12% { opacity: 0.7; }
  100% {
    transform: translateX(112vw) translateY(var(--bat-drift, 0));
    opacity: 0;
  }
}

@keyframes theme-fall {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.55; }
  100% { transform: translateY(105vh) translateX(20px); opacity: 0; }
}
@keyframes theme-fall-leaf {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.85; }
  100% {
    transform: translateY(105vh) translateX(28px) rotate(var(--leaf-spin, 180deg));
    opacity: 0;
  }
}

.theme-burst-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.theme-burst-web {
  position: absolute;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  opacity: 0;
  animation: theme-web-expand 700ms ease-out forwards;
}
.theme-burst-heart,
.theme-burst-flake,
.theme-burst-leaf {
  position: absolute;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0 -9px;
  animation: theme-burst-fly 900ms ease-out forwards;
  opacity: 0;
}
.theme-burst-leaf {
  width: 22px;
  margin: -11px 0 0 -11px;
  animation: theme-burst-leaf-fly 800ms ease-out forwards;
}
.theme-burst-leaf img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes theme-web-expand {
  0% { transform: scale(0.15); opacity: 0.9; }
  70% { opacity: 0.75; }
  100% { transform: scale(1.15); opacity: 0; }
}
@keyframes theme-burst-fly {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
@keyframes theme-burst-leaf-fly {
  0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0; }
  18% { opacity: 1; }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--spin, 180deg));
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .theme-decor-slot { width: min(160px, 42vw); opacity: 0.75; }
  .theme-decor-corner-bl,
  .theme-decor-corner-br { display: none; }
  .theme-decor-sprite { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-decor-sprite,
  .theme-decor-particle,
  .theme-burst-web,
  .theme-burst-heart,
  .theme-burst-flake,
  .theme-burst-leaf {
    animation: none !important;
  }
  .theme-decor-particle { display: none; }
  .theme-burst-root { display: none; }
}

/* Admin settings — grille thèmes */
.theme-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin: 10px 0 16px;
}
.theme-settings-auto-switch {
  margin: 0;
  align-items: center;
}
.theme-settings-auto-switch .admin-switch-track {
  margin-top: 0;
}

/* Boutons thèmes — lisibles sur fond crème (btn-ghost trop pâle ici). */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.theme-btn--primary {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.theme-btn--primary:hover {
  filter: brightness(1.05);
  color: #fff;
}
.theme-btn--solid {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.theme-btn--solid:hover {
  background: var(--navy-soft, #155a85);
  border-color: var(--navy-soft, #155a85);
  color: #fff;
}
.theme-btn--ghost {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 1px 0 rgba(11, 60, 93, 0.04);
}
.theme-btn--ghost:hover {
  background: #f4f7fa;
  border-color: var(--navy);
  color: var(--navy);
}
.theme-settings-grille {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.theme-settings-carte {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: var(--cream-card, #fff);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.theme-settings-carte.is-actif {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
}
.theme-settings-carte-visuel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}
.theme-settings-vache {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--milk, #f8edca);
  border: 2px solid color-mix(in srgb, var(--navy) 12%, transparent);
}
.theme-settings-vache--vide {
  display: inline-block;
  background: var(--pearl);
}
.theme-settings-carte-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.theme-settings-meta {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
}
.theme-settings-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--pearl);
  color: var(--muted);
}
.theme-settings-badge.is-on {
  background: var(--gold);
  color: #fff;
}
.theme-settings-carte-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto; /* aligne les boutons en bas quand les cards d'une rangée s'étirent */
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.theme-settings-carte-actions .theme-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 0.8rem;
}

/* Galerie /admin/themes/:id */
.theme-gallery-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 0 0 18px;
}
.theme-gallery-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  list-style: none;
  padding: 0;
}
.theme-gallery-swatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--navy) 15%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.theme-gallery-assets {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
}
.theme-gallery-asset {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  text-align: center;
}
.theme-gallery-asset img {
  width: 100%;
  max-height: 110px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--pearl);
}
.theme-gallery-asset figcaption {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.3;
}
/* Vachettes mail : pastille seule (pas de fond pearl = faux carré crème). */
.theme-gallery-asset--vache {
  background: #fff;
}
.theme-gallery-asset--vache .theme-gallery-vache-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: 8px;
  border-radius: 10px;
  /* Damier neutre : l’α0 hors disque se voit ; le crème ne fusionne pas avec le fond. */
  background-color: #d9e2ec;
  background-image:
    linear-gradient(45deg, #cfd8e4 25%, transparent 25%),
    linear-gradient(-45deg, #cfd8e4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cfd8e4 75%),
    linear-gradient(-45deg, transparent 75%, #cfd8e4 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.theme-gallery-asset--vache .theme-gallery-vache-preview img {
  width: 104px;
  height: 104px;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.theme-gallery-asset--vache figcaption {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.theme-gallery-mail-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 16px;
}
.theme-gallery-mail-item h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

/* Superette — calques saisonniers (par-dessus la scène fixe) */
.presence-scene { isolation: isolate; }
.presence-theme-montagne {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 48%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* Laisse apparaître l'enseigne / rayons en bas du bandeau. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
  opacity: 0.92;
}
.presence-scene.is-themed .presence-fond {
  position: relative;
  z-index: 1;
  /* Laisse filtrer la montagne thématisée dans le ciel papier. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 8%, #000 28%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 8%, #000 28%, #000 100%);
}
.presence-theme-layer {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  height: auto;
}
/* Hotspot logo : left 42.5% top 5% width 7% */
.presence-theme-vachette {
  left: 41.8%;
  top: 3.2%;
  width: 8.2%;
  z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(40, 30, 10, 0.25));
}
/* Vache VIP (Halloween Dracula) — même zone que le hotspot vigile. */
.presence-theme-vache-vip {
  left: 9.2%;
  top: 44.8%;
  width: 9.2%;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(20, 10, 30, 0.35));
}
/* Paillasson VIP sous la porte (gauche) */
.presence-theme-paillasson {
  left: 2.8%;
  top: 84.5%;
  width: 12.5%;
  z-index: 3;
}
/* Panneau mural derrière Bernard (stickers sans fond thématique). */
.presence-theme-enseigne-bernard {
  left: 76.5%;
  top: 40.5%; /* calé fg top ~51.5% */
  width: 16%;
  z-index: 2;
  opacity: 0.96;
}
/* Plante — baseline (fg top 55%). Chaque thème override ci-dessous. */
.presence-theme-plante {
  left: 76.2%;
  top: 58.8%;
  width: 5.2%;
  z-index: 4;
  filter: drop-shadow(0 2px 2px rgba(40, 30, 10, 0.22));
}

/* ── Superette : calages par thème (ne pas partager fg / plante / caisse / zones) ──
   Baseline styles.css : fg top 55% (pieds ~90% scène). 44% laissait trop de
   carrelage vide ; 52% encore insuffisant vs chaudron / bas de scène.
   Chaque thème redéclare le paquet complet. */

/* Default — même fg-comptoir.webp qu’Halloween/Noël (640×501) → mêmes tops.
   Ancien paquet (fg 50%, hotspots ~+12 pts, Bernard = baseline 44.3%) :
   Bernard enterré + plante/écran/caisse trop bas vs plateau. */
body[data-theme="default"] .presence-fg-comptoir {
  top: 49.2%;
}
/* Un peu plus bas : manches vides derrière le plateau (33.5% les laissait dépasser). */
body[data-theme="default"] .presence-bernard {
  top: 37%;
}
body[data-theme="default"] .presence-hotspot-cloche-comptoir {
  left: 91.9%;
  top: 58%;
  width: 3.4%;
  height: 6%;
}
body[data-theme="default"] .presence-hotspot-drapeau-comptoir {
  left: 80.5%;
  top: 66%;
  width: 5.8%;
  height: 9%;
}
body[data-theme="default"] .presence-hotspot-caisse {
  left: 80.4%;
  top: 51.2%;
  width: 10.9%;
  height: 7.4%;
}
body[data-theme="default"] .presence-prop-comptoir {
  left: 88.2%;
  top: 71.4%;
  width: 9%;
  height: 17%;
}
body[data-theme="default"] .presence-caisse-ecran {
  left: 85%;
  top: 50.5%;
  width: 4.5%;
  height: 2.4%;
}
@media (max-width: 720px) {
  body[data-theme="default"] .presence-caisse-ecran {
    width: 4.6%;
    left: 84.9%;
  }
}
/* Plante — pot sur le plateau (même top que citrouille ; asset un peu plus large). */
body[data-theme="default"] .presence-theme-plante {
  left: 76.2%;
  top: 50.8%;
  width: 5.2%;
}

/* Halloween — fg nu local (640×501, peu d'air en haut) calé pour coller
   au rendu prod (ancien fg 322×377 @ top 32.167% → contenu ~48–84%).
   Ne pas reprendre le baseline 55% : trop bas vs prod. */
body[data-theme="halloween"] .presence-fg-comptoir {
  top: 49.2%;
}
/* Bernard — prod styles.css top 33.5% ; baseline locale 44.3% trop bas. */
body[data-theme="halloween"] .presence-bernard {
  top: 33.5%;
}
body[data-theme="halloween"] .presence-hotspot-cloche-comptoir {
  left: 91.9%;
  top: 58%;
  width: 3.4%;
  height: 6%;
  z-index: 3; /* au-dessus du chaudron si chevauchement */
}
body[data-theme="halloween"] .presence-hotspot-drapeau-comptoir {
  left: 80.5%;
  top: 66%;
  width: 5.8%;
  height: 9%;
}
body[data-theme="halloween"] .presence-hotspot-caisse {
  left: 80.4%;
  top: 51.2%;
  width: 10.9%;
  height: 7.4%;
}
/* Chaudron — emplacement Collignon prod (droite du comptoir). */
body[data-theme="halloween"] .presence-prop-comptoir {
  left: 88.2%;
  top: 71.4%;
  width: 9.5%;
  height: 16%; /* chaudron un peu plus haut que le carton Collignon */
}
body[data-theme="halloween"] .presence-caisse-ecran {
  left: 85%;
  top: 50.5%; /* LCD du fg nu (pas 49.7 prod — crop sans air haut) */
  width: 4.5%;
  height: 2.4%;
}
@media (max-width: 720px) {
  body[data-theme="halloween"] .presence-caisse-ecran {
    width: 4.6%;
    left: 84.9%;
  }
}
/* Citrouille — pot sur le plateau à gauche de la caisse (vals prod). */
body[data-theme="halloween"] .presence-theme-plante {
  left: 76%;
  top: 50.8%;
  width: 4.7%;
}

/* Noël — mêmes Δ relatifs qu'Halloween (fg pixel-identique 640×501),
   stack +2.3 pts : enseigne « Joyeux Noël » du fond est plus basse,
   Bernard ne doit pas mordre le panneau ; pieds un peu plus au sol.
   Sapin un peu plus large que la citrouille. */
body[data-theme="noel"] .presence-fg-comptoir {
  top: 51.5%;
}
body[data-theme="noel"] .presence-bernard {
  top: 35.8%;
}
body[data-theme="noel"] .presence-hotspot-cloche-comptoir {
  left: 91.9%;
  top: 60.3%;
  width: 3.4%;
  height: 6%;
}
body[data-theme="noel"] .presence-hotspot-drapeau-comptoir {
  left: 80.5%;
  top: 68.3%;
  width: 5.8%;
  height: 9%;
}
body[data-theme="noel"] .presence-hotspot-caisse {
  left: 80.4%;
  top: 53.5%;
  width: 10.9%;
  height: 7.4%;
}
/* Cadeau sol — footprint chaudron, légèrement plus bas (boîte haute). */
body[data-theme="noel"] .presence-prop-comptoir {
  left: 88.4%;
  top: 75%;
  width: 9.5%;
  height: 16%;
}
/* Cadeau Noël — calque prop (plus le masque cadeauCollignon legacy). */
body[data-theme="noel"] .presence-theme-cadeau {
  display: none;
}
body[data-theme="noel"] .presence-caisse-ecran {
  left: 85%;
  top: 52.8%;
  width: 4.5%;
  height: 2.4%;
}
@media (max-width: 720px) {
  body[data-theme="noel"] .presence-caisse-ecran {
    width: 4.6%;
    left: 84.9%;
  }
}
/* Sapin — Δ +1.6 vs fg comme citrouille ; un peu plus large. */
body[data-theme="noel"] .presence-theme-plante {
  left: 76%;
  top: 53.1%;
  width: 5.5%;
}
/* Cadeau Noël — masque le carton Collignon du fg-comptoir */
.presence-theme-cadeau {
  left: 88.2%;
  top: 59.8%;
  width: 10.2%;
  z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(40, 30, 10, 0.22));
}
.presence-theme-bernard-chapeau {
  left: 81.2%;
  top: 37.1%; /* calé fg top ~51.5% (Δ −14.4) */
  width: 9.5%;
  z-index: 4;
}
/* Neige dans la scène Superette — denser / more opaque than header flakes.
   pointer-events: none → hotspots & clients stay clickable underneath. */
.presence-theme-snow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.95;
  background-image:
    radial-gradient(2.5px 2.5px at 8% 12%, #fff 55%, transparent 60%),
    radial-gradient(2px 2px at 18% 38%, #fff 55%, transparent 60%),
    radial-gradient(3px 3px at 28% 22%, rgba(255,255,255,0.95) 50%, transparent 58%),
    radial-gradient(2px 2px at 38% 55%, #fff 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 48% 18%, #fff 55%, transparent 60%),
    radial-gradient(2.5px 2.5px at 58% 42%, #fff 55%, transparent 60%),
    radial-gradient(2px 2px at 68% 28%, #fff 55%, transparent 60%),
    radial-gradient(3px 3px at 78% 58%, rgba(255,255,255,0.95) 50%, transparent 58%),
    radial-gradient(2px 2px at 88% 14%, #fff 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 68%, #fff 55%, transparent 60%),
    radial-gradient(2.5px 2.5px at 32% 78%, #fff 55%, transparent 60%),
    radial-gradient(2px 2px at 52% 72%, #fff 55%, transparent 60%),
    radial-gradient(3px 3px at 72% 82%, rgba(255,255,255,0.95) 50%, transparent 58%),
    radial-gradient(2px 2px at 92% 65%, #fff 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 88%, #fff 55%, transparent 60%),
    radial-gradient(2.5px 2.5px at 62% 8%, #fff 55%, transparent 60%);
  background-size: 110% 140%;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85));
  animation: presence-snow-drift 9s linear infinite;
}
/* Second couche décalée — densifie sans voile blanc uniforme. */
.presence-theme-snow::before {
  content: "";
  position: absolute;
  inset: -20% 0 0;
  pointer-events: none;
  opacity: 0.9;
  background-image:
    radial-gradient(2px 2px at 5% 25%, #fff 55%, transparent 60%),
    radial-gradient(2.5px 2.5px at 15% 55%, #fff 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 35%, #fff 55%, transparent 60%),
    radial-gradient(3px 3px at 35% 70%, rgba(255,255,255,0.92) 50%, transparent 58%),
    radial-gradient(2px 2px at 45% 45%, #fff 55%, transparent 60%),
    radial-gradient(2.5px 2.5px at 55% 15%, #fff 55%, transparent 60%),
    radial-gradient(2px 2px at 65% 60%, #fff 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 40%, #fff 55%, transparent 60%),
    radial-gradient(3px 3px at 85% 75%, rgba(255,255,255,0.92) 50%, transparent 58%),
    radial-gradient(2px 2px at 95% 30%, #fff 55%, transparent 60%),
    radial-gradient(2.5px 2.5px at 22% 85%, #fff 55%, transparent 60%),
    radial-gradient(2px 2px at 48% 92%, #fff 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 88%, #fff 55%, transparent 60%),
    radial-gradient(2.5px 2.5px at 10% 8%, #fff 55%, transparent 60%);
  background-size: 115% 150%;
  filter: drop-shadow(0 0 1.5px rgba(220, 235, 255, 0.7));
  animation: presence-snow-drift-b 11s linear infinite;
}
@keyframes presence-snow-drift {
  0% {
    background-position:
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position:
      18px 260px, -22px 300px, 12px 240px, -28px 280px,
      8px 270px, -14px 310px, 24px 250px, -10px 290px,
      16px 265px, -20px 305px, 10px 255px, -26px 285px,
      6px 275px, -12px 315px, 20px 245px, -8px 295px;
  }
}
@keyframes presence-snow-drift-b {
  0% {
    background-position:
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position:
      -16px 280px, 20px 320px, -10px 250px, 26px 300px,
      -8px 290px, 14px 330px, -22px 270px, 10px 310px,
      -18px 285px, 12px 325px, -6px 265px, 24px 295px,
      -14px 305px, 8px 255px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .presence-theme-snow,
  .presence-theme-snow::before {
    animation: none;
  }
  .presence-theme-snow { opacity: 0.7; }
  .presence-theme-snow::before { opacity: 0.55; }
}

/* Guirlandes coins plus généreuses (vraies PNG) */
.theme-decor-slot {
  width: min(260px, 36vw);
  opacity: 0.92;
}