/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   IPHONE : LA PASSE MOBILE (js/187-mobile.js, 10.10.2026)
   Visite en vrai à 375 px : recherche qui quittait l'écran, listes empilées sans libellés, tableaux
   qui défilaient sans le dire, liste des clients sans un seul client au premier écran, onglets du
   bas en 11 px gris pâle. Deux points de bascule seulement dans ce fichier : 768 px (téléphone) et
   1100 px (tablette) — ceux de la barre du haut et des grilles du CRM.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. La palette de recherche (js/74) ───────────────────────────────────────────────────────────
   « Annuler » et l'annonce du nombre de résultats existent partout ; le bouton ne se voit que sur
   téléphone (au bureau, Échap). */
.nav-palette-fermer {
  display: none; flex-shrink: 0; align-items: center; min-height: 44px; padding: 0 6px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500;
  color: var(--accent);
}
.nav-palette-annonce {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#nav-q { -webkit-appearance: none; appearance: none; }
.nav-palette-ligne:focus-visible, .nav-palette-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 768px) {
  /* Plein écran, comme une recherche d'app : rien derrière, le clavier en dessous. */
  .nav-palette-fond {
    padding: 0; align-items: stretch; background: var(--bg);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    animation: none;   /* ouverture instantanée : pas de fondu d'opacité par-dessus l'écran */
  }
  .nav-palette {
    width: 100%; height: 100vh; height: 100dvh; max-height: none;
    border: 0; border-radius: 0; box-shadow: none; animation: none;
  }
  .nav-palette-tete { padding: calc(8px + env(safe-area-inset-top)) 10px 8px 16px; gap: 10px; }
  .nav-palette-tete kbd { display: none; }
  .nav-palette-tete input { font-size: 17px !important; min-height: 44px; }
  .nav-palette-fermer { display: inline-flex; }
  .nav-palette-liste { padding: 4px 8px calc(16px + env(safe-area-inset-bottom)); }
  .nav-palette-section { padding: 14px 10px 6px; font-size: 11px; }
  .nav-palette-ligne { min-height: 52px; padding: 10px 10px; }
  .nav-palette-lib b { font-size: 15px; }
  .nav-palette-lib small { font-size: 12.5px; }
  /* Pas de survol au doigt : l'étoile se voit, sans prendre la place d'un résultat. */
  .nav-palette-etoile { opacity: .55; padding: 10px 6px; }
}

/* ── 2. La barre du haut et les onglets du bas (js/28) ────────────────────────────────────────────
   Libellés à 12 px, gris lisible (--text-muted : 6,9:1 en sombre, 6,1:1 en clair). L'onglet actif
   se reconnaît à sa graisse et au trait d'accent — pas à la couleur seule : en clair avec un accent
   vert, du texte vert sur blanc ne tiendrait pas 4,5:1. Chaque cible fait au moins 44 px. */
@media (max-width: 768px) {
  .rex-topbar-btn { display: inline-flex; align-items: center; justify-content: center; color: #fff; min-width: 44px; min-height: 44px; }
  .rex-topbar-btn svg { display: block; }
  .rex-tab {
    position: relative; min-width: 44px; min-height: 50px !important;
    font-size: 12px !important; font-weight: 500; color: var(--text-muted) !important; letter-spacing: 0;
  }
  .rex-tab-lib { line-height: 1.2; }
  .rex-tab-icone { opacity: .9; filter: grayscale(.35); }
  .rex-tab.actif { color: var(--text) !important; font-weight: 600; }
  .rex-tab.actif::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 26px; height: 3px; margin-left: -13px;
    border-radius: 0 0 3px 3px; background: var(--accent);
  }
  .rex-tab:focus-visible, .rex-tab-plus:focus-visible, .rex-topbar-btn:focus-visible, .mobile-menu-btn:focus-visible {
    outline: 2px solid #00CFFF; outline-offset: 2px;
  }
  /* Le bandeau de page (js/44) : la date et le logo du groupe cèdent la place au contenu. */
  .rex-bandeau { padding: 14px 16px !important; margin-bottom: 12px; }
  .rex-bandeau .rex-bandeau-droite { display: none; }
}

/* ── 3. Les listes empilées gardent leurs libellés ────────────────────────────────────────────────
   js/187 pose data-l (le libellé de la colonne) sur chaque cellule. Sous 768 px, la ligne devient une
   carte : la première cellule en titre, les suivantes « libellé · valeur » sur deux colonnes. */
