/* =========================================================
   MMAS — MOBILE POLISH v2 (multi-pages, design moderne)
   Chargée APRÈS mobile.css via <!--#include .../head.html-->
   ========================================================= */

/* ===========================================
   BASE MOBILE — ≤ 1024px (tablette + mobile)
   =========================================== */
@media (max-width: 1024px) {
    html, body {
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
    }
    body {
        background: var(--background) !important;
        color: var(--gray-800);
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    }
    body:has(#loginForm), body.parent-app {
        padding-bottom: 0 !important;
    }

    /* -------- Sidebar -------- */
    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        width: 84% !important;
        max-width: 320px !important;
        transform: translateX(-102%);
        transition: transform 0.28s cubic-bezier(.25,.46,.45,.94),
                    visibility 0s linear 0.28s,
                    opacity 0.2s linear;
        z-index: 1050;
        background: var(--gradient-sidebar) !important;
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    .sidebar.open {
        transform: translateX(0) !important;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: transform 0.28s cubic-bezier(.25,.46,.45,.94),
                    visibility 0s linear 0s,
                    opacity 0.2s linear;
    }

    .sidebar-overlay {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1040;
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s;
    }
    .sidebar-overlay.active { opacity: 1; pointer-events: auto; }

    /* -------- Main layout -------- */
    .main-content, .app-main, main {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .app-container, .app {
        display: block !important;
    }

    /* -------- Top bar hero -------- */
    .main-header, .top-bar, .page-header, .app-header {
        background: var(--gradient-primary) !important;
        color: var(--white) !important;
        padding: 18px 18px 20px !important;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
        box-shadow: 0 4px 16px rgba(67, 56, 202, 0.20);
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .main-header h1, .page-title, .page-header h1 {
        color: var(--white) !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        letter-spacing: -0.01em;
        flex: 1;
    }

    .mobile-menu-btn, .menu-toggle-btn {
        background: rgba(255, 255, 255, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: var(--white) !important;
        width: 40px; height: 40px;
        border-radius: var(--radius);
        display: inline-flex !important; align-items: center; justify-content: center;
        font-size: 1rem;
    }

    .header-user, .user-badge {
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: var(--white) !important;
        padding: 6px 12px;
        border-radius: var(--radius-full);
        font-size: 0.82rem;
    }

    /* -------- Page content -------- */
    .page-content {
        padding: 16px !important;
        min-height: calc(100vh - 200px);
    }
    .page-section {
        animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* -------- Cards -------- */
    .card {
        background: var(--white) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow) !important;
        border: 1px solid var(--gray-100) !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
        overflow: hidden;
    }
    .card-header {
        padding: 16px 18px !important;
        border-bottom: 1px solid var(--gray-100) !important;
        background: var(--gray-50) !important;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .card-title {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--gray-900) !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .card-body, .card > .p-0 {
        padding: 16px 18px !important;
    }
    .card-body.p-0, .card .p-0 {
        padding: 0 !important;
    }
    .card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* -------- Stats Grid -------- */
    .stats-grid, .dashboard-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-bottom: 16px;
    }
    @media (max-width: 480px) {
        .stats-grid, .dashboard-stats {
            grid-template-columns: 1fr !important;
        }
    }
    .stat-card {
        padding: 16px !important;
        border-left: 4px solid var(--primary) !important;
        position: relative;
        overflow: hidden;
        min-height: 92px;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow) !important;
        border: 1px solid var(--gray-100);
    }
    .stat-card::before {
        content: "";
        position: absolute;
        top: -40%; right: -20%;
        width: 140px; height: 140px;
        background: var(--primary-50);
        border-radius: 50%;
        opacity: 0.4;
        z-index: 0;
    }
    .stat-card > * { position: relative; z-index: 1; }
    .stat-card .stat-value {
        font-size: 1.7rem !important;
        font-weight: 800 !important;
        color: var(--gray-900) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em;
        margin: 0 !important;
    }
    .stat-card .stat-label, .stat-card .stat-title {
        font-size: 0.76rem !important;
        font-weight: 500 !important;
        color: var(--gray-500) !important;
        margin-top: 4px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .stat-card .stat-icon {
        width: 42px; height: 42px;
        border-radius: var(--radius);
        display: flex; align-items: center; justify-content: center;
        background: var(--primary-100);
        color: var(--primary);
        font-size: 1.05rem;
        flex-shrink: 0;
    }
    .stat-success .stat-icon { background: var(--success-light); color: var(--success-dark); }
    .stat-warning .stat-icon { background: var(--warning-light); color: var(--warning-dark); }
    .stat-danger  .stat-icon { background: var(--danger-light);  color: var(--danger-dark);  }
    .stat-info    .stat-icon { background: var(--info-light);    color: var(--info);         }

    /* -------- Action Bar (search + filters) -------- */
    .action-bar,
    .filter-bar,
    .search-and-filter {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }
    .search-input, .search-box input, input[type="search"] {
        flex: 1 1 100%;
        font-size: 16px !important;
        padding: 12px 12px 12px 40px !important;
        border-radius: var(--radius) !important;
        border: 1px solid var(--gray-200) !important;
        background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E") no-repeat 12px center !important;
        box-shadow: var(--shadow-sm);
    }

    /* Filter chips scroll horizontal */
    .filter-chips, .chips-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
    }
    .filter-chips::-webkit-scrollbar { display: none; }

    .form-select, select {
        font-size: 14px !important;
        padding: 8px 30px 8px 12px !important;
        border-radius: var(--radius-full) !important;
        border: 1px solid var(--gray-200) !important;
        background: var(--white) !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* -------- Buttons -------- */
    .btn {
        min-height: 44px;
        padding: 10px 16px !important;
        border-radius: var(--radius) !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: var(--transition);
        border: none;
        cursor: pointer;
        white-space: nowrap;
    }
    .btn:active { transform: scale(0.97); }
    .btn-primary {
        background: var(--gradient-primary) !important;
        color: var(--white) !important;
        box-shadow: 0 4px 10px rgba(67, 56, 202, 0.25);
    }
    .btn-secondary {
        background: var(--gray-100) !important;
        color: var(--gray-700) !important;
    }
    .btn-ghost, .btn-light {
        background: transparent !important;
        color: var(--gray-700) !important;
        border: 1px solid var(--gray-200) !important;
    }
    .btn-success { background: var(--success) !important; color: var(--white) !important; }
    .btn-danger  { background: var(--danger)  !important; color: var(--white) !important; }
    .btn-warning { background: var(--warning) !important; color: var(--white) !important; }
    .btn-sm {
        min-height: 44px !important;   /* cible tactile ≥44px (doctrine mobile) */
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
    .btn-lg {
        min-height: 48px !important;
        padding: 12px 20px !important;
    }
    .btn-icon, .btn-icon-only {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    /* Bouton primary toujours pleine largeur en mobile dans action bar */
    .card-header .btn-primary,
    .card-actions .btn-primary,
    .page-content > .card > .card-header .btn-primary {
        min-width: 0;
    }

    /* -------- FAB (Floating Action Button) --------
       NB: classe renommee '.btn-fab' pour eviter la collision avec le
       namespace Font Awesome ('.fab' = 'Font Awesome Brands'). */
    .btn-fab {
        position: fixed;
        right: 18px;
        bottom: 82px;
        width: 56px; height: 56px;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: var(--white);
        box-shadow: var(--shadow-lg);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem;
        border: none;
        z-index: 800;
    }

    /* -------- Bottom Nav -------- */
    .bottom-nav {
        position: fixed !important;
        bottom: 0; left: 0; right: 0;
        height: 70px;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
        display: flex !important;
        z-index: 900;
        padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
    }
    .bottom-nav-item {
        flex: 1;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--gray-500);
        font-size: 0.68rem;
        font-weight: 500;
        background: transparent !important;
        border: none !important;
        padding: 8px 4px !important;
        min-height: 56px !important;
        position: relative;
        transition: var(--transition);
    }
    .bottom-nav-item i {
        font-size: 1.2rem;
        transition: var(--transition-bounce);
    }
    .bottom-nav-item.active {
        color: var(--primary);
    }
    .bottom-nav-item.active i {
        transform: translateY(-2px) scale(1.1);
    }
    .bottom-nav-item.active::before {
        content: "";
        position: absolute;
        top: 2px;
        width: 26px; height: 3px;
        background: var(--primary);
        border-radius: var(--radius-full);
    }

    /* -------- TABLES → CARDS MODE -------- */
    .table-scroll-wrapper {
        background: var(--white);
        border-radius: var(--radius-md);
    }

    /* Transformer les tables en cards empilées sur mobile */
    .card-body > .table-scroll-wrapper > .table,
    .card > .table-scroll-wrapper > .table {
        font-size: 0.88rem;
    }

    /* Sticky column headers gray, rows with zebra */
    table.table thead th {
        background: var(--gray-50) !important;
        color: var(--gray-600) !important;
        font-weight: 600 !important;
        font-size: 0.7rem !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 10px 10px !important;
        border-bottom: 1px solid var(--gray-200) !important;
        white-space: nowrap;
    }
    table.table tbody td {
        padding: 12px 10px !important;
        border-bottom: 1px solid var(--gray-100) !important;
    }
    table.table tbody tr:last-child td { border-bottom: none !important; }
    table.table tbody tr:hover { background: var(--primary-50); }
    table.table tbody tr:active { background: var(--primary-100); }

    /* -------- Forms -------- */
    .form-group, .form-field, .mb-3, .mb-4 {
        margin-bottom: 14px !important;
    }
    label, .form-label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 6px;
    }
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select,
    .form-control,
    .form-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 11px 14px !important;
        border-radius: var(--radius) !important;
        border: 1.5px solid var(--gray-200) !important;
        background: var(--white) !important;
        color: var(--gray-900);
        transition: var(--transition);
        box-sizing: border-box;
    }
    input:focus, select:focus, textarea:focus {
        outline: none !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1) !important;
    }
    input[type="checkbox"], input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        accent-color: var(--primary);
    }
    .form-row, .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* -------- Modales : MMAS pattern .modal-overlay > .modal en bottom-sheet --------
       NB: PAS de 'display: flex !important' ici, sinon ca ecrase le
       style='display:none' inline de #confirmModal et le modal s'affiche
       en permanence sans qu'on ait clique. */
    body.admin-app .modal-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        background: rgba(15, 23, 42, 0.55) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    body.admin-app .modal-overlay.hidden { display: none !important; }
    body.admin-app .modal-overlay > .modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        background: var(--white) !important;
        border-radius: 24px 24px 0 0 !important;
        border: none !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18) !important;
        max-height: 92vh;
        display: flex !important;
        flex-direction: column;
        animation: slideUp 0.28s cubic-bezier(.25,.46,.45,.94);
        position: relative;
        overflow: hidden;
    }
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    /* Drag handle bar en haut */
    body.admin-app .modal-overlay > .modal::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        background: var(--gray-300);
        border-radius: var(--radius-full);
        margin: 10px auto 0;
        flex: 0 0 auto;
    }
    body.admin-app .modal-header {
        padding: 14px 18px 12px !important;
        border-bottom: 1px solid var(--gray-100) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px;
        flex: 0 0 auto;
    }
    body.admin-app .modal-header h3,
    body.admin-app .modal-header .modal-title {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: var(--gray-900) !important;
        margin: 0 !important;
        flex: 1;
        min-width: 0;
    }
    body.admin-app .modal-close {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--gray-100) !important;
        color: var(--gray-700) !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
        cursor: pointer;
        line-height: 1;
        padding: 0 !important;
    }
    body.admin-app .modal-close:active {
        background: var(--gray-200) !important;
        transform: scale(0.92);
    }
    body.admin-app .modal-body {
        padding: 18px !important;
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    /* -------- Confirm modal (special structure: pas de modal-body) -------- */
    body.admin-app .modal-overlay > .modal.confirm-modal {
        padding: 28px 22px 22px !important;
        text-align: center;
    }
    body.admin-app .confirm-modal .confirm-icon {
        width: 64px !important;
        height: 64px !important;
        border-radius: 50%;
        background: var(--danger-light) !important;
        color: var(--danger) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 6px auto 16px !important;
        font-size: 1.6rem !important;
    }
    body.admin-app .confirm-modal .confirm-icon.warning {
        background: var(--warning-light) !important;
        color: var(--warning-dark) !important;
    }
    body.admin-app .confirm-modal h3 {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: var(--gray-900) !important;
        margin: 0 0 8px !important;
        letter-spacing: -0.01em;
    }
    body.admin-app .confirm-modal p {
        color: var(--gray-700) !important;
        font-size: 0.95rem !important;
        line-height: 1.45;
        margin: 0 auto 22px !important;
        max-width: 320px;
    }
    body.admin-app .confirm-modal p:empty {
        display: none;
    }
    body.admin-app .confirm-modal .confirm-actions {
        display: flex !important;
        gap: 10px !important;
        flex-direction: row !important;
        justify-content: stretch !important;
    }
    body.admin-app .confirm-modal .confirm-actions .btn {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 46px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    .modal-footer {
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0)) !important;
        border-top: 1px solid var(--gray-200) !important;
        background: var(--gray-50);
        display: flex;
        gap: 8px;
    }
    .modal-footer .btn { flex: 1; }

    /* -------- Modales : layout colonne STRICT --------
       Le footer sticky (mobile.css:2137) recouvrait le bas du .modal-body
       (hauteur figée calc(92vh-140px) < header+footer réels) : chips de la
       « Nouvelle inscription » summer incliquables, et modale pouvant
       apparaître blanche quand le body se retrouvait écrasé. En colonne
       flex, chaque zone a SA rangée : plus aucun recouvrement possible. */
    body.admin-app .modal-overlay .modal {
        display: flex !important;
        flex-direction: column !important;
        max-height: 92dvh !important;
    }
    body.admin-app .modal-overlay .modal .modal-header { flex: 0 0 auto !important; }
    body.admin-app .modal-overlay .modal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        /* Dégagement : la dernière rangée (chips, boutons) ne doit jamais
           affleurer le footer sticky — sinon zone de tap quasi nulle. */
        padding-bottom: 96px !important;
    }
    body.admin-app .modal-overlay .modal .modal-footer {
        flex: 0 0 auto !important;
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: #fff !important;
        box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
    }

    /* -------- Badges/chips -------- */
    .badge, .chip, .tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: var(--radius-full);
        font-size: 0.72rem;
        font-weight: 600;
        background: var(--gray-100);
        color: var(--gray-700);
        white-space: nowrap;
    }
    .badge-primary, .chip-primary { background: var(--primary-100); color: var(--primary-dark); }
    .badge-success { background: var(--success-light); color: var(--success-dark); }
    .badge-warning { background: var(--warning-light); color: var(--warning-dark); }
    .badge-danger  { background: var(--danger-light);  color: var(--danger-dark);  }
    .badge-info    { background: var(--info-light);    color: var(--info);         }

    /* -------- Toast -------- */
    .toast-container {
        position: fixed !important;
        bottom: 84px !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 9999;
    }
    .toast {
        background: var(--gray-900) !important;
        color: var(--white) !important;
        border-radius: var(--radius) !important;
        padding: 14px 16px !important;
        font-size: 0.9rem;
        box-shadow: var(--shadow-lg);
    }

    /* -------- Empty states -------- */
    .empty-state {
        text-align: center;
        padding: 48px 24px;
        color: var(--gray-500);
    }
    .empty-state i { font-size: 3rem; color: var(--gray-300); margin-bottom: 12px; }

    /* -------- Skeleton -------- */
    .skeleton {
        background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: var(--radius-sm);
    }
    @keyframes shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ======================================================
       POLISH SPÉCIFIQUE PAR PAGE
       ====================================================== */

    /* ---------- DASHBOARD ---------- */
    body.page-dashboard .alerts-card {
        background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%) !important;
        color: var(--white) !important;
        border: none !important;
        border-radius: var(--radius-md) !important;
        margin-bottom: 14px;
    }
    body.page-dashboard .alerts-card .card-header {
        background: transparent !important;
        color: var(--white) !important;
        border-bottom: 1px solid rgba(255,255,255,.2) !important;
    }
    body.page-dashboard .alerts-card .card-title { color: var(--white) !important; }
    body.page-dashboard .alerts-card .badge {
        background: rgba(255,255,255,.25) !important;
        color: var(--white) !important;
        border: 1px solid rgba(255,255,255,.3);
    }

    /* ---------- FAMILLES ---------- */
    body.page-families .families-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    body.page-families .family-card {
        background: var(--white) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow) !important;
        border: 1px solid var(--gray-100) !important;
        padding: 14px !important;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    body.page-families .family-card:active {
        transform: scale(0.99);
        box-shadow: var(--shadow-sm) !important;
    }
    body.page-families .family-card .avatar,
    body.page-families .family-card .family-avatar {
        width: 48px; height: 48px;
        border-radius: 50%;
        background: var(--primary-100);
        color: var(--primary);
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 1rem;
        flex-shrink: 0;
    }

    /* ---------- PAIEMENTS ---------- */
    body.page-payments input[type="month"] {
        display: block;
        width: 100%;
    }

    /* ---------- PLANNING ---------- */
    body.page-planning .planning-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
        margin-bottom: 14px;
    }
    body.page-planning .planning-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px;
        width: 100%;
    }
    body.page-planning .planning-nav .btn-group {
        display: flex !important;
        width: 100%;
        gap: 6px;
        background: transparent !important;
        padding: 0 !important;
    }
    body.page-planning .planning-nav .btn-group .btn {
        flex: 1;
        min-height: 40px !important;
    }
    body.page-planning .planning-nav .btn-group .btn-light {
        flex: 2;
        background: var(--white) !important;
        border: 1px solid var(--gray-200) !important;
        color: var(--gray-800) !important;
    }
    body.page-planning .planning-title {
        font-size: 0.9rem !important;
        font-weight: 600;
        color: var(--gray-600);
        text-align: center;
        margin: 4px 0 0 !important;
    }
    body.page-planning .planning-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
        width: 100%;
    }
    body.page-planning .planning-actions .btn-primary {
        width: 100%;
        flex: 1 1 100%;
    }
    body.page-planning .btn-group {
        display: flex !important;
        width: 100%;
        gap: 4px;
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 3px;
    }
    body.page-planning .btn-group .btn {
        flex: 1;
        background: transparent !important;
        border: none !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        border-radius: calc(var(--radius) - 3px) !important;
        color: var(--gray-600) !important;
    }
    body.page-planning .btn-group .btn.active,
    body.page-planning .btn-group .btn.btn-primary {
        background: var(--white) !important;
        color: var(--primary) !important;
        box-shadow: var(--shadow-sm);
    }
    body.page-planning .planning-grid {
        display: block !important;
    }
    body.page-planning .planning-row {
        background: var(--white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow);
        border: 1px solid var(--gray-100);
        padding: 12px !important;
        margin-bottom: 10px;
        display: block !important;
    }
    body.page-planning .planning-slot-header {
        padding: 0 0 10px !important;
        border-bottom: 1px solid var(--gray-200);
        margin-bottom: 10px;
    }
    body.page-planning .planning-slot-header .slot-time-range {
        font-weight: 700;
        color: var(--primary);
        font-size: 0.95rem;
    }
    body.page-planning .planning-cell.cell-empty,
    body.page-planning .planning-cell.drop-zone {
        display: none !important;
    }
    body.page-planning .planning-cell {
        border-radius: var(--radius) !important;
        padding: 10px !important;
        margin-bottom: 6px;
        background: var(--gray-50);
    }

    /* ---------- PRÉSENCES ---------- */
    body.page-attendance .attendance-session-card {
        background: var(--white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow);
        padding: 14px;
        margin-bottom: 10px;
    }

    /* ---------- ANIMATEURS — minimum viable, on laisse les enfants flow naturellement ---------- */
    body.page-instructors .card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-instructors .card table.table tbody tr.instructor-row {
        display: block !important;
        width: 100% !important;
        background: var(--white) !important;
        border: 1px solid var(--gray-100) !important;
        border-radius: 14px !important;
        margin: 0 0 12px !important;
        padding: 14px 16px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        box-sizing: border-box;
    }
    /* Toutes les <td> en simple bloc, pas de flex magic, labels caches */
    body.page-instructors .card table.table tbody tr.instructor-row > td {
        display: block !important;
        padding: 4px 0 !important;
        border: none !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.page-instructors .card table.table tbody tr.instructor-row > td::before {
        display: none !important;
    }

    /* Header content : dot + nom + chip flow inline */
    body.page-instructors .ic-dot {
        display: inline-block !important;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
        vertical-align: middle;
    }
    body.page-instructors .ic-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-right: 8px;
    }
    body.page-instructors .chip-specialty {
        display: inline-block;
        background: var(--primary-50);
        color: var(--primary);
        font-size: 0.72rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Contact : email + phone en lignes inline-flex pour aligner les icones */
    body.page-instructors .ic-contact {
        margin: 8px 0 12px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--gray-100) !important;
    }
    body.page-instructors .ic-contact .info-line {
        display: block;
        font-size: 0.85rem;
        color: var(--gray-700);
        padding: 3px 0;
    }
    body.page-instructors .ic-contact .info-line i {
        color: var(--primary);
        margin-right: 8px;
    }

    /* Actions : flex space-between pour Modifier a gauche, delete a droite */
    body.page-instructors tr.instructor-row > td.ic-actions {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 10px;
        padding-top: 8px !important;
    }
    body.page-instructors .ic-actions .btn-block-mobile {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
        color: var(--white) !important;
    }
    body.page-instructors .ic-actions .btn-danger-soft {
        background: var(--danger-light) !important;
        color: var(--danger-dark) !important;
        width: 44px;
        height: 44px;
        min-width: 44px !important;
        border-radius: 50%;
        padding: 0 !important;
    }

    /* ---------- COMMUNICATIONS ---------- */
    body.page-communications .comm-tabs {
        display: flex;
        overflow-x: auto;
        gap: 4px;
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 4px;
        margin-bottom: 14px;
    }
    body.page-communications .comm-tab {
        flex: 1 0 auto;
        min-height: 36px !important;
        padding: 8px 14px !important;
        background: transparent !important;
        border: none !important;
        border-radius: calc(var(--radius) - 4px) !important;
        font-size: 0.85rem !important;
        font-weight: 500;
        color: var(--gray-600) !important;
        white-space: nowrap;
    }
    body.page-communications .comm-tab.active {
        background: var(--white) !important;
        color: var(--primary) !important;
        box-shadow: var(--shadow-sm);
        font-weight: 600;
    }
    body.page-communications .channel-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }
    body.page-communications .channel-btn {
        padding: 14px 8px !important;
        border: 1.5px solid var(--gray-200) !important;
        background: var(--white) !important;
        border-radius: var(--radius) !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem !important;
        font-weight: 600;
        color: var(--gray-700) !important;
        min-height: auto !important;
    }
    body.page-communications .channel-btn i { font-size: 1.3rem; }
    body.page-communications .channel-btn.active {
        border-color: var(--primary) !important;
        background: var(--primary-50) !important;
        color: var(--primary) !important;
    }

    /* ---------- RELANCES ---------- */
    body.page-reminders .reminder-badge {
        background: var(--danger-light);
        color: var(--danger-dark);
        padding: 4px 10px;
        border-radius: var(--radius-full);
        font-size: 0.78rem;
        font-weight: 600;
    }

    /* ---------- TARIFS / VACANCES / USERS / LOGS ---------- */
    body.page-pricing .card-body,
    body.page-vacations .card-body,
    body.page-users .card-body,
    body.page-logs .card-body { padding: 0 !important; }

    /* ---------- EXPORTS ---------- */
    body.page-exports .export-btn {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 16px !important;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        margin-bottom: 10px;
        width: 100%;
        text-align: left;
        color: var(--gray-800);
        font-weight: 500;
        min-height: 64px !important;
    }
    body.page-exports .export-btn i,
    body.page-exports .export-btn .icon {
        width: 44px; height: 44px;
        border-radius: var(--radius);
        background: var(--primary-100);
        color: var(--primary);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* -------- Typo -------- */
    h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
    h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
    h3 { font-size: 1rem; font-weight: 600; }
    p  { line-height: 1.5; }
    .text-muted { color: var(--gray-500); }
    .text-sm { font-size: 0.825rem; }
    .text-xs { font-size: 0.72rem; }
}

