/* === livebook.mobile.css — v13 (corrigé 2025-11) ==========================
   Smartphone-only layout
   Portrait  = panneau de contrôle plein écran
   Landscape = partoche plein écran
   Utilise body.mobile-portrait / body.mobile-landscape
==============================================================================*/

/* Version du CSS pour le diagnostic JS */
:root { --lb-mobile-css-version: "13"; }

/* ---------------------------------------------------------------------------
   BASE smartphone — neutralise marges générales
--------------------------------------------------------------------------- */
body.mobile-portrait,
body.mobile-landscape {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  box-sizing: border-box;
  overflow: hidden; /* pas de scroll sur le body */
}

/* ============================================================================
   MODE PORTRAIT — panneau de contrôle plein écran
============================================================================ */
body.mobile-portrait .systeme_onglets {
  position: fixed; inset: 0; margin: 0; padding: 6px;
  box-sizing: border-box; background: #e8f0d8;
  display: flex; flex-direction: column; z-index: 20;
}
body.mobile-portrait .systeme_onglets > h2 { flex: 0 0 auto; margin: 0 0 8px 0; font-size: 16px; }
body.mobile-portrait .systeme_onglets > .onglets { flex: 0 0 auto; margin-bottom: 6px; }
body.mobile-portrait .systeme_onglets > .contenu_onglets { flex: 1 1 auto; overflow: auto; }
/* Partoche cachée en portrait */
body.mobile-portrait #bordure { display: none !important; }

/* ============================================================================
   MODE PAYSAGE — partoche plein écran
============================================================================ */
body.mobile-landscape { overflow: hidden !important; }
/* Panneau d'onglets masqué en paysage (sans cacher la partoche) */
body.mobile-landscape .systeme_onglets { display: block !important; }
body.mobile-landscape .contenu_onglets,
body.mobile-landscape .systeme_onglets > h2 {
  display: none !important;
}
body.mobile-landscape #lb-rail,
body.mobile-landscape .lb-rail {
  display: none !important;
}

/* Mobile: garantir la navigation cliquable quand la liste Load est ouverte */
body.mobile-landscape.nav-open #navigateur,
body.mobile-landscape.nav-open #contener {
  pointer-events: auto !important;
  z-index: 2147483646 !important;
}
body.mobile-landscape.nav-open #navigateur {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
body.mobile-landscape.nav-open #contener {
  max-height: none !important;
  height: 100vh !important;
  overflow: auto !important;
}

/* Mobile paysage: décale les boutons du bandeau à droite (zone gesture/nav) */
body.mobile-landscape #bandeau #gauche {
  padding-left: calc(24px + env(safe-area-inset-left, 0px)) !important;
}

/* Mobile paysage: éviter la zone système en haut */
body.mobile-landscape #bandeau {
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: calc(var(--bandeau-h,56px) + env(safe-area-inset-top, 0px)) !important;
}

/* Conteneur global & grille neutralisée */
body.mobile-landscape #bordure,
body.mobile-landscape #partitionE {
  position: fixed; inset: 0;
  width: 100vw !important; max-width: 100vw !important;
  height: 100dvh !important; max-height: 100dvh !important;
  margin: 0 !important; padding: 0 !important;
  box-sizing: border-box; overflow: hidden;
  background: transparent !important; /* évite les bandes claires */
}
body.mobile-landscape #partitionE{
  /* ⚠️ sort du mode grid pour supprimer toute "première ligne" fantôme */
  display: block !important;
  grid-template-rows: none !important;
  grid-auto-rows: initial !important;
  gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important;
  position: relative !important;
}
/* 🔒 Élimine tout “spacer” éventuel entre bandeau et partoche-wrapper */
body.mobile-landscape #partitionE > * {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
body.mobile-landscape #partitionE::before,
body.mobile-landscape #partitionE::after { content: none !important; display: none !important; }
body.mobile-landscape #partitionE > :not(#bandeau):not(#partoche-wrapper){
  /* s'il existe un conteneur intermédiaire historique, on le désactive */
  display: none !important;
}

