/* ================================================================
   PAI Secondaire — Couche mobile (téléphones et petites tablettes)
   ----------------------------------------------------------------
   Additive : ce fichier est chargé APRÈS styles.css et ne redéfinit
   que ce qui doit changer sur petit écran. Aucune règle de
   styles.css n'est modifiée, l'affichage sur ordinateur est donc
   inchangé.
   Seuils : 1000 px = tiroir de menu (déjà géré par styles.css),
            760 px = mise en page compacte,
            700 px = tableaux en fiches et fenêtres plein écran.
   ================================================================ */

/* Hauteur réelle du viewport : 100vh ignore la barre d'adresse du
   navigateur et la barre système Android, ce qui fait passer le pied
   de page dessous. 100dvh les prend en compte ; la ligne en vh reste
   en repli pour les navigateurs qui ignorent dvh. */
.login-wrap{min-height:100vh;min-height:100dvh}
.app{min-height:100vh;min-height:100dvh}
.sidebar{padding-top:env(safe-area-inset-top)}

/* Un enfant flex a min-width:auto par défaut : un tableau large placé
   dans .main le fait déborder au lieu de défiler dans son conteneur,
   et c'est TOUTE la page qui part en défilement horizontal — barre
   d'outils et en-têtes compris. Vrai sur ordinateur aussi, où les
   plans d'action dépassaient déjà. */
.main{min-width:0}

@media(max-width:1000px){
  /* Voile sombre derrière le tiroir ouvert : fermer en touchant à côté. */
  .sidebar-voile{position:fixed;inset:0;background:rgba(15,20,32,.45);z-index:19;display:none}
  .sidebar-voile.on{display:block}
  .sidebar{width:270px;max-width:86vw;z-index:20}
  .side-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

@media(max-width:760px){
  /* --- Barre du haut --- */
  /* La barre du haut porte désormais quatre éléments (menu, titre,
     indicateur hors connexion, thème, action principale). Sur 360 px ils
     ne tiennent pas sur une ligne : on autorise le renvoi à la ligne
     plutôt que de laisser la page déborder latéralement. */
  .topbar{padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top));gap:10px;flex-wrap:wrap;row-gap:8px}
  .topbar>div:first-child{min-width:0;flex:1 1 auto}
  .topbar .tt{min-width:0}
  /* Renvoyées à la ligne, les actions occupent la largeur pour rester
     alignées à droite, sous le titre. */
  .topbar .actions{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end}
  .topbar .tt h2{font-size:16.5px;line-height:1.25}
  .topbar .tt p{display:none}          /* le sous-titre mange une ligne pour rien */
  .topbar .actions{gap:6px}

  /* --- Contenu --- */
  .content{padding:16px 14px calc(70px + env(safe-area-inset-bottom))}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
  .kpi{padding:14px}
  .kpi .val{font-size:25px}
  .kpi .badge-ico{top:12px;right:12px;width:30px;height:30px;font-size:15px}
  /* Sans cette réserve, « Taux de réalisation » passe sous sa pastille. */
  .kpi .lab{padding-right:38px}
  .card .hd{padding:14px}
  .card .bd{padding:14px}
  .chart-wrap{height:240px}

  /* --- Cibles tactiles : 44 px est le minimum confortable au doigt --- */
  .btn{min-height:44px;padding:10px 15px}
  .btn.sm{min-height:38px;padding:8px 12px}
  .btn.ghost.x,.x{min-height:44px;min-width:44px}
  .nav a{padding:12px}
  .opt{padding:10px 14px;min-height:42px;display:inline-flex;align-items:center}
  .tabs button{min-height:44px}

  /* --- Champs : 16 px empêche le zoom automatique à la mise au point.
         Sous iOS ce zoom ne revient jamais en arrière ; sous Android il
         décale la mise en page. --- */
  input,select,textarea{font-size:16px;padding:11px 12px}
  .field{margin-bottom:12px}

  /* --- Barre d'outils : la recherche prend toute la ligne --- */
  .toolbar{gap:8px;margin-bottom:14px}
  .search{min-width:0;max-width:none;flex:1 1 100%}

  /* --- Onglets : défilement horizontal plutôt qu'un empilement --- */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;flex:0 0 auto}

  /* --- Grilles : les vues posent des colonnes en style en ligne
         (grid-template-columns:1.35fr 1fr, etc.). Sur un téléphone,
         deux colonnes de 170 px sont illisibles : tout retombe sur une
         colonne. Le !important est nécessaire pour battre le style en
         ligne, on ne peut pas faire autrement sans toucher aux vues. --- */
  .content .grid{grid-template-columns:minmax(0,1fr)!important}

  /* Un <select> se dimensionne sur son option la plus longue et
     ignore le width:100% hérité quand il est dans une barre flex. */
  .toolbar>*{min-width:0;max-width:100%}
  /* Un matricule ou une adresse sans espace ne doit pas élargir la fiche. */
  .card,.kpi,.action-item,.sugg{overflow-wrap:anywhere}

  /* --- Divers --- */
  .bubble{max-width:88%}
  .detail-head{gap:12px}
  .detail-head .ava{width:46px;height:46px;font-size:17px}
  .stat-row{gap:16px}
  .toast{left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));text-align:center}
  .legend{justify-content:flex-start}
}

