/*
 * L'Aire Bête — Welcome state illustratif (Session I.4 PIVOT + I.5 video bg)
 *
 * Layer plein écran au-dessus du canvas Three.js (qui sert maintenant de
 * background video Kling via VideoBackground.js, Session I.5).
 * Animations CSS-only sauf orchestration cinematic JS-driven.
 */

/* ============================================================
 *  Canvas Three.js (video bg Kling) — fullscreen derrière tout
 * ============================================================ */
.lb-univers__canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  display: block;
  pointer-events: none;   /* clics traversent vers welcome layer au-dessus */
}

/* Quand le video bg est chargé et joue (.has-video-bg sur root),
   masque les overlays statiques qui sont désormais redondants ou
   concurrents avec ce que la vidéo affiche déjà :
   - panorama PNG (remplacé par la vidéo)
   - sky-overlay couleur teinte (la vidéo a son propre ciel/lumière)
   - waters (cascades, basin, mist — la vidéo a sa propre eau animée)
   Si la vidéo fail à charger, .has-video-bg n'est PAS ajouté
   → fallback : panorama PNG + overlays CSS restent visibles. */
.lb-welcome-illustrative.has-video-bg .lb-wi-panorama,
.lb-welcome-illustrative.has-video-bg .lb-wi-sky-overlay,
.lb-welcome-illustrative.has-video-bg .lb-wi-waters {
  display: none;
}
/* Quand video bg actif, root devient transparent pour laisser passer le
   canvas vidéo dessous. Le bg-color #1a1208 du root reste actif en cas
   de fail vidéo (sans .has-video-bg) pour servir de fallback noir doux. */
.lb-welcome-illustrative.has-video-bg {
  background: transparent;
  transition: opacity 0.8s ease, background 0.4s ease;
}

/* ============================================================
 *  Stage racine
 * ============================================================ */
.lb-welcome-illustrative {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: #1a1208;
  opacity: 0;
  transition: opacity 0.8s ease;
  font-family: Georgia, 'Times New Roman', serif;
}
.lb-welcome-illustrative.is-ready {
  opacity: 1;
}
.lb-welcome-illustrative.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
 *  Stage wrapper (v1.31.1) — contient panorama, sky, waters, mascots,
 *  zones. Par défaut fullscreen (inset:0) ; quand le video bg est
 *  en mode 'contain', JS override avec inline left/top/width/height en
 *  pixels pour matcher pixel-perfect le rect visible du video. Permet
 *  aux % de positions des sprites de correspondre à des coordonnées
 *  vidéo (cohérence WYSIWYG avec /admin/mascots-placement/).
 * ============================================================ */
.lb-wi-stage {
  position: absolute;
  inset: 0;
}

/* ============================================================
 *  Panorama background + Ken Burns
 * ============================================================ */
.lb-wi-panorama {
  position: absolute;
  inset: -3% -3% -3% -3%;   /* léger overflow pour laisser le ken-burns transformer */
  background-image: none;   /* injecté par JS */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  animation: lb-wi-ken-burns 28s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 1;
}
/* Ken Burns réduit à ~50% d'amplitude (était scale 1.02-1.08, translate ±1.2%).
   Maintenant scale 1.01-1.04, translate ±0.6%, plus subtil. */
@keyframes lb-wi-ken-burns {
  0%   { transform: scale(1.01) translate(0, 0); }
  50%  { transform: scale(1.025) translate(-0.6%, -0.25%); }
  100% { transform: scale(1.04) translate(0.4%, -0.5%); }
}

/* ============================================================
 *  Sky tint overlay (couleur ciel sync heure locale)
 * ============================================================ */
.lb-wi-sky-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  pointer-events: none;
  transition: background 5s linear;
}

/* ============================================================
 *  Water overlays (cascades + bassin) — animations CSS
 * ============================================================ */
.lb-wi-waters {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.lb-wi-water {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: background-position;
}

/* Cascade : bandes verticales blanches qui défilent vers le bas.
   MASK RADIAL ELLIPSE : fade dans TOUTES les directions (haut, bas, ET
   côtés) → aucun bord rectangulaire visible. L'ellipse suit naturellement
   l'aspect tall-narrow de l'overlay cascade, ce qui donne une forme de
   colonne d'eau soft sur les bords. Opacité réduite pour subtilité. */
.lb-wi-water--cascade {
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.0)  0%,
      rgba(255, 255, 255, 0.50) 30%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0.50) 70%,
      rgba(255, 255, 255, 0.0) 100%);
  background-size: 100% 28%;
  background-repeat: repeat-y;
  opacity: 0.55;             /* réduit 0.65 → 0.55 (plus subtil) */
  animation: lb-wi-water-fall 1.4s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at center,
    black 0%, black 30%, transparent 95%);
          mask-image: radial-gradient(ellipse at center,
    black 0%, black 30%, transparent 95%);
}
@keyframes lb-wi-water-fall {
  0%   { background-position: 0 0; }
  100% { background-position: 0 28%; }
}

