/* ============================================================
   RESPONSIVE MOBILE — SITE1
   Breakpoints : 768px (tablette), 480px (téléphone)
   ============================================================ */

/* ── Nav hors header : desktop → fixed top right ───────────── */
@media (min-width: 769px) {
    .main-nav {
        position: fixed;
        top: 0; right: 0;
        height: 92px;   /* logo 44px + padding 1.5rem*2 = ~92px */
        display: flex;
        align-items: center;
        padding: 0 1.5rem;
        gap: .5rem;
        background: transparent;
        z-index: 101;
        pointer-events: auto;
    }
    .header-content {
        /* Réserver de l'espace à droite pour la nav fixe (liens + bouton passage) */
        padding-right: 520px;
    }
}

/* ── Bouton passage mobile (dans header, à côté du burger) ── */
.btn-passage-mobile {
    /* Caché par défaut — affiché uniquement sur mobile via media query */
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: .5rem;
    border: 1.5px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn-passage-mobile:active {
    background: rgba(255,255,255,.25);
    transform: scale(.93);
}

/* ── Burger button ──────────────────────────────────────────── */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-left: .75rem;
}
.burger-btn span {
    display: block;
    height: 2.5px;
    width: 100%;
    background: rgba(255,255,255,.85);
    border-radius: 2px;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    transform-origin: center;
}
/* Animation → croix */
.burger-btn.open span:nth-child(1) { transform: translateY(8.75px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.open span:nth-child(3) { transform: translateY(-8.75px) rotate(-45deg); }

/* ── Overlay nav mobile ─────────────────────────────────────── */
/* Affiché SOUS le panneau nav mais AU-DESSUS de tout le reste  */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 998;   /* sous nav (999) mais au-dessus du header (100) */
}

/* ══════════════════════════════════════════════════════════════
   TABLETTE  ≤ 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Header ── */
    .app-header { z-index: 999 !important; }

    /* ─────────────────────────────────────────────────────────
       HEADER MOBILE : logo à gauche | 📍 au centre | ☰ à droite
       On utilise un grid 3-colonnes symétriques pour centrer le bouton passage
       ───────────────────────────────────────────────────────── */
    .header-content {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 0 !important;
        padding: .6rem 0 !important;
        /* Annule tout héritage flex */
        flex-direction: unset !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
    }

    /* Logo : colonne gauche, aligné à gauche */
    .app-logo {
        grid-column: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .app-logo img { height: 36px; width: auto; }

    /* Bouton passage 📍 : colonne centrale, centré */
    .btn-passage-mobile {
        grid-column: 2;
        display: flex !important;
        margin: 0;
    }

    /* Burger ☰ : colonne droite, aligné à droite */
    .burger-btn {
        grid-column: 3;
        display: flex !important;
        margin-left: auto;
    }

    /* Masquer le bouton passage injecté dans .main-nav sur mobile */
    .main-nav .btn-passage-header { display: none; }

    /* ── Nav → panneau latéral droit ── */
    .main-nav {
        position: fixed;
        top: 0; right: 0;
        width: min(75vw, 300px);
        height: 100%;
        height: -webkit-fill-available;
        background: var(--nav-bg);
        flex-direction: column;
        align-items: stretch;
        padding: 5rem 1rem 2rem;
        gap: .3rem;
        transform: translateX(110%);          /* complètement hors écran à droite */
        transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
        z-index: 999;                          /* même niveau que le header */
        overflow-y: auto;
        box-shadow: -6px 0 32px rgba(0,0,0,.35);
        /* visibility:hidden garantit qu'aucun clic ne traverse la nav fermée sur iOS/Safari */
        pointer-events: none;
        visibility: hidden;
    }
    .main-nav.mobile-open {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
        transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
    }

    .nav-link {
        padding: .9rem 1.1rem;
        font-size: .9rem;
        border-radius: .4rem;
        border: 2px solid transparent;
        display: block;
        cursor: pointer;
    }
    .nav-link:hover, .nav-link:active {
        background: rgba(255,255,255,.12);
    }

    /* ── Container / spacing ── */
    .container {
        padding: 0 .875rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    .main-content { padding: 1rem 0; }
    /* Empêche tout élément enfant de dépasser le viewport */
    .container * { max-width: 100%; }
    .container input,
    .container select,
    .container textarea { box-sizing: border-box; }

    /* ── Page header ── */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding-bottom: .875rem;
        margin-bottom: 1rem;
    }
    .page-title { font-size: 1.2rem; }
    .page-actions {
        width: 100%;
        flex-direction: column;
        gap: .5rem;
    }
    .page-actions .btn  { width: 100%; justify-content: center; }
    .page-title-section { flex-wrap: wrap; gap: .4rem; }
    .search-box  { width: 100%; max-width: 100%; }
    .search-input { width: 100%; box-sizing: border-box; }

    /* iOS Safari zoome sur les inputs dont font-size < 16px — on force 16px sur mobile */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
    .filter-select { width: 100%; box-sizing: border-box; }

    /* ── Tableaux : scroll horizontal ── */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: .4rem;
    }
    .data-table { min-width: 520px; }
    .data-table th, .data-table td {
        padding: .6rem .7rem;
        font-size: .82rem;
        white-space: nowrap;
    }

    /* ── Info-grid : 1 colonne ── */
    .info-grid { grid-template-columns: 1fr !important; gap: .6rem; }

    /* ── Fiche site : sections full width ── */
    .content-section { margin-bottom: 1rem; }
    .section-header  { padding: .875rem 1rem; }
    .section-title   { font-size: 1rem; }
    .section-body, .content-section > div:not(.section-header) {
        padding: .875rem;
    }

    /* ── Prestations cards ── */
    .prestation-item { padding: .875rem 1rem; }
    .prestation-header { flex-wrap: wrap; gap: .4rem; }
    .prestation-type   { font-size: .9rem; }

    /* ── Breadcrumb ── */
    .breadcrumb { margin-bottom: .75rem; font-size: .85rem; }

    /* ── Site header ── */
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }
    .site-title { font-size: 1.3rem; }
    .site-header .btn { width: 100%; justify-content: center; }

    /* ── Modales plein écran sur mobile ── */
    .modal-content,
    .modal-content-xl {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        margin: 0 !important;
        animation: slideUpMobile .28s ease !important;
    }
    @keyframes slideUpMobile {
        from { transform: translateY(30px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    .modal-overlay { align-items: flex-end; }

    /* Barre onglets modale : plus compact */
    .form-tabs-wrap   { flex-shrink: 0; }
    .form-tabs-inner  { gap: 0; }
    .form-tab         { padding: .6rem .65rem; font-size: .7rem; }
    .form-tab-content.active { padding: 1rem; }

    /* Footer modale */
    .modal-footer { padding: .6rem .875rem; gap: .5rem; }
    .modal-footer-nav .tab-nav-btn { padding: .3rem .6rem; }
    .modal-footer-actions .btn     { padding: .45rem .75rem; font-size: .82rem; }

    /* ── Formulaires ── */
    .form-grid { grid-template-columns: 1fr !important; gap: .6rem; }
    .form-field label { font-size: .8rem; }

    /* ── Onglets (.tabs) : scrollables horizontalement sur mobile ── */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0;
        padding-bottom: 2px;       /* évite que la bordure active soit coupée */
        /* scrollbar invisible */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: .7rem .9rem;
        font-size: .82rem;
    }

    /* ── Accès & Matériel ── */
    .acces-item-card { padding: .875rem; }
    .acces-item-header { flex-wrap: wrap; gap: .4rem; }

    /* ── Paramètres ── */
    .settings-grid { grid-template-columns: 1fr !important; }
    .schema-table { font-size: .78rem; }
    .schema-table th, .schema-table td { padding: .4rem .5rem; }

    /* ── Filtres annuaire ── */
    .filters-bar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5rem;
        padding: .5rem .875rem;
    }
    /* Masquer le label texte "FILTRER PAR CATÉGORIES :" sur mobile — trop long */
    .filter-label { display: none; }
    /* filter-section occupe tout l'espace restant */
    .filter-section {
        flex: 1;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: .4rem;
    }
    /* filter-controls = dropdown + badges sur une ligne */
    .filter-controls {
        flex: 1;
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: .4rem;
        /* PAS de overflow:hidden — couperait le dropdown absolu */
        overflow: visible;
    }
    /* Dropdown : largeur flexible, ne dépasse pas */
    .custom-dropdown {
        width: auto;
        min-width: 0;
        flex: 0 1 180px;
    }
    .dropdown-toggle {
        font-size: .8rem;
        padding: .45rem .6rem;
        white-space: nowrap;
    }
    /* Dropdown menu : position fixed sur mobile pour échapper à tout overflow parent */
    .dropdown-menu {
        position: fixed;
        top: auto;
        left: .875rem;
        right: .875rem;
        width: auto;
        max-height: 60vh;
        z-index: 1100;
    }
    /* Badges sélectionnés */
    .selected-categories {
        overflow: visible;
        white-space: normal;
        flex: 1;
        min-width: 0;
    }
    .no-selection { font-size: .78rem; white-space: nowrap; }
    /* Bouton reset : texte court sur mobile */
    .filter-actions { flex-shrink: 0; }
    #btn-reset-filters { font-size: .8rem; padding: .4rem .5rem; white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════
   TÉLÉPHONE  ≤ 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Plus petit encore */
    .container { padding: 0 .625rem; }
    .page-title { font-size: 1.1rem; }

    /* Tableaux : colonnes encore plus compactes */
    .data-table th, .data-table td { font-size: .78rem; padding: .5rem .55rem; }

    /* Onglets modale très petits */
    .form-tab { padding: .55rem .5rem; font-size: .66rem; letter-spacing: 0; }

    /* Info-item label/valeur empilés */
    .info-item   { padding: .75rem; }
    .info-label  { font-size: .72rem; }
    .info-value  { font-size: .9rem; }

    /* Prestation cards */
    .prestation-item { padding: .75rem; }

    /* Boutons actions */
    .btn-small { padding: .3rem .55rem; font-size: .75rem; }

    /* Section title */
    .section-title { font-size: .95rem; }

    /* Footer modale encore plus compact */
    .modal-footer { padding: .5rem .75rem; }
    .modal-footer-nav .tab-nav-label { display: none; } /* masquer "1/9" sur très petit */
}

/* ── Bouton déconnexion dans la nav ────────────────────────── */
/* Desktop : inline dans la nav fixe */
@media (min-width: 769px) {
    #btn-logout {
        margin-top: 0 !important;
        width: auto !important;
        text-align: center !important;
        padding: .35rem .9rem !important;
    }
}
/* Mobile : en bas du panneau, pleine largeur */
@media (max-width: 768px) {
    #btn-logout {
        margin-top: 1rem !important;
        width: 100% !important;
        text-align: left !important;
        border-top: 1px solid rgba(255,255,255,.15) !important;
        padding-top: 1rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   FIXES DÉBORDEMENT HORIZONTAL — globaux
   ══════════════════════════════════════════════════════════════ */

/* Garantit qu'aucun élément ne dépasse le viewport */
@media (max-width: 768px) {

    /* ── Barre de filtre sections (fiche site) ── */
    .section-filter-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: .35rem;
    }
    .section-filter-bar::-webkit-scrollbar { display: none; }
    .section-filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: .75rem;
        padding: .3rem .65rem;
    }

    /* ── Onglets fiche site ── */
    .form-tabs-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .form-tabs-inner::-webkit-scrollbar { display: none; }
    .form-tab { white-space: nowrap; flex-shrink: 0; }

    /* ── Badges acces ── */
    .acces-badge {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: .72rem;
    }

    /* ── Footer modale footer-actions ── */
    .modal-footer-actions {
        flex-wrap: wrap;
        gap: .4rem;
    }
    .modal-footer-actions .btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }

    /* ── Passage modal ── */
    .passage-modal-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── bouton passage dans nav mobile ── */
    .btn-passage-header {
        display: block;
        width: 100%;
        text-align: left;
        margin: .3rem 0 .5rem;
        border-bottom: 1px solid rgba(255,255,255,.15);
        padding-bottom: .9rem;
        margin-bottom: .5rem;
        border-left: none;
        border-right: none;
        border-top: none;
        border-radius: 0;
        background: transparent;
        color: rgba(255,255,255,.9);
        font-size: .85rem;
    }
    .btn-passage-header:hover {
        background: rgba(255,255,255,.08);
        transform: none;
        box-shadow: none;
    }

    /* ── Tableaux dans la fiche site ── */
    .schema-table-wrap,
    .table-wrapper {
        max-width: calc(100vw - 1.75rem);
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    /* Onglets acces très petits */
    .tab-btn { font-size: .75rem; padding: .6rem .7rem; }

    /* Page header compact */
    .page-header { gap: .5rem; }

    /* Filtres colonnes (paramètres) */
    .col-picker-item { font-size: .75rem; padding: .4rem .6rem; }
}

/* ── Contact-select searchable : responsive mobile ── */
@media (max-width: 768px) {
    .cs-dropdown {
        /* Sur mobile, dropdown pleine largeur et plus haute */
        right: 0;
        max-width: 100%;
        position: fixed;
        left: .875rem;
        right: .875rem;
        top: auto;
        /* On positionne via JS si nécessaire, sinon fallback sticky */
        z-index: 600;
    }
    .cs-list { max-height: 240px; }
    .cs-option { font-size: .88rem; padding: .65rem .75rem; }
}