/* Bandeau plat et au-dessus */
body.mobile-landscape #bandeau,
body.mobile-landscape #bandeau::before,
body.mobile-landscape #bandeau::after {
  all: unset !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--bandeau-h,56px) !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  background: #0a0e18 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  z-index: 30 !important;
}

/* Fenêtre utile = tout l'écran, l'espace du bandeau est géré par padding-top */
body.mobile-landscape #partoche-wrapper{
  position: absolute !important;
  top: 0 !important; left: 0; right: 0; bottom: 0;
  padding-top: var(--bandeau-h,56px) !important; /* colle sous bandeau, sans "jour" */
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: transparent !important;
  z-index: 20 !important;
  touch-action: none;
  overscroll-behavior: none;
}

/* PARTOCHE = occupe 100% de la fenêtre utile (zéro ascenseurs) */
body.mobile-landscape #partoche{
  width: 100% !important; max-width: 100% !important;
  height: 100% !important; margin: 0 !important; padding: 0 8px 0 8px;
  box-sizing: border-box; overflow: clip !important; /* 🚫 aucun ascenseur */
  background: #0a0e18 !important;
  touch-action: none;
  overscroll-behavior: none;
}
/* Uniformise le fond sur toutes les colonnes/éléments internes */
body.mobile-landscape #partoche * { background: #0a0e18 !important; }

/* Tables : aucun écart intrinsèque */
body.mobile-landscape #partoche table{
  margin-top: 0 !important;
  border-collapse: collapse !important; border-spacing: 0 !important; border: 0 !important;
}
body.mobile-landscape #partoche tr,
body.mobile-landscape #partoche td,
body.mobile-landscape #partoche th { border: 0 !important; }

/* Premier enfant : démarre au pixel 0 */
body.mobile-landscape #partoche > *:first-child{
  margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important;
}
/* === Mobile paysage : ignorer complètement la colonne du rail ============ */
body.mobile-landscape .lb-rail { display: none !important; }

/* Annule tout décalage laissé par le rail */
body.mobile-landscape #bordure,
body.mobile-landscape #partitionE {
  margin-left: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
}

/* Par sécurité, aucune translation résiduelle */
body.mobile-landscape #bordure,
body.mobile-landscape #partitionE,
body.mobile-landscape #partoche-wrapper,
body.mobile-landscape #partoche {
  transform: none !important;
}
/* === PORTRAIT — rail visible en overlay + auto-hide ======================= */

/* Le rail reste visible en portrait, posé au-dessus du panneau (overlay) */
body.mobile-portrait .lb-rail{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--lb-rail-w, 78px) !important;
  z-index: 100 !important;                 /* au-dessus du panneau */
  transition: transform .25s ease, opacity .25s ease;
}

/* Poignée (zone de réactivation) quand le rail est caché */
body.mobile-portrait .lb-rail-handle{
  position: fixed !important;
  top: 0; left: 0;
  width: 12px; height: 100dvh;
  z-index: 90;                              /* sous le rail mais au-dessus du panneau */
  background: transparent;
  touch-action: pan-y;
}

/* Auto-hide : rail légèrement sorti de l’écran */
body.mobile-portrait.rail-hidden .lb-rail{
  transform: translateX(calc(-100% + 12px)) !important; /* laisse juste la poignée */
  opacity: .98;
}

/* Le panneau onglets reste plein écran, scroll uniquement à l’intérieur */
body.mobile-portrait .systeme_onglets{
  position: fixed; inset: 0; overflow: hidden;
}
body.mobile-portrait .systeme_onglets > .contenu_onglets{
  overflow: auto;              /* seul endroit autorisé à scroller */
  -webkit-overflow-scrolling: touch;
}

/* Sécurité : aucune marge poussée par le rail en portrait */
body.mobile-portrait .systeme_onglets,
body.mobile-portrait #bordure{ margin-left: 0 !important; }