/* ===========================================
   PETIT MOBILE ≤ 480px
   =========================================== */
@media (max-width: 480px) {
    .page-content { padding: 12px !important; }
    .card-header  { padding: 12px 14px !important; }
    .card-body    { padding: 14px !important; }
    .stat-card { padding: 14px !important; }
    .stat-card .stat-value { font-size: 1.5rem !important; }
    .main-header h1 { font-size: 1.1rem !important; }
}

/* ====== FIX FAMILLES : cartes débordent en mobile ====== */
@media (max-width: 1024px) {
    body.page-families .families-grid,
    body.page-families #familiesGrid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
    }

    body.page-families .family-card {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0 !important;
        border-radius: var(--radius-md) !important;
    }

    body.page-families .family-card-header {
        padding: 14px 16px !important;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    body.page-families .family-card-header *,
    body.page-families .family-card-title,
    body.page-families .family-card-name,
    body.page-families .family-card-name span {
        color: var(--white) !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        text-overflow: clip !important;
    }

    body.page-families .family-card-body {
        padding: 12px 16px !important;
        display: block !important;
    }

    body.page-families .family-contact-info,
    body.page-families .family-contact-row,
    body.page-families .contact-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 6px 0 !important;
        font-size: 0.85rem !important;
        color: var(--gray-700) !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    body.page-families .family-contact-row a,
    body.page-families .contact-row a {
        color: var(--secondary) !important;
        text-decoration: none;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0;
    }

    body.page-families .family-children-section,
    body.page-families .children-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid var(--gray-200) !important;
        width: 100% !important;
    }

    body.page-families .child-block,
    body.page-families .child-item,
    body.page-families .child-card {
        background: var(--gray-50) !important;
        border-radius: var(--radius) !important;
        padding: 10px 12px !important;
        border-left: 3px solid var(--secondary) !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    body.page-families .child-info-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    body.page-families .family-card-footer,
    body.page-families .family-card-actions {
        padding: 10px 16px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-top: 1px solid var(--gray-200) !important;
    }

    body.page-families .action-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.page-families .total-amount {
        font-weight: 700 !important;
        color: var(--primary) !important;
        font-size: 0.95rem !important;
    }

    body.page-families .status-badge {
        font-size: 0.72rem !important;
        padding: 3px 10px !important;
        border-radius: var(--radius-full) !important;
    }
}

