/* ==========================================================
   Correctif téléphone : zones sûres haut/bas Android/iPhone
   Objectif : éviter que l'application colle à l'heure/réseau en haut
   et que le menu bas entre en conflit avec la barre de navigation téléphone.
   Présentation uniquement : aucune logique PHP/SQL/FCM modifiée.
   ========================================================== */

@media screen and (max-width: 900px) {
  :root {
    --lcv-safe-top: calc(14px + env(safe-area-inset-top));
    --lcv-safe-bottom: calc(18px + env(safe-area-inset-bottom));
    --lcv-bottom-nav-height: 76px;
    --lcv-bottom-reserve-space: calc(122px + env(safe-area-inset-bottom));
  }

  html,
  body {
    min-height: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-top: 0 !important;
    padding-bottom: var(--lcv-bottom-reserve-space) !important;
    background: #eef3f8 !important;
  }

  .app-shell,
  body.sidebar-collapsed .app-shell {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .content,
  body.sidebar-collapsed .content,
  main,
  body[class^="page-"] .content,
  body[class*=" page-"] .content {
    padding-top: var(--lcv-safe-top) !important;
    padding-bottom: var(--lcv-bottom-reserve-space) !important;
    margin-top: 0 !important;
  }

  .modern-topbar,
  .topbar.modern-topbar,
  .topbar {
    position: sticky !important;
    top: calc(8px + env(safe-area-inset-top)) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    border-radius: 20px !important;
    z-index: 1040 !important;
  }

  /* Menu bas remonté au-dessus des boutons système Android */
  body nav.mobile-bottom-nav-facebook {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: var(--lcv-safe-bottom) !important;
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: var(--lcv-bottom-nav-height) !important;
    min-height: var(--lcv-bottom-nav-height) !important;
    max-height: var(--lcv-bottom-nav-height) !important;
    padding: 6px 6px 8px !important;
    border-radius: 22px !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .18) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body nav.mobile-bottom-nav-facebook > a.mobile-bottom-item {
    min-height: 58px !important;
    height: 58px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  body nav.mobile-bottom-nav-facebook .bottom-nav-badge,
  body nav.mobile-bottom-nav-facebook .badge {
    z-index: 3 !important;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --lcv-safe-top: calc(16px + env(safe-area-inset-top));
    --lcv-safe-bottom: calc(20px + env(safe-area-inset-bottom));
    --lcv-bottom-reserve-space: calc(128px + env(safe-area-inset-bottom));
  }

  .content,
  body.sidebar-collapsed .content,
  main,
  body[class^="page-"] .content,
  body[class*=" page-"] .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ==========================================================
   Ajustement demandé : respirer sous le bloc logo
   Objectif : éloigner tout le contenu mobile du carré parent du logo.
   Présentation uniquement : aucune logique PHP/SQL/FCM modifiée.
   ========================================================== */

@media screen and (max-width: 900px) {
  :root {
    --lcv-logo-content-gap: 24px;
  }

  .modern-topbar,
  .topbar.modern-topbar,
  .topbar {
    margin-bottom: var(--lcv-logo-content-gap) !important;
  }

  /* Le premier bloc de contenu ne doit plus coller au cadre logo. */
  .modern-topbar + *,
  .topbar.modern-topbar + *,
  .topbar + * {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --lcv-logo-content-gap: 28px;
  }
}

/* ==========================================================
   Correctif titres mobiles : éviter que les titres de page
   passent sous le carré parent du logo/en-tête.
   Présentation uniquement : aucune logique PHP/SQL/FCM modifiée.
   ========================================================== */
@media screen and (max-width: 900px) {
  main.content > h1,
  main.content > h2,
  main.content > h3,
  main.content > h4,
  main.content > p.text-muted,
  main.content > .card,
  main.content > .notifications-header,
  main.content > .menu-cards-france,
  main.content > .container,
  main.content > .container-fluid,
  .content > h1,
  .content > h2,
  .content > h3,
  .content > h4,
  .content > p.text-muted,
  .content > .card,
  .content > .notifications-header,
  .content > .menu-cards-france,
  .content > .container,
  .content > .container-fluid {
    position: relative !important;
    z-index: 1 !important;
  }

  main.content > h1:first-of-type,
  main.content > h2:first-of-type,
  main.content > h3:first-of-type,
  main.content > h4:first-of-type,
  .content > h1:first-of-type,
  .content > h2:first-of-type,
  .content > h3:first-of-type,
  .content > h4:first-of-type,
  main.content > .card:first-of-type,
  .content > .card:first-of-type,
  main.content > .notifications-header,
  .content > .notifications-header {
    margin-top: 22px !important;
  }

  /* Pages ciblées signalées : Planning général, Mes réservations, Notifications. */
  body.page-planning_general main.content > h3,
  body.page-planning_general .content > h3,
  body.page-my_reservations main.content > .card,
  body.page-my_reservations .content > .card,
  body.page-notifications main.content > .notifications-header,
  body.page-notifications .content > .notifications-header {
    margin-top: 30px !important;
  }
}

@media screen and (max-width: 480px) {
  body.page-planning_general main.content > h3,
  body.page-planning_general .content > h3,
  body.page-my_reservations main.content > .card,
  body.page-my_reservations .content > .card,
  body.page-notifications main.content > .notifications-header,
  body.page-notifications .content > .notifications-header {
    margin-top: 34px !important;
  }
}