/*
 * Adaptation aux téléphones et tablettes.
 *
 * Cette feuille est chargée en DERNIER dans chaque page, après le bloc <style>
 * qui lui est propre. Sans cela, les règles de la page l'emporteraient à
 * spécificité égale et rien de ce qui suit ne s'appliquerait.
 *
 * Elle ne touche à rien au-dessus de 768 px : sur ordinateur, le CRM reste
 * exactement ce qu'il était.
 */

/* ---------- Correctifs valables sur toutes tailles ---------- */

html {
  /* iOS grossit de lui-même certains textes en paysage. On le lui interdit,
     sinon la mise en page saute à chaque rotation du téléphone. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Une image trop large fait défiler la page entière de travers. */
img { max-width: 100%; }

@media (max-width: 768px) {

  /* ---------- Respiration générale ---------- */

  .wrap {
    /* 32 px de marge de chaque côté sur un écran de 375, c'est un cinquième
       de la largeur perdu. On resserre, et on réserve la barre du bas des
       iPhone récents. */
    padding: 14px 12px calc(48px + env(safe-area-inset-bottom)) 12px !important;
    max-width: 100% !important;
  }

  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  .brand { font-size: 19px !important; }
  .tagline { margin-bottom: 16px !important; font-size: 10.5px !important; }
  h1 { font-size: 18px !important; }
  h2 { font-size: 14.5px !important; }
  .intro { font-size: 12.5px !important; margin-bottom: 14px !important; }
  .card { padding: 14px !important; margin-bottom: 12px !important; }

  /* ---------- Pages à panneau latéral ---------- */

  /* Quinze pages sont bâties sur un panneau latéral fixe de 230 px. Sur un
     écran de 375, il en confisquerait les deux tiers. Il passe donc au-dessus
     du contenu, et sa navigation défile au doigt au lieu de s'empiler. */
  .layout { flex-direction: column !important; min-height: 0 !important; }

  /* Le panneau devient une barre horizontale : logo à gauche, navigation à
     droite, le tout défilant au doigt si ça déborde. Les entrées ne sont pas
     rangées dans un conteneur nommé, on cible donc les enfants directs. */
  .sidebar {
    width: 100% !important;
    flex-shrink: 1 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #24322D);
    padding: 9px 12px !important;
    gap: 10px !important;
    flex-direction: row !important;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar > div { display: flex; flex-direction: row; gap: 6px; flex: 0 0 auto; }
  .sidebar .brand { font-size: 14.5px !important; flex: 0 0 auto; }
  .sidebar .brand-logo { height: 1.5em !important; }

  .nav-item {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 9px 13px !important;
    font-size: 11.5px !important;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    margin-top: 0 !important;   /* l'espacement vertical est posé en style direct */
  }

  /* Compteurs et pied de panneau : de la place perdue sur un téléphone.
     On masque le bloc entier, sinon son écart subsisterait à vide. */
  .sidebar > div:has(.stat) { display: none !important; }
  .sidebar .stat, .sidebar-footer { display: none !important; }

  .main { padding: 14px 12px calc(40px + env(safe-area-inset-bottom)) 12px !important; }
  .topbar { gap: 10px !important; margin-bottom: 14px !important; }
  .topbar h1 { font-size: 18px !important; }
  .search { width: 100% !important; font-size: 16px !important; }

  /* ---------- Saisie ---------- */

  /* EN DESSOUS DE 16 px, iOS ZOOME AUTOMATIQUEMENT sur le champ au moment où
     on le touche, et ne dézoome jamais. C'est la première cause de formulaires
     inutilisables sur iPhone. */
  input, select, textarea {
    font-size: 16px !important;
    padding: 11px 12px !important;
  }
  textarea { min-height: 90px !important; }
  label { font-size: 10.5px !important; }

  /* Une cible tactile confortable fait environ 44 px de haut. */
  button, .btn-primary, .btn-ghost, .btn-danger {
    min-height: 42px;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
  }
  td.act button, .barre button { min-height: 38px; }

  /* Les grilles de champs passent toutes sur une colonne. */
  .row, .r2, .r3, .r4, .field-row, .grid, .grille {
    grid-template-columns: 1fr !important;
  }

  .barre { gap: 7px !important; }
  .barre .sep { flex-basis: 100%; height: 0; }

  /* ---------- Tableaux ---------- */

  /* Un tableau de huit colonnes ne rentrera jamais dans 375 px. Plutôt que de
     l'écraser jusqu'à l'illisible, on le rend défilant horizontalement : les
     colonnes gardent leur largeur, le doigt fait le reste. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
  }
  th, td { padding: 8px 7px !important; font-size: 12.5px; }
  th { font-size: 9.5px !important; }

  /* Ce qui doit rester lisible en entier malgré le défilement. */
  td .sous, td .nom { white-space: normal; }
  td .sous { max-width: 260px; }

  /* ---------- Fenêtres modales ---------- */

  /* Sur un téléphone, une fenêtre flottante avec des marges est une perte de
     place. Elle occupe tout l'écran, et défile en interne. */
  .overlay, .modal-bg {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .overlay .modal, .modal-bg .modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    min-height: 100%;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .modal-header { position: sticky; top: 0; z-index: 2; background: var(--panel, #121A17); }
  .modal-header h2 { font-size: 15px !important; }
  .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: var(--panel, #121A17);
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
  .tab-panel, .modal .tab-panel { padding: 16px 14px !important; }

  /* Les onglets d'une fiche défilent au doigt plutôt que de s'empiler. */
  .tabs, .onglets {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 0 12px !important;
  }
  .tabs::-webkit-scrollbar, .onglets::-webkit-scrollbar { display: none; }
  .tab-btn, .onglets button { white-space: nowrap; flex: 0 0 auto; }

  /* ---------- Barre de session ---------- */

  /* Elle est en haut à droite et fixe. Sur un petit écran elle mangeait trois
     lignes : on la réduit à l'essentiel. Le rôle et le nom complet ne servent
     à rien sur un téléphone qu'on est seul à utiliser. */
  #__authBar {
    left: 0;
    border-radius: 0 0 0 0 !important;
    border-left: none !important;
    justify-content: flex-end;
    gap: 7px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    flex-wrap: wrap;
  }
  #__authBar > span { font-size: 10px; }
  /* Le lien « Accueil » porte le logo : son libellé peut disparaître sans
     dommage. « Messages » et « Nouveautés » n'ont QUE du texte — le masquer
     les rendait invisibles, ce qui revenait à supprimer le menu. */
  #__authBar a[href="index.html"] span { display: none; }
  #__authBar a { padding: 4px 8px !important; }
  #__notifBtn { font-size: 10px !important; padding: 4px 8px !important; min-height: 0; }

  /* ---------- Messagerie ---------- */

  /* PIÈGE CLASSIQUE DE LA GRILLE : « 1fr » vaut « minmax(auto, 1fr) », et ce
     minimum « auto » interdit à la colonne de descendre sous la largeur
     minimale de son contenu. L'aperçu d'une conversation étant en nowrap, ce
     minimum valait la longueur entière du texte — la colonne mesurait 572 px
     dans une fenêtre de 375. « minmax(0, 1fr) » l'autorise enfin à se réduire,
     et min-width:0 fait de même pour les enfants en flex. */
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .colonne, .fil, .liste, .conv, .conv-corps, .conv-apercu,
  .messages, .msg, .msg-corps { min-width: 0; }
  .colonne-tete input { min-width: 0; }

  /*
   * LA HAUTEUR EST LA RESSOURCE RARE SUR UN TÉLÉPHONE.
   *
   * Mesuré sur un écran de 390 × 844 : le décor occupait 362 px — 43 % — et
   * il ne restait que 401 px pour lire les messages. Tout ce qui suit vise un
   * seul objectif : rendre ces pixels à la conversation.
   *
   * L'en-tête du fil pesait 109 px à lui seul, parce que je forçais les
   * boutons à passer à la ligne. Compactés, ils tiennent sur la même rangée
   * que le titre.
   */
  .fil-tete { flex-wrap: wrap; padding: 7px 10px !important; gap: 6px !important; }
  .fil-tete h2 { font-size: 13.5px !important; }
  .fil-tete .sous { display: none; }          /* « conversation directe » : on le sait */
  .fil-tete button { font-size: 11px !important; padding: 6px 9px !important; min-height: 32px; }
  .fil-tete .btn-ghost:first-child { padding: 6px 10px !important; }   /* la flèche de retour */

  /* La zone de saisie prenait 169 px au repos, dont 90 pour un champ vide.
     Il repart d'une ligne et grandit sous les doigts. */
  .saisie { padding: 8px 10px !important; }
  .saisie textarea { min-height: 40px !important; max-height: 30vh; }

  /* Un message occupait 229 px, dont 50 pour ses seuls boutons.
     ATTENTION : la règle générale plus haut impose 42 px de haut à TOUT
     bouton, pour que le doigt vise juste. Elle est excellente pour une action
     principale et désastreuse ici — il faut donc la défaire explicitement,
     sinon les réglages fins ci-dessous n'ont aucun effet. Ces boutons-là sont
     bordés d'une zone tactile suffisante par leur conteneur. */
  .msg-actions { padding: 2px 7px !important; gap: 10px !important; margin-bottom: 2px !important; }
  .msg-actions button { font-size: 10.5px !important; padding: 3px 0 !important; min-height: 0 !important; }

  /* Même piège pour les pastilles de réaction : à 42 px de haut, trois émojis
     occupaient la place d'un message entier. */
  .reaction, .reagir { min-height: 0 !important; padding: 2px 8px !important; }
  .reactions { gap: 5px !important; margin-top: 4px !important; }
  .msg { padding: 3px 0 !important; }
  .msg-texte { font-size: 14px !important; }   /* lisible sans être encombrant */

  /* L'en-tête de page répète ce que la barre du haut affiche déjà. */
  .entete .brand { display: none; }
  .entete { margin-bottom: 8px !important; gap: 10px !important; }

  /* La barre d'outils de saisie porte cinq éléments : émoji, Joindre, Fiche,
     l'aide, et Envoyer. Sans passage à la ligne, le bouton Envoyer sortait de
     l'écran de quatorze pixels — et c'est toute la page qui défilait de
     travers. */
  .saisie-bas { flex-wrap: wrap; gap: 7px !important; }
  /* « Entrée pour envoyer » ne veut rien dire au doigt : la place est mieux
     employée par les boutons. */
  .saisie-bas .aide { display: none; }
  .saisie-bas .btn-primary { margin-left: auto; }

  /* Une adresse web collée dans un message ne doit pas pouvoir élargir la
     page : elle se coupe où il faut, quitte à être moins jolie. */
  .messages { padding: 12px !important; overflow-x: hidden; }
  .msg-texte, .conv-apercu { overflow-wrap: anywhere; }
  .msg { gap: 8px !important; }

  /* ---------- Cartes de l'accueil ---------- */

  .grid a.card, .card.module { padding: 14px !important; }
  .section-title { margin: 22px 0 10px 0 !important; font-size: 13px !important; }
}

/* Très petits écrans : on gagne encore quelques pixels. */
@media (max-width: 380px) {
  .wrap { padding-left: 9px !important; padding-right: 9px !important; }
  .brand { font-size: 17px !important; }
}

/* ---------- Mode installé ---------- */

/* Une fois posée sur l'écran d'accueil, l'application n'a plus la barre du
   navigateur : il faut compenser la hauteur de la barre d'état du téléphone,
   sans quoi le contenu passe sous l'heure et la batterie. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  #__authBar { padding-top: calc(6px + env(safe-area-inset-top)) !important; }
}

/* ---------- Impression ---------- */

@media print {
  #__authBar, #__majBandeau, #__pwaBarre { display: none !important; }
}