/* Option esthétique : petite ombre quand le rail est visible */
body.mobile-portrait .lb-rail{ box-shadow: 4px 0 16px rgba(0,0,0,.25); }
body.mobile-portrait.rail-hidden .lb-rail{ box-shadow: none; }
/* === PORTRAIT — ONGlets plein écran, zéro scroll global =================== */
body.mobile-portrait {
  overflow: hidden !important;                 /* pas d'ascenseur sur la page */
}
body.mobile-portrait .systeme_onglets{
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;                       /* colle aux bords */
  box-shadow: none !important;
  border-radius: 0 !important;
  background: #0a0e18 !important;              /* même fond que partoche */
  display: grid !important;
  grid-template-rows: auto 1fr;                /* rack onglets + contenu */
  overflow: hidden !important;                 /* zéro scroll global */
}
body.mobile-portrait .systeme_onglets > .onglets{
  padding: 10px 14px 8px 14px;
  overflow: hidden !important;                 /* pas de scroll ici non plus */
}
body.mobile-portrait .systeme_onglets > .contenu_onglets{
  overflow: hidden !important;                 /* plein écran sans ascenseur */
  padding: 12px 14px 18px 14px;
}

/* Afficher TOUTES les tabs (certains thèmes en masquent) */
body.mobile-portrait .systeme_onglets .onglets,
body.mobile-portrait .systeme_onglets .onglets > *{
  display: flex !important;
}

/* === PORTRAIT — RAIL en overlay, complet, sans pousser la mise en page ==== */
body.mobile-portrait .lb-rail{
  position: fixed !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  width: var(--lb-rail-w,78px) !important;
  z-index: 200 !important;                     /* au-dessus des onglets */
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 12px 8px !important;
  overflow: visible !important;                /* ne pas clipper les icônes */
  box-shadow: 4px 0 16px rgba(0,0,0,.25);
}

/* Quand auto-hide actif, on laisse une poignée de 12px */
body.mobile-portrait.rail-hidden .lb-rail{
  transform: translateX(calc(-100% + 12px)) !important;
  box-shadow: none !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.mobile-portrait .lb-rail-handle{
  position: fixed !important;
  top: 0; left: 0; width: 12px; height: 100dvh;
  z-index: 150; background: transparent; touch-action: pan-y;
}

/* Sécurité : le rail n’affecte pas la grille des onglets */
body.mobile-portrait .systeme_onglets,
body.mobile-portrait #bordure{ margin-left: 0 !important; }
body.mobile-portrait #partitionE{ display:none !important; } /* cache la partoche en portrait */

/* Icônes du rail toujours visibles (aucun masquage thème) */
body.mobile-portrait .lb-rail .rail-btn{ display:flex !important; opacity:1 !important; }
/* === SPLASH plein écran (overlay léger) ================================ */
#lb-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
}
#lb-splash .card{
  background: #0a0e18; color: #f2f6ff; border-radius: 16px;
  padding: 18px 20px; min-width: 260px; max-width: 80vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
#lb-splash .card h3{ margin:0 0 8px 0; font-size:18px; }
#lb-splash .card p{ margin:0 0 14px 0; opacity:.85; }
#lb-splash .actions{ display:flex; gap:10px; justify-content:center; }
#lb-splash button{
  padding:10px 16px; border-radius:12px; border:0; cursor:pointer;
}
#lb-splash .start{ background:#63c6ff; color:#00131f; font-weight:700; }
#lb-splash .skip{ background:#223048; color:#cfe6ff; }

/* === PAYSAGE : bandeau auto-hide + poignée haute ======================= */
/* poignée cliquable en haut (8–12px) */
body.mobile-landscape .bandeau-handle {
  position: fixed; left: 0; top: 0; right: 0; height: 12px;
  z-index: 35; background: transparent; touch-action: pan-x pan-y;
}

/* bandeau visible (état par défaut) */
body.mobile-landscape #bandeau {
  transition: transform .25s ease, opacity .25s ease;
  transform: translateY(0);
  opacity: 1;
}
/* bandeau masqué : sort au-dessus de l’écran */
/* la zone utile reste à 100% ; on ne bouge pas partoche-wrapper */
/* Durcir le hide du bandeau en paysage (priorité max) */
body.mobile-landscape.bandeau-hidden #bandeau {
  transform: translateY(-120%) !important; /* sort totalement de l'écran */
  opacity: .999 !important;
}

