/* LUKSUS — gabarit social commun
   Ce fichier ne s’applique jamais à la Caisse (app.html/src/shell.html).
   Navigation flottante stable : la largeur ne dépend jamais du contenu chargé. */
*, *::before, *::after { box-sizing:border-box; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }
html { min-height:100%; }

:root {
  --luksus-nav-height: 68px;
  --luksus-nav-gap: 12px;
  --luksus-nav-width: min(94vw, 520px);
  /* La position visuelle reste constante pendant les changements de viewport PWA/Safari. */
  /* Valeur fixe : Safari peut recalculer env(safe-area-inset-bottom) pendant
     l’ouverture de la page, ce qui faisait monter puis redescendre la barre. */
  --luksus-nav-bottom: 10px;
  --luksus-content-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* Espace permanent : le contenu ne passe jamais sous la barre flottante. */
body.luksus-social {
  min-height:100svh;
  /* 29/09/2026 : dans l'application installée sur iPhone, 100svh vaut l'écran moins la zone de l'heure
     (mesuré : 873 au lieu de 932). Une page plus courte que l'écran y faisait remonter la barre du bas,
     puis redescendre quand le contenu arrivait. --lx-app-h (script en tête de page) donne la vraie
     hauteur ; sans elle (Safari, Android, ordinateur), rien ne change. */
  min-height:var(--lx-app-h, 100svh);
  padding-bottom:var(--luksus-content-bottom) !important;
}

body.luksus-social .top {
  min-height:50px;
  padding:calc(8px + env(safe-area-inset-top)) 18px 8px !important;
  position:sticky;
  top:0;
  z-index:110;
  background:var(--black);
  border-bottom:1px solid var(--border);
}

/* Barre flottante commune à Fil, Emploi, Espace Pro, Profil, Recherche et Messages. */
body.luksus-social .bottom-nav {
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:var(--luksus-nav-bottom) !important;
  width:var(--luksus-nav-width) !important;
  max-width:520px !important;
  height:var(--luksus-nav-height) !important;
  min-height:var(--luksus-nav-height) !important;
  z-index:300 !important;
  display:flex !important;
  align-items:stretch !important;
  transform:translateX(-50%) !important;
  padding:4px !important;
  gap:0 !important;
  overflow:hidden !important;
  /* 26/09/2026 (fluidité) : plus de flou d'arrière-plan. Sous un fond presque opaque il ne se
     voyait pas, mais il obligeait le téléphone à recalculer le flou à chaque image du défilement. */
  background:rgba(12,12,12,.96) !important;
  border:1px solid rgba(222,183,47,.72) !important;
  border-radius:999px !important;
  box-shadow:0 10px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}

/* 29/09/2026 (2) : quand la page a pris la vraie hauteur de l'écran (application installée sur iPhone),
   la barre est placée depuis le haut : même place (10 du bas), et juste même si l'iPhone annonce encore
   une hauteur visible trop petite. Sans ce correctif (Safari, Android, ordinateur), rien ne change. */
html.lx-app-fit body.luksus-social .bottom-nav {
  top:calc(var(--lx-app-h) - var(--luksus-nav-bottom) - var(--luksus-nav-height)) !important;
  bottom:auto !important;
}

/* Un panneau ouvert est une fenêtre prioritaire : il ne doit jamais passer sous la barre. */
body.luksus-feed .comment-scrim { z-index:400 !important; }
body.luksus-feed .comment-panel {
  z-index:401 !important;
  bottom:0 !important;
  max-height:70dvh;
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(18,18,18,.78) !important;
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 -14px 42px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06) inset;
}
body.luksus-feed.comments-open .bottom-nav { display:none !important; }
body.luksus-feed.comments-open .comment-scrim { background:rgba(0,0,0,.28); }

body.luksus-social .bottom-nav .bn-item {
  flex:1 1 0 !important;
  width:20% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  margin:0 !important;
  padding:5px 2px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  color:var(--muted) !important;
  text-decoration:none !important;
  border-radius:999px !important;
  transition:background-color .16s ease, color .16s ease, transform .12s ease !important;
  -webkit-tap-highlight-color:transparent;
}

body.luksus-social .bottom-nav .bn-item span {
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  font-size:.64rem;
  line-height:1.1;
}

body.luksus-social .bottom-nav .bn-item svg {
  display:block;
  flex:0 0 auto;
  width:22px;
  height:22px;
}

body.luksus-social .bottom-nav .bn-item.on,
body.luksus-social .bottom-nav .bn-item[aria-current="page"] {
  color:var(--gold) !important;
  background:rgba(222,183,47,.10) !important;
}

body.luksus-social .bottom-nav .bn-item:active {
  transform:scale(.94) !important;
}

/* Le bouton central reste toujours à la même place et ne change pas la largeur des autres items. */
body.luksus-social .bottom-nav .bn-plus {
  color:var(--gold) !important;
}
body.luksus-social .bottom-nav .bn-plus svg {
  width:34px;
  height:34px;
  padding:5px;
  border-radius:50%;
  background:var(--gold);
  color:#111;
  stroke-width:2.6;
}
body.luksus-social .bottom-nav .bn-plus span { display:none; }

/* Le Fil garde ses actions et sa légende au-dessus de la barre flottante. */
body.luksus-feed {
  height:100svh;
  min-height:100svh;
  /* 29/09/2026 : vraie hauteur de l'écran dans l'application (voir body.luksus-social) — plus de bande
     noire sous le Fil, barre à la même place que sur les autres onglets */
  height:var(--lx-app-h, 100svh);
  min-height:var(--lx-app-h, 100svh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-bottom:0 !important;
}
body.luksus-feed .shell { flex:1 1 auto; min-height:0; }
body.luksus-feed .main { min-height:0; }
body.luksus-feed .tabs { top:8px; }
body.luksus-feed .reel-wrap { min-height:0; padding-bottom:0; }
body.luksus-feed .reel-side { bottom:var(--luksus-content-bottom); }
body.luksus-feed .reel-overlay-bottom { bottom:var(--luksus-content-bottom); }
body.luksus-feed .comment-panel { bottom:0 !important; }
body.luksus-feed .comment-input-row { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
body.luksus-feed .reel-container { min-height:0; }
body.luksus-feed .reel { min-height:100%; }
body.luksus-feed .reel-loader,
body.luksus-feed .reel-end,
body.luksus-feed .reel-empty { min-height:100%; }

@media (max-width:1023px) {
  body.luksus-feed .reel-container { height:100%; }
}

@media (min-width:1024px) {
  :root {
    --luksus-nav-height:62px;
    --luksus-nav-width:min(520px, calc(100vw - 48px));
    --luksus-nav-bottom:18px;
    --luksus-content-bottom:96px;
  }
  body.luksus-social { padding-bottom:var(--luksus-content-bottom) !important; }
  body.luksus-social .bottom-nav .bn-item span { font-size:.70rem; }
}

@media (max-width:380px) {
  :root { --luksus-nav-height:64px; }
  body.luksus-social .bottom-nav { padding:3px !important; }
  body.luksus-social .bottom-nav .bn-item span { font-size:.58rem; }
  body.luksus-social .bottom-nav .bn-item svg { width:20px; height:20px; }
  body.luksus-social .bottom-nav .bn-plus svg { width:31px; height:31px; }
}