/* ================================================================
   Fenêtres modales en plein écran (sous 700 px)
   Une fenêtre centrée avec des marges est inutilisable au doigt :
   le contenu tient sur trop peu de hauteur et le pied de page sort
   de l'écran.
   ================================================================ */
@media(max-width:700px){
  .overlay{padding:0;align-items:stretch;overflow:hidden}
  .modal,.modal.wide{max-width:none;border-radius:0;min-height:100dvh;display:flex;flex-direction:column}
  .modal .mh{position:sticky;top:0;z-index:2;background:var(--surface);padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top))}
  .modal .mh h3{font-size:15.5px}
  .modal .mb{max-height:none;flex:1 1 auto;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
  .modal .mf{position:sticky;bottom:0;z-index:2;background:var(--surface);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px}
  .modal .mf .btn{flex:1 1 auto;justify-content:center}
  .domain-block{padding:12px}
  .q .qt{font-size:14px}
}

/* ================================================================
   Tableaux en fiches (sous 700 px)
   Un tableau de 7 colonnes sur 360 px de large est illisible. Chaque
   ligne devient une fiche où l'intitulé de colonne précède sa valeur.
   La classe « cartes » et l'attribut data-libelle sont posés par
   public/js/tableaux-mobiles.js — jamais à la main dans les vues.
   Les tableaux matriciels (plans d'action) gardent leur défilement
   horizontal : les empiler n'aurait aucun sens.
   ================================================================ */
@media(max-width:700px){
  .cartes-parent{overflow-x:visible}
  table.cartes{font-size:13.5px}
  table.cartes thead{display:none}
  table.cartes,table.cartes tbody,table.cartes tr,table.cartes td{display:block;width:100%}
  table.cartes tr{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:var(--surface);overflow:hidden}
  table.cartes tr:last-child{margin-bottom:0}
  table.cartes td{border-bottom:1px solid var(--border);padding:10px 12px;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;text-align:right}
  table.cartes tr td:last-child{border-bottom:none}
  table.cartes td::before{content:attr(data-libelle);flex:0 0 38%;text-align:left;color:var(--muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding-top:3px}
  /* Colonne sans intitulé (boutons d'action) : la valeur occupe la largeur. */
  table.cartes td[data-libelle=""]::before,table.cartes td:not([data-libelle])::before{display:none}
  table.cartes td[data-libelle=""],table.cartes td:not([data-libelle]){justify-content:flex-end;flex-wrap:wrap;gap:8px}
  table.cartes td>*{min-width:0;max-width:100%}
  table.cartes .who{justify-content:flex-end;text-align:right}
  table.cartes .prog{min-width:110px}
}