/* Bassin : ripples horizontaux dérivant + contrast boost (était à peine visible).
   mask radial ellipse pour faire fondre les edges dans le bassin réel. */
.lb-wi-water--basin {
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.0)  0%,
      rgba(255, 255, 255, 0.50) 22%,
      rgba(255, 255, 255, 0.0)  48%,
      rgba(255, 255, 255, 0.40) 72%,
      rgba(255, 255, 255, 0.0) 100%);
  background-size: 220% 100%;
  opacity: 0.78;                    /* boost 0.5 → 0.78 pour visibilité */
  animation: lb-wi-water-ripple 4.5s linear infinite;   /* accéléré 6s → 4.5s */
  /* Mask ellipse douce : ripples uniquement visibles dans la zone bassin */
  -webkit-mask-image: radial-gradient(ellipse at center, black 45%, transparent 90%);
          mask-image: radial-gradient(ellipse at center, black 45%, transparent 90%);
}
@keyframes lb-wi-water-ripple {
  0%   { background-position: 0% 0%; }
  100% { background-position: 220% 0%; }
}

/* Brume / embrun : dérive lente avec léger scale-breathe, blur fort */
.lb-wi-water--mist {
  background-image: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(255, 255, 255, 0.22) 40%,
    transparent 85%);
  opacity: 0.55;
  filter: blur(8px);
  animation: lb-wi-mist-drift 14s ease-in-out infinite;
  will-change: transform;
}
@keyframes lb-wi-mist-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2.5%, -1.5%) scale(1.06); }
  66%      { transform: translate(-1.8%, 1%) scale(1.04); }
}

/* ============================================================
 *  Mascottes animées
 * ============================================================ */
.lb-wi-mascots {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.lb-wi-mascot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
  z-index: 25;             /* défaut : au-dessus du water overlay (z:20) */
}
.lb-wi-mascot img,
.lb-wi-mascot video {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  user-select: none;
}

/* Wrapping the position offset in the outer .lb-wi-mascot (left/top in %),
 * the animation translates the inner <img> for movement effects. */
.lb-wi-mascot img,
.lb-wi-mascot video {
  transform-origin: center bottom;
}

/* v1.34.0 v2 — <video> mascot (WebM VP9 alpha) : pas de pointer-events,
 * pas de outline focus (jamais focusable côté UX, draggable côté admin via
 * son wrapper .lb-wi-mascot et non l'élément vidéo lui-même). */
.lb-wi-mascot video {
  pointer-events: none;
  outline: none;
}

/* STRIX (chouette) : RIEN à clip ici (v1.30.4).
   Le nouveau fichier strix1.png a été retravaillé manuellement par Johanne,
   le piédestal est déjà retiré à la source. clip-path supprimé pour éviter
   de cut les pattes/le bas du corps de la chouette. */

/* --- Animations par data-anim --- */
@keyframes lb-wi-anim-gallop {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8%); }
}
.lb-wi-mascot[data-anim="gallop"] img {
  animation: lb-wi-anim-gallop 4s ease-in-out infinite;
}

@keyframes lb-wi-anim-graze {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(2%) scaleY(0.98); }
}
.lb-wi-mascot[data-anim="graze"] img {
  animation: lb-wi-anim-graze 4.5s ease-in-out infinite;
}

@keyframes lb-wi-anim-relax {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.02); }
}
.lb-wi-mascot[data-anim="relax"] img {
  animation: lb-wi-anim-relax 5s ease-in-out infinite;
}

@keyframes lb-wi-anim-run {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(8%, -1.5%); }
}
.lb-wi-mascot[data-anim="run"] img {
  animation: lb-wi-anim-run 3s ease-in-out infinite alternate;
}

@keyframes lb-wi-anim-flight-loop-large {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(14%, -6%); }
  50%  { transform: translate(22%, 0); }
  75%  { transform: translate(14%, 6%); }
  100% { transform: translate(0, 0); }
}
.lb-wi-mascot[data-anim="flight-loop-large"] img {
  animation: lb-wi-anim-flight-loop-large 14s linear infinite;
}

@keyframes lb-wi-anim-flight-small {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(5%, -3%); }
  50%  { transform: translate(9%, 0); }
  75%  { transform: translate(5%, 3%); }
  100% { transform: translate(0, 0); }
}
.lb-wi-mascot[data-anim="flight-small"] img {
  animation: lb-wi-anim-flight-small 8s linear infinite;
}

@keyframes lb-wi-anim-jump {
  0%, 100%   { transform: translateY(0); }
  10%        { transform: translateY(-35%); }
  20%        { transform: translateY(0); }
  /* reste 80% au repos */
}
.lb-wi-mascot[data-anim="jump"] img {
  animation: lb-wi-anim-jump 6s ease-out infinite;
}

/* Dive (v1.30.4) : Saphir saute hors de l'eau → retombe → replonge → cycle.
   Combiné avec data-in-water mask gradient parent : translateY négatif fait
   émerger Saphir, translateY positif le fait sombrer sous la ligne d'eau.
   Cycle plus fréquent que jump (3.5s vs 6s) car "Saphir nage activement". */
