/* ════════════════════════════════════════════════════════════════════
 *  SIGP MOBILE FIRST — Responsive global
 *  ───────────────────────────────────────────────────────────────────
 *  Cascade qui s'applique à TOUTES les vues SIGP pour rendre
 *  l'expérience mobile/tablette correcte sans réécrire chaque vue.
 *
 *  Breakpoints :
 *   • smartphone  : < 576px
 *   • tablette    : 576-991px
 *   • desktop     : >= 992px
 * ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
 *  GÉNÉRAL — éviter overflow horizontal sur petit écran
 * ────────────────────────────────────────────────────────────────── */
html, body { max-width: 100vw; overflow-x: hidden; }
* { -webkit-tap-highlight-color: rgba(0,147,213,.15); }

/* Touch targets : tous les boutons doivent faire >= 44x44px sur mobile */
@media (max-width: 768px) {
    .btn, .nav-link, .dropdown-item, button[type="submit"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .btn-sm { min-height: 38px; }
    .btn i { line-height: 1; }
}

/* ──────────────────────────────────────────────────────────────────
 *  TABLES — scroll horizontal propre + sticky 1ère colonne
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        position: relative;
    }
    .table-responsive::-webkit-scrollbar { height: 6px; }
    .table-responsive::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

    .table { font-size: .82rem; }
    .table th, .table td { padding: .55rem .5rem; white-space: nowrap; }
    .table .badge { font-size: .7rem; padding: .15rem .4rem; }

    /* Premier td sticky pour le code/titre */
    .table.table-mobile-sticky th:first-child,
    .table.table-mobile-sticky td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0,0,0,.06);
    }
    .table.table-mobile-sticky tbody tr:hover td:first-child { background: #fafafa; }
}

/* ──────────────────────────────────────────────────────────────────
 *  PATTERN « TABLE → CARTES » réutilisable (opt-in)
 *  ──────────────────────────────────────────────────────────────────
 *  Ajoutez la classe `.sigp-cards-mobile` sur n'importe quelle <table>
 *  Bootstrap et renseignez `data-label="…"` sur chaque <td>. Sous 768px
 *  le <thead> disparaît, chaque <tr> devient une carte et chaque cellule
 *  affiche son libellé. Aucune incidence desktop (tout en @media).
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    table.sigp-cards-mobile,
    table.sigp-cards-mobile tbody { display: block; width: 100%; }
    table.sigp-cards-mobile thead { display: none; }
    table.sigp-cards-mobile tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
        padding: .35rem;
        margin-bottom: .7rem;
    }
    table.sigp-cards-mobile tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        width: auto !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding: .5rem .65rem !important;
        white-space: normal;
        text-align: right;
    }
    table.sigp-cards-mobile tbody td:last-child { border-bottom: 0 !important; }
    table.sigp-cards-mobile tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #64748b;
        text-align: left;
        flex-shrink: 0;
        margin-right: auto;
    }
    table.sigp-cards-mobile tbody td[colspan] { display: table-cell; text-align: center; }
    table.sigp-cards-mobile tbody td[colspan]::before { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
 *  BOUTONS ICÔNE-SEULE — garantir une cible tactile de 44px
 *  (les boutons "trois points", éditer, supprimer en table sont souvent
 *   trop petits sur mobile). Ne touche pas au desktop.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .btn.btn-sm.py-0,
    .btn-xs,
    .btn-action-expand {
        min-height: 40px;
        min-width: 40px;
    }
    /* Cases à cocher et radios : zone tactile plus large */
    input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
}

/* ──────────────────────────────────────────────────────────────────
 *  CARDS / KPI — empilement vertical propre sur mobile
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .card-body, .card-header { padding: .85rem; }

    /* SIGP KPI : compactés sur smartphone */
    .sigp-kpi { padding: .65rem .8rem; gap: .55rem; }
    .sigp-kpi-ico { width: 36px; height: 36px; font-size: 1rem; border-radius: 9px; }
    .sigp-kpi-num { font-size: 1.15rem; }
    .sigp-kpi-lbl { font-size: .65rem; }
    .sigp-kpi-unit { font-size: .7rem; }
}

