/* ============================================================================
   Adaptations d'écran transversales.

   Cette feuille est chargée EN DERNIER (voir app.css) : elle rattrape ce qui
   déborde, quelle que soit la page, plutôt que de corriger vingt fichiers un
   par un.

   Trois principes :

     1. Rien ne doit provoquer de défilement horizontal de la PAGE. Un contenu
        large défile dans son propre conteneur.
     2. Sous 640 px, toute cible tactile atteint 44 px. En dessous, on rate
        le bouton une fois sur trois.
     3. Une grille à colonnes fixes retombe à une colonne. Deux colonnes de
        140 px ne valent pas mieux qu'une seule.

   Les règles sont volontairement peu spécifiques : elles doivent pouvoir être
   surchargées par une page qui a une meilleure idée pour son cas.
   ============================================================================ */

/* ------------------------------------------------------------- Garde-fous */

html, body { max-width: 100%; overflow-x: clip; }

/* Un média ou un cadre ne dépasse jamais son conteneur. */
img, svg, video, canvas, iframe, table { max-width: 100%; }
img, svg, video, canvas { height: auto; }

/* Une URL ou une plaque sans espace ne doit pas élargir la page à elle seule. */
.mono, code, kbd, samp,
[class*="__url"], [class*="-token"] { overflow-wrap: anywhere; }

/* Les cellules d'un tableau ne se coupent pas : c'est le conteneur qui défile.
   Les en-têtes, eux, restent sur une ligne pour rester lisibles. */
.table td, .data-table td { overflow-wrap: break-word; }

/* ------------------------------------------------------- Tablette (≤ 900) */

@media (max-width: 900px) {
    /* Les grilles à deux colonnes de contenu passent en pile. */
    .details-grid,
    .chart-grid,
    .fiche,
    .form-grid-2 { grid-template-columns: 1fr !important; }

    /* Barres d'outils : le bloc d'actions passe sous le titre plutôt que de
       le comprimer. */
    .toolbar { align-items: flex-start; }
    .toolbar-actions { flex-wrap: wrap; }
}

/* --------------------------------------------------------- Mobile (≤ 640) */

@media (max-width: 640px) {

    /* ---- Cibles tactiles ---- */
    .btn,
    .tabs__btn,
    .loc-tab,
    .nav-item,
    button:not(.qst__x):not(.aide__close):not(.modal-close):not(.vit__burger) {
        min-height: var(--touch-min);
    }
    .btn--xs, .btn--sm { min-height: 38px; }

    /* Les champs à 16 px empêchent iOS de zoomer à la mise au point. Sous ce
       seuil, Safari agrandit la page et l'utilisateur doit la remettre en
       place à la main après chaque champ. */
    input, select, textarea { font-size: 16px; }

    /* ---- Grilles ---- */
    /* Toute grille explicitement à N colonnes retombe à une. Les grilles en
       `auto-fit` savent déjà se débrouiller et ne sont pas visées. */
    .stat-grid,
    .loc-summary,
    .perf-grid,
    .kpi-grid,
    .form-grid,
    .frm__grid,
    .frm__duo,
    .jrn__kpis,
    .dl-grid { grid-template-columns: 1fr !important; }

    /* ---- Barres d'outils et filtres ---- */
    .toolbar,
    .toolbar-actions,
    .form-row-inline,
    .filters,
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .toolbar-actions > *,
    .form-row-inline > *,
    .form-row-inline .btn { width: 100%; }
    .form-row-inline label { width: auto; }

    /* Le défilement des onglets est désormais porté par `.tabs` et
       `.loc-tabs` elles-mêmes, à toutes les tailles — il n'était appliqué
       qu'ici, et une classe qui se replie ailleurs ne peut rien faire
       défiler. Il ne reste qu'à masquer la barre de défilement, qui vole
       huit pixels de hauteur là où l'ombre au bord suffit à signaler. */
    .tabs, .loc-tabs { scrollbar-width: none; }
    .tabs::-webkit-scrollbar,
    .loc-tabs::-webkit-scrollbar { display: none; }

    /* ---- Cartes et sections ---- */
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
    .card-body { padding: var(--space-3); }
    .card-footer { flex-wrap: wrap; }
    .card-footer .btn { flex: 1 1 auto; justify-content: center; }

    /* ---- Listes de définitions ---- */
    /* `max-content 1fr` sur un libellé long réduisait la valeur à une colonne
       de deux centimètres. En pile, les deux respirent. */
    .dl-grid dt { padding-top: var(--space-2); }
    .dl-grid dd { margin: 0 0 var(--space-2); }
}

/* ------------------------------------------------------ Très petit (≤ 380) */

@media (max-width: 380px) {
    :root { --font-size-base: 0.86rem; }
    .card-body { padding: var(--space-2); }
    .stat-card__value, .stat__value { font-size: 1.35rem; }
}

/* --------------------------------------------------------------- Modales */

/* Le conteneur de fond porte la classe `.modal` — pas `.modal-backdrop`, qui
   n'existe pas dans ce projet. Une règle qui vise une classe absente ne
   produit aucune erreur : elle ne fait simplement rien, ce qui est le pire
   des cas puisque rien ne le signale. */
@media (max-width: 640px) {
    /* Une modale centrée à 90 % de hauteur laisse un liseré de fond en haut
       et en bas que le doigt touche par erreur, ce qui la referme. Sur mobile
       elle occupe le bas de l'écran et remonte — le geste attendu. */
    .modal { align-items: flex-end; padding: 0; }

    .modal-card {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        /* `dvh` suit la hauteur RÉELLEMENT visible : quand le clavier
           s'ouvre, `vh` ne bouge pas et le bas du formulaire — donc le bouton
           d'envoi — passe sous le clavier. */
        max-height: 92dvh;
        animation: modalSheet .22s cubic-bezier(.2, .8, .3, 1) forwards;
    }

    /* Poignée : dit que le panneau vient du bas et qu'il se referme. */
    .modal-header {
        position: sticky; top: 0; z-index: 2;
        padding-top: var(--space-5);
    }
    .modal-header::before {
        content: '';
        position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 999px;
        background: var(--color-border-strong);
    }

    .modal-body { padding: var(--space-3) var(--space-4); }

    .modal-footer {
        position: sticky; bottom: 0;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--space-2);
        /* Marge de sécurité sous les iPhone à encoche. */
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    }
    .modal-footer .btn { width: 100%; justify-content: center; }
}

@keyframes modalSheet {
    from { transform: translateY(14px); opacity: .85; }
    to   { transform: translateY(0);    opacity: 1;   }
}

/* ------------------------------------------------------------- Impression */

@media print {
    .sidebar, .topbar, .toolbar-actions,
    .aide-trigger, .aide, .modal-backdrop { display: none !important; }
    .app-shell, .app-main { display: block; margin: 0; padding: 0; }
    .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
    .table-wrap, .data-table-wrap { overflow: visible; border: 0; }
    a[href]::after { content: ''; }
}