/* ============================================================================
   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; }

    /* Les onglets défilent latéralement plutôt que de se replier sur trois
       lignes, ce qui repousserait le contenu hors de l'écran. */
    .tabs,
    .loc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar,
    .loc-tabs::-webkit-scrollbar { display: none; }
    .tabs__btn, .loc-tab { flex: 0 0 auto; }

    /* ---- 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 */

@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. Sur mobile, elle occupe le
       bas de l'écran et remonte — c'est le geste attendu. */
    .modal-backdrop, .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-card {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal-body { padding: var(--space-3); }
    .modal-footer { flex-wrap: wrap; gap: var(--space-2); }
    .modal-footer .btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------- 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: ''; }
}