/* Mini pill debug */
#lb-debug-pill{
  position: fixed; right: 10px; top: 10px; z-index: 99999;
  background: rgba(10,14,24,.85); color:#cfe3ff; border-radius: 999px;
  padding: 6px 10px; font: 600 12px/1 system-ui; display:none; gap:6px;
}
#lb-debug-pill button{
  border:0; padding:4px 8px; border-radius:10px; cursor:pointer;
  background:#63c6ff; color:#002033; font-weight:700;
}
/* === MODAL LOCK : modale au-dessus, partoche en-dessous =================== */
body.modal-lock #lb-rail,
body.modal-lock .lb-rail {
  z-index: 10040 !important;
  position: fixed !important; /* rail reste au-dessus pendant la recherche */
}

body.modal-lock #loadBox,
body.modal-lock #lb-load,
body.modal-lock #lb-load-wrapper {
  z-index: 10050 !important;     /* modale tout en haut */
  position: fixed !important;     /* évite les effets de scroll/raccourci clavier */
  top: 0; left: 0; right: 0;      /* plein écran si ta modale est centrée */
  /* laisse bottom auto si ta modale a sa propre hauteur */
}

body.modal-lock #partoche,
body.modal-lock #partitionE,
body.modal-lock #partoche-wrapper {
  z-index: 1 !important;          /* sous la modale/rail */
  transform: none !important;     /* annule les transforms qui créent une pile z */
}

/* Évite les clics fantômes sur la partoche quand la modale est ouverte */
body.modal-lock #partoche,
body.modal-lock #partitionE {
  pointer-events: none !important;
}

/* Smartphone (lb-phone) : bandeau en overlay => aucune hauteur réservée */
body.lb-phone { --lb-bandeau-pad: 0px; }

/* Sections : smartphone -> texte normal centré en MAJ */
.lb-section-plain{
  text-align: center;
  text-transform: uppercase;
  font-weight:700;
  font-size:var(--sys-font-size);
  line-height:1.1;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 4px 0;
}

/* ============================================================================
   TABLET LANDSCAPE — onglets scrollables (téléphone en mode paysage)
============================================================================ */
@media (orientation: landscape) {
  body.lb-phone #partitionE{
    height: var(--lb-phone-vh, 100dvh) !important;
    min-height: var(--lb-phone-vh, 100dvh) !important;
    max-height: var(--lb-phone-vh, 100dvh) !important;
  }
  /* Smartphone paysage : bandeau auto-hide + overlay (aucun décalage) */
  body.lb-phone #partoche-wrapper{
    padding-top: 0 !important;
    height: calc(var(--lb-phone-vh, 100dvh) - var(--lb-bandeau-pad, 0px)) !important;
    min-height: calc(var(--lb-phone-vh, 100dvh) - var(--lb-bandeau-pad, 0px)) !important;
    max-height: calc(var(--lb-phone-vh, 100dvh) - var(--lb-bandeau-pad, 0px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--lb-phone-vv-bottom-gap, 0px)) !important;
  }
  body.lb-phone #bandeau{
    transition: transform .25s ease, opacity .25s ease;
  }
  body.lb-phone.bandeau-hidden #bandeau{
    transform: translateY(calc(-1 * var(--bandeau-h,56px))) !important;
    opacity: .999 !important;
  }
  body.lb-tablet .contenu_onglet{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Force l'espace éditeur à gauche en paysage (évite un bordure plein écran inline) */
  body.lb-tablet.editor-open #bordure{
    inset: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 530px !important;
    right: 0 !important;
    width: auto !important;
  }
  body.lb-tablet.editor-open #partitionE{
    position: relative !important;
    inset: auto !important;
  }
}

