/* ==========================================================================
   Couche RESPONSIVE commune — suite ORIZON (audit du 24/09/2026)
   Source unique : ~/.cache/resp/kit/orizon-resp.css, copiée dans static/ de
   chaque appli et chargée EN DERNIER (elle doit l'emporter).

   Mesuré sur 7 largeurs (320, 375, 414, 768, 1024, 1366, 1920 px) et ~460
   écrans des six applis. Trois familles de défauts, communes à toutes :
   1. des tableaux qui poussent la page au-delà de l'écran (jusqu'à 1024 px :
      barre latérale encore là, tableau plus large que la colonne) ;
   2. des cibles tactiles sous 44 px (icônes, pagination, fil d'Ariane, champs) ;
   3. des libellés sous 12 px sur téléphone (en-têtes de colonnes, badges).
   ========================================================================== */

/* --- 1. Rien ne pousse la page ------------------------------------------------ */
img, video, canvas { max-width: 100%; }
/* Un enfant de grille ou de flex a « min-width:auto » : il refuse de rétrécir sous la
   largeur de son contenu et entraîne toute la colonne. min-width:0 débloque la chaîne. */
/* ⚠️ Sous 1024 px SEULEMENT : sur grand écran, laisser rétrécir les cartes d'une grille
   déséquilibrait certaines rangées (apurement 411 de Connect : 3 cartes à ~105 px, la 4e à
   704 px, page à 1528 px pour 1366 — mesuré le 25/09). Le grand écran garde son comportement. */
@media (max-width: 1023px) {
  .panel, .card, .carte, .bloc, .kpi, .kpi-card, .chart-card, main, .main, .content, .contenu,
  [class*="grid"] > *, [class*="two-col"] > *, [class*="col-"] > * { min-width: 0; }
}
/* Cadre défilant posé par orizon-resp.js autour d'un tableau qui DÉBORDE (seulement lui) :
   c'est le tableau qui défile, jamais la page. */
.orz-defil { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; }
.orz-defil > table { margin-top: 0; margin-bottom: 0; }
/* Fiche libellé / valeur trop large : la valeur passe à la ligne. */
table.orz-kv { display: table !important; width: 100%; table-layout: auto; }
table.orz-kv th, table.orz-kv td { white-space: normal !important; }
table.orz-kv td, table.orz-kv td * { white-space: normal !important; overflow-wrap: anywhere; }
/* ... la valeur se coupe, jamais le libellé (qui passe à la ligne entre deux mots). */
/* Longs identifiants (n° de pièce, références, e-mails) : coupés plutôt que débordants. */
.mono, code, .ref, .reference { overflow-wrap: anywhere; }

/* --- 2. Cibles tactiles : 44 px au doigt, ou sous 1024 px ------------------------
   (pointer:coarse) couvre les écrans tactiles ; la largeur couvre les tablettes Android
   qui se déclarent « fine ». Recommandation Apple / WCAG 2.5.5. */
@media (pointer: coarse), (max-width: 1023px) {
  button, .btn, [class*="btn-"], input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),
  select, textarea, summary { min-height: 44px !important; }
  a.btn, a[class*="btn-"], a.bouton, a.button, .pager-btn, .tag, a.tag, .fil-ariane a,
  .breadcrumb a, a.lien, .lien-btn, a.fleche { min-height: 44px !important; display: inline-flex; align-items: center; }
  summary { box-sizing: border-box; padding-top: 10px; padding-bottom: 10px; }
  /* Boutons-icônes (menu, cloche, thème, compte) : 44 × 44 */
  .burger, .nav-toggle, .menu-bascule, .sidebar-toggle, #sidebar-toggle, .theme-toggle, .barre-icone,
  .cloche, .notif-bell, .bap-cloche, .who, .ml-pli, .guide-rejouer, .sb-burger
  { min-width: 44px !important; min-height: 44px !important; }
  .pager-btn { min-width: 44px !important; justify-content: center; }
  /* Liens dans les tableaux et la pagination : zone portée à 44 px sans toucher au texte. */
  td a, .pagination a, .pager a, .petit > a, p > a:only-child { min-height: 44px; display: inline-flex; align-items: center; }
  /* Cases à cocher sans étiquette : 24 px au moins (WCAG 2.2, critère 2.5.8). */
  input[type=checkbox], input[type=radio] { min-width: 24px; min-height: 24px; }
  /* Visite guidée (commune à Pay, Docs, Care) */
  .guide-actions button, .guide-passer, .guide-suivant, .guide-precedent { min-height: 44px !important; }
  /* Liens de navigation latérale */
  nav a, .sidebar a, .sidebar-menu a, .nav-liens a, .nav-children a, .ml-item, .sb-a, .sb-s
  { min-height: 44px !important; }
}