/* ──────────────────────────────────────────────────────────────────
 *  FILTRES — collapse automatique sur mobile
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    form .row.g-2 > [class*="col-"] { margin-bottom: .35rem; }
    .form-control, .form-select { font-size: 16px; /* évite zoom iOS */ }
    .input-group-text { padding: .25rem .5rem; }
}

/* ──────────────────────────────────────────────────────────────────
 *  NAVIGATION — topbar plus compact + menu accordéon plein écran
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Topbar */
    nav .navbar-brand, .tb-brand img { max-height: 32px; }
    .tb-brand { font-size: .85rem; }
    nav .dropdown-menu { font-size: .85rem; }

    /* Cacher éléments non essentiels topbar mobile */
    nav .pf span:not(:first-child), nav .nb-label, nav .tb-sub { display: none; }
    nav .navbar-collapse { background: #fff; padding: .75rem; border-radius: 10px; }

    /* Breadcrumb : 1 niveau seulement */
    .breadcrumb { font-size: .75rem; }
    .breadcrumb-item:not(:last-child):not(:nth-last-child(2)) { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
 *  TOPBAR SIGP — méga-menus (.nd) jamais plus larges que l'écran
 *  ──────────────────────────────────────────────────────────────
 *  Les dropdowns de la topbar (.nd) sont position:fixed et repositionnés
 *  en JS, mais leur contenu (.nac min-width:300px, .nd-grid multi-colonnes,
 *  .nac-section) peut dépasser un écran de 360px → débordement horizontal.
 *  On les borne à la largeur du viewport et on autorise le scroll interne.
 *  Tout est sous 576px → aucun impact desktop/tablette.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .nd {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - var(--nh, 58px) - 12px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .nd .nac,
    .nd .nac-section {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }
    /* Méga-menu en grille → une seule colonne pleine largeur sur téléphone */
    .nd .nd-grid { grid-template-columns: 1fr !important; }
    .nd .nd-col  { min-width: 0 !important; width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────
 *  PAGE HEADER — wrapping et boutons mobile-friendly
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    h1.h4 { font-size: 1.05rem; }
    h1 .badge { font-size: .65rem; }

    /* Header actions : full width buttons */
    .d-flex.gap-2.align-items-center.flex-wrap > * {
        flex: 1 1 auto;
        min-width: 0;
    }
    .d-flex.gap-2.align-items-center.flex-wrap > .btn { font-size: .8rem; padding: .4rem .65rem; }

    /* Page-header actions : afficher en colonne */
    .d-flex.align-items-center.justify-content-between.flex-wrap.gap-2 {
        flex-direction: column;
        align-items: stretch !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
 *  MODALS — plein écran sur mobile
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .modal-dialog { margin: 0; max-width: 100%; min-height: 100vh; }
    .modal-content { border-radius: 0; min-height: 100vh; border: 0; }
    .modal-header { position: sticky; top: 0; background: #fff; z-index: 10; }
    .modal-footer { position: sticky; bottom: 0; background: #fff; z-index: 10; }
}

/* ──────────────────────────────────────────────────────────────────
 *  DASHBOARD CHARTS — hauteurs adaptatives
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    canvas[id*="chart"], canvas[id*="Chart"] { max-height: 280px !important; }
    .chart-container { min-height: 200px; }
}

/* ──────────────────────────────────────────────────────────────────
 *  DROPDOWN MENUS — taille fenêtre mobile
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
        font-size: .85rem;
    }
    .dropdown-item { padding: .55rem .85rem; white-space: normal; }
}

/* ──────────────────────────────────────────────────────────────────
 *  FORMULAIRES LONGS (saisie suivi, OM...) — UX mobile
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .form-label { margin-bottom: .25rem; font-size: .85rem; }
    textarea.form-control { min-height: 90px; }
    .section-title { font-size: .95rem !important; padding: .4rem .6rem !important; }
}

/* ──────────────────────────────────────────────────────────────────
 *  ALERTES / TOASTS — visibilité mobile
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .alert { padding: .65rem .85rem; font-size: .85rem; }
    .alert .bi { vertical-align: middle; }
    .toast-container { left: 1rem; right: 1rem; bottom: 1rem !important; }
}

/* ──────────────────────────────────────────────────────────────────
 *  BADGES FLOTTANTS (offline, filany) — éviter conflits
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    #sigp-offline-badge,
    #filany-fab,
    .floating-action {
        bottom: 12px !important;
        right: 12px !important;
        padding: .4rem .65rem !important;
        font-size: .7rem !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
 *  IMPRESSION — masquer chrome interactif
 * ────────────────────────────────────────────────────────────────── */
@media print {
    nav, .navbar, .breadcrumb, .btn, .dropdown, .pagination,
    #sigp-offline-badge, #filany-fab, .floating-action,
    footer, .no-print {
        display: none !important;
    }
    .container, .container-fluid { max-width: 100% !important; padding: 0 !important; }
    .card, .sigp-card { border: 1px solid #ccc !important; break-inside: avoid; }
    .table { font-size: 10pt; }
    a { text-decoration: none !important; color: #000 !important; }
}

/* ──────────────────────────────────────────────────────────────────
 *  DARK MODE LÉGER (préférence système) — opt-in via .sigp-dark
 *  ────────────────────────────────────────────────────────────────
 *  Préparé mais désactivé par défaut. À activer en ajoutant la classe
 *  `sigp-dark` sur le <body> via les préférences utilisateur.
 * ────────────────────────────────────────────────────────────────── */
body.sigp-dark { background: #0f172a; color: #e2e8f0; }
body.sigp-dark .card, body.sigp-dark .sigp-card { background: #1e293b; border-color: #334155; }
body.sigp-dark .table { color: #e2e8f0; }
body.sigp-dark .table-light, body.sigp-dark .table > thead { background: #334155 !important; color: #e2e8f0; }
body.sigp-dark .form-control, body.sigp-dark .form-select { background: #1e293b; color: #e2e8f0; border-color: #475569; }
body.sigp-dark .dropdown-menu { background: #1e293b; border-color: #334155; }
body.sigp-dark .dropdown-item { color: #e2e8f0; }
body.sigp-dark .dropdown-item:hover { background: #334155; }

/* ──────────────────────────────────────────────────────────────────
 *  ACCESSIBILITÉ — focus visible (souvent perdu sur mobile)
 * ────────────────────────────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid #0093D5;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ──────────────────────────────────────────────────────────────────
 *  ANIMATIONS RÉDUITES — respect préférence utilisateur
 * ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════
 *  PWA INSTALLÉE — Safe Area iOS (notch + home indicator)
 *  Tâche #424 — Mobile UX + PWA Hardening v2
 *  ────────────────────────────────────────────────────────────
 *  Avec apple-mobile-web-app-status-bar-style="black-translucent",
 *  le contenu passe SOUS la barre d'état iOS. On compense avec
 *  les variables env(safe-area-inset-*) qui valent 0 sur Android
 *  et la vraie taille du notch / home indicator sur iOS.
 *
 *  Effet : zéro découpe visuelle sur iPhone 14+, vraie sensation
 *  d'app native.
 * ════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        /* FIX 05/06/2026 — en PWA installée, le body doit TOUJOURS dégager la
           topbar fixe (--nh). --top-offset = --nh + drapeau + respiration +
           safe-area(notch), défini dans le layout. Sans ça le contenu passait
           SOUS la topbar (« bandeau collé au menu »). */
        padding-top: var(--top-offset);
        /* Padding-bottom compense la home indicator iOS */
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* Padding latéral pour mode paysage iPhone (notch sur le côté) */
        padding-left:  env(safe-area-inset-left,  0);
        padding-right: env(safe-area-inset-right, 0);
    }
    /* Topbar SIGP doit pousser son contenu sous le notch */
    .tb {
        padding-top: env(safe-area-inset-top, 0) !important;
        /* Hauteur de la topbar reste compatible avec le notch */
        min-height: calc(var(--nh, 58px) + env(safe-area-inset-top, 0)) !important;
    }

    /* ── FIX Amara TOURE 30/05/2026 : la barre des tâches OS masquait
       le contenu sur Android/desktop quand SIGP est installé en PWA.
       Le contenu principal (main, container, layout) doit toujours
       respecter la hauteur de la topbar fixe + une marge de sécurité.
       On force 12px supplémentaires sur tous les écrans en mode
       standalone pour garantir aucun chevauchement.

       Cible large pour couvrir toutes les vues sans modifier chaque
       layout individuellement. ──────────────────────────────────── */
    main,
    .main-content,
    .app-content,
    .page-wrap,
    .container-fluid {
        padding-top: max(env(safe-area-inset-top, 0), 12px) !important;
    }
    /* Force le décalage du body sous la topbar fixe (hauteur var --nh) */
    body.has-topbar,
    body {
        margin-top: 0; /* reset */
    }

    /* Bottom bars / floating actions / toasts : au-dessus du home indicator */
    .sigp-bottom-bar,
    .sigp-fab,
    .toast-container,
    .modal-bottom {
        padding-bottom: max(env(safe-area-inset-bottom, 0), 8px);
    }
}

/* ════════════════════════════════════════════════════════════════
 *  IOS — empêcher le zoom au focus input (font-size < 16px)
 *  Safari iOS zoome auto si la police est < 16px. On force ≥16px
 *  sur mobile pour tous les champs pour avoir un comportement
 *  natif propre.
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
 *  MOBILE NATIVE FEEDBACK — visual tap + badge compression
 *  Utilisé par sigp-mobile-native.js (tâche #314)
 * ════════════════════════════════════════════════════════════════ */
.sigp-compress-badge {
    transition: background 200ms, color 200ms;
    vertical-align: middle;
}

/* Pression bouton — feedback visuel complémentaire à la vibration */
@media (max-width: 768px) {
    .btn:active,
    button:active {
        transform: scale(0.97);
        transition: transform 80ms ease-out;
    }
}

/* ════════════════════════════════════════════════════════════════
 *  ÉCRAN PETIT (< 380px) — Honor 8 / iPhone SE / Tecno Spark
 *  Ajustements ciblés pour les Android d'entrée de gamme
 *  largement présents en Guinée.
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    body { font-size: .92rem; }
    .container, .container-fluid { padding-left: .5rem; padding-right: .5rem; }
    .card, .sigp-card { margin-bottom: .65rem; }
    .tb-iconbtn { width: 38px; height: 38px; }
    /* Titres de page un peu plus compacts */
    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1.05rem; }
}

/* ════════════════════════════════════════════════════════════════
 *  ÉTAT DE CONNEXION — pulsation discrète offline (UX rassurante)
 *  Le point d'état dans la topbar pulse en orange quand le mobile
 *  passe hors-ligne, pour que l'utilisateur sache immédiatement
 *  pourquoi les actions s'enfilent dans la sync queue.
 * ════════════════════════════════════════════════════════════════ */
.sigp-net-dot.offline {
    animation: sigp-net-pulse 1.4s ease-in-out infinite;
}
@keyframes sigp-net-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(1.12); }
}

/* ════════════════════════════════════════════════════════════════
 *  SCROLL TACTILE — smooth iOS + élimine la barre laterale
 *  qui apparaît sur Android quand .table-responsive scrolle.
 * ════════════════════════════════════════════════════════════════ */
@media (hover: none) {
    * { -webkit-overflow-scrolling: touch; }
    /* Cache la scrollbar en mobile (présent uniquement clic-souris) */
    .table-responsive::-webkit-scrollbar { height: 4px; }
}

/* ═════════════════════════════════════════════════════════════════
 *  BOTTOM NAVIGATION — vraie app mobile (Ecobank/Outlook style)
 *  ─────────────────────────────────────────────────────────────────
 *  Persistante en bas d'écran sur mobile (<768px).
 *  Masquée sur desktop (≥768px).
 *  Tap targets ≥ 64×56px, safe-area iOS respectée.
 * ═════════════════════════════════════════════════════════════════ */
.sigp-bn {
    display: none; /* invisible par défaut — activée uniquement sur mobile */
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
}

.sigp-bn-tab {
    appearance: none;
    background: transparent;
    border: 0;
    color: #64748b;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px 8px;
    min-height: 56px;
    font-size: 11px;
    font-weight: 600;
    transition: color 160ms ease;
    position: relative;
}
.sigp-bn-tab:active { background: rgba(6,78,59,.06); }
.sigp-bn-tab.is-active {
    color: #064e3b;
}
.sigp-bn-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 3px;
    background: #064e3b;
    border-radius: 0 0 3px 3px;
}
.sigp-bn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    position: relative;
}
.sigp-bn-ico svg { display: block; }
.sigp-bn-label {
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.sigp-bn-badge {
    position: absolute;
    top: -2px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}

/* ──────────────────────────────────────────────────────────────
 *  ACTIVATION MOBILE : remplace la topbar par la bottom nav
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sigp-bn { display: grid; }

    /* Cacher la topbar desktop sur mobile — la bottom nav la remplace */
    #topbar { display: none !important; }

    /* Quick access bar (en haut) — masquée aussi sur mobile pour ne pas
       doublonner avec la bottom nav */
    .qa-bar, #sigp-quick-access-bar { display: none !important; }

    /* Ajouter du padding en bas du body pour ne pas masquer le contenu */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Headers de page : ajouter un petit padding-top pour respirer */
    main, .container, .container-fluid {
        padding-top: env(safe-area-inset-top, 0) !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
 *  DRAWER PLEIN ÉCRAN — tous les modules SIGP par catégorie
 *  Ouvre via .sigp-bn-tab.is-menu (bouton Menu en bas).
 * ═════════════════════════════════════════════════════════════════ */
.sigp-mdrawer {
    --bs-offcanvas-width: 92vw;
    max-width: 420px;
    background: #f8fafc;
    border-left: 1px solid rgba(0,0,0,.06);
}

.sigp-mdrawer-header {
    background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
    color: #fff;
    padding: 18px 18px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: calc(18px + env(safe-area-inset-top, 0));
}
.sigp-mdrawer-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75;
}
.sigp-mdrawer-title {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.sigp-mdrawer-close {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,.16);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms;
}
.sigp-mdrawer-close:active { background: rgba(255,255,255,.3); }

.sigp-mdrawer-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
}

.sigp-mdrawer-user {
    background: #fff;
    margin: 14px 14px 8px;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sigp-mdrawer-user-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FCD116 0%, #d4a90b 100%);
    color: #064e3b;
    font-weight: 800;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sigp-mdrawer-user-info {
    flex: 1;
    min-width: 0;
}
.sigp-mdrawer-user-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sigp-mdrawer-user-meta {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sigp-mdrawer-user-link {
    color: #0f172a;
    opacity: .5;
    flex-shrink: 0;
}

.sigp-mdrawer-search {
    margin: 4px 14px 14px;
    padding: 0 12px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sigp-mdrawer-search svg { color: #94a3b8; flex-shrink: 0; }
.sigp-mdrawer-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: #0f172a;
}

.sigp-mdrawer-section {
    margin: 0 14px 4px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    margin-bottom: 12px;
}
.sigp-mdrawer-section-title {
    padding: 12px 16px 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sigp-mdrawer-item {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #0f172a;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: background 120ms;
    border-top: 1px solid rgba(0,0,0,.04);
    text-align: left;
}
.sigp-mdrawer-item:first-of-type { border-top: 0; }
.sigp-mdrawer-item:active { background: rgba(6,78,59,.06); }
.sigp-mdrawer-item-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 18px;
    flex-shrink: 0;
}
.sigp-mdrawer-item-label { flex: 1; }
.sigp-mdrawer-item-danger {
    color: #dc2626;
}
.sigp-mdrawer-logout-form {
    margin: 0;
    border-top: 1px solid rgba(0,0,0,.04);
}

.sigp-mdrawer-footer {
    text-align: center;
    padding: 24px 16px 16px;
    color: #64748b;
    font-size: 11.5px;
}
.sigp-mdrawer-footer-meta {
    margin-top: 4px;
    font-size: 10.5px;
    opacity: .7;
}

/* ─── Sur desktop, le drawer ne s'ouvre pas (la bottom nav est masquée) ─── */
@media (min-width: 768px) {
    .sigp-mdrawer { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  MENU CENTRAL FAB — Floating Action Button (Vision Amara 01/06/2026)
 *  ───────────────────────────────────────────────────────────────────
 *  Bouton Menu en 3e position (centre de la grille 5 colonnes),
 *  proéminent comme un FAB (style WhatsApp/Outlook),
 *  cercle vert ANDE saillant vers le haut + anneau blanc qui le
 *  détache de la nav bar.
 *
 *  Avant : le bouton FILANY occupait cette place visuelle (étoile),
 *  ce qui masquait l'accès direct au Menu. Maintenant FILANY est
 *  latéral et le Menu est l'élément central proéminent.
 * ════════════════════════════════════════════════════════════════════ */
.sigp-bn-fab {
    position: relative;
    /* Le bouton FAB est légèrement plus haut pour faire saillir le cercle */
    padding-top: 0 !important;
}
.sigp-bn-fab-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006B3F 0%, #064e3b 100%);
    color: #FCD116; /* icône jaune Guinée sur fond vert ANDE */
    box-shadow:
        0 6px 16px rgba(6, 78, 59, .35),
        0 0 0 4px #fff; /* anneau blanc qui détache du fond */
    margin-top: -18px; /* fait saillir le bouton vers le haut */
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.sigp-bn-fab-circle svg {
    width: 30px;
    height: 30px;
    display: block;
}
.sigp-bn-fab:active .sigp-bn-fab-circle {
    transform: scale(0.92);
}
.sigp-bn-fab:hover .sigp-bn-fab-circle {
    box-shadow:
        0 8px 20px rgba(6, 78, 59, .45),
        0 0 0 4px #fff;
    transform: translateY(-2px);
}
.sigp-bn-fab .sigp-bn-label {
    margin-top: 4px;
    font-weight: 700;
    color: #064e3b;
    font-size: 10.5px;
}

/* Quand le drawer est ouvert (offcanvas active), feedback visuel */
.offcanvas.show ~ * .sigp-bn-fab .sigp-bn-fab-circle,
body.sigp-drawer-open .sigp-bn-fab .sigp-bn-fab-circle {
    background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
    transform: translateY(-2px);
}


/* ════════════════════════════════════════════════════════════════════
 *  PWA STANDALONE MODE — Évite le recouvrement par les barres système
 *  ───────────────────────────────────────────────────────────────────
 *  Quand SIGP est installé comme app (Chrome/Edge "Installer"), le mode
 *  standalone retire la barre du navigateur. Mais la barre des tâches OS
 *  (Windows taskbar / Android nav bar / iOS home indicator / Mac dock)
 *  peut recouvrir le bas de la page.
 *
 *  Fix : padding-bottom dynamique qui s'active UNIQUEMENT en mode PWA.
 *  ════════════════════════════════════════════════════════════════════ */
@media all and (display-mode: standalone) {
    /* Marge basse pour éviter la barre des tâches OS (Windows / Mac dock).
       L'utilisateur peut scroller pour voir le contenu, mais le contenu
       fixé en bas (boutons d'action, bottom nav) n'est plus coupé.        */
    body {
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* La bottom nav mobile (Gouv/Plan/Suivi/FILANY/Menu) se positionne
       au-dessus de la barre des tâches, pas dessous.                       */
    .sigp-bn {
        bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Le footer / les boutons d'action fixes en bas remontent eux aussi.   */
    .fixed-bottom,
    [class*="position-fixed"][class*="bottom"],
    .sigp-action-bar,
    .sigp-fab-container {
        bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Ajoute du padding-top sur le topbar/header au cas où la barre de
       titre de la PWA Windows le mangerait (rare mais possible).          */
    #topbar,
    .sigp-topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Les modals Bootstrap qui font 100vh : on retire 40px du bas pour
       que les boutons OK/Annuler ne soient pas cachés.                    */
    .modal-dialog {
        max-height: calc(100vh - 40px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
        margin-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }

    /* Le drawer offcanvas Bootstrap : pareil pour le bas.                  */
    .offcanvas.offcanvas-bottom {
        max-height: calc(100vh - 40px - env(safe-area-inset-bottom, 0px));
    }
    .offcanvas.offcanvas-end,
    .offcanvas.offcanvas-start {
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

/* iOS PWA spécifique : la barre du home indicator est en bas.
   Sur iOS standalone, on respecte la safe-area sans le +40px Windows.    */
@supports (-webkit-touch-callout: none) {
    @media all and (display-mode: standalone) {
        body {
            padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        }
    }
}

/* ════════════════════════════════════════════════════════════════════
   SWEEP MOBILE DEFENSIF v2 — Amara TOURE 31/05/2026
   ───────────────────────────────────────────────────────────────────
   Couvre les 451 vues SANS media-query interne, pour eviter qu'elles
   pètent sur iPhone/Android. Regles defensives globales.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Grilles Bootstrap → 1 colonne mobile ────────────────────── */
    .row > .col-md-1, .row > .col-md-2, .row > .col-md-3,
    .row > .col-md-4, .row > .col-md-5, .row > .col-md-6,
    .row > .col-md-7, .row > .col-md-8, .row > .col-md-9,
    .row > .col-md-10, .row > .col-md-11 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: .75rem;
    }

    /* ── d-flex avec wrap par defaut ─────────────────────────────── */
    .d-flex:not(.flex-nowrap):not(.flex-row) {
        flex-wrap: wrap;
    }

    /* ── Containers pleine largeur ───────────────────────────────── */
    .container, .container-fluid, .container-lg, .container-xl {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    /* ── Cards : ne depassent pas la viewport ────────────────────── */
    .card, .panel, .box {
        max-width: 100%;
        word-wrap: break-word;
    }

    /* ── Tables sans .table-responsive : scroll auto ─────────────── */
    table:not(.table-fixed):not([class*="dataTable"]) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Boutons groupes : empilement vertical si bcp ────────────── */
    .btn-group:not(.btn-group-sm):not(.btn-group-keep) {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .btn-group:not(.btn-group-sm):not(.btn-group-keep) .btn {
        border-radius: 6px !important;
        margin-bottom: .25rem;
    }

    /* ── Forms : labels au-dessus des inputs ─────────────────────── */
    .form-inline { display: block; }
    .form-inline .form-group { width: 100%; margin-bottom: .5rem; }
    .form-inline .form-control { width: 100%; }

    /* ── Images : ne depassent jamais ───────────────────────────── */
    img:not(.no-shrink) { max-width: 100%; height: auto; }

    /* ── Police de base : eviter le mini-text qui force le zoom iOS */
    input, textarea, select { font-size: 16px !important; }
    body { font-size: 15px; }

    /* ── Padding lateral systematique pour ne pas coller aux bords */
    main, .main-content, .content-wrapper, [role="main"] {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* ── Modals : prennent toute la largeur ─────────────────────── */
    .modal-dialog:not(.modal-fullscreen) {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }

    /* ── Headings : éviter les titres trop longs qui débordent ───── */
    h1, h2, h3, .display-1, .display-2, .display-3, .display-4 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* ── Pre/Code blocks : scroll horizontal ────────────────────── */
    pre, code { overflow-x: auto; max-width: 100%; }

    /* ── Hide elements marked desktop-only ──────────────────────── */
    .desktop-only, .d-md-block:not(.d-block) { display: none !important; }
}

/* Petit mobile (< 480px) : encore plus aggressif */
@media (max-width: 480px) {
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.05rem; }

    .btn { font-size: .85rem; padding: .45rem .8rem; }
    .badge { font-size: .68rem; }

    /* Hide footer breadcrumbs sur tres petit */
    .breadcrumb-item:not(.active):not(:last-child) { display: none; }
    .breadcrumb-item.active::before { display: none; }
}