/* ============================================================================
   TABLET PORTRAIT OVERRIDE — partoche plein ecran, pas de panneaux
   (evite le "vide" si mobile-portrait est actif sur tablette)
============================================================================ */
@media (orientation: portrait) {
  body.lb-tablet:not(.lb-phone) #boutonepingle { display: none !important; }
  body.lb-tablet #boutondetachpartoche,
  body.lb-phone #boutondetachpartoche { display: none !important; }
  body.lb-portrait-tablet-compact #boutonepingle {
    display: none !important;
  }
  body.lb-portrait-tablet-compact #bandeau #gauche {
    gap: 4px !important;
  }
  body.lb-portrait-tablet-compact #bandeau #gauche .monbouton,
  body.lb-portrait-tablet-compact #bandeau #gauche .bouton,
  body.lb-portrait-tablet-compact #bandeau #gauche input[type="button"] {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }
  body.lb-portrait-tablet-compact #bandeau #lbRefreshBtn,
  body.lb-portrait-tablet-compact #bandeau #bouton1,
  body.lb-portrait-tablet-compact #bandeau #bouton4,
  body.lb-portrait-tablet-compact #bandeau #boutondetachpartoche,
  body.lb-portrait-tablet-compact #bandeau #bouton6,
  body.lb-portrait-tablet-compact #bandeau #lbExitBtn {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }
  body.lb-tablet:not(.lb-phone) #bandeau {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--bandeau-h,56px) + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
    transition: transform .25s ease, opacity .25s ease;
    transform: translateY(0);
    opacity: 1;
  }
  body.lb-tablet:not(.lb-phone) .bandeau-handle {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 12px;
    z-index: 35;
    background: transparent;
    touch-action: pan-x pan-y;
  }
  body.lb-tablet:not(.lb-phone).bandeau-hidden #bandeau {
    transform: translateY(calc(-1 * (var(--bandeau-h,56px) + env(safe-area-inset-top, 0px))));
    opacity: .999;
  }
  body.lb-tablet:not(.lb-phone) #gauche {
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    align-items: center;
  }
  body.lb-tablet:not(.lb-phone) #gauche #titre {
    margin-left: 6px;
    text-align: left;
    font-size: 0.95em;
    white-space: normal;
    line-height: 1.05;
    max-height: calc(var(--bandeau-h,56px) - 8px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #titre.is-overflow {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.lb-tablet:not(.lb-phone) .systeme_onglets { display: block !important; }
  body.lb-tablet:not(.lb-phone) .systeme_onglets > h2,
  body.lb-tablet:not(.lb-phone) .systeme_onglets > .onglets,
  body.lb-tablet:not(.lb-phone) .systeme_onglets > .contenu_onglets { display: none !important; }
  body.lb-tablet:not(.lb-phone) .lb-rail,
  body.lb-tablet:not(.lb-phone) .lb-rail-handle { display: none !important; }
  body.lb-tablet:not(.lb-phone) #bordure { display: flex !important; }
  body.lb-tablet:not(.lb-phone) #partitionE { display: block !important; }
  body.lb-tablet:not(.lb-phone) #partoche-wrapper {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
  }
}

/* ============================================================================
   SMARTPHONE : bandeau caché = hors flux (aucune hauteur réservée)
   - Ne touche pas tablette/desktop
============================================================================ */
body.lb-phone #partitionE{
  /* Si un thème force une grille à 2 lignes (bandeau + contenu),
     on remplace la hauteur de ligne par la valeur conditionnelle. */
  grid-template-rows: var(--lb-bandeau-pad, var(--bandeau-h,56px)) minmax(0,1fr) !important;
}
body.lb-phone #bandeau{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 11050 !important; /* au-dessus du rail (10000+) */
  box-sizing: border-box !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: calc(var(--bandeau-h,56px) + env(safe-area-inset-top, 0px)) !important;
}
@media (orientation: portrait) {
  /* Android smartphone: bandeau compact pour ne pas manger la hauteur utile */
  body.lb-phone.lb-android #bandeau{
    padding-top: 0 !important;
    height: var(--bandeau-h,56px) !important;
  }
  body.lb-phone.lb-android #bandeau,
  body.lb-phone.lb-android #bandeau *{
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  body.lb-phone.lb-android #bandeau #gauche{
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 1 40% !important;
    min-width: 0 !important;
    max-width: 40% !important;
    overflow: hidden !important;
  }
  body.lb-phone.lb-android #bandeau #titre{
    flex: 1 1 auto !important;
    min-width: 36px !important;
    max-width: 100% !important;
    line-height: 1.05 !important;
    max-height: calc(var(--bandeau-h,56px) - 2px) !important;
    overflow: hidden !important;
    align-self: center !important;
  }
  body.lb-phone.lb-android .bandeau-handle{
    height: 18px;
  }
  body.lb-phone.lb-android #bandeau #gauche .monbouton,
  body.lb-phone.lb-android #bandeau #gauche .bouton,
  body.lb-phone.lb-android #bandeau #gauche input[type="button"]{
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }
  body.lb-phone.lb-android #bandeau #droite{
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    min-width: 84px !important;
    max-width: 44% !important;
    height: 32px !important;
    max-height: 32px !important;
    overflow: hidden !important;
  }
  body.lb-phone.lb-android #bandeau #bbLive{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    min-width: 72px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  body.lb-phone.lb-android #bandeau #bbLive .bb-btn{
    min-width: 22px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 !important;
  }
  body.lb-phone.lb-android #bandeau #bbLive .bb-label{
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  body.lb-phone.lb-android #bandeau #bbLive .bb-pattern{
    margin-left: 2px !important;
    min-width: 18px !important;
    max-width: 44px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }
}
/* Smartphone: bandeau compact (portrait + paysage) */
body.lb-phone{
  --bandeau-h: 48px;
}
body.lb-phone #bandeau{
  padding-top: 0 !important;
  height: var(--bandeau-h,48px) !important;
}
body.lb-phone:not(.bandeau-hidden) .bandeau-handle{
  height: 14px;
}
@media (orientation: portrait) {
  body.lb-phone #bandeau #boutonepingle{
    display: none !important;
  }
}
body.lb-phone #bandeau #gauche .monbouton,
body.lb-phone #bandeau #gauche .bouton,
body.lb-phone #bandeau #gauche input[type="button"]{
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  font-size: 11px !important;
}
body.lb-phone #bandeau #lbRefreshBtn,
body.lb-phone #bandeau #bouton1,
body.lb-phone #bandeau #bouton4,
body.lb-phone #bandeau #boutondetachpartoche,
body.lb-phone #bandeau #bouton6,
body.lb-phone #bandeau #lbExitBtn{
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 !important;
  text-align: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}
body.lb-phone #bandeau #droite{
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 28px !important;
  max-height: 28px !important;
  overflow: hidden !important;
}
body.lb-phone #bandeau #bbLive{
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
body.lb-phone #bandeau #bbLive .bb-btn{
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 !important;
}
body.lb-phone #bandeau #bbLive .bb-label{
  font-size: 11px !important;
  line-height: 1 !important;
}
body.lb-phone #bandeau #bbLive .bb-pattern{
  max-width: 36px !important;
  font-size: 10px !important;
}
body.lb-phone #lb-bandeau-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 11050 !important; /* pile racine au-dessus du rail */
  pointer-events: none !important;
}
body.lb-phone #lb-bandeau-overlay #bandeau{
  pointer-events: auto !important;
}
body.lb-phone .bandeau-handle{
  position: fixed;
  left: auto;
  right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  width: 30px;
  height: 30px;
  z-index: 11060;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  touch-action: manipulation;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(.92);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.lb-phone.bandeau-hidden .bandeau-handle{
  pointer-events: auto;
  opacity: .82;
  transform: translateY(0) scale(1);
  border-color: rgba(186, 222, 255, .24);
  background: rgba(10, 24, 42, .22);
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
}
body.lb-phone.bandeau-hidden .bandeau-handle::before{
  content: "⌄";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #d7ebff;
  font: 700 17px/1 system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0;
}
body.lb-phone.bandeau-hidden .bandeau-handle:active{
  background: rgba(10, 24, 42, .36);
  border-color: rgba(186, 222, 255, .34);
  transform: translateY(0) scale(.96);
}
body.lb-phone .lb-rail{
  z-index: 11000 !important; /* sous le bandeau */
}
body.lb-phone .lb-rail-handle{
  z-index: 10950 !important; /* sous le rail */
}
body.lb-phone #partoche-wrapper{
  padding-top: 0 !important;
}
body.lb-phone #lb-zoom-layer{
  transform-origin: 0 0;
  will-change: transform;
}
body.lb-phone.bandeau-hidden #bandeau{
  /* Bandeau retiré du flux => aucune zone morte */
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}