/* ═══════════════════════════════════════════════
   RESPONSIVE — site public Lann'Obs
   ═══════════════════════════════════════════════ */

/* ── Icônes Font Awesome manquantes dans le bundle ── */
.fa-mobile:before,
.fa-mobile-phone:before { content: "\f10b"; }

/* ── Mobile (< 768px) ── */
@media (max-width: 767.98px) {

    /* Empêcher le scroll horizontal (évite que la barre fixe se décale) */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* Masquer la navbar Bootstrap desktop et la sidebar desktop */
    .navbar, .navbarlight  { display: none !important; }
    .menu, .accueil        { display: none; }

    /* Contenu pleine largeur */
    #wrapper,
    #wrapper-top           { margin-left: 0 !important; padding-top: 56px; }
    .margemenu             { margin-left: 0; }

    /* ── Barre mobile fixe ── */
    #mobile-topbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        padding: 0 12px;
        z-index: 1040;
    }
    .mobile-topbar-logo {
        height: 38px;
        width:  38px;
        object-fit: contain;
    }
    #mobile-topbar .btn { padding: 0 4px; line-height: 1; }

    /* ── Tiroir de navigation mobile ── */
    body.show-sidebar .menu {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px;
        overflow-y: auto;
        z-index: 1055;
    }

    /* Fond semi-transparent derrière le tiroir */
    body.show-sidebar::after {
        content: '';
        position: fixed;
        inset: 0 0 0 280px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1054;
    }

    /* ── Styles du contenu du tiroir ── */
    .mobile-drawer-header { border-bottom: 1px solid rgba(255,255,255,0.2); }
    .mobile-user-link     { font-size: .9rem; padding: 3px 0; }

    /* Liens de navigation : icône à gauche + texte à droite */
    body.show-sidebar #menu .side-menu .nav-link {
        display: flex !important;
        align-items: center;
        text-align: left !important;
        padding: 13px 16px !important;
        font-size: .95rem;
        text-transform: none;
    }
    body.show-sidebar #menu .side-menu .nav-link br   { display: none; }
    body.show-sidebar #menu .side-menu .nav-link > i  { min-width: 34px; text-align: center; margin-right: 10px; font-size: 1.2rem !important; }
    body.show-sidebar #menu .side-menu .nav-link span { display: inline !important; font-size: .95rem; }
    body.show-sidebar #menu .side-menu .nav-link .badge { margin-right: 4px; }

    /* Sous-menu Observatoires : déplié en dessous (pas de popup latéral) */
    body.show-sidebar #menu .menu-droit {
        position: static !important;
        width: 100% !important;
        border: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.15);
        left: auto !important;
    }
}

/* ── Cards stats accueil : taille de police adaptative ── */
@media (max-width: 767.98px) {
    .stats .display-4 {
        font-size: clamp(1.4rem, 9vw, 3.5rem) !important;
        white-space: nowrap;
    }
}

/* ── Pagination et flottants : centrés sur mobile ── */
@media (max-width: 575.98px) {
    #pagination  { float: none !important; text-align: center; }
    .lienidobs   { float: none !important; display: block; }
    .breadcrumb  { float: none !important; }

    /* Form-inline : autoriser le retour à la ligne pour éviter le débordement */
    .form-inline { flex-wrap: wrap; gap: 6px; }
    .form-inline .form-control { max-width: 140px; margin-left: 0 !important; }
    .form-inline label { margin-bottom: 0; }
    .form-inline .custom-control { margin-left: 0 !important; }
    #indice { margin-left: 0 !important; }

    /* Tableau des observations : masquer localisation (col 3) et observateur (col 4) */
    .tblobs td:nth-child(3),
    .tblobs td:nth-child(4) { display: none; }
}

/* ── Grilles de contenu ── */
/* (les classes col-6 col-md-3 etc. sont gérées directement dans les vues) */

/* ── Fiches espèces (observatoire) ── */
@media (max-width: 767.98px) {
    /* Colonne gauche (photo + infos) et colonne droite (onglets) : empiler */
    .fiche .col-sm-1.p-0 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .fiche .col-sm-11.pl-0 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0 !important;
    }
    /* Onglets verticaux → banderole horizontale scrollable */
    #onglet {
        flex-direction: row !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }
    /* Chaque onglet : taille confortable, ne rétrécit pas */
    #onglet .nav-item { flex-shrink: 0; }
    #onglet .nav-link { padding: 12px 18px !important; font-size: 1.15rem; }
    /* Hauteur du contenu d'onglet réduite */
    .hauteurfiche { min-height: 50vh !important; }
}