/* Effets et animations du site public. Chargé après site.css.
   Les états de départ des animations (éléments cachés avant leur apparition) ne
   s'appliquent que sous html.animations, que effets.js n'ajoute pas quand la personne
   demande moins d'animations. Ambiance « salle de jeu chic » : bleu marine, or et néon,
   sans aucun jeu d'argent. */

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* --- Utilitaires --------------------------------------------------------- */
.pouls { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: pouls 1.8s infinite; flex: none; }
@keyframes flotter {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(calc(var(--rot, 0deg) + 4deg)); }
}
@keyframes or-brille { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes degrade { to { background-position: 200% 0; } }

.progression-page {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--or), var(--neon), var(--bleu));
}
.mode-equipe .progression-page { display: none; }

/* Entrée d'une vue : les blocs de la page glissent en place. */
.animations body:not(.mode-equipe) .entree-vue > * { animation: entree-vue 460ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes entree-vue { from { opacity: 0; transform: translateY(16px); } }

/* Apparition au défilement */
.animations .a-reveler { opacity: 0; transform: translateY(28px) scale(0.98); }
.animations .a-reveler.revele {
  opacity: 1; transform: none;
  transition: opacity 600ms ease var(--delai, 0ms), transform 750ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--delai, 0ms);
}

/* --- Inclinaison sous le pointeur -------------------------------------- */
.carte.inclinee, [data-incliner].inclinee {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
  transition: transform 120ms ease-out, box-shadow var(--transition);
}
.carte.inclinee { box-shadow: var(--ombre-l); }
.reflet {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 250ms;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.5), transparent 55%);
  mix-blend-mode: soft-light;
}
.carte.inclinee .reflet { opacity: 1; }

/* --- Boutons : reflet qui passe au survol ------------------------------- */
.bouton-jackpot, .bouton-principal { position: relative; overflow: hidden; isolation: isolate; }
.bouton-jackpot::after, .bouton-principal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 650ms ease;
}
.bouton-jackpot:hover::after, .bouton-principal:hover::after { transform: translateX(120%); }

/* --- Cartes : illustration 3D quand le concours n'a pas de photo --------- */
/* Une seule case pleine grandeur : l'illustration se centre quelle que soit sa largeur. */
.tuile-icone { grid-template: 100% / 100%; }
.tuile-icone .objet-3d {
  position: static; inset: auto; z-index: auto; /* pas la position de la photo (.carte-visuel img) */
  width: 64%; height: 86%; object-fit: contain;
  filter: drop-shadow(0 14px 16px var(--ombre-objet));
  transition: transform 500ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.carte:hover .tuile-icone .objet-3d { transform: translateY(-6px) rotate(-5deg) scale(1.08); }
.carte:hover .pastille-valeur { animation: pastille-pop 520ms cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pastille-pop { 40% { transform: scale(1.14) rotate(-3deg); } }
.badge-urgent { animation: battement 1.4s ease-in-out infinite; }
.fiche-visuel .tuile-icone .objet-3d { width: 44%; animation: flotter 6s ease-in-out infinite; }
.mini-tuile .objet-3d { width: 84%; height: 84%; object-fit: contain; }
.mini-tuile img:not(.objet-3d) { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

/* --- Tuiles de catégorie ------------------------------------------------- */
.tuile-categorie { min-height: 142px; justify-content: flex-end; }
.tuile-categorie > div { position: relative; z-index: 1; }
.tuile-objet {
  position: absolute; right: 4px; top: 4px; width: 92px; height: 92px; object-fit: contain; z-index: 1;
  filter: drop-shadow(0 10px 14px rgba(5, 20, 60, 0.35));
  transition: transform 500ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tuile-categorie:hover .tuile-objet { transform: translateY(-6px) rotate(-8deg) scale(1.14); }

/* --- Héros --------------------------------------------------------------- */
.heros { isolation: isolate; padding-bottom: 104px; }
.aurore { position: absolute; inset: -25% -10%; z-index: 0; filter: blur(70px); pointer-events: none; }
.aurore span { position: absolute; border-radius: 50%; }
.aurore span:nth-child(1) { width: 60vw; height: 60vw; left: 45%; top: -15%; background: radial-gradient(circle, rgba(42, 132, 252, 0.85), transparent 65%); animation: aurore-1 18s ease-in-out infinite alternate; }
.aurore span:nth-child(2) { width: 46vw; height: 46vw; left: -8%; top: 25%; background: radial-gradient(circle, rgba(251, 191, 36, 0.32), transparent 65%); animation: aurore-2 23s ease-in-out infinite alternate; }
.aurore span:nth-child(3) { width: 42vw; height: 42vw; left: 28%; top: 48%; background: radial-gradient(circle, rgba(34, 211, 238, 0.32), transparent 65%); animation: aurore-3 27s ease-in-out infinite alternate; }
@keyframes aurore-1 { to { transform: translate(-16vw, 10vh) scale(1.15); } }
@keyframes aurore-2 { to { transform: translate(20vw, -8vh) scale(0.9); } }
@keyframes aurore-3 { to { transform: translate(-10vw, -14vh) scale(1.2); } }
.etincelles-heros { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.projecteur {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 35%), rgba(255, 255, 255, 0.09), transparent 60%);
}
/* Deux faisceaux de projecteurs qui balaient la salle. */
.faisceaux { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.faisceaux span {
  position: absolute; top: -20%; width: 26vw; height: 130%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 236, 170, 0.11), rgba(255, 236, 170, 0) 65%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); filter: blur(14px);
}
@media (max-width: 900px) { .faisceaux { display: none; } }
.faisceaux span:nth-child(1) { left: 6%; transform: rotate(18deg); animation: balayer-g 11s ease-in-out infinite alternate; }
.faisceaux span:nth-child(2) { right: 4%; transform: rotate(-16deg); animation: balayer-d 13s ease-in-out infinite alternate; }
@keyframes balayer-g { to { transform: rotate(-10deg); } }
@keyframes balayer-d { to { transform: rotate(12deg); } }
.vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 64px; z-index: 1; color: var(--fond); pointer-events: none; }

/* Enseigne au néon au-dessus du titre */
.neon {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 16px 6px 12px;
  border-radius: var(--rayon-plein); border: 1.5px solid rgba(251, 191, 36, 0.65);
  font-family: var(--police-titre); font-weight: 900; font-size: var(--taille-s); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff6d6; background: rgba(5, 13, 34, 0.45);
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.95), 0 0 16px rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.35), inset 0 0 12px rgba(251, 191, 36, 0.18);
}
.neon .pouls { box-shadow: none; }
.animations .neon-texte { animation: neon-vacille 7s linear infinite; }
@keyframes neon-vacille {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.55; text-shadow: none; }
}

/* Titre qui apparaît mot par mot */
.titre-anime .mot { display: inline-block; }
.animations .titre-anime .mot {
  opacity: 0; transform: translateY(0.55em) rotate(3deg); filter: blur(8px);
  animation: mot-entre 750ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(150ms + var(--i) * 75ms);
}
@keyframes mot-entre { to { opacity: 1; transform: none; filter: none; } }
.heros h1 em .mot {
  background: linear-gradient(100deg, #fbbf24 25%, #fff3c4 45%, #f59e0b 60%, #fbbf24 75%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.animations .heros h1 em .mot { animation: mot-entre 750ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards, or-brille 4.5s linear 1.5s infinite; animation-delay: calc(150ms + var(--i) * 75ms), 1.5s; }

.heros-maintenant { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--texte-nuit-doux); font-weight: 600; margin: -8px 0 22px; }
.puce-tournante {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 16px 4px 6px;
  border-radius: var(--rayon-plein); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
}
.puce-tournante strong { color: var(--or); font-family: var(--police-titre); font-weight: 900; font-size: 1.15rem; }
.puce-objet { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }
.puce-tournante.tourne { animation: puce-entre 520ms cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes puce-entre { from { opacity: 0; transform: translateY(12px) scale(0.9); } }

/* Scène de prix flottants autour de la cagnotte */
.scene-prix { position: relative; padding: 30px 0; }
.scene-prix .cagnotte { z-index: 1; }
.flottant { position: absolute; z-index: 2; pointer-events: none; }
.flottant img { width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 5, 30, 0.5)); animation: flotter 6s ease-in-out infinite; }
.animations .flottant { animation: flottant-entre 900ms cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: var(--d, 300ms); }
@keyframes flottant-entre { from { scale: 0.2; opacity: 0; } }
.f-trophee { width: 132px; left: -58px; top: -34px; z-index: 0; --d: 500ms; }
.f-trophee img { --rot: -8deg; animation-duration: 7s; }
.f-billet { width: 118px; right: -34px; top: -28px; --d: 650ms; }
.f-billet img { --rot: 14deg; animation-duration: 5s; animation-delay: -1.5s; }
.f-cadeau { width: 112px; left: -52px; bottom: -6px; --d: 800ms; }
.f-cadeau img { --rot: -10deg; animation-duration: 6.5s; animation-delay: -3s; }
.f-voyage { width: 150px; right: -96px; top: 34%; z-index: 0; --d: 950ms; }
.f-voyage img { --rot: 6deg; animation-duration: 8s; animation-delay: -2s; }
.f-manette { width: 104px; right: 6px; bottom: -40px; --d: 1100ms; }
.f-manette img { --rot: 12deg; animation-duration: 5.5s; animation-delay: -4s; }
.f-argent { width: 104px; left: 38%; top: -70px; z-index: 0; --d: 1250ms; }
.f-argent img { --rot: -4deg; animation-duration: 7.5s; animation-delay: -1s; }
@media (max-width: 1100px) { .f-voyage { display: none; } }
@media (max-width: 900px) {
  .scene-prix { margin: 26px 18px 10px; }
  .f-trophee { width: 92px; left: -30px; top: -30px; }
  .f-billet { width: 86px; right: -20px; top: -34px; }
  .f-cadeau, .f-argent { display: none; }
  .f-manette { width: 80px; right: -14px; bottom: -28px; }
  .heros { padding-bottom: 76px; }
  .scene-prix { padding: 12px 0; }
}

/* Cagnotte : bordure lumineuse qui tourne, montant doré qui brille */
.cagnotte::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0 55%, var(--or) 72%, var(--neon) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tourner-angle 5s linear infinite;
}
@keyframes tourner-angle { to { --angle: 360deg; } }
.cagnotte-montant {
  background: linear-gradient(100deg, #fbbf24 20%, #fff6cf 40%, #fbbf24 60%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 6px 26px rgba(251, 191, 36, 0.4));
  animation: or-brille 3.6s linear infinite;
}
.cagnotte-stats div { transition: background var(--transition), transform var(--transition); }
.cagnotte-stats div:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }

/* Ampoules de chapiteau qui défilent autour de la cagnotte (posées par effets.ampoules). */
.ampoules { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; }
.ampoules i {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe6, #fcd34d 55%, #d97706);
  box-shadow: 0 0 6px 1px rgba(251, 191, 36, 0.85), 0 0 14px rgba(251, 191, 36, 0.45);
}
.animations .ampoules i { animation: ampoule-chasse 1.05s linear infinite; animation-delay: calc(var(--k) * -0.35s); }
@keyframes ampoule-chasse {
  0%, 30% { opacity: 1; transform: scale(1); }
  34%, 96% { opacity: 0.32; transform: scale(0.82); box-shadow: 0 0 2px rgba(251, 191, 36, 0.3); }
  100% { opacity: 1; transform: scale(1); }
}
.cagnotte.fete .ampoules i { animation-duration: 0.36s; }

/* --- Boutons et fiches partagés (invitation au compte, coffre, fil des nouveautés) --- */
.bouton-geant { font-size: 1.15rem; padding: 1em 1.7em; }
.fil-visuel img:not(.objet-3d) { position: absolute; inset: 0; z-index: 1; }
@keyframes gagnant-entre { from { opacity: 0; transform: translateY(14px) scale(0.95); } }

/* --- Robot --------------------------------------------------------------- */
.robot {
  position: relative; overflow: hidden; margin-top: 64px; padding: clamp(28px, 5vw, 52px);
  display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center;
  border-radius: var(--rayon-l); color: #fff; border: 1px solid var(--nuit-ligne);
  background: radial-gradient(600px 300px at 0% 50%, rgba(16, 185, 129, 0.16), transparent 60%), var(--nuit);
}
.robot h2 { font-size: var(--taille-2xl); margin-top: 14px; }
.robot p { color: var(--texte-nuit-doux); font-size: var(--taille-l); max-width: 36em; }
.radar { position: relative; width: 280px; aspect-ratio: 1; justify-self: center; border-radius: 50%; border: 1px solid rgba(16, 185, 129, 0.4); background: radial-gradient(circle, rgba(16, 185, 129, 0.12), transparent 70%); }
.radar span { position: absolute; border-radius: 50%; border: 1px solid rgba(16, 185, 129, 0.28); }
.radar span:nth-child(1) { inset: 17%; }
.radar span:nth-child(2) { inset: 34%; }
.radar span:nth-child(3) { inset: 48.5%; background: var(--menthe); box-shadow: 0 0 18px var(--menthe); border: 0; }
.radar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(16, 185, 129, 0.55), transparent 22%); animation: balayer 3.2s linear infinite; }
@keyframes balayer { to { transform: rotate(360deg); } }
.radar-point { position: absolute; width: 58px; height: 58px; object-fit: contain; opacity: 0.25; animation: bip 3.2s ease-in-out infinite; }
.radar-point.p1 { left: 58%; top: 12%; animation-delay: 0.35s; }
.radar-point.p2 { left: 64%; top: 58%; animation-delay: 1.15s; }
.radar-point.p3 { left: 14%; top: 50%; animation-delay: 2.3s; }
@keyframes bip { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 8% { opacity: 1; transform: scale(1.18); } 35% { opacity: 0.95; transform: scale(1); } }
.robot-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.robot-chiffres div { padding: 16px; border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.robot-chiffres strong { display: block; font-family: var(--police-titre); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.1; color: var(--menthe); font-variant-numeric: tabular-nums; }
.robot-chiffres span { font-size: var(--taille-s); font-weight: 600; color: var(--texte-nuit-doux); }
@media (max-width: 860px) { .robot { grid-template-columns: 1fr; gap: 28px; } .radar { width: 220px; } }
@media (max-width: 440px) {
  .robot-chiffres { gap: 8px; }
  .robot-chiffres div { padding: 12px 10px; }
  .robot-chiffres strong { font-size: 1.3rem; }
  .robot-chiffres span { font-size: var(--taille-xs); }
}

/* --- Comment ça marche, alertes, pied ------------------------------------ */
.etape-objet { width: 86px; height: 86px; object-fit: contain; margin: -8px 0 8px -8px; filter: drop-shadow(0 12px 14px var(--ombre-objet)); transition: transform 500ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.etape:hover .etape-objet { transform: translateY(-6px) rotate(-6deg) scale(1.08); }
.etape { transition: transform var(--transition), box-shadow var(--transition); }
.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }

.alertes-deco { position: relative; justify-self: center; width: 240px; height: 190px; }
.alertes-mascotte { position: absolute; left: 34px; top: 0; width: 180px; filter: drop-shadow(0 18px 22px rgba(0, 10, 50, 0.45)); animation: flotter 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
.alertes-objet { position: absolute; width: 96px; filter: drop-shadow(0 14px 18px rgba(0, 10, 50, 0.45)); animation: flotter 5.5s ease-in-out infinite; }
.alertes-objet.a1 { left: -16px; bottom: -10px; --rot: -12deg; }
.alertes-objet.a2 { right: -10px; top: -14px; --rot: 10deg; animation-delay: -2.5s; }
@media (max-width: 760px) { .alertes-deco { display: none; } }

.pied { position: relative; }
.pied::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--or), var(--neon), var(--bleu), #22d3ee, var(--or)); background-size: 200% 100%;
  animation: degrade 8s linear infinite;
}

