/* ── Couche responsive (mobile portrait, phablette, téléphone en paysage) ───
   Chargée APRÈS brand/utilities.css dans les trois layouts (conseiller, portail
   client, superadmin). utilities.css est une couche atomique GÉNÉRÉE, à
   spécificité doublée (0,2,0) et SANS aucune @media : sans cette couche, les
   grilles u-gtc-* et les rangées u-d-flex ne se replient jamais en portrait et
   .main{overflow-x:hidden} coupe tout ce qui dépasse à droite — d'où des
   boutons et menus « invisibles sauf en paysage ». Les sélecteurs ci-dessous
   sont doublés pour égaler (0,2,0) et l'emporter par l'ordre de chargement ;
   aucun !important sauf mention justifiée. CSP : feuille externe 'self'. */

/* Pendant de .hide-mobile : un contenu réservé au portrait. Déclaré hors
   @media pour poser la valeur par défaut, rétabli dans le bloc ≤768px. */
.only-mobile.only-mobile { display: none; }

/* ── Téléphone en paysage et tablette portrait (≤1024px) : navigation en
   tiroir, jamais la barre latérale fixe qui ne laisse que 590px de contenu. */
@media (max-width: 1024px) {
  :root { --sw: 0px; }
  .sb { transform: translateX(-260px); width: 260px; }
  .sb.open { transform: translateX(0); }
  .main { margin-left: 0; overflow-x: hidden; }
  .hamburger { display: flex; }
  body.nav-mini .sb { width: 260px; }
  /* Portail client : tiroir droit dès 1024px (la barre de liens horizontale
     écrasait la marque entre 680 et 900px, i.e. un téléphone en paysage). */
  .p-nav-links, .p-nav-user .p-nav-name, .p-nav-menu { display: none; }
  .p-nav-icon-btn { display: flex; }
  /* Superadmin : aucune règle mobile n'existait — la barre latérale fixe de
     240px recouvrait 60 % de l'écran. En dessous de 1024px elle devient un
     bandeau statique en tête, le contenu suit.
     Le corps du back-office est une RANGÉE flex : rendre la barre statique sans
     changer la direction la laisse À CÔTÉ du contenu. Mesuré à 375px avant ce
     correctif : barre de 147px, contenu de 640px commençant à x=147, page large
     de 787px — tout le back-office plateforme défilait latéralement. */
  .sa-layout.sa-layout { flex-direction: column; }
  .sa-sidebar { position: static; width: 100%; height: auto; min-height: 0; }
  .sa-main { margin-left: 0; width: 100%; min-width: 0; }
}