@keyframes lb-wi-anim-dive {
  0%, 100%  { transform: translateY(0); }      /* surface (semi-submergé via mask) */
  15%       { transform: translateY(-40%); }   /* peak du saut hors de l'eau */
  30%       { transform: translateY(0); }      /* retombe sur la surface */
  50%       { transform: translateY(25%); }    /* replonge brièvement sous l'eau */
  70%       { transform: translateY(0); }      /* resurface — repos restant 30% */
}
.lb-wi-mascot[data-anim="dive"] img {
  animation: lb-wi-anim-dive 3.5s ease-in-out infinite;
}

@keyframes lb-wi-anim-walk {
  0%   { transform: translateX(0); }
  100% { transform: translateX(10%); }
}
.lb-wi-mascot[data-anim="walk"] img {
  animation: lb-wi-anim-walk 9s linear infinite alternate;
}

@keyframes lb-wi-anim-idle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3%); }
}
.lb-wi-mascot[data-anim="idle-bob"] img {
  animation: lb-wi-anim-idle-bob 3.5s ease-in-out infinite;
}

@keyframes lb-wi-anim-shine {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)) brightness(1); }
  50%      { filter: drop-shadow(0 4px 16px rgba(255,215,0,0.55)) brightness(1.18); }
}
.lb-wi-mascot[data-anim="shine"] img {
  animation: lb-wi-anim-shine 4s ease-in-out infinite;
}

@keyframes lb-wi-anim-butterfly {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(4%, -5%); }
  40%  { transform: translate(-3%, 4%); }
  60%  { transform: translate(5%, 3%); }
  80%  { transform: translate(-4%, -3%); }
  100% { transform: translate(0, 0); }
}
.lb-wi-mascot[data-anim="butterfly"] img {
  animation: lb-wi-anim-butterfly 7s ease-in-out infinite;
}

/* "idle" = aucune animation (Strix sur sa branche) */

/* ============================================================
 *  v1.31.2 — Animations idle mascottes DÉSACTIVÉES (temporaire).
 *
 *  Les comportements génériques (idle-bob, gallop, walk, etc.) faisaient
 *  osciller toutes les mascottes de gauche à droite sans correspondance
 *  avec les comportements naturels caractérisés. Sprint dédié futur :
 *  recoder galop Tempo, course Maxime, broutement Marguerite, etc.
 *
 *  En attendant : sprites en position fixe. Les @keyframes lb-wi-anim-*
 *  ci-dessus sont CONSERVÉS pour faciliter le rollback (supprimer ce
 *  bloc unique suffit).
 *
 *  N'affecte PAS : Ken Burns panorama, eaux animées (selectors différents).
 * ============================================================ */
.lb-wi-mascot img {
  animation: none !important;
}

/* ============================================================
 *  TIKO — compagnon visuel central (remplace ZEN, v1.34.0 v2 2026-05-20)
 *
 *  Entrée : part de la droite hors champ (translateX 120vw) puis arrive
 *  au centre. Position finale : centre-bas de l'écran (calibrable via
 *  /admin/mascots-placement/ si tiko est ajouté à MASCOT_DEFS).
 *
 *  Comportement vidéo : autoplay, pas de loop, freeze sur dernière frame
 *  (géré côté <video> sans attribut loop + listener JS ended → pause).
 * ============================================================ */
.mascot-tiko {
  position: absolute;
  left: 50%;
  top: 65%;                       /* v1.43.16 — descendu (était 50%) */
  width: 22%;
  transform: translate(-50%, -50%);
  z-index: 70;
  pointer-events: auto;
  cursor: default;
  display: block;
  height: auto;
  user-select: none;
  filter: drop-shadow(0 8px 22px rgba(255, 245, 200, 0.55));
}

/* idle : caché au load, JS swap entry→idle sur 'ended' */
.mascot-tiko--idle {
  display: none;
}

/* === v1.43.8 — TIKO bulle parents : transparent !important ========
 * Force la transparence sur les divs parents pour qu'aucun bg
 * (notamment le #1a1208 fallback de .lb-welcome-illustrative) ne
 * transperce les zones alpha du PNG bulle. */
#lb-welcome-illustrative,
.lb-welcome-illustrative,
.lb-wi-mascots {
  background: transparent !important;
  background-color: transparent !important;
}

/* === v1.43.0 — Bulle TIKO PNG + chat interactif Claude API =========
 * tiko-bulle.png (parchemin avec queue intégrée) en background-image.
 * Au-dessus de TIKO, contient un mini-chat (history + input + send).
 * Queue de la PNG pointe naturellement vers TIKO en bas.
 * ================================================================ */