/* --- Fil des concours ajoutés ------------------------------------------- */
.fil-direct {
  position: fixed; left: 20px; bottom: 20px; z-index: 70; width: min(370px, calc(100vw - 40px));
  background: var(--verre-fort); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ligne); border-radius: 18px;
  box-shadow: var(--ombre-l); opacity: 0; transform: translateY(140%);
  transition: transform 550ms cubic-bezier(0.3, 1.3, 0.5, 1), opacity 300ms;
}
.fil-direct.visible { opacity: 1; transform: none; }
/* Au-dessus de la barre de navigation du bas (téléphone, tablette). */
@media (max-width: 760px) { .fil-direct { bottom: calc(80px + env(safe-area-inset-bottom)); } }
.fil-lien { display: flex; align-items: center; gap: 12px; padding: 12px 42px 12px 12px; color: var(--encre); text-decoration: none !important; }
.fil-visuel { position: relative; flex: none; width: 58px; height: 58px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.fil-visuel img { width: 100%; height: 100%; object-fit: cover; }
.fil-visuel .objet-3d { width: 84%; height: 84%; object-fit: contain; }
.fil-texte { min-width: 0; display: grid; gap: 1px; }
.fil-etiquette { display: inline-flex; align-items: center; gap: 6px; font-size: var(--taille-xs); font-weight: 800; color: var(--menthe-texte); text-transform: uppercase; letter-spacing: 0.04em; }
.fil-etiquette .pouls { width: 7px; height: 7px; }
.fil-texte strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-texte > span:last-child { font-size: var(--taille-xs); color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-fermer { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--encre-pale); display: grid; place-items: center; }
.fil-fermer:hover { background: var(--bleu-pale); color: var(--encre); }

/* Confettis ronds */
.confetti.rond { width: 10px; height: 10px; border-radius: 50%; }

/* --- Bandeau de l'explorateur -------------------------------------------- */
.banniere {
  position: relative; overflow: hidden; margin: 22px 0 6px; padding: 28px clamp(20px, 4vw, 40px); min-height: 150px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; border-radius: var(--rayon-l);
  background: radial-gradient(520px 240px at 85% 10%, rgba(255, 255, 255, 0.25), transparent 60%), linear-gradient(120deg, var(--c1), var(--c2));
  box-shadow: var(--ombre-m); transition: background 400ms;
}
.banniere::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.banniere-texte { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(5, 13, 34, 0.35); }
.banniere h1 { color: #fff; }
.banniere p { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.banniere-objets { position: relative; z-index: 1; flex: none; width: 300px; height: 120px; }
.b-objet { position: absolute; filter: drop-shadow(0 14px 18px rgba(5, 20, 60, 0.35)); animation: flotter 6s ease-in-out infinite; }
.b-seul { right: 10px; top: -22px; width: 160px; animation: flotter 6s ease-in-out infinite, b-entre 700ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.b1 { right: 0; top: -14px; width: 130px; --rot: -6deg; }
.b2 { right: 128px; top: 18px; width: 92px; --rot: 12deg; animation-delay: -2s; }
.b3 { right: 214px; top: -6px; width: 86px; --rot: -10deg; animation-delay: -4s; }
@keyframes b-entre { from { scale: 0.3; opacity: 0; } }
.puce-mini { width: 22px; height: 22px; object-fit: contain; margin: -4px 0; }
@media (max-width: 640px) {
  .banniere { min-height: 120px; padding-right: 110px; }
  .banniere-objets { position: absolute; right: 8px; top: 50%; width: 110px; height: 110px; margin-top: -55px; }
  .b2, .b3 { display: none; }
  .b1, .b-seul { width: 104px; right: 0; top: 0; }
}

/* --- Mascotte ------------------------------------------------------------ */
.vide-mascotte { width: 150px; height: 150px; object-fit: contain; margin: 0 auto 6px; animation: flotter 5s ease-in-out infinite; filter: drop-shadow(0 14px 18px var(--ombre-objet)); }
.pied-mascotte { width: 92px; margin-top: 4px; animation: flotter 6s ease-in-out infinite; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35)); }

/* --- Héros à la hauteur de l'écran, banderole des dernières chances en bas --- */
.heros { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-bottom: 0; }
.heros > .conteneur { flex: 1 0 auto; align-content: center; padding-bottom: 44px; }
.defilant-heros { position: relative; z-index: 2; margin-top: auto; flex: none; border-bottom: 0; }
/* Écran étroit ou bas : la banderole passe juste sous l'en-tête pour rester visible à l'ouverture. */
@media (max-width: 900px), (max-height: 720px) {
  .heros { padding-top: 68px; min-height: 0; }
  .defilant-heros { order: -1; margin: 0 0 28px; border-top: 0; }
  .heros > .conteneur { padding-bottom: 56px; }
}