@media (max-width: 768px) {
  /* row-gap à 0 : le libellé couvre neuf rangées, un écart s'y multiplierait par huit. */
  .table-row > [data-l] {
    display: grid !important; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
    column-gap: 10px; row-gap: 0; align-items: start; justify-items: start; text-align: left !important;
  }
  .table-row > [data-l]::before {
    content: attr(data-l); grid-column: 1; grid-row: 1 / span 9;
    font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .01em; text-transform: none;
    color: var(--text-muted); overflow-wrap: anywhere;
  }
  .table-row > [data-l] > * { grid-column: 2; min-width: 0; }
  .table-row > [data-l]:first-child { display: block !important; font-size: 14px; }
  .table-row > [data-l]:first-child::before { content: none; }

  /* Les tableaux de js/66 s'empilent eux aussi à 768 px (et non plus 720), avec leurs libellés. */
  .tbl-entete { display: none; }
  .tbl-ligne { grid-template-columns: 1fr; padding: var(--e-2, 8px) 0; gap: 2px; }
  .tbl-cellule { white-space: normal; padding: 2px var(--d-cellule-x, 14px); }
  .tbl-cellule.droite { text-align: left; }
  .tbl-ligne > .tbl-cellule[data-l]:not(:first-child) { display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); column-gap: 10px; }
  .tbl-ligne > .tbl-cellule[data-l]:not(:first-child)::before {
    content: attr(data-l); font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.6;
  }
  .tbl-ligne > .tbl-cellule:first-child, .tbl-ligne > .tbl-case + .tbl-cellule { font-weight: var(--t-moyen, 600); }
}

/* ── 4. Les tableaux larges : on voit qu'ils continuent ───────────────────────────────────────────
   js/187 marque .rxm-defile une zone qui déborde, .rxm-g / .rxm-d le côté qui cache des colonnes.
   Un fondu sur ce bord — un masque, qui reste visible même sur des lignes à fond coloré. */
.rxm-defile { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; }
.rxm-defile.rxm-d { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px); mask-image: linear-gradient(to left, transparent 0, #000 32px); }
.rxm-defile.rxm-g { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px); mask-image: linear-gradient(to right, transparent 0, #000 32px); }
.rxm-defile.rxm-g.rxm-d {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.rxm-defile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 768px) {
  /* Fiche client › Collaborateurs (js/05, table de 980 px) : une carte par collaborateur. */
  #tab-collaborateurs table { min-width: 0 !important; display: block; }
  #tab-collaborateurs thead { display: none; }
  #tab-collaborateurs tbody { display: flex; flex-direction: column; gap: 10px; }
  #tab-collaborateurs tbody tr {
    display: block; padding: 10px 12px; border: 1px solid var(--border) !important;
    border-radius: 12px; background: var(--surface);
  }
  #tab-collaborateurs tbody td {
    display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); column-gap: 10px; justify-items: start;
    padding: 3px 0 !important; min-width: 0 !important; text-align: left !important; white-space: normal !important;
  }
  #tab-collaborateurs tbody td[data-l]::before { content: attr(data-l); font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.6; }
  #tab-collaborateurs tbody td:not([data-l]) { display: flex; justify-content: flex-end; gap: 8px; }
  #tab-collaborateurs tbody td:not([data-l]) button { min-width: 44px; min-height: 44px; }

  /* Demande d'offre › collaborateurs (js/07) : les deux rangs en grilles de pixels fixes (débordaient
     de 300 px) passent sur deux colonnes souples. */
  .do-collab-row > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .do-collab-row > div > button { justify-self: end; min-width: 44px; min-height: 44px; }
  .do-collab-row > div > span:empty { display: none; }
}

/* ── 5. La liste des clients sur iPhone (js/04 viewPortefeuille) ──────────────────────────────────
   Objectif mesuré : au moins quatre clients dans le premier écran à 375 × 812. */
