/* === Mobile small (< sm) ===
   575.98 et non 576 : à 576px exactement, les utilitaires `d-sm-*` de Bootstrap
   s'activent déjà. Garder 576 ici faisait cohabiter les deux jeux de règles sur
   ce pixel. */
@media(max-width: 575.98px) {

    /* Listing cards → 1 seule colonne */
    .dash-grid-six,
    .dash-grid-cinq,
    .dash-grid-quatre,
    .dash-grid-trois,
    .dash-grid-deux {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* Stats → scroll horizontal (remplace le grid par flex) */
    .stats-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        padding-bottom: 6px;
        /* Les cartes perdent leur marge ici : sans celle-ci, le bloc suivant leur collait. */
        margin-bottom: 16px;
    }
    .stats-scroll::-webkit-scrollbar { display: none; }
    .stats-scroll > .card {
        min-width: 165px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    /* Cadres compacts (app.css) : sur mobile, défilement horizontal, un peu resserrés. */
    .stats-scroll > .card > .card-body {
        padding: 10px 12px;
        gap: 8px;
    }
    .stats-scroll .round-48 {
        width: 32px !important;
        height: 32px !important;
    }
    .stats-scroll .round-48 iconify-icon {
        font-size: 16px !important;
    }
    .stats-scroll > .card > .card-body > :last-child:not(:first-child) h4 {
        font-size: 1.2rem !important;
    }

    /* Bouton d'ajout dans la barre de filtre → FAB flottant.
       Portée limitée à .searchable-container : la classe .filter-btn est aussi
       posée sur l'en-tête de page du layout admin et sur le sélecteur d'année.
       Sans cette restriction, tout bouton .btn-primary de l'en-tête devenait
       lui aussi un FAB, superposé au premier aux mêmes coordonnées. */
    .searchable-container .filter-btn .btn-primary {
        position: fixed !important;
        bottom: 84px;
        right: 16px;
        z-index: 1031;
        border-radius: 50% !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        padding: 0 !important;
        /* le libellé "Ajouter" est un nœud texte nu : font-size:0 le masque */
        font-size: 0 !important;
        line-height: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .searchable-container .filter-btn .btn-primary span { display: none !important; }
    /* on ne garde que l'icône, recentrée et sans marge */
    .searchable-container .filter-btn .btn-primary i,
    .searchable-container .filter-btn .btn-primary iconify-icon {
        margin: 0 !important;
        font-size: 1.5rem !important;
        line-height: 1 !important;
    }

    /* Bulle chat séance → au-dessus de la nav bar */
    .seance-chat-bubble {
        bottom: 88px !important;
        right: 16px !important;
    }
}

/* === Tablette (< lg) ===
   Était à 900px, une valeur qui ne correspondait à aucun palier Bootstrap.
   Alignée sur `lg` : les grilles passent à 2 colonnes sur toute la plage
   tablette, sans rupture arbitraire au milieu. */
@media(max-width: 991.98px) {

    .dash-grid-six,
    .dash-grid-quatre,
    .dash-grid-cinq,
    .dash-grid-trois,
    .grid-deux,
    .grid-six,
    .grid-cinq,
    .grid-quatre {
        grid-gap: 10px;
        border-radius: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        padding: 0;
    }

    .img-logo img {
        width: 70px;
    }

    .custom-pb {
        padding-bottom: 30px !important;
    }
}

/* === Mobile (< md) ===
   Était à 800px alors que les gabarits basculent tableau/cartes à 768px via
   `d-none d-md-block` / `d-md-none`. Entre 768 et 800px on obtenait donc le
   tableau desktop avec le padding compact du mobile et les marges du
   body-wrapper annulées. Aligné sur `md`, cette zone morte disparaît. */
@media(max-width: 767.98px) {
    .fs-15 {
        font-size: calc(1rem + 1.4vw) !important;
    }

    .grid-trois,
    .dash-grid-six,
    .dash-grid-quatre,
    .dash-grid-cinq,
    .dash-grid-trois,
    .dash-grid-deux,
    .grid-six,
    .grid-cinq,
    .grid-deux,
    .grid-quatre {
        grid-gap: 10px;
        border-radius: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        padding: 0;
    }

    .sec-title__title {
        font-size: 22px;
        line-height: 24px;
    }

    .auth-block {
        width: 90%;
        left: 5%;
        right: 5%;
        top: 5%;
    }

    .custom-sm-padding {
        padding: 25px !important;
    }

    .logo-img {
        text-align: center;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding: 8px;
    }

    .body-wrapper {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .filter-btn {
        text-align: center;
        justify-content: center !important;
    }

    /* Cibles tactiles portées à 44px (WCAG 2.5.5 / Apple HIG). Elles faisaient
       environ 30px, sur les actions les plus sollicitées du back-office :
       rechercher, trier, importer, exporter, ajouter. */
    .filter-btn .btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        margin-bottom: 5px;
        padding: 6px 10px !important;
    }
    /* … sauf ceux masqués exprès sur mobile (« Plus de filtres », rangé dans le panneau). */
    .filter-btn .btn.d-none {
        display: none !important;
    }

    /* Conséquence directe : six boutons à 44px ne tiennent plus sur une ligne à
       côté du champ de recherche. Le conteneur est en `flex-nowrap` et le groupe
       de boutons en `flex-shrink-0`, donc c'était le champ de recherche qui
       absorbait tout l'écrasement — jusqu'à devenir inutilisable. Sur mobile la
       barre passe donc sur deux lignes : recherche en haut, actions dessous. */
    .searchable-container .card-body > .d-flex.flex-nowrap {
        flex-wrap: wrap !important;
    }

    .searchable-container .card-body > .d-flex.flex-nowrap > .flex-grow-1 {
        flex: 1 1 150px;
    }

    /* Recherche, loupe et filtres restent sur la même ligne ; les autres actions
       (lien, import, export…) passent dessous seulement si la place manque. */
    .searchable-container .card-body > .d-flex.flex-nowrap > .filter-btn {
        display: contents !important; /* le groupe porte .d-flex (display: flex !important) */
    }
    .searchable-container .filter-btn > * {
        order: 3;
    }
    /* Saut de ligne après les filtres, seulement s'il reste d'autres actions visibles
       (le bouton d'ajout est flottant). */
    .searchable-container .card-body > .d-flex.flex-nowrap:has(> .filter-btn > :not([type="submit"]):not([data-bs-toggle="offcanvas"]):not(.bg-danger-subtle):not(.btn-primary):not(.d-none):not(.d-md-none))::after {
        content: "";
        flex-basis: 100%;
        order: 2;
    }
    .searchable-container .filter-btn > [type="submit"],
    .searchable-container .filter-btn > [data-bs-toggle="offcanvas"],
    .searchable-container .filter-btn > .bg-danger-subtle {
        order: 1;
    }
    .searchable-container .filter-btn > .btn {
        margin: 0 !important;
    }

    /* Le rythme vertical de 24px posé sur desktop est trop lâche ici, où le
       padding interne des cards tombe à 8px. */
    .card {
        margin-bottom: 16px;
    }

    .sm-none {
        display: none !important;
    }

    .none-desktop {
        display: block !important;
    }

    .pwa {
        z-index: 9000 !important;
    }

    .pwa.alert .btn-close {
        left: 0 !important;
        top: -5px;
    }

    .pwa .navbar-brand {
        line-height: 1;
        margin-left: 30px;
    }

    .pwa .navbar-brand img {
        width: 20px !important;
        height: 20px !important;
    }

    .admin .pwa.alert .btn-close {
        left: 0 !important;
        top: 11px;
    }
    .body-wrapper{
        min-height: auto!important;
    }
}

/* === Actions des cards regroupées en menu kebab (mobile ≤767px) === */
@media (max-width: 767.98px) {
    .card-actions-dd {
        position: relative;
        display: inline-block;
    }
    .card-actions-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 16px;
        border: 0;
        border-radius: 999px;
        font-size: .85rem;
        line-height: 1;
        color: #fff;
        background-color: var(--bs-primary, #44bcec);
    }
    .card-actions-toggle:hover,
    .card-actions-toggle:focus,
    .card-actions-toggle:active {
        color: #fff;
        background-color: var(--bs-primary, #44bcec);
        filter: brightness(.95);
    }
    .card-actions-toggle i { font-size: 1.15rem; }
    .card-actions-toggle::after { display: none; } /* pas de caret BS */

    .card-actions-menu {
        min-width: 184px;
        padding: 6px;
        border: 0;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
        z-index: 1055;
    }
    .card-actions-menu .dropdown-item {
        border-radius: 8px;
        padding: 10px 12px;
        font-size: .9rem;
        white-space: nowrap;
    }
    .card-actions-menu .dropdown-item i { font-size: 1.05rem; opacity: .85; }
    .card-actions-menu .dropdown-item.text-danger i { opacity: 1; }
    .card-actions-menu form {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .card-actions-menu form .dropdown-item { width: 100%; text-align: left; }

    /* Cas .card-footer transformé en menu d'actions (matières, bâtiments, classes…) */
    .card-footer.card-actions-dd {
        text-align: right;
        display: block;
    }
    /* Évite que le menu déroulant soit coupé par la card */
    .card:has(.card-actions-dd) { overflow: visible; }
}