.lb-wi-tiko-bubble {
  /* v1.48.22 / v1.48.23 — Bulle-iris3 conteneur. Position lue depuis
     CSS custom properties (--bubble-top, --bubble-left, --bubble-width)
     injectées inline par PHP depuis bubble-position.json. DnD admin
     met à jour ces valeurs via inline style. */
  position: absolute !important;
  left: var( --bubble-left, 50% ) !important;
  top: var( --bubble-top, 8% ) !important;
  /* v1.48.61 — !important retiré pour laisser les keyframes d'oscillation
     prendre le dessus (CSS spec : !important bat les animations). Le
     centrage horizontal est préservé dans les keyframes elles-mêmes. */
  transform: translate( -50%, 0 );
  width: var( --bubble-width, 480px );
  max-width: 80vw;
  aspect-ratio: 1.79;
  z-index: 1000;
  background-color: transparent !important;
  background-image: url('../../public/assets/bulle-iris3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3D2010;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.35;
  padding: 0;                    /* v1.48.22 — padding retiré, .__content gère */
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: break-word;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto !important;
  box-sizing: border-box;
}

/* v1.48.22 / v1.48.25 — Wrapper interne ENTIÈREMENT TRANSPARENT.
   La bulle-iris3.png a déjà un fond cream peint à l'intérieur de
   l'ovale ; le wrapper ne fait que CONTRAINDRE la zone où le texte
   se positionne. Aucun fond, aucune bordure visible.
   Position et taille en % de la bulle, ajustables via DnD admin. */
.lb-wi-tiko-bubble__content {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Mode édition admin (?bubble_edit=1) — dashed border + handles */
.lb-wi-tiko-bubble.is-edit-mode .lb-wi-tiko-bubble__content {
  outline: 2px dashed rgba(80, 180, 220, 0.85);
  background: rgba(80, 180, 220, 0.10);
  cursor: move;
}
.lb-bubble-edit__handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #50B4DC;
  border: 2px solid #FFF;
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.lb-bubble-edit__handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.lb-bubble-edit__handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.lb-bubble-edit__handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.lb-bubble-edit__handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.lb-bubble-edit__handle--n  { top: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.lb-bubble-edit__handle--s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.lb-bubble-edit__handle--w  { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
.lb-bubble-edit__handle--e  { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }
.lb-bubble-edit__edit-label {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 11px;
  font-family: Georgia, serif;
  font-weight: 700;
  color: rgba(20, 50, 70, 0.9);
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
}
.lb-bubble-zone-status {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9000;
  background: rgba(20, 50, 70, 0.92);
  color: #F4DCAE;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.lb-bubble-zone-status.is-saving { background: rgba(120, 100, 30, 0.92); }
.lb-bubble-zone-status.is-saved  { background: rgba(60, 100, 50, 0.92); }
.lb-bubble-zone-status.is-error  { background: rgba(140, 40, 40, 0.92); }

/* v1.43.17 — Tous les enfants de la bulle reçoivent les clics
   (au cas où un reset CSS poserait pointer-events:none). */
.lb-wi-tiko-bubble * {
  pointer-events: auto !important;
}

/* v1.43.17 — Quand la bulle est ouverte (body.lb-tiko-bubble-open posé par
   JS), les zones cliquables pavillon sont désactivées pour éviter qu'un
   clic dans le champ de saisie traverse jusqu'à un pavillon en arrière-plan. */
body.lb-tiko-bubble-open .lb-wi-zones,
body.lb-tiko-bubble-open .lb-wi-zone {
  pointer-events: none !important;
}

/* v1.43.12 — Responsive mobile : 90vw, garde aspect-ratio */
@media ( max-width: 480px ) {
  .lb-wi-tiko-bubble { width: 90vw; }
}

.lb-wi-tiko-bubble[hidden] { display: none; }

.lb-wi-tiko-bubble.is-visible { opacity: 1; }

/* v1.43.16 / v1.43.85 — Historique. v1.43.85 : élargi à 90 % et hauteur
   50 % maintenant que la bulle est rectangulaire. */
.lb-wi-tiko-bubble__history {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-height: 50%;
  overflow-y: auto;
  padding: 0;
  text-align: center;
  color: #3D2010;
}

.lb-wi-tiko-bubble__history::-webkit-scrollbar { width: 5px; }
.lb-wi-tiko-bubble__history::-webkit-scrollbar-thumb {
  background: rgba(139, 94, 60, 0.4);
  border-radius: 3px;
}

.lb-wi-tiko-bubble__msg {
  margin: 0 0 8px;
  word-wrap: break-word;
}

/* v1.43.13 — TOUS les messages centrés (text-align inherit du parent
   .lb-wi-tiko-bubble__history qui a text-align:center). Plus de right/left. */
/* v1.43.14 — word-wrap break-word pour éviter long mot qui déborde. */
.lb-wi-tiko-bubble__msg {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.lb-wi-tiko-bubble__msg--user {
  font-style: italic;
  color: #2D5A27;     /* vert forêt (consigne Johanne) */
}

.lb-wi-tiko-bubble__msg--tiko {
  color: #3D2010;     /* doré/brun foncé hérité — message TIKO */
}

/* v1.43.12 / v1.43.85 — Form : élargi à 92 % maintenant qu'on est en
   rectangle (avant 80 % pour respecter les bords courbes du PNG). */
.lb-wi-tiko-bubble__form {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  display: flex;
  gap: 6px;
  align-items: center;
}

.lb-wi-tiko-bubble__input {
  flex: 1 1 auto;
  padding: 5px 9px;
  font: inherit;
  font-size: 0.85rem;
  color: #3D2010;
  background: rgba(255, 248, 231, 0.85);
  border: 1px solid #8B5E3C;
  border-radius: 12px;
  outline: none;
  min-width: 0;            /* permet le shrink dans flex */
}

.lb-wi-tiko-bubble__input:focus {
  border-color: #5C3A1E;
  background: rgba(255, 252, 244, 0.95);
  box-shadow: 0 0 0 2px rgba(139, 94, 60, 0.2);
}

.lb-wi-tiko-bubble__mic,
.lb-wi-tiko-bubble__send {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #8B5E3C;
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.lb-wi-tiko-bubble__mic:hover,
.lb-wi-tiko-bubble__mic:focus-visible,
.lb-wi-tiko-bubble__send:hover,
.lb-wi-tiko-bubble__send:focus-visible {
  /* v1.49.4 — Pattern unifié : luminosité dorée seule, pas de zoom */
  filter: drop-shadow(0 8px 24px rgba(255, 215, 100, 0.65));
  outline: none;
}

.lb-wi-tiko-bubble__send:disabled,
.lb-wi-tiko-bubble__mic:disabled {
  background: #a98b6a;
  cursor: wait;
  transform: none;
}

/* v1.43.12 — Mic : variation de teinte pour distinguer visuellement du send */
.lb-wi-tiko-bubble__mic {
  background: #a37346;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lb-wi-tiko-bubble__mic:hover,
.lb-wi-tiko-bubble__mic:focus-visible {
  background: #8B5E3C;
}

/* v1.43.18 — Micro en écoute : pulse rouge */
.lb-wi-tiko-bubble__mic.is-listening {
  background: #c0392b !important;
  box-shadow: 0 0 0 0 rgba( 192, 57, 43, 0.65 );
  animation: lb-tiko-mic-pulse 1.1s ease-out infinite;
}
@keyframes lb-tiko-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba( 192, 57, 43, 0.6 ); }
  70%  { box-shadow: 0 0 0 10px rgba( 192, 57, 43, 0 ); }
  100% { box-shadow: 0 0 0 0 rgba( 192, 57, 43, 0 ); }
}

/* v1.43.18 — Navigateur sans SpeechRecognition (Firefox) : grisé */
.lb-wi-tiko-bubble__mic.is-unsupported,
.lb-wi-tiko-bubble__mic:disabled {
  background: #8a7c6f;
  opacity: 0.55;
  cursor: not-allowed;
}

/* v1.48.28 — X de fermeture clairement visible à l'intérieur de l'oval
   bulle-iris3.png. Pastille brune ronde avec X crème, positionnée en
   haut-droite de l'oval cream (juste à droite de la zone texte). */
.lb-wi-tiko-bubble__close {
  position: absolute;
  top: 14%;
  right: 22%;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 94, 60, 0.95);
  border: 2px solid rgba(244, 220, 174, 0.85);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f4dcae;
  cursor: pointer;
  border-radius: 50%;
  opacity: 1;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.lb-wi-tiko-bubble__close:hover,
.lb-wi-tiko-bubble__close:focus-visible {
  /* v1.49.4 — Pattern unifié : luminosité dorée seule, pas de zoom */
  filter: drop-shadow(0 8px 24px rgba(255, 215, 100, 0.65));
  outline: none;
}

.lb-wi-tiko-bubble__close:focus-visible {
  outline: 2px solid #f4dcae;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lb-wi-tiko-bubble { transition: none; animation: none !important; }
}

/* v1.48.60 — Oscillation douce de la bulle pour suivre les micro-mouvements
   d'Iris. ~4.5 s/loop, amplitude réduite (±4 px + ±0.5 deg) pour rester
   non-distrayant. Override le transform: translate(-50%, 0) existant via
   spécificité des keyframes (animations gagnent sur !important inline).
   Pause si :
     - bubble en mode édition admin (DnD)
     - utilisateur a le focus dans un champ du form (typing chat) */
.lb-wi-tiko-bubble.is-visible {
  animation: lb-bubble-iris-osc 4.5s ease-in-out infinite;
  transform-origin: 50% 100%;   /* pivote depuis le bas (point d'attache Iris) */
}
.lb-wi-tiko-bubble.is-edit-mode,
.lb-wi-tiko-bubble:focus-within {
  animation-play-state: paused;
}
@keyframes lb-bubble-iris-osc {
  0%, 100% { transform: translate(-50%, 0)        rotate(0deg); }
  25%      { transform: translate(-50%, -4px)     rotate(-0.5deg); }
  50%      { transform: translate(-50%, -1.5px)   rotate(0.35deg); }
  75%      { transform: translate(-50%, 2.5px)    rotate(-0.25deg); }
}

/* ============================================================
 *  Dialog bubble (style bois/bambou)
 * ============================================================ */
/* Dialog cloud — bulle nuage blanc doux (style petit nuage organique).
   Forme = plusieurs ovales fusionnés via filtre SVG "goo" (blur+colorMatrix),
   pas de contour, ombre portée drop-shadow douce, animation drift vertical
   continue (comme un nuage qui dérive). Texte foncé contraste lisible. */
.lb-wi-dialog {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translate(-50%, 12px) scale(0.92);
  max-width: 540px;
  width: 78%;
  aspect-ratio: 520 / 220;       /* match SVG viewBox proportions */
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.lb-wi-dialog.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -8px) scale(1);
}
.lb-wi-dialog__cloud {
  position: relative;
  width: 100%;
  height: 100%;
  /* Ombre portée subtile (drop-shadow suit la forme transparente du nuage) */
  filter: drop-shadow(0 8px 18px rgba(20, 15, 8, 0.18));
  animation: lb-wi-cloud-drift 6s ease-in-out infinite;
  will-change: transform;
}
.lb-wi-dialog__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lb-wi-dialog__content {
  position: absolute;
  inset: 14% 12% 10%;     /* padding ratio à l'intérieur de l'ovale principal */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.lb-wi-dialog__text {
  margin: 0 0 14px 0;
  color: #2d2820;            /* gris-anthracite foncé pour contraste */
  font-family: 'Georgia', 'Palatino Linotype', 'Book Antiqua', serif;
  font-size: 16px;
  line-height: 1.55;
}
.lb-wi-dialog__btn {
  display: inline-block;
  padding: 7px 20px;
  background: transparent;
  color: #4a3d28;
  border: 1.5px solid rgba(75, 60, 40, 0.32);
  border-radius: 20px;       /* arrondi pill cohérent avec le nuage */
  cursor: pointer;
  font-family: 'Georgia', serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.lb-wi-dialog__btn:hover  {
  background: rgba(75, 60, 40, 0.06);
  border-color: rgba(75, 60, 40, 0.55);
}
.lb-wi-dialog__btn:active { transform: scale(0.97); }

@keyframes lb-wi-cloud-drift {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-6px) translateX(2px); }
}

/* ============================================================
 *  Zones cliquables pavillons
 * ============================================================ */
.lb-wi-zones {
  position: absolute;
  inset: 0;
  /* v1.32.7 — z-index 80 pour que les LABELS des hit zones ressortent
     devant les mascottes (z 70) et compagnons (z 70). Conteneur reste
     pointer-events: none donc les sprites reçoivent toujours les clics —
     seules les .lb-wi-zone :hover capturent en is-interactive. */
  z-index: 80;
  pointer-events: none;
}
.lb-wi-zone {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  font: inherit;
}
.lb-welcome-illustrative.is-interactive .lb-wi-zone {
  opacity: 1;
  pointer-events: auto;
}
/* Hover : PLUS de bordure rectangulaire. Juste un halo doux extérieur
   (radial-gradient simulé via box-shadow flou) + cursor pointer. Le label
   sert d'affordance principale. */
.lb-wi-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;       /* halo arrondi, pas rectangulaire */
  box-shadow: 0 0 0 0 rgba(255, 245, 200, 0);
  transition: box-shadow 0.4s ease;
  pointer-events: none;
}
.lb-wi-zone:hover::after,
.lb-wi-zone:focus-visible::after,
.lb-wi-zone:active::after {
  /* v1.49.4 — Pattern unifié : halo doré au lieu de blanc soft */
  /* v1.74.5 — Glow uniquement AU SURVOL (pas de halo permanent). */
  /* v1.74.14 — MÊME effet sur mobile/tablette : on ajoute :active (le tactile
     n'a pas de :hover) → la lueur dorée ovale identique au desktop apparaît au
     toucher, sur TOUS les écrans (consigne Johanne). */
  box-shadow: 0 0 80px 20px rgba(255, 215, 100, 0.45);
}
.lb-wi-zone-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 12, 4, 0.88);
  color: #fff5d0;
  padding: 7px 14px;
  border-radius: 6px;
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  /* v1.32.7 — delay 300ms sur le hide pour stabiliser le label : si la souris
     glisse hors de la zone (le label dépasse au-dessus de la zone, geste de
     pointage naturel), le label reste lisible le temps de cliquer. La
     règle :hover ci-dessous redéfinit le shorthand transition complet
     (au lieu de juste transition-delay) pour éviter une incohérence Chrome
     où l'override delay restait actif après unhover. */
  transition: opacity 0.25s ease 0.3s;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.lb-wi-zone:hover .lb-wi-zone-label,
.lb-wi-zone:focus-visible .lb-wi-zone-label {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* v1.32.7 — flip du label sous la zone quand celle-ci est trop proche du
   haut de l'écran (pas assez de place pour afficher un label de ~35px au-
   dessus). Tagué dynamiquement par WelcomeIllustrative.js après le calcul
   de la stage rect. Concrètement : Sanctuaire (y=8% du stage) flippe en
   bas de sa zone car son label aurait été à 15px du viewport top, donc
   visuellement détaché de la zone. */
.lb-wi-zone[data-label-pos="bottom"] .lb-wi-zone-label {
  bottom: auto;
  top: calc(100% + 8px);
}

/* ============================================================
 *  Mobile : ajustements lisibilité
 * ============================================================ */
@media (max-width: 720px) {
  .lb-wi-dialog__bubble { font-size: 15px; padding: 18px 20px 16px; }
  .lb-wi-mascot { /* sprites plus visibles vu écran restreint */ }
  .lb-wi-zone-label { font-size: 12px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-wi-panorama { animation: none; transform: scale(1.04); }
  .lb-wi-mascot img,
  .mascot-tiko,
  .lb-wi-dialog__cloud,
  .lb-wi-water--cascade,
  .lb-wi-water--basin,
  .lb-wi-water--mist { animation: none !important; }
}

/* ====================================================================
 *  v1.48.15 — Mode édition admin DnD zones pavillons (?pavillon_edit=1)
 *
 *  Activé via .lb-wi-zones.is-edit-mode. Affiche dashed border + 8
 *  handles ronds bleus + label central par zone + badge statut.
 * ==================================================================== */
.lb-wi-zones.is-edit-mode .lb-wi-zone {
  outline: 2px dashed rgba(80, 180, 220, 0.85);
  outline-offset: 0;
  background: rgba(80, 180, 220, 0.10);
  cursor: move;
}
.lb-wi-zones.is-edit-mode .lb-wi-zone:hover {
  outline-color: rgba(255, 220, 100, 0.95);
  background: rgba(80, 180, 220, 0.14);
}
.lb-wi-zone__edit-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  color: rgba(20, 50, 70, 0.85);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  display: none;
}
.lb-wi-zones.is-edit-mode .lb-wi-zone__edit-label { display: block; }

.lb-wi-zone__handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #50B4DC;
  border: 2px solid #FFF;
  border-radius: 50%;
  display: none;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.lb-wi-zones.is-edit-mode .lb-wi-zone__handle { display: block; }
.lb-wi-zone__handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.lb-wi-zone__handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.lb-wi-zone__handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.lb-wi-zone__handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.lb-wi-zone__handle--n  { top: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.lb-wi-zone__handle--s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.lb-wi-zone__handle--w  { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
.lb-wi-zone__handle--e  { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }

.lb-pavillon-zones-status {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9000;
  background: rgba(20, 50, 70, 0.92);
  color: #F4DCAE;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.lb-pavillon-zones-status__icon { font-size: 1.1em; line-height: 1; }
.lb-pavillon-zones-status.is-saving { background: rgba(120, 100, 30, 0.92); }
.lb-pavillon-zones-status.is-saved  { background: rgba(60, 100, 50, 0.92); }
.lb-pavillon-zones-status.is-error  { background: rgba(140, 40, 40, 0.92); }

/* ====================================================================
 *  v1.45.0 — VERROU PUBLIC : la vallée immersive reste visible pour
 *  tout visiteur, MAIS aucun lien n'est cliquable. Seul un admin
 *  connecté (capability manage_options) voit le site interactif.
 *  Classe body.lb-public-locked posée par templates/page-univers.php
 *  (cf. $lb_public_locked) + filtre body_class pour les autres pages.
 * ==================================================================== */
body.lb-public-locked .lb-wi-zone,
body.lb-public-locked #lb-univers-start,
body.lb-public-locked .lb-univers__pionnier,
body.lb-public-locked .lb-univers__pionnier a,
body.lb-public-locked .lb-univers__pionnier button,
body.lb-public-locked #tiko-entry,
body.lb-public-locked #tiko-idle,
body.lb-public-locked .mascot-tiko {
  pointer-events: none !important;
  cursor: default !important;
}

/* TIKO bulle chat : complètement cachée pour le public — déconnecter
   tout l'UI conversationnel (input, mic, send) en plus du pointer-events. */
body.lb-public-locked .lb-wi-tiko-bubble {
  display: none !important;
}

/* CTA Pionniers : on cache aussi le bandeau (lien externe potentiel) pour
   ne pas tenter le visiteur. Admin connecté = bandeau visible. */
body.lb-public-locked .lb-univers__pionnier {
  display: none !important;
}

/* Petit verrou visuel : label hint discret pour signaler aux admins en
   navigation incognito (ou logged out) que les liens sont bloqués.
   Affiché UNIQUEMENT côté admin ?lock=preview pour debug, sinon caché. */
body.lb-public-locked .lb-wi-zone {
  /* curseur "default" déjà appliqué — pas de hover hint clickable */
  filter: none;
}
body.lb-public-locked .lb-wi-zone:hover .lb-wi-zone-label {
  /* Pas d'effet hover (sinon ça suggère un lien cliquable) */
  transform: none !important;
  opacity: inherit !important;
}

/* ====================================================================
 *  v1.59 — ACCUEIL MOBILE (portrait / petit écran)
 *
 *  Activé par <html class="lb-mobile-home"> (posé par welcome-entry.js au
 *  chargement quand viewport ≤ 768px). La vidéo de la vallée passe en
 *  plein écran (fit 'cover', aucune bande noire) et la navigation se fait
 *  par un MENU de cartes pavillons par-dessus, dans l'esprit bois du site.
 *  Les zones/mascottes/bulle de la scène (calibrées pour le paysage
 *  complet) sont masquées car inutilisables sur écran recadré.
 *  Desktop : rien de tout ça ne s'applique (pas de classe lb-mobile-home).
 * ==================================================================== */
.lb-mobile-menu { display: none; }

/* v1.69 — Accueil = MONDE explorable (pan+zoom). On AFFICHE désormais
   mascottes / zones / eaux / ciel sur mobile (avant masqués). Seul le dialog
   desktop (survol) reste masqué (tactile = pas de survol). */
html.lb-mobile-home .lb-wi-dialog {
  display: none !important;
}
/* Le stage devient le MONDE à TAILLE RÉELLE desktop (1440×810). On neutralise
   les inline px posés par applyStageRect (alignement WebGL) via !important. */
html.lb-mobile-home .lb-wi-stage {
  position: relative !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  width: 1440px !important;
  height: 810px !important;
  transform-origin: 0 0;
  will-change: transform;
}
/* Fond WebGL plein écran neutralisé sur mobile (remplacé par le video DOM
   DANS le stage, qui se déplace avec les mascottes). opacity:0 plutôt que
   display:none pour ne pas casser le contexte VideoBackground. */
html.lb-mobile-home #lb-univers-canvas { opacity: 0 !important; }
html.lb-mobile-home .lb-wi-panorama { display: none !important; }
/* Fond vidéo DOM du stage — mobile uniquement (desktop : caché). */
.lb-wi-mobile-bg { display: none; }
html.lb-mobile-home .lb-wi-mobile-bg {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* v1.74.14 — La lueur des pavillons est désormais gérée UNIFORMÉMENT par les
   règles de base (:hover / :focus-visible / :active, mêmes valeurs partout).
   On NE met plus d'override mobile : ainsi mobile + tablette ont EXACTEMENT
   l'effet desktop (lueur dorée ovale au toucher), sans halo permanent.
   On garde seulement le masquage du libellé plaqué sur l'accueil mobile. */
html.lb-mobile-home .lb-wi-zone-label { display: none !important; }
/* TIKO + sa bulle restent VISIBLES sur l'accueil mobile (consigne Johanne). */

/* La scène (panorama/vidéo) reste visible en fond plein écran. */
html.lb-mobile-home .lb-welcome-illustrative { opacity: 1; }

html.lb-mobile-home .lb-mobile-menu {
  /* v1.69 — Accueil devenu MONDE explorable : on masque le menu cartes. */
  display: none !important;
  flex-direction: column;
  position: fixed;
  /* Occupe la zone AU-DESSUS du bandeau Pionniers (qui reste visible/tappable
     en dessous). Scroll interne si besoin — jamais de chevauchement. */
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 46px);
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 58px) 14px 20px;
  /* Voile doux pour la lisibilité des cartes sur la vidéo. */
  background: linear-gradient(180deg,
    rgba(20, 12, 4, 0.28) 0%,
    rgba(20, 12, 4, 0.50) 45%,
    rgba(20, 12, 4, 0.62) 100%);
}

.lb-mobile-menu__title {
  margin: 0 0 16px;
  text-align: center;
  font-family: Cinzel, Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 5.5vw, 1.6rem);
  color: #f4dcae;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.lb-mobile-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.lb-mobile-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 11px;
  border-radius: 15px;
  text-decoration: none;
  color: #f8ecd0;
  /* Carte bois (dégradé brun + liseré doré embossé). */
  background: linear-gradient(160deg, rgba(122, 84, 47, 0.94), rgba(83, 54, 27, 0.96));
  border: 2px solid rgba(244, 220, 174, 0.42);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 235, 190, 0.20);
  transition: transform 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.lb-mobile-menu__item:active {
  transform: scale(0.97);
  filter: brightness(1.10);
}

.lb-mobile-menu__thumb {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(244, 220, 174, 0.6);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  background: #2a1c0e;
}
.lb-mobile-menu__thumb--none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
}

.lb-mobile-menu__name {
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.16;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Carte pleine largeur (Refuges à soutenir) en bas de la grille. */
.lb-mobile-menu__item--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
}
.lb-mobile-menu__item--wide .lb-mobile-menu__thumb {
  width: 46px;
  height: 46px;
  border-width: 2px;
}
.lb-mobile-menu__item--wide .lb-mobile-menu__name {
  -webkit-line-clamp: 1;
  font-size: 1rem;
}
.lb-mobile-menu__item--refuge {
  background: linear-gradient(160deg, rgba(47, 107, 58, 0.94), rgba(30, 72, 38, 0.96));
  border-color: rgba(180, 224, 180, 0.5);
}
.lb-mobile-menu__item--refuge .lb-mobile-menu__thumb {
  background: transparent;
  border-color: rgba(180, 224, 180, 0.55);
}

/* Le bandeau Pionniers reste tappable AU-DESSUS du menu. */
html.lb-mobile-home .lb-univers__pionnier { z-index: 50; }