/* responsive.css — chargé après styles.css (GR-R2 à GR-R5 ; la navigation GR-1/GR-R1/GR-14 est dans shell.css).
   Règles transitoires : les sélecteurs [style*=] et !important compensent
   des styles inline et disparaîtront avec eux (lot 4). Pas de body{overflow-x:hidden}. */

/* ─── GR-R2 · débordements (< 900 px) ──────────────────────── */
@media (max-width: 900px) {
    /* GR-R2 · pas de défilement horizontal de la page */
    #view-container [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    #veille-perimetre, .astreinte-select { width: auto; min-width: 0; max-width: 100%; }
    .card > div:has(> table) { overflow-x: auto; }
    /* components/table.css passe .table-wrapper en overflow:visible à ≤ 640 px (cartes empilées .table-stack) ;
       les tableaux classiques doivent rester défilables dans leur conteneur */
    .table-wrapper:not(:has(.table-stack)) { overflow-x: auto; }

    /* GR-9 (partie débordement) · onglets admin sur plusieurs lignes */
    div:has(> .admin-tab-btn) { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    /* GR-R2 · filtres et modales sans min-width inline */
    .filters-bar .form-group, #modal-content [style*="min-width"] { min-width: 0 !important; }
    .filters-bar { align-items: stretch; }

    /* GR-R3 · pas de zoom automatique iOS sur les champs */
    input, select, textarea { font-size: 16px; }

    /* GR-R4 · modales plein écran */
    .modal-overlay { padding: 0; }
    .modal-box { max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 1.25rem; }
}

/* ─── GR-R5 · Cibles tactiles >= 44 px (390 et 768 inclus) ─── */
@media (max-width: 768px), (pointer: coarse) {
    .btn, .btn-sm, .period-btn, .period-nav-btn, .modal-close, .chip-remove,
    .td-actions button, .td-actions a, input, select { min-height: 44px; min-width: 44px; }
    input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 24px; min-width: 24px; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]),
    td:has(> input[type="checkbox"]), th:has(> input[type="checkbox"]) { min-height: 44px; min-width: 44px; }
    td:has(> input[type="checkbox"]), th:has(> input[type="checkbox"]) { vertical-align: middle; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 0.5rem; }
    /* Case sans <label> : le banc mesure la case elle-même */
    td > input[type="checkbox"]:only-child { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    /* Lien externe isolé (ex. « Source externe ») */
    a[target="_blank"] { display: inline-flex; align-items: center; min-height: 44px; }
}