/* ── Téléphone (≤768px) : une colonne, tout replie, rien ne déborde. */
@media (max-width: 768px) {
  /* Grilles à colonnes FIXES -> une colonne.
     minmax(0, 1fr) et NON 1fr : le minimum automatique d'une piste 1fr est le
     contenu, si bien qu'un enfant large (adresse, tableau, rangée nowrap) fait
     gonfler la piste au lieu de la contraindre. Mesuré sur la fiche client :
     grille repliée à « 1fr », conteneur de 351px, piste calculée à 707px, et
     .main{overflow-x:hidden} coupait tout le débordement SANS barre de
     défilement — 56 éléments simplement invisibles. Le couple minmax(0,1fr)
     sur la piste + min-width:0 sur l'enfant (plus bas) est ce qui permet
     réellement de rétrécir. Les grilles auto-fit/auto-fill minmax(≤340px) sont
     responsives par nature et restent telles quelles. */
  .u-gtc-1fr-1fr.u-gtc-1fr-1fr,
  .u-gtc-1fr-1fr-1fr.u-gtc-1fr-1fr-1fr,
  .u-gtc-1fr-2fr.u-gtc-1fr-2fr,
  .u-gtc-2fr-1fr.u-gtc-2fr-1fr,
  .u-gtc-1fr-300px.u-gtc-1fr-300px,
  .u-gtc-1fr-320px.u-gtc-1fr-320px,
  .u-gtc-1fr-340px.u-gtc-1fr-340px,
  .u-gtc-300px-1fr.u-gtc-300px-1fr,
  .u-gtc-340px-1fr.u-gtc-340px-1fr,
  .u-gtc-minmax-280px-360px-1fr.u-gtc-minmax-280px-360px-1fr,
  .u-gtc-repeat-2-1fr.u-gtc-repeat-2-1fr,
  .u-gtc-repeat-3-1fr.u-gtc-repeat-3-1fr,
  .u-gtc-repeat-4-1fr.u-gtc-repeat-4-1fr { grid-template-columns: minmax(0, 1fr); }
  /* Frise/calendrier sur 12 colonnes (une par mois) : 12 x 375px ne tient
     pas ; on passe a 3 colonnes, lisible et sans debordement. */
  .u-gtc-repeat-12-1fr.u-gtc-repeat-12-1fr { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Rangées flex : replient dès qu'elles dépassent (sans effet quand ça tient).
     Exceptions : barres à défilement horizontal voulu (sous-onglets,
     u-fw2-nowrap) qui portent leur propre comportement. */
  .u-d-flex.u-d-flex:not(.u-fw2-nowrap):not(.sous-onglets) { flex-wrap: wrap; }

  /* Pendant indispensable des deux règles ci-dessus : par défaut, un enfant de
     grille ou de rangée a min-width:auto, donc il refuse de descendre sous la
     largeur de son contenu — replier la piste ne suffit pas, l'enfant déborde
     quand même. On lève ce plancher dans les zones de contenu uniquement (pas
     dans les barres de navigation, qui ont leur propre comportement). */
  .content .u-d-grid > *, .content .fg > *, .content .u-d-flex > *,
  .sa-content .u-d-grid > *, .sa-content .sa-fg > *, .sa-kpi-grid > *,
  .p-main .p-grid-2 > *, .p-main .p-grid-3 > * { min-width: 0; }

  /* Un mot insécable trop long (adresse, identifiant, URL) déborde sa carte
     même après tout ce qui précède : il n'a aucun point de césure. */
  .content .card, .sa-content .sa-card, .p-main .p-card { overflow-wrap: anywhere; }

  /* Un champ ou bloc à largeur fixe ne doit jamais dépasser l'écran. */
  .u-w-110px.u-w-110px, .u-w-120px.u-w-120px, .u-w-140px.u-w-140px,
  .u-w-170px.u-w-170px, .u-w-200px.u-w-200px, .u-w-210px.u-w-210px { max-width: 100%; }

  /* Tableaux du portail client : aucun conteneur de défilement n'existait
     (le script d'enveloppement automatique de base.html n'y est pas chargé). */
  .p-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .p-form-row .p-field { min-width: 100%; }

  /* Superadmin : KPI en deux colonnes. */
  .sa-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Le layout superadmin n'a PAS le script d'enveloppement automatique des
     tables de base.html : sans conteneur de défilement, une table large est
     rognée par .sa-card{overflow:hidden}, donc invisible. On rend le corps de
     carte défilable plutôt que d'envelopper à la main dans dix-sept gabarits. */
  .sa-card-body.sa-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Beaucoup de tables sont posées directement dans .sa-card, sans corps de
     carte : c'est alors .sa-card{overflow:hidden} qui les rogne. Même motif que
     .p-table au portail client — la table devient elle-même le conteneur de
     défilement, sans toucher aux dix-sept gabarits. */
  .sa-table.sa-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sa-content.sa-content { padding: 16px; }
  .sa-topbar.sa-topbar { height: auto; min-height: 60px; padding: 12px 16px; flex-wrap: wrap; }
  .sa-fg.sa-fg { flex-wrap: wrap; }
  .sa-fg.sa-fg .sa-fgrp { min-width: 100%; }
  /* 16px : en dessous, iOS zoome au premier appui dans le champ et casse la
     mise en page. base.html pose bien .fc{font-size:16px} en portrait, mais
     .fc est à (0,1,0) et se fait battre par les utilitaires u-fs-12px /
     u-fs-13px à (0,2,0) — c'est pour cela que des dizaines de champs zoomaient
     encore. On double donc les sélecteurs, ici comme pour les autres familles
     de champs (portail client, saisie libre, formulaires génériques). */
  .fc.fc, .sa-fc.sa-fc, .p-input.p-input, .sf-in.sf-in,
  .form-control.form-control { font-size: 16px; }
  /* Et tous les autres champs, sans avoir à énumérer leurs classes : [class]
     répété porte le sélecteur à (0,2,1), juste au-dessus des utilitaires
     (0,2,0), sans recourir à !important. Cases à cocher, boutons radio et
     curseurs sont exclus : ils n'ouvrent pas de clavier, donc ne zooment pas. */
  input[class][class]:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select[class][class],
  textarea[class][class] { font-size: 16px; }
  /* !important assumé, et seulement ici : certaines pages fixent la taille par
     un sélecteur d'IDENTIFIANT (#cia-input, #cia-role), qu'aucune combinaison
     de classes ne peut dépasser. Sous 16px, iOS zoome au premier appui dans le
     champ et sort la mise en page de l'écran — c'est une règle dure, pas une
     préférence esthétique. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }

  /* Cases à cocher et boutons radio à 13-16px : viser juste au doigt tient de
     l'adresse, et une erreur coche la mauvaise ligne d'un questionnaire
     réglementaire. 20px reste fidèle au dessin tout en étant atteignable. */
  input[type="checkbox"], input[type="radio"],
  input[type="checkbox"][class][class], input[type="radio"][class][class] {
    width: 20px; height: 20px;
  }
  .sa-btn.sa-btn { min-height: 40px; }

  /* Zones tactiles : un bouton d'action ne descend pas sous 40px de haut.
     Doublé : un utilitaire u-h-* / u-p-* à (0,2,0) l'emportait sinon. */
  .btn.btn, .p-btn.p-btn { min-height: 40px; }

  /* Le bouton du menu mesurait 34x34 — c'est LE contrôle de navigation en
     portrait, présent sur les 97 écrans conseiller : le rater, c'est ne plus
     pouvoir changer de page. Idem pour les liens de la barre superadmin, qui
     devient un bandeau en tête sur téléphone. */
  .hamburger.hamburger { width: 40px; height: 40px; justify-content: center; }
  .sa-link.sa-link, .sa-logout.sa-logout { min-height: 40px; align-items: center; }
  /* .sa-btn-sm est parfois posé SEUL, sans .sa-btn : la règle ci-dessus ne le
     couvrait pas et le bouton tombait à 19px de haut. */
  .sa-btn-sm.sa-btn-sm { min-height: 40px; }
  /* Boutons à icône seule (« ✏ », « ✕ », « ‹ ») : 40px de haut mais 25 à 32 de
     large, trop étroit pour un doigt. La règle ne change rien aux boutons
     larges, qui dépassent déjà ce plancher. */
  .btn.btn, .p-btn.p-btn, .sa-btn.sa-btn { min-width: 40px; }

  /* .btn et .sa-btn portent white-space:nowrap : un libellé un peu long
     (« ↻ Générer un nouveau lien », « Réinitialiser l'accès ») dépasse alors sa
     carte et se fait rogner, donc devient inactionnable. Deux lignes valent
     mieux qu'un bouton coupé ; un libellé court reste sur une seule. */
  .btn.btn, .sa-btn.sa-btn { white-space: normal; }

  /* Portail client : une valeur de ligne est en nowrap et déborde sa carte dès
     que le nom est long. La ligne se replie, la valeur se coupe aux espaces. */
  .p-row.p-row { flex-wrap: wrap; }
  .p-row-val.p-row-val { white-space: normal; }

  /* Un bouton NU enfant direct de .fg. À ≤768px, base.html force
     .fg{grid-template-columns:1fr!important} : chaque enfant devient une
     cellule pleine largeur, y compris ces boutons de suppression de ligne, qui
     s'affichaient alors en BARRE ROUGE pleine largeur entre deux champs. On les
     prenait pour un séparateur, et un appui accidentel supprimait la ligne sans
     confirmation. Dix occurrences, sur la fiche client et l'édition du bilan.
     Ils ne portent pas .btn : la règle de zone tactile ci-dessus ne les visait
     pas non plus. */
  .fg.fg > button { justify-self: end; width: max-content; min-height: 40px; }

  /* Contenu réservé au portrait : sert à reporter, sous le libellé principal,
     les colonnes que .hide-mobile masque — sans quoi on filtre et on trie sur
     des données qu'on ne voit pas. */
  .only-mobile.only-mobile { display: block; }
}

@media (max-width: 480px) {
  .sa-kpi-grid { grid-template-columns: minmax(0, 1fr); }
}