/* --- 3. Téléphone : lisibilité ---------------------------------------------------- */
@media (max-width: 600px) {
  /* 16 px dans les champs : en dessous, l'iPhone ZOOME la page à chaque saisie. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  /* Plancher de 12 px : posé par orizon-resp.js, élément par élément — en CSS on ne peut
     pas écrire « au moins 12 px, sinon garder sa taille » sans réduire ce qui est plus grand. */
}

/* --- 4. Pages COMMUNES de la suite (portail des modules, socle, tableau) ------------ */
/* En-tête du tableau : le bloc de droite (rechercher, alertes, compte) débordait jusqu'à
   414 px ; il passe à la ligne et l'identité se réduit à la pastille. */
@media (max-width: 520px) {
  .haut:has(> .haut-d) { flex-wrap: wrap; }
  .haut > .haut-d { flex-wrap: wrap; margin-left: 0; justify-content: flex-end; min-width: 0; max-width: 100%; }
  .haut-d .qui > div:not(.pastille) { display: none; }
}
/* Grille des modules : colonnes de 275 px minimum -> jamais plus larges que l'écran. */
/* Portée limitée aux grilles de modules : « .grille » seul est un nom trop courant. */
.grille:has(> .mod), .grille:has(> .carte) { grid-template-columns: repeat(auto-fill, minmax(min(275px, 100%), 1fr)); }
/* Socle, recherche de comptes et tableau : à 320 px le formulaire (champ + bouton) et
   l'état d'un module sortaient de l'écran ; flèches et boutons ronds trop étroits. */
.entete-comptes { flex-wrap: wrap; }
.entete-comptes > .q-boite, .q-boite { flex-wrap: wrap !important; max-width: 100% !important; min-width: 0; }
.q-boite input { min-width: 0 !important; width: 100% !important; max-width: 100%; }
.sl:has(> .etat-p) { flex-wrap: wrap; }
@media (pointer: coarse), (max-width: 1023px) {
  a.fleche, a.rond, a.retour, #q_go { min-width: 44px !important; min-height: 44px !important;
    display: inline-flex; align-items: center; justify-content: center; }
}

/* socle v2 */
/* Recherche des comptes : le style de la page est déclaré APRÈS cette feuille (dans le corps),
   d'où !important. Sous 480 px, le formulaire passe sous le titre, pleine largeur. */
@media (max-width: 480px) {
  .entete-comptes { flex-wrap: wrap !important; }
  .entete-comptes > .q-boite { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
}
/* Boutons nommés « xx-btn » (exports d'Insight : rc-btn, vi-btn, at-btn…) */
@media (pointer: coarse), (max-width: 1023px) {
  a[class*="-btn"], button[class*="-btn"] { min-height: 44px !important; display: inline-flex; align-items: center; }
  input[type=date], input[type=month] { min-height: 44px !important; }
}

/* tableau v2 */
/* Encadré « À quoi sert cet écran ? » : grille 200 px + texte ; sur téléphone la colonne de
   libellés écrasait le texte hors de l'écran. Une seule colonne sous 480 px. */
@media (max-width: 480px) { .aide-ecran .aq { grid-template-columns: 1fr !important; } }
.sl:has(> .etat-p) { flex-wrap: wrap; min-width: 0; }


/* ==== Complément propre à connect ==== */
/* Fil d'Ariane : 40 px d'origine (22/07) -> 44 px, seuil commun à toute la suite. */
@media (pointer: coarse), (max-width: 1023px) {
  .fil-ariane a { min-height: 44px; }
}

/* Cartes d'indicateurs à 2 colonnes (≤ 1100 px) : « 1fr » ne descend pas sous le contenu,
   et la carte aux deux boutons côte à côte (apurement 411) imposait sa largeur — page à
   1103 px pour 1024 (défaut d'origine, mesuré le 25/09). Colonnes égales, libellés repliés. */
@media (max-width: 1100px) {
  .kpi-grid, .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card .btn { white-space: normal; height: auto; text-align: center; }
  /* Carte d'actions : 4 boutons « pleine largeur » alignés en ligne sortaient de la carte. */
  .kpi-card.kpi-action { flex-direction: column; align-items: stretch; }
}