/* ====== FIX : aucun blanc au-dessus de la top-bar sur mobile ====== */
@media (max-width: 1024px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.admin-app {
        padding-top: 0 !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    }
    body.admin-app > .skip-link {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    body.admin-app .app-container {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 100vh;
    }
    body.admin-app main.main-content,
    body.admin-app .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.admin-app .main-header {
        margin-top: 0 !important;
        position: sticky;
        top: 0;
    }
}

/* =================================================================
   REFONTE MOBILE 2026-04-25
   Visuels premium : topbar, stat cards, cards, typography, FAB.
   Cascade après tout le reste — last rule wins à égalité de spécificité.
   ================================================================= */

@media (max-width: 1024px) {

    /* ---------- TOPBAR PREMIUM ---------- */
    body.admin-app .main-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 55%, var(--accent) 100%) !important;
        padding: 14px 16px 16px !important;
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 8px 24px -8px rgba(67, 56, 202, 0.35);
        min-height: 64px;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    body.admin-app .main-header .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1;
        min-width: 0;
    }
    body.admin-app .main-header .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: var(--white) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
        transition: transform 0.15s ease, background 0.15s ease;
    }
    body.admin-app .main-header .mobile-menu-btn:active {
        transform: scale(0.94);
        background: rgba(255, 255, 255, 0.30) !important;
    }
    body.admin-app .main-header .page-title,
    body.admin-app .main-header h1 {
        color: var(--white) !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        margin: 0 !important;
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.20);
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Cacher recherche globale et bouton ajout dans la topbar mobile — on les gère ailleurs */
    body.admin-app .main-header .search-box,
    body.admin-app .main-header #mainActionBtn,
    body.admin-app .main-header .header-actions {
        display: none !important;
    }

    /* ---------- PAGE WRAPPER ---------- */
    body.admin-app .page-content {
        padding: 16px 14px 20px !important;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* ---------- STAT CARDS REFONTE ---------- */
    body.admin-app .stats-grid,
    body.admin-app #dashboardStatsGrid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-bottom: 18px;
    }
    @media (max-width: 380px) {
        body.admin-app .stats-grid,
        body.admin-app #dashboardStatsGrid {
            grid-template-columns: 1fr !important;
        }
    }

    body.admin-app .stat-card {
        background: var(--white) !important;
        border: none !important;
        border-left: none !important;
        border-radius: 18px !important;
        padding: 16px 14px 14px !important;
        box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04) !important;
        position: relative;
        overflow: hidden;
        min-height: 110px;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    body.admin-app .stat-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.06) !important;
    }
    /* Supprimer le blob décoratif qui empire le look */
    body.admin-app .stat-card::before {
        display: none !important;
    }
    body.admin-app .stat-card > * { position: relative; z-index: 1; }

    body.admin-app .stat-card .stat-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    body.admin-app .stat-card .stat-content {
        padding-right: 48px; /* reserve space for absolute icon top-right */
        min-width: 0;
        flex: 1;
        /* La carte est en align-items:center : sans ceci le bloc texte se
           reduit a sa largeur propre et se centre, donc « 25 Familles » ne
           demarre pas au meme x que « 11 650 DH ». On l'etire pour que les
           six cartes partagent un bord gauche unique. L'icone est en
           position:absolute, elle n'est pas concernee. */
        align-self: stretch;
    }
    body.admin-app .stat-card .stat-value {
        font-size: clamp(1.05rem, 4.6vw, 1.55rem) !important;
        font-weight: 800 !important;
        color: var(--gray-900) !important;
        letter-spacing: -0.03em !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    body.admin-app .stat-card .stat-label {
        font-size: 0.80rem !important;
        font-weight: 600 !important;
        color: var(--gray-600) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.3;
        margin: 0 !important;
    }
    body.admin-app .stat-card .stat-delta {
        font-size: 0.72rem !important;
        font-weight: 600;
        margin-top: 2px;
    }

    /* Icon top-right avec tint sémantique */
    body.admin-app .stat-card .stat-icon {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        background: var(--primary-50) !important;
        color: var(--primary) !important;
    }
    /* Variantes sémantiques */
    body.admin-app .stat-card.success .stat-icon {
        background: var(--success-light) !important;
        color: var(--success-dark) !important;
    }
    body.admin-app .stat-card.info .stat-icon {
        background: var(--info-light) !important;
        color: var(--info) !important;
    }
    body.admin-app .stat-card.warning .stat-icon {
        background: var(--warning-light) !important;
        color: var(--warning-dark) !important;
    }
    body.admin-app .stat-card.danger .stat-icon {
        background: var(--danger-light) !important;
        color: var(--danger-dark) !important;
    }

    /* Barre d'accent colorée en bas de la carte */
    body.admin-app .stat-card::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 0;
        height: 3px;
        background: var(--primary);
        border-radius: 2px 2px 0 0;
        opacity: 0.85;
    }
    body.admin-app .stat-card.success::after { background: var(--success); }
    body.admin-app .stat-card.info::after    { background: var(--info); }
    body.admin-app .stat-card.warning::after { background: var(--warning); }
    body.admin-app .stat-card.danger::after  { background: var(--danger); }

    /* ---------- CARDS STANDARD ---------- */
    body.admin-app .card {
        background: var(--white) !important;
        border: none !important;
        border-radius: 18px !important;
        box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04) !important;
        margin-bottom: 16px;
        overflow: hidden;
    }
    body.admin-app .card-header {
        padding: 16px 16px 12px !important;
        border-bottom: 1px solid var(--gray-100) !important;
        background: transparent !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
    }
    body.admin-app .card-title {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--gray-900) !important;
        letter-spacing: -0.01em;
        margin: 0 !important;
    }
    body.admin-app .card-body {
        padding: 16px !important;
    }
    body.admin-app .card-body.p-0 {
        padding: 0 !important;
    }

    /* Alerts card (dashboard) — retravail plus propre que gradient rouge vif */
    body.admin-app .card.card-danger {
        background: var(--white) !important;
        border: none !important;
        position: relative;
    }
    body.admin-app .card.card-danger::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 100%);
    }
    body.admin-app .card.card-danger .card-header {
        background: linear-gradient(to bottom, var(--danger-light) 0%, var(--white) 100%) !important;
        padding-top: 18px !important;
    }
    body.admin-app .card.card-danger .card-header i {
        color: var(--danger-dark);
    }
    body.admin-app .card.card-danger .card-title {
        color: var(--gray-900) !important;
    }
    body.admin-app .dashboard-alerts-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    body.admin-app .dashboard-alerts-badges .badge {
        font-size: 0.70rem !important;
        padding: 4px 10px !important;
        background: var(--white) !important;
        color: var(--gray-700) !important;
        border: 1px solid var(--gray-200);
    }

    /* ---------- BUTTONS ---------- */
    body.admin-app .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        border-radius: 12px !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        letter-spacing: -0.005em;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    body.admin-app .btn:active { transform: scale(0.97); }

    body.admin-app .btn-primary {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
        color: var(--white) !important;
        border: none !important;
        box-shadow: 0 4px 12px -3px rgba(67, 56, 202, 0.45);
    }
    body.admin-app .btn-secondary,
    body.admin-app .btn-outline {
        background: var(--white) !important;
        color: var(--gray-800) !important;
        border: 1.5px solid var(--gray-200) !important;
    }
    body.admin-app .btn-ghost {
        background: transparent !important;
        color: var(--gray-700) !important;
        border: none !important;
    }
    body.admin-app .btn-danger {
        background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%) !important;
        color: var(--white) !important;
        border: none !important;
        box-shadow: 0 4px 12px -3px rgba(239, 68, 68, 0.40);
    }
    body.admin-app .btn-sm {
        min-height: 44px !important;   /* cible tactile ≥44px (doctrine mobile) */
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }

    /* ---------- FAB (Floating Action Button) ----------
       NB: on n'utilise PAS la classe '.fab' qui collisionne avec le namespace
       Font Awesome (les <i class="fab fa-whatsapp"> seraient transformes en
       FAB violet geant). Utiliser '.btn-fab' ou '#fabPrimary' a la place. */
    body.admin-app .btn-fab,
    body.admin-app #fabPrimary {
        position: fixed !important;
        right: 16px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0));
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
        color: var(--white) !important;
        border: none !important;
        box-shadow: 0 10px 24px -4px rgba(67, 56, 202, 0.55), 0 4px 8px -2px rgba(67, 56, 202, 0.30);
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        z-index: 900;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    body.admin-app .btn-fab:active,
    body.admin-app #fabPrimary:active {
        transform: scale(0.92);
        box-shadow: 0 4px 12px -2px rgba(67, 56, 202, 0.40);
    }

    /* ---------- CHARTS ---------- */
    body.admin-app .charts-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    body.admin-app .charts-grid canvas {
        max-width: 100%;
        height: auto !important;
    }

    /* ---------- TABLES (keep scroll, refine look) ---------- */
    body.admin-app .card-body > .table-scroll-wrapper {
        margin: 0 -16px;
        border-radius: 0;
    }
    body.admin-app .card-body.p-0 > .table-scroll-wrapper {
        margin: 0;
    }
    body.admin-app table.table {
        font-size: 0.85rem !important;
    }
    body.admin-app table.table thead th {
        background: var(--gray-50) !important;
        color: var(--gray-500) !important;
        font-weight: 600 !important;
        font-size: 0.68rem !important;
        padding: 10px 12px !important;
        letter-spacing: 0.04em;
    }
    body.admin-app table.table tbody td {
        padding: 12px !important;
    }

    /* ---------- EMPTY STATES PREMIUM ---------- */
    body.admin-app .empty-state {
        padding: 48px 20px !important;
        text-align: center;
    }
    body.admin-app .empty-state .empty-state-icon,
    body.admin-app .empty-state > i:first-child {
        width: 72px !important;
        height: 72px !important;
        border-radius: 50% !important;
        background: var(--primary-50) !important;
        color: var(--primary) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem !important;
        margin: 0 auto 16px !important;
    }
    body.admin-app .empty-state-title,
    body.admin-app .empty-state strong {
        display: block;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--gray-900) !important;
        margin-bottom: 6px;
    }
    body.admin-app .empty-state-description,
    body.admin-app .empty-state p {
        font-size: 0.88rem !important;
        color: var(--gray-600) !important;
        line-height: 1.5;
        max-width: 280px;
        margin: 0 auto 16px;
    }

    /* ---------- BOTTOM NAV : supprimee (doublon avec hamburger topbar) ---------- */
    body.admin-app .bottom-nav {
        display: none !important;
    }
    /* Reduit le padding-bottom du body puisque la bottom-nav n'est plus la */
    body.admin-app {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    }
    /* Ancienne regle conservee pour compatibilite si la bottom-nav reapparait */
    body.admin-app .bottom-nav-fallback {
        background: var(--white) !important;
        border-top: 1px solid var(--gray-200) !important;
        box-shadow: 0 -4px 16px -4px rgba(15, 23, 42, 0.08);
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0)) !important;
    }
    body.admin-app .bottom-nav-item {
        min-height: 56px !important;
        padding: 8px 4px !important;
        color: var(--gray-500) !important;
        font-size: 0.70rem !important;
        font-weight: 500;
    }
    body.admin-app .bottom-nav-item i {
        font-size: 1.25rem;
    }
    body.admin-app .bottom-nav-item.active {
        color: var(--primary) !important;
        font-weight: 700;
    }
    body.admin-app .bottom-nav-item.active::before {
        content: "";
        position: absolute;
        top: 4px;
        width: 30px;
        height: 3px;
        background: var(--primary);
        border-radius: 999px;
    }

    /* ---------- ACTIVITIES STATS GRID ---------- */
    body.admin-app .activities-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    body.admin-app .activities-stats-grid .activity-stat-item {
        background: var(--gray-50);
        border-radius: 12px;
        padding: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* ---------- SIDEBAR refined ---------- */
    body.admin-app .sidebar {
        background: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, var(--primary) 100%) !important;
    }
    body.admin-app .sidebar-header {
        padding: 18px 18px 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px;
    }
    body.admin-app .sidebar-logo {
        display: flex !important;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }
    body.admin-app .sidebar-logo img {
        max-height: 44px !important;
        width: auto !important;
        max-width: 140px !important;
        object-fit: contain;
        background: var(--white);
        padding: 4px 8px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    /* Si l'image charge, on cache le fallback texte. Si elle echoue, l'image
       a display:none (via onerror) et le h1 prend le relais. */
    body.admin-app .sidebar-logo:has(img:not([style*="display: none"])) h1 {
        display: none;
    }
    body.admin-app .sidebar-logo h1 {
        color: var(--white) !important;
        font-size: 1.2rem !important;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0;
    }
    body.admin-app .btn-close-sidebar {
        flex: 0 0 auto;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,0.12) !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        color: var(--white) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
    }
    body.admin-app .btn-close-sidebar:active {
        background: rgba(255,255,255,0.22) !important;
    }
    body.admin-app .sidebar .nav-section-title {
        color: rgba(255,255,255,0.55) !important;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 16px 20px 6px !important;
    }
    body.admin-app .sidebar .nav-item {
        padding: 10px 20px !important;
        color: rgba(255,255,255,0.82) !important;
        border-radius: 0 !important;
        font-size: 0.92rem;
        font-weight: 500;
        display: flex !important;
        align-items: center;
        gap: 12px;
        min-height: 44px;
    }
    body.admin-app .sidebar .nav-item:hover,
    body.admin-app .sidebar .nav-item:active {
        background: rgba(255,255,255,0.08) !important;
        color: var(--white) !important;
    }
    body.admin-app .sidebar .nav-item.active {
        background: rgba(255,255,255,0.15) !important;
        color: var(--white) !important;
        font-weight: 700;
        border-left: 3px solid var(--white);
    }
    body.admin-app .sidebar .nav-item-icon {
        width: 20px;
        text-align: center;
        opacity: 0.9;
    }
    body.admin-app .sidebar-user {
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0)) !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        background: rgba(0,0,0,0.15);
    }
    body.admin-app .sidebar .user-name {
        color: var(--white) !important;
        font-weight: 600;
    }
    body.admin-app .sidebar .user-role {
        color: rgba(255,255,255,0.55) !important;
        font-size: 0.78rem;
    }

    /* ---------- FIN REFONTE ---------- */
}

/* =================================================================
   NO HORIZONTAL SCROLL — LOCKDOWN 2026-04-25
   Aucune card, aucun container ne doit dépasser le viewport mobile.
   Les tables se transforment en cards stackées (une ligne = une card).
   ================================================================= */

@media (max-width: 768px) {

    /* ---------- Cibles tactiles ≥44px (audit A11Y-4) ----------
       Liens contact des cartes familles (tél/email, ~20px empilés serrés),
       cases à cocher des listes, hamburger. */
    body.admin-app .family-card-contact a,
    body.admin-app .family-card a[href^="tel:"],
    body.admin-app .family-card a[href^="mailto:"],
    body.admin-app a.action-btn,
    body.admin-app .contact-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    body.admin-app input[type="checkbox"] {
        min-width: 22px;
        min-height: 22px;
    }
    body.admin-app .mobile-menu-btn,
    body.admin-app #mobileMenuBtn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* ---------- HARD CAP sur tous les containers ---------- */
    body.admin-app,
    body.admin-app .app-container,
    body.admin-app .main-content,
    body.admin-app .page-content,
    body.admin-app .page-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* ---------- CARDS : jamais de débordement ---------- */
    body.admin-app .card,
    body.admin-app .stat-card,
    body.admin-app .family-card,
    body.admin-app .planning-row,
    body.admin-app .attendance-session-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Les contenus long (email, URL, texte sans espace) cassent au lieu de déborder */
    body.admin-app .card a,
    body.admin-app .card .email,
    body.admin-app .card .phone,
    body.admin-app .card code,
    body.admin-app .card pre,
    body.admin-app .stat-card * {
        overflow-wrap: anywhere !important;
        word-break: break-word;
        min-width: 0;
    }

    /* Grids à l'intérieur des cards : wrap obligatoire */
    body.admin-app .card .card-header,
    body.admin-app .card .card-actions,
    body.admin-app .card .btn-group {
        flex-wrap: wrap !important;
        max-width: 100%;
    }
    body.admin-app .card .card-actions > * {
        flex-shrink: 1 !important;
        min-width: 0;
    }

    /* ---------- TABLES → CARDS STACKÉES (zéro scroll) ---------- */
    body.admin-app .card .table-scroll-wrapper {
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }
    body.admin-app .card table.table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse;
    }
    body.admin-app .card table.table thead {
        display: none !important;  /* Header invisible, on utilise des labels par cellule */
    }
    body.admin-app .card table.table tbody,
    body.admin-app .card table.table tbody tr,
    body.admin-app .card table.table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.admin-app .card table.table tbody tr {
        background: var(--white);
        border: 1px solid var(--gray-100) !important;
        border-radius: 14px !important;
        margin: 0 0 10px 0 !important;
        padding: 12px 14px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }
    body.admin-app .card table.table tbody tr:hover,
    body.admin-app .card table.table tbody tr:active {
        background: var(--primary-50);
    }
    body.admin-app .card table.table tbody td {
        padding: 8px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--gray-100) !important;
        display: block !important;
        font-size: 0.9rem;
        color: var(--gray-800);
        text-align: left;
        white-space: normal !important;
        word-break: break-word;
    }
    body.admin-app .card table.table tbody td:last-child {
        border-bottom: none !important;
    }
    /* Label en haut : LABEL (gris uppercase) + VALUE (en dessous) */
    body.admin-app .card table.table tbody td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--gray-500);
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 4px;
    }
    /* Si une td n'a pas de data-label, masquer le label vide */
    body.admin-app .card table.table tbody td:not([data-label])::before,
    body.admin-app .card table.table tbody td[data-label=""]::before {
        display: none;
    }

    /* Colspan="N" placeholders (Chargement, Aucune donnée, empty-state) */
    body.admin-app .card table.table tbody td[colspan] {
        display: block !important;
        text-align: center !important;
        color: var(--gray-500);
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
    }
    body.admin-app .card table.table tbody td[colspan]::before {
        display: none;
    }
    /* Empty state container hors-table (evite les artefacts table->card) */
    body.admin-app .page-empty-container {
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    body.admin-app .page-empty-container.hidden { display: none !important; }
    body.admin-app .page-empty-container .empty-state {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Boutons d'action dans tables : en ligne compacte à droite, wrap si besoin */
    body.admin-app .card table.table tbody td .btn,
    body.admin-app .card table.table tbody td button {
        min-height: 44px !important;   /* cible tactile (doctrine mobile) */
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    /* ---------- IMAGES ---------- */
    body.admin-app img,
    body.admin-app canvas,
    body.admin-app svg {
        max-width: 100% !important;
        height: auto;
    }

    /* ---------- IFRAME (si présent) ---------- */
    body.admin-app iframe {
        max-width: 100% !important;
    }

    /* ---------- INPUTS : pas de débordement de la card parente ---------- */
    body.admin-app .card input,
    body.admin-app .card select,
    body.admin-app .card textarea,
    body.admin-app .card .form-input,
    body.admin-app .card .form-select,
    body.admin-app .card .form-control {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---------- LIST-BASED content (family cards, planning rows) ---------- */
    body.admin-app .family-card-body,
    body.admin-app .family-contact-info {
        max-width: 100%;
        overflow: hidden;
    }

    /* Garde-fou global : aucun élément ne doit dépasser le viewport */
    body.admin-app * {
        max-width: 100vw;
    }
}

/* =================================================================
   FAMILLES — refonte card 2026-04-25
   Clean white card, avatar with initials, list-style children,
   consistent action row.
   ================================================================= */

@media (max-width: 1024px) {
    /* Card container : remplace le bandeau bleu degrade par une vraie carte propre */
    body.page-families .family-card {
        background: var(--white) !important;
        /* Sans bord, la carte se confondait avec le fond : « trop claire ».
           Le texte passait pourtant AA partout — ce qui manquait n'était pas
           la couleur des mots mais l'arête de l'objet. */
        border: 1px solid var(--gray-200) !important;
        border-radius: 18px !important;
        box-shadow: 0 6px 16px -6px rgba(15,23,42,0.14), 0 2px 5px -2px rgba(15,23,42,0.08) !important;
        padding: 0 !important;
        margin: 0 0 14px !important;
        overflow: hidden;
        display: block !important;
    }
    body.page-families .family-card:active {
        transform: scale(0.995);
    }

    /* HEADER : avatar + nom + chip statut a droite */
    body.page-families .family-card-header {
        background: var(--white) !important;
        padding: 14px 16px 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-bottom: 1px solid var(--gray-200);
        position: relative;
    }
    body.page-families .family-card-header::before {
        content: attr(data-initials);
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }
    body.page-families .family-card-title {
        flex: 1;
        min-width: 0;
        color: var(--gray-900) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0;
        line-height: 1.2;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /* L'icone fa-users initiale du title : on la masque (avatar via ::before suffit) */
    body.page-families .family-card-title > i.fa-users,
    body.page-families .family-card-title > i.fas {
        display: none !important;
    }
    body.page-families .family-card-title span {
        color: var(--gray-900) !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
    }

    /* BODY : contact + enfants */
    body.page-families .family-card-body {
        padding: 12px 16px 4px !important;
        display: block !important;
    }

    /* Contact: discret, icones colorees subtiles */
    body.page-families .family-contact-info {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 10px;
    }
    body.page-families .contact-row {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 4px 0 !important;
        font-size: 0.85rem !important;
        color: var(--gray-700) !important;
        min-width: 0;
    }
    body.page-families .contact-row > i.fas {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        font-size: 0.78rem;
        color: var(--primary);
        opacity: 0.85;
        text-align: center;
        line-height: 20px;
    }
    body.page-families .contact-row a {
        color: var(--gray-700) !important;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1;
    }
    body.page-families .contact-row a:hover { color: var(--primary) !important; }
    body.page-families .country-badge {
        flex: 0 0 auto;
        background: var(--gray-200) !important;
        color: var(--gray-700) !important;
        font-size: 0.74rem !important;
        padding: 2px 6px !important;
        border-radius: 5px !important;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Children list : items propres sans nested cards */
    body.page-families .children-list {
        display: flex !important;
        flex-direction: column;
        gap: 6px !important;
        margin-top: 8px !important;
        padding-top: 10px !important;
        border-top: 1px solid var(--gray-200) !important;
    }
    body.page-families .child-row {
        background: var(--gray-50) !important;
        border-radius: 12px !important;
        border-left: none !important;
        padding: 10px 12px !important;
        display: flex !important;
        flex-direction: column;
        gap: 6px;
    }
    body.page-families .child-row-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    body.page-families .child-name-label {
        color: var(--gray-900) !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
    }
    body.page-families .child-amount-badge {
        background: var(--primary-50) !important;
        color: var(--primary-dark) !important;
        padding: 4px 11px !important;
        border-radius: 999px !important;
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        white-space: nowrap;
        /* Un contour : sur fond blanc, un aplat à 8 % ne dessine rien. */
        border: 1px solid rgba(67, 56, 202, .22);
    }
    body.page-families .child-activities-row {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
    }
    body.page-families .activity-badge-small {
        background: var(--gray-50) !important;
        color: var(--gray-800) !important;
        font-size: 0.80rem !important;
        font-weight: 600;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        border: 1px solid var(--gray-300);
    }
    body.page-families .activity-badge-small.suspended {
        opacity: 0.5;
        text-decoration: line-through;
    }

    /* FOOTER : statut + total */
    body.page-families .family-card-footer {
        background: transparent !important;
        padding: 10px 16px 6px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-top: 1px solid var(--gray-200) !important;
    }
    body.page-families .status-badge {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        padding: 5px 12px !important;
        border-radius: 999px !important;
        text-transform: none !important;
    }
    /* Date du dernier règlement : 11,5 px en gris, noyée dans le pied. */
    body.page-families .last-pay {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
    }
    /* Coordonnées : elles se lisent au téléphone, à bout de bras. */
    body.page-families .contact-row,
    body.page-families .contact-row a {
        font-size: 0.85rem !important;
        color: var(--gray-800) !important;
    }
    body.page-families .status-badge.paid,
    body.page-families .status-badge.success {
        background: var(--success-light) !important;
        color: var(--success-dark) !important;
    }
    body.page-families .status-badge.pending,
    body.page-families .status-badge.warning {
        background: var(--warning-light) !important;
        color: var(--warning-dark) !important;
    }
    body.page-families .status-badge.overdue,
    body.page-families .status-badge.danger {
        background: var(--danger-light) !important;
        color: var(--danger-dark) !important;
    }
    body.page-families .total-amount {
        font-weight: 800 !important;
        font-size: 1.1rem !important;
        color: var(--gray-900) !important;
        letter-spacing: -0.02em;
    }

    /* ACTIONS : on garde le rendu desktop (gradients propres) et on bump
       juste la taille a 44px pour le tactile (vs 36px desktop). */
    body.page-families .family-card-actions {
        padding: 10px 14px 14px !important;
        display: flex !important;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
        /* Sept boutons de 44px ne tiennent pas sur une rangee de 303px : a
           360px (Samsung A, iPhone SE) le bouton Supprimer sortait de la
           carte et se faisait rogner. On laisse passer a la ligne plutot que
           de reduire des cibles tactiles deja au minimum. Au-dessus de 380px
           rien ne change : tout tient sur une rangee. */
        flex-wrap: wrap;
        row-gap: 8px;
    }
    body.page-families .family-card-actions > .action-btn,
    body.page-families .family-card-actions > a.action-btn,
    body.page-families .family-card-actions > button.action-btn {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
    }
    body.page-families .family-card-actions .action-btn:active {
        transform: scale(0.92);
    }

    /* Search bar dans la card-actions header de la page */
    body.page-families .card-actions {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    body.page-families .card-actions input,
    body.page-families .card-actions select,
    body.page-families .card-actions .btn {
        width: 100% !important;
    }

    /* Card-actions header generique : stack column avec inputs et boutons full-width */
    body.admin-app .card-header .card-actions {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100%;
    }
    body.admin-app .card-header .card-actions input,
    body.admin-app .card-header .card-actions select,
    body.admin-app .card-header .card-actions .btn {
        width: 100% !important;
    }
    /* card-header lui-meme : stack column si trop d'elements */
    body.admin-app .card-header {
        flex-wrap: wrap !important;
    }

    /* Page-payments KPIs : 4 cards en 2x2 avec valeurs en monnaie qui rentrent */
    body.page-payments .stats-grid {
        margin-bottom: 14px !important;
    }
}

/* =================================================================
   ALERTS KPI SECTION (dashboard) — mobile
   ================================================================= */

@media (max-width: 1024px) {
    body.admin-app .alerts-kpi-section {
        margin: 18px 0 22px;
    }
    body.admin-app .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--gray-700);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0 0 12px;
        padding: 0 2px;
    }
    body.admin-app .section-title i {
        color: var(--danger);
        font-size: 1rem;
    }
    body.admin-app .alerts-kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    @media (max-width: 480px) {
        body.admin-app .alerts-kpi-grid {
            grid-template-columns: 1fr 1fr;
        }
        /* La 3e card (total) prend toute la largeur sur petits écrans */
        body.admin-app .alerts-kpi-grid > .stat-card:nth-child(3) {
            grid-column: span 2;
        }
    }
    body.admin-app .alerts-kpi-grid .stat-card {
        text-decoration: none;
        cursor: pointer;
        min-height: 120px;
        padding: 14px 12px 12px !important;
    }
    body.admin-app .alerts-kpi-grid .stat-card .stat-value {
        font-size: 1.5rem !important;
    }
    body.admin-app .alerts-kpi-grid .stat-card .stat-label {
        font-size: 0.74rem !important;
        margin-top: 2px !important;
    }
    body.admin-app .alerts-kpi-grid .stat-card .stat-delta {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        margin-top: 4px !important;
    }
    body.admin-app .alerts-kpi-grid .stat-card .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        top: 12px;
        right: 12px;
    }
    body.admin-app .text-warning { color: var(--warning-dark) !important; }
    body.admin-app .text-danger  { color: var(--danger-dark)  !important; }

    /* État loading des KPI */
    body.admin-app .skeleton-text {
        opacity: 0.5;
        animation: pulse-text 1.4s ease-in-out infinite;
    }
    @keyframes pulse-text {
        50% { opacity: 0.25; }
    }
}

/* Desktop : la grille reste 3 colonnes mais avec plus d'espace */
@media (min-width: 1025px) {
    .alerts-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-700);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0 0 14px;
    }
    .section-title i { color: var(--danger); }
    .section-title.section-title-plain i { color: var(--primary); }
    .alerts-kpi-grid .stat-card {
        text-decoration: none;
        cursor: pointer;
    }
    .dashboard-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
        color: var(--white);
        border-radius: 20px;
        padding: 24px 28px;
        margin-bottom: 24px;
        box-shadow: var(--shadow-md);
    }
    .dashboard-greeting { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; }
    .dashboard-date { font-size: 0.95rem; opacity: 0.85; margin: 0; text-transform: capitalize; }
    .dashboard-hero-rate { text-align: center; }
    .hero-rate-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
    .hero-rate-label { font-size: 0.78rem; opacity: 0.85; }
    .quick-actions-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }
    .quick-action {
        background: var(--white);
        border-radius: 16px;
        padding: 14px;
        text-align: center;
        text-decoration: none;
        color: var(--gray-700);
        box-shadow: var(--shadow-sm);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
    .qa-icon {
        display: inline-flex;
        width: 48px; height: 48px;
        border-radius: 14px;
        align-items: center; justify-content: center;
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    .qa-label { display: block; font-size: 0.85rem; font-weight: 600; }
    .dashboard-section { margin-bottom: 28px; }
}

/* =================================================================
   DASHBOARD HERO + QUICK ACTIONS — mobile
   ================================================================= */

@media (max-width: 1024px) {

    /* ----- HERO greeting card (gradient violet) ----- */
    body.page-dashboard .dashboard-hero {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
        color: var(--white) !important;
        border-radius: 20px;
        padding: 18px 18px;
        margin: 4px 0 18px;
        box-shadow: 0 8px 22px -8px rgba(67, 56, 202, 0.45);
        position: relative;
        overflow: hidden;
    }
    body.page-dashboard .dashboard-hero::before {
        content: "";
        position: absolute;
        top: -40%; right: -20%;
        width: 220px; height: 220px;
        background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
        pointer-events: none;
    }
    body.page-dashboard .dashboard-hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
    body.page-dashboard .dashboard-greeting {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        margin: 0 0 2px !important;
        color: var(--white) !important;
        letter-spacing: -0.02em;
    }
    body.page-dashboard .dashboard-date {
        font-size: 0.78rem !important;
        opacity: 0.88;
        margin: 0 !important;
        color: var(--white) !important;
        text-transform: capitalize;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.page-dashboard .dashboard-hero-rate {
        flex: 0 0 auto;
        background: rgba(255,255,255,0.18);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.25);
        padding: 10px 14px;
        border-radius: 14px;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    body.page-dashboard .hero-rate-value {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--white) !important;
    }
    body.page-dashboard .hero-rate-label {
        font-size: 0.62rem !important;
        opacity: 0.85;
        line-height: 1.15;
        margin-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--white) !important;
    }

    /* ----- QUICK ACTIONS — grid 5 cols, NO horizontal scroll ----- */
    body.page-dashboard .quick-actions-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        margin: 0 0 18px;
        padding: 0;
        max-width: 100%;
        overflow: visible !important;
    }
    body.page-dashboard .quick-action {
        background: var(--white);
        border-radius: 14px;
        padding: 10px 4px;
        text-align: center;
        text-decoration: none;
        color: var(--gray-700);
        box-shadow: 0 2px 6px -2px rgba(15,23,42,0.08);
        transition: transform 0.15s, box-shadow 0.15s;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-height: 86px;
        min-width: 0;
        max-width: 100%;
    }
    body.page-dashboard .quick-action:active {
        transform: scale(0.96);
        box-shadow: var(--shadow-sm);
    }
    body.page-dashboard .qa-icon {
        width: 36px; height: 36px;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        flex-shrink: 0;
    }
    body.page-dashboard .qa-label {
        font-size: 0.65rem !important;
        font-weight: 600;
        color: var(--gray-700) !important;
        line-height: 1.15;
        text-align: center;
        word-break: break-word;
        hyphens: auto;
    }
    /* Très petits écrans : grid 4 cols, le 5e wrap (Planning passe ligne 2) */
    @media (max-width: 380px) {
        body.page-dashboard .quick-actions-row {
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
    }

    /* ----- DASHBOARD SECTIONS ----- */
    body.page-dashboard .dashboard-section {
        margin: 0 0 22px;
    }
    body.page-dashboard .section-title.section-title-plain {
        color: var(--gray-700) !important;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0 0 10px;
        padding: 0 2px;
    }
    body.page-dashboard .section-title.section-title-plain i {
        color: var(--primary) !important;
        font-size: 0.95rem;
    }

    /* ----- ACTIVITIES STATS GRID — list mobile ----- */
    body.page-dashboard .activities-stats-grid {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }
    body.page-dashboard .activities-stats-grid .activity-stat-item,
    body.page-dashboard .activities-stats-grid > div {
        background: var(--gray-50);
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-size: 0.88rem;
    }

    /* ----- mt-3 utility ----- */
    body.page-dashboard .mt-3 { margin-top: 14px !important; }

    /* =========================================================
       BASELINE UNIVERSEL — applique le doctrine mobile MMAS à
       toutes les pages admin, y compris celles sans override
       per-page (activities, salles, creneaux, depenses, corbeille,
       summer, support, import-bank, import-tracker, audit).
       ========================================================= */

    /* Pas de scroll horizontal parasite */
    body.admin-app,
    body.admin-app .page-content,
    body.admin-app main {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Touch targets WCAG 2.5.5 — 44x44 minimum sur mobile.
       Les exceptions (chips, badges, icônes inline) restent libres. */
    body.admin-app button,
    body.admin-app .btn,
    body.admin-app a.btn,
    body.admin-app [role="button"],
    body.admin-app .action-btn,
    body.admin-app input[type="submit"],
    body.admin-app input[type="button"] {
        min-height: 44px;
    }

    /* Inputs lisibles + 16px = pas de zoom iOS automatique au focus */
    body.admin-app input[type="text"],
    body.admin-app input[type="email"],
    body.admin-app input[type="tel"],
    body.admin-app input[type="number"],
    body.admin-app input[type="search"],
    body.admin-app input[type="password"],
    body.admin-app input[type="date"],
    body.admin-app input[type="month"],
    body.admin-app select,
    body.admin-app textarea {
        font-size: 16px;
        min-height: 44px;
    }

    /* Tables non-responsive → forcer un scroll container plutôt
       qu'un débordement viewport. Page X qui ajoute son propre
       traitement (instructors → cards) reste prioritaire. */
    body.admin-app .table,
    body.admin-app table:not(.calendar-table):not(.planning-grid) {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards full-width par défaut pour les pages sans grid mobile */
    body.admin-app .card {
        width: 100%;
        max-width: 100%;
    }

    /* =========================================================
       PAGE-SUMMER — onglets scrollables + grilles 1 col
       ========================================================= */
    body.page-summer .summer-tabs {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    body.page-summer .summer-tabs::-webkit-scrollbar { display: none; }
    body.page-summer .summer-tab {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
        font-size: 0.85rem;
    }
    body.page-summer .summer-tarif-grid,
    body.page-summer .summer-activities-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    body.page-summer .summer-config-summary {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-summer .period-chip-group.period-days {
        grid-template-columns: 1fr 1fr;
    }
    body.page-summer .period-chip {
        min-width: 0;
        width: 100%;
    }

    /* =========================================================
       PAGE-ACTIVITIES — cards full-width + min-height
       ========================================================= */
    body.page-activities .activities-grid,
    body.page-activities .activity-card-modern,
    body.page-activities .activity-card {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* =========================================================
       PAGE-CORBEILLE / PAGE-AUDIT / PAGE-LOGS — listes verticales
       ========================================================= */
    body.page-corbeille .deletion-row,
    body.page-audit .audit-row,
    body.page-import-tracker .tracker-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px;
        border-bottom: 1px solid var(--gray-200);
    }

    /* =========================================================
       PAGE-SUPPORT — bulles de chat full-width
       ========================================================= */
    body.page-support .support-message,
    body.page-support .support-bubble {
        max-width: 100% !important;
    }

    /* =========================================================
       PAGE-DEPENSES / PAGE-IMPORT-BANK — tableaux scrollables
       (le baseline universel les rend déjà block + overflow-x:auto
       mais on force le padding pour compacter sur mobile)
       ========================================================= */
    body.page-depenses .table th,
    body.page-depenses .table td,
    body.page-import-bank .table th,
    body.page-import-bank .table td {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    /* =========================================================
       FILTRES — toutes les .filters-grid en 1 colonne sur mobile
       pour pas couper les inputs (depenses, support, etc.)
       ========================================================= */
    body.admin-app .filters-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    body.admin-app .filters-grid > * {
        width: 100%;
        max-width: 100%;
    }

    /* =========================================================
       PAGE-DEPENSES — répartition catégories en 2 col
       ========================================================= */
    body.page-depenses .dep-category-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }
    body.page-depenses .dep-category-grid > div {
        padding: 10px;
        font-size: 0.85rem;
    }

    /* =========================================================
       PAGE-SUPPORT — liste threads en cards verticales
       ========================================================= */
    body.page-support .support-thread,
    body.page-support .support-thread-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px;
        border-bottom: 1px solid var(--gray-200);
    }

    /* =========================================================
       PAGE-AUDIT — KPIs grid 8 items → 2 colonnes mobile au lieu de 4
       (stats-grid existante en 2 col par défaut, mais 8 KPIs = beaucoup)
       ========================================================= */
    body.page-audit .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    body.page-audit .stat-card { padding: 10px !important; }
    body.page-audit .stat-card .stat-value { font-size: 1.25rem !important; }
    body.page-audit .stat-card .stat-label { font-size: 0.75rem !important; }

    /* =========================================================
       PAGE-IMPORT-TRACKER — préviews bilingues empilées
       ========================================================= */
    body.page-import-tracker .preview-grid,
    body.page-import-tracker .tracker-stats {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* =========================================================
       SUMMER — Pointage mobile (animateurs sur smartphone)
       Cartes pleine largeur, boutons P/A/R/E ≥48px, sticky compteur,
       barre filtres compactée. Aucun défilement horizontal.
       ========================================================= */
    body.page-summer #summerSection-pointage .filters-card { display: none !important; }
    body.page-summer #summerSection-pointage .card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    body.page-summer #summerSection-pointage .att-filter-bar {
        padding: 10px !important;
        gap: 8px !important;
    }
    body.page-summer #summerSection-pointage .att-filter-bar input[type="text"] {
        flex: 1 0 100% !important;
        min-height: 44px;
        font-size: 16px !important;
    }
    body.page-summer #summerSection-pointage .att-filter-bar select {
        flex: 1 0 calc(50% - 4px) !important;
        min-height: 44px;
        font-size: 14px !important;
    }
    body.page-summer #summerSection-pointage .attendance-list {
        gap: 10px !important;
        padding: 10px !important;
    }
    body.page-summer #summerSection-pointage .attendance-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
        border-left-width: 6px !important;
    }
    body.page-summer #summerSection-pointage .attendance-item .student-name {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
    }
    body.page-summer #summerSection-pointage .attendance-actions {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    body.page-summer #summerSection-pointage .btn-status {
        width: 100% !important;
        height: 52px !important;
        font-size: 1.2rem !important;
        font-weight: 700;
    }
    body.page-summer #summerSection-pointage .attendance-view-summary {
        position: sticky;
        top: 56px;
        z-index: 5;
        background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.92));
        backdrop-filter: blur(6px);
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--gray-200);
    }

    /* =========================================================
       SWAL → BOTTOM SHEETS (doctrine mobile du projet)
       Les modals SweetAlert2 (encaissement, upgrade, édition, bulk)
       avaient une largeur fixe 500-640px — inutilisables à 390px.
       On les convertit en bottom sheets plein écran : c'est le geste
       quotidien n°1 de l'assistante (encaisser un paiement).
       ========================================================= */
    .swal2-container {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .swal2-popup {
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        padding-bottom: calc(1em + env(safe-area-inset-bottom)) !important;
        max-height: 92vh;
        overflow-y: auto;
    }
    /* Drag handle visuel en haut de la sheet */
    .swal2-popup::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: var(--radius-full);
        background: var(--gray-300);
        margin: 0 auto 10px;
    }
    /* Boutons confirm/cancel : pleine largeur, 48px, empilés */
    .swal2-actions {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 8px;
        padding: 0 4px;
    }
    .swal2-actions .swal2-confirm,
    .swal2-actions .swal2-cancel,
    .swal2-actions .swal2-deny {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        font-size: 1rem !important;
    }
    /* Pills mode de paiement (cash-in + bulk) : 1 colonne tactile */
    .swal2-popup .cashin-pills,
    .swal2-popup #bulkPayPills {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .swal2-popup .cashin-pill {
        min-height: 56px !important;
    }

    /* Boutons d'action des tables : 44px (doctrine touch targets) */
    body.admin-app .table .btn-sm {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    body.admin-app .table td {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* ==========================================================================
   EN-TÊTE DE CARTE SUR TÉLÉPHONE — le bouton ne mange plus le titre
   Mesuré sur la page Paiements en 412 px : le bouton « Nouveau » vaut
   flex:1 1 auto et .card-actions width:100%, si bien qu'il occupait 287 des
   384 px de l'en-tête ; le titre, réduit à 57 px, sortait coupé par
   l'overflow de la carte — « Paiements » se lisait « Paiemer ».
   L'en-tête est volontairement en nowrap (refonte.css) pour qu'un lien
   « Voir tout » reste sur la ligne du titre : on ne touche pas à ça. On rend
   simplement au bouton sa largeur naturelle — les deux tiennent alors sur la
   ligne, et le titre reste lisible en entier.
   ========================================================================== */
@media (max-width: 768px) {
    body.admin-app .card > .card-header > .card-actions {
        width: auto !important;
        flex: 0 1 auto !important;
        min-width: 0;
        justify-content: flex-end;
    }
    body.admin-app .card > .card-header > .card-actions > .btn {
        flex: 0 0 auto !important;
    }
    body.admin-app .card > .card-header > .card-title,
    body.admin-app .card > .card-header > .card-header-left {
        min-width: 0;
    }
}

/* ==========================================================================
   EN-TÊTE DE CARTE : deux contrôles ne tiennent pas à côté du titre
   « Liste des familles » + « Nouvelle famille » + le menu outils dépassaient
   la carte en 390 px : le libellé sortait tronqué (« Nouvelle famil ») et le
   bouton débordait du cadre.
   L'en-tête reste en nowrap par principe (refonte.css) pour qu'un simple lien
   « Voir tout » ne s'exile pas sur sa propre ligne. Mais dès qu'il porte une
   vraie action — un .btn-primary — le bloc d'actions prend sa ligne.
   ========================================================================== */
@media (max-width: 768px) {
    body.admin-app .card > .card-header:has(> .card-actions .btn-primary) {
        flex-wrap: wrap !important;
        row-gap: var(--space-3);
    }
    body.admin-app .card > .card-header:has(> .card-actions .btn-primary) > .card-actions {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: flex-start;
    }
    /* Le menu outils est enveloppé dans un div pour son positionnement :
       sans ça, l'enveloppe s'étire et pousse le reste. */
    body.admin-app .card > .card-header > .card-actions > div {
        flex: 0 0 auto;
    }
    body.admin-app .card > .card-header > .card-actions > .btn {
        flex: 0 1 auto !important;
        min-width: 0;
    }
}

/* =========================================================
   Nouveau paiement — lignes d'activités par mois (≤768px)

   La ligne alignait sur UNE seule rangée : case, enfant + matière,
   sélecteur de séances et montant. À 390px le contenu réclamait 497px
   pour 308px disponibles : le bloc partait en défilement horizontal et
   les libellés se chevauchaient. On laisse la rangée passer à la ligne.
   ========================================================= */
@media (max-width: 768px) {
    /* Pas de zone de defilement imbriquee sur telephone : la feuille du bas
       defile deja. Le plafond de 220px cachait des activites. */
    body.admin-app .month-block .month-activities {
        max-height: none;
        overflow-y: visible;
    }
    body.admin-app .month-block .activity-row {
        flex-wrap: wrap;
        row-gap: var(--space-1);
        align-items: flex-start;
    }
    /* Sans min-width:0, un nom long refuse de se comprimer et pousse
       tout le reste hors du cadre. */
    body.admin-app .month-block .activity-info {
        flex: 1 1 60%;
        min-width: 0;
    }
    body.admin-app .month-block .activity-child,
    body.admin-app .month-block .activity-name {
        overflow-wrap: anywhere;
    }
    /* Séances et montant descendent sur une 2e rangée, alignés sous le
       texte. Le sélecteur porte un style inline : d'où le !important. */
    body.admin-app .month-block .activity-prorata {
        margin-left: 26px !important;
        order: 3;
        /* La regle mobile « champs pleine largeur » etirait ce petit
           selecteur a 292px et faisait deborder la ligne. Il n'affiche
           qu'un « 4/4 » : sa largeur naturelle suffit. */
        width: auto !important;
        max-width: 45%;
        flex: 0 0 auto;
    }
    body.admin-app .month-block .activity-amount {
        order: 4;
        margin-left: auto;
        align-self: center;
    }
}


/* =================================================================
   CANDIDATURES — la barre d'outils occupait tout l'écran
   Trois cartes empilées, sept pastilles sur deux rangées, un champ de
   recherche et quatre boutons : la première candidature arrivait sous
   la ligne de flottaison, alors que c'est le sujet de la page.
   ================================================================= */

@media (max-width: 768px) {

    /* Les trois chiffres côte à côte, sans icone : ils se lisent d'un
       coup d'œil et rendent la place aux candidatures. */
    body.page-candidatures .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }
    body.page-candidatures .stat-card {
        min-height: 0 !important;
        padding: 12px 10px !important;
        border-radius: 14px !important;
    }
    body.page-candidatures .stat-card .stat-icon { display: none !important; }
    body.page-candidatures .stat-card .stat-value {
        font-size: clamp(1.1rem, 6vw, 1.6rem) !important;
    }
    body.page-candidatures .stat-card .stat-label {
        font-size: 0.72rem !important;
        line-height: 1.2;
    }
    /* Une règle générale coupe les mots n'importe où dans les cartes de
       chiffres (`.stat-card *`, overflow-wrap: anywhere) pour que les
       montants longs ne débordent pas. Ici les libellés sont des mots
       courts : la coupure donnait « Non ouverte / s ». On la lève, et on
       rend toute la largeur de la carte au contenu. */
    body.page-candidatures .stat-card { align-items: stretch !important; }
    body.page-candidatures .stat-card .stat-content { width: 100%; }
    body.page-candidatures .stat-card .stat-value,
    body.page-candidatures .stat-card .stat-label {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* La barre redevient trois temps empilés : chercher, filtrer, agir. */
    body.page-candidatures .cand-barre .card-body {
        display: flex !important;
        flex-direction: column;
        /* Le style en ligne porte `flex-wrap: wrap`, ecrit pour la rangee du
           bureau. Dans une COLONNE, `wrap` empile en colonnes paralleles : la
           largeur d'une ligne n'est plus celle de la carte mais celle de son
           element le plus large, et tous les autres s'etirent dessus. La
           rangee de filtres, large de 695 px, faisait ainsi deborder le
           bouton Outils de 28 px hors de la carte. */
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 12px !important;
    }
    /* Le champ reste après les filtres dans le balisage — c'est l'ordre qui
       garde la barre sur une seule ligne au bureau. Ici on le remonte : sur
       téléphone, chercher passe avant filtrer. */
    body.page-candidatures .cand-chercher {
        order: -1;
        width: 100% !important;
        min-height: 44px;
        margin: 0 0 10px !important;
        /* Le champ porte `flex: 1 1 220px` en style en ligne, ecrit pour la
           rangee du bureau. Dans cette colonne, 220px devient une HAUTEUR et
           `grow` l'etire : le champ faisait 220 px de haut. */
        flex: 0 0 auto !important;
        height: auto;
    }

    /* Les filtres tiennent sur une seule ligne qui défile. La pastille
       suivante reste à moitié visible au bord : c'est ce qui dit qu'il y
       en a d'autres. Les marges négatives la font partir du bord de la
       carte, sinon le défilement semble coupé. */
    body.page-candidatures .cand-filtres {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* Pas de marge negative pour aller bord a bord : elle depend du
           rembourrage de la carte, qui n'est pas fixe ici, et deborde des
           qu'il change. La pastille suivante reste a moitie visible de toute
           facon — c'est elle qui dit qu'on peut faire defiler. */
        width: 100%;
        min-width: 0;
        padding: 2px 0;
    }
    body.page-candidatures .cand-filtres::-webkit-scrollbar { display: none; }
    body.page-candidatures .cand-filtre {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    /* Relever, analyser, nettoyer : des gestes d'entretien, qu'on fait
       rarement. Ils se replient derrière un bouton plutôt que d'occuper
       deux rangées en permanence. */
    body.page-candidatures .cand-outils {
        display: block !important;
        margin-top: 10px;
    }
    body.page-candidatures .cand-outils-bascule {
        display: flex !important;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    body.page-candidatures .cand-chevron { transition: transform 0.2s ease; }
    body.page-candidatures .cand-outils.est-ouvert .cand-chevron {
        transform: rotate(180deg);
    }
    body.page-candidatures .cand-actions { display: none !important; }
    body.page-candidatures .cand-outils.est-ouvert .cand-actions {
        display: grid !important;
        gap: 8px;
        margin-top: 8px;
    }
    body.page-candidatures .cand-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-candidatures .cand-chevron { transition: none; }
}