.pf-filtres-btn, .pf-nouveau-mobile { display: none; }
@media (max-width: 768px) {
  .pf-entete { margin-bottom: 8px !important; }
  .pf-entete .pf-nouveau { display: none; }
  .pf-oz-archive { margin-bottom: 10px; }
  .pf-filtres {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
    gap: 8px !important; margin-bottom: 10px !important;
  }
  .pf-filtres .pf-recherche { min-width: 0 !important; width: 100%; }
  .pf-filtres-btn, .pf-nouveau-mobile {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  }
  .pf-filtres-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
  .pf-filtres.ouvert .pf-filtres-btn { border-color: var(--accent); }
  .pf-nouveau-mobile { min-width: 44px; padding: 0; border: 0; background: var(--accent); color: var(--on-accent); font-size: 22px; font-weight: 400; }
  .pf-filtres-nb {
    min-width: 18px; padding: 1px 5px; border-radius: 999px; text-align: center;
    font-size: 11px; background: var(--accent); color: var(--on-accent);
  }
  .pf-filtres-btn:focus-visible, .pf-nouveau-mobile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Les réglages (et ceux que js/86 et js/89 ajoutent en fin de barre) attendent « Filtres ». */
  .pf-filtres-reglages, .pf-filtres > .arb-bascule, .pf-filtres > .sc-case { display: none !important; }
  .pf-filtres.ouvert .pf-filtres-reglages {
    display: grid !important; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  }
  .pf-filtres.ouvert .pf-filtres-reglages select { max-width: none !important; width: 100%; }
  .pf-filtres.ouvert > .arb-bascule, .pf-filtres.ouvert > .sc-case { display: flex !important; grid-column: 1 / -1; }

  /* Les statistiques sur une ligne de pastilles, qui défile si besoin. */
  .pf-stats { flex-wrap: nowrap !important; overflow-x: auto; gap: 6px !important; margin-bottom: 10px !important; scrollbar-width: none; }
  .pf-stats::-webkit-scrollbar { display: none; }
  .pf-stats .stat-card {
    flex: 0 0 auto; min-width: 0 !important; display: flex; align-items: baseline; gap: 6px;
    padding: 6px 11px !important; border-radius: 999px !important; box-shadow: none;
  }
  .pf-stats .stat-label { margin: 0 !important; font-size: 11px; letter-spacing: 0; text-transform: none; }
  .pf-stats .stat-value { font-size: 14px !important; }
  .pf-stats .stat-sub { display: none; }

  /* Un client = une carte de deux lignes : nom et CA, puis statut, segment, téléphone, agent. */
  .pf-liste .pf-ligne {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas: "client client client ca" "statut segment contact agent";
    gap: 6px 8px !important; padding: 10px 12px !important; align-items: center;
  }
  .pf-liste .pf-ligne > [data-l]::before, .pf-liste .pf-ligne > div::before { content: none; }
  .pf-liste .pf-ligne > .pf-c-client { grid-area: client; display: block !important; min-width: 0; font-size: inherit; }
  .pf-liste .pf-ligne > .pf-c-client > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
  .pf-liste .pf-ligne > .pf-c-ca { grid-area: ca; display: block !important; text-align: right; white-space: nowrap !important; }
  .pf-liste .pf-ligne > .pf-c-ca[data-l]::before {
    content: attr(data-l); display: block; font-size: 10px; font-weight: 500; color: var(--text-muted);
  }
  .pf-liste .pf-ligne > .pf-c-statut { grid-area: statut; display: block !important; }
  .pf-liste .pf-ligne > .pf-c-segment { grid-area: segment; display: block !important; }
  .pf-liste .pf-ligne > .pf-c-contact { grid-area: contact; display: block !important; min-width: 0; }
  .pf-liste .pf-ligne > .pf-c-contact > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
  /* Sur le téléphone, le numéro sert plus que l'adresse e-mail (montrée seulement s'il manque). */
  .pf-liste .pf-ligne > .pf-c-contact > div:first-child { display: none; }
  .pf-liste .pf-ligne > .pf-c-contact:has(> div:last-child:empty) > div:first-child { display: block; }
  .pf-liste .pf-ligne > .pf-c-agent { grid-area: agent; display: block !important; }
}

/* ── 6. Archives OZ : un lien discret, des bandeaux d'archive ─────────────────────────────────── */
.rex-oz-lien {
  min-height: 0; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-xs, 11px); color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.rex-oz-lien:hover { color: var(--text); }
.rex-oz-lien[aria-pressed="true"] { color: var(--accent); }
.rex-oz-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rex-bandeau-hote .rex-oz-lien { color: rgba(255,255,255,.78); }
.rex-bandeau-hote .rex-oz-lien:hover { color: #fff; }
@media (max-width: 768px) { .rex-oz-lien { display: inline-flex; align-items: center; min-height: 44px; } }

.ck-oz-archive {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; padding: 12px 16px;
  border-radius: 14px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.38); color: var(--text);
}
.ck-oz-archive-ico { font-size: 20px; line-height: 1; }
.ck-oz-archive > div { flex: 1 1 240px; min-width: 0; }
.ck-oz-archive b { display: block; font-size: var(--t-m, 13.5px); }
.ck-oz-archive small { font-size: var(--t-s, 12.5px); color: var(--text-muted); }
.ck-oz-archives { margin: 26px 0 4px; text-align: center; }
.ck-oz-archives .dbx-lien { color: var(--text-muted); font-size: var(--t-s, 12.5px); }
.ck-oz-archives .dbx-lien:hover { color: var(--text); }

/* Marquage des entités (js/39) : le nom du client devient un vrai bouton (clavier, lecteur d'écran). */
button.me-nom {
  display: block; max-width: 100%; padding: 0; border: 0; background: none; min-height: 0;
  font: inherit; font-size: var(--t-l); font-weight: 600; text-align: left; color: var(--text); cursor: pointer;
}
button.me-nom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }