/* ══ LE TÉLÉPHONE, PENSÉ COMME UNE APPLICATION ═══════════════════════════════
   Maquette validée par Tevini le 2 octobre 2026 (« Aujourd'hui », une campagne,
   la fiche d'une personne, Contacts). Carnet : `docs/notes/NOTES-mobile.md`.

   ⚠️ **UN SEUL DOMICILE POUR LA FORME TÉLÉPHONE DE CETTE REFONTE** : tout est
   sous `max-width: 900px`, chargé APRÈS `crm.css`. L'ordinateur ne
   lit rien d'ici — « la version PC est nickel ».
   ⚠️ Les éléments propres au téléphone portent `.rc-m-seul` (cachés à
   l'ordinateur) ; ceux qu'il cache, `.rc-m-cache`. */

/* ⚠️ `.rc-m-seul` ne se cache qu'À L'ORDINATEUR : au téléphone, chaque élément
   garde son propre `display` (un `revert` l'écrasait, le bouton flottant
   passait sur deux lignes). */
@media (min-width: 901px) { .rc-m-seul { display: none !important; } }

@media (max-width: 900px) {
  .rc-m-cache { display: none !important; }

  /* ── La barre du bas : cinq entrées, le « + » au centre ─────────────────── */
  /* ⚠️ Pas de `backdrop-filter` ici : il ferait de la barre le cadre de ses
     enfants FIXES, et le voile des feuilles ne couvrirait plus que la barre. */
  .rc-nav-basse { grid-auto-columns: minmax(0, 1fr); align-items: start; background: var(--card); }
  .rc-nav-basse > a, .rc-nav-basse > details > summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 58px; padding: 8px 2px 6px; font-size: 11px; color: var(--muted-foreground);
    text-decoration: none; cursor: pointer; list-style: none; }
  .rc-nav-basse > details > summary::-webkit-details-marker { display: none; }
  .rc-nav-basse a[aria-current], .rc-nav-basse details[open] > summary { color: var(--accent); }
  .rc-nav-basse a span, .rc-nav-basse summary span { font-size: 11px; }
  .rc-nav-plus > summary .rc-nav-rond { width: 46px; height: 46px; border-radius: 16px; background: var(--primary);
    color: var(--on-primary); display: grid; place-items: center; margin-top: -2px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mmb-rouge) 35%, transparent); }
  .rc-nav-plus > summary { padding-top: 6px; }
  /* La feuille qui monte du bas : « + » et « Plus ». */
  .rc-nav-feuille { position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 43; background: var(--card); border-top: 1px solid var(--border-strong);
    border-radius: 22px 22px 0 0; padding: 10px 14px 14px; box-shadow: 0 -24px 60px rgba(0, 0, 0, .55);
    display: grid; gap: 4px; }
  .rc-nav-feuille::before { content: ""; width: 38px; height: 4px; border-radius: 2px;
    background: var(--border-strong); margin: 0 auto 8px; }
  .rc-nav-basse .rc-nav-feuille a { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px;
    border-radius: 14px; color: var(--foreground); text-decoration: none; font-size: var(--text-md); }
  .rc-nav-basse .rc-nav-feuille a:active, .rc-nav-basse .rc-nav-feuille a:hover { background: var(--muted); }
  .rc-nav-feuille a svg { color: var(--accent); }
  /* L’événement où l’on est (13 octobre 2026) : en tête, mis en avant. */
  .rc-nav-basse .rc-nav-feuille a.rc-nav-mise { background: color-mix(in srgb, var(--mmb-rouge) 14%, transparent); border: 1px solid var(--accent-ring-strong); min-height: 60px; }
  .rc-nav-basse .rc-nav-mise span { font-size: var(--text-md); text-align: left; }
  .rc-nav-basse .rc-nav-mise small { display: block; color: var(--muted-foreground); font-size: var(--text-xs); }
  /* Un voile derrière la feuille ouverte ; un toucher dessus la referme (`_mobile.js`). */
  .rc-nav-basse details[open]::before { content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(5, 6, 10, .55); }

  /* ── Les titres : en haut à gauche, comme une application ──────────────── */
  .rc-titre-page { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
  .rc-content { padding: 12px 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); gap: 16px; }

  /* ── Les pastilles qui défilent sur place (filtres) ─────────────────────── */
  .rc-m-puces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .rc-m-puces::-webkit-scrollbar { display: none; }
  .rc-m-puce { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
    border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
    font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
  .rc-m-puce b { color: var(--foreground); font-weight: 600; }
  .rc-m-puce[aria-current] { background: color-mix(in srgb, var(--mmb-rouge) 18%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); color: var(--foreground); }

  /* ── Le bouton flottant (« Ajouter une personne ») ──────────────────────── */
  .rc-m-flottant { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40;
    display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 17px;
    background: var(--primary); color: var(--on-primary); font-weight: 600; border: 0; font: inherit; font-weight: 600;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--mmb-rouge) 35%, transparent); text-decoration: none; cursor: pointer; }
  body.rc-masse-active .rc-m-flottant { display: none !important; }
}

/* ── 1 · Aujourd'hui : le canal à portée de pouce sur chaque tâche ──────────── */
@media (max-width: 900px) {
  .rc-j-rangee { grid-template-columns: 40px minmax(0,1fr) auto; column-gap: 12px; padding: 12px; }
  .rc-j-rangee .rc-pastille { width: 40px; height: 40px; font-size: 13px; }
  .rc-j-rangee-titre { font-weight: 600; }
  /* Au-dessus du lien qui couvre la rangée : on ouvre le canal, pas la tâche. */
  .rc-j-go { grid-area: g; align-self: center; position: relative; z-index: 2;
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); color: var(--accent); }
  .rc-j-go--whatsapp, .rc-j-go--sms { background: rgba(74, 222, 128, .14); color: var(--success); }
  .rc-j-go--appel { background: rgba(125, 211, 252, .14); color: var(--info); }
  .rc-j-rangee:has(.rc-j-go) .rc-j-chevron { display: none; }
}

/* ── 2 · Une campagne : une liste, le menu ⋯, le bouton flottant ────────────── */
@media (max-width: 900px) {
  .rc-m-lignes { display: flex; flex-direction: column; }
  .rc-m-ligne { display: grid; grid-template-columns: 40px minmax(0,1fr) auto 14px; align-items: center; gap: 12px;
    min-height: 64px; padding: 10px 2px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
  .rc-m-ligne:active { background: var(--muted); }
  .rc-m-ligne[hidden] { display: none; }
  [data-m-filtres] { margin-bottom: 4px; }
  button.rc-m-puce { font: inherit; font-size: var(--text-sm); cursor: pointer; }
  .rc-m-ligne .rc-pastille { width: 40px; height: 40px; font-size: 13px; }
  .rc-m-ligne-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rc-m-ligne-nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-m-ligne small { color: var(--muted-foreground); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-m-retard { color: var(--error); font-weight: 500; }
  .rc-m-statut { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong);
    color: var(--muted-foreground); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .rc-m-statut--abouti { color: var(--success); border-color: rgba(74, 222, 128, .3); }
  .rc-m-statut--en_cours { color: var(--accent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }
  .rc-m-statut--clos, .rc-m-statut--perdu { color: var(--disabled-foreground); }
  .rc-m-chevron { color: var(--disabled-foreground); display: flex; }

  /* Le menu ⋯ : un `<details>`, ouvert vers le bas à droite. */
  .rc-m-menu { position: relative; margin-left: auto; }
  .rc-m-menu-bouton { list-style: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); cursor: pointer; }
  .rc-m-menu-bouton::-webkit-details-marker { display: none; }
  .rc-m-menu-corps { position: absolute; right: 0; top: 50px; z-index: 30; min-width: 200px; padding: 6px;
    background: var(--card); border: 1px solid var(--border-strong); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55); display: grid; }
  .rc-m-menu-corps form { margin: 0; }
  .rc-m-menu-corps a, .rc-m-menu-corps button { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 0 14px;
    border: 0; background: none; border-radius: 11px; color: var(--foreground); font: inherit; text-align: left;
    text-decoration: none; cursor: pointer; }
  .rc-m-menu-corps a:active, .rc-m-menu-corps button:active { background: var(--muted); }
  .rc-m-menu-corps .rc-m-menu-danger { color: var(--error); }
}

/* La recherche d'une campagne sur une ligne : le champ, puis le filtre. */
@media (max-width: 900px) {
  .rc-outillage { flex-direction: row !important; align-items: center; gap: 8px; padding: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important; }
  .rc-outillage .rc-cherche { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 46px;
    padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); }
  .rc-outillage .rc-cherche input { flex: 1; min-width: 0; background: none; border: 0; color: var(--foreground); font-size: 16px; outline: none; }
  .rc-outillage .rc-cherche-echap, .rc-outillage .rc-outils a[aria-label="Chercher"],
  .rc-outillage .rc-outils-trait { display: none !important; }
  .rc-outillage .rc-outils { flex: none; }
}

/* ── 3 · La fiche d'une personne ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .rc-fiche-identite { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .rc-fiche-identite > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .rc-fiche-identite .rc-pastille--xl { width: 84px; height: 84px; font-size: 28px; }
  .rc-fiche-nom { justify-content: center; font-size: 23px; font-weight: 700; }
  .rc-m-fiche-tel { display: grid; gap: 12px; margin-top: 4px; }
  .rc-m-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .rc-m-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 10px;
    border-radius: 15px; background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
    font-size: 12px; text-decoration: none; min-width: 0; }
  .rc-m-action span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rc-m-action svg { color: var(--accent); }
  .rc-m-action--appel svg { color: var(--info); }
  .rc-m-action--whatsapp svg, .rc-m-action--sms svg { color: var(--success); }
  .rc-m-action:active { background: var(--muted); }
  .rc-m-autres-canaux { margin-top: -2px; }
  .rc-m-vues { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 13px;
    background: var(--card); border: 1px solid var(--border); }
  .rc-m-vues button { min-height: 40px; border: 0; background: none; border-radius: 10px; font: inherit;
    font-size: var(--text-sm); color: var(--muted-foreground); cursor: pointer; }
  .rc-m-vues button[aria-selected="true"] { background: var(--muted); color: var(--foreground); font-weight: 600; }

  /* Chaque vue montre ce qui lui revient. */
  .rc-fiche[data-m-vue-active="activite"] .rc-fiche-onglets,
  .rc-fiche[data-m-vue-active="activite"] .rc-fiche-panneau,
  .rc-fiche[data-m-vue-active="campagnes"] .rc-fiche-onglets,
  .rc-fiche[data-m-vue-active="campagnes"] .rc-fiche-panneau,
  .rc-fiche[data-m-vue-active="activite"] .rc-fiche-campagnes,
  .rc-fiche[data-m-vue-active="infos"] .rc-fiche-vie { display: none !important; }
  .rc-fiche[data-m-vue-active="campagnes"] .rc-fiche-vie > *:not(.rc-fiche-campagnes) { display: none !important; }
}

/* ── 4 · Contacts ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rc-repertoire .rc-facettes { display: none; }
  .rc-m-facettes { margin-top: 12px; }
  .rc-repertoire { display: block; }
}
@media (max-width: 900px) {
  .rc-repertoire-liste .rc-actions { gap: 0; }
  .rc-repertoire-liste .rc-action { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    padding: 10px 2px; min-height: 62px; box-shadow: none; }
  .rc-repertoire-liste .rc-action .rc-pastille { width: 40px; height: 40px; font-size: 13px; }
  .rc-repertoire-liste .rc-groupe-titre { color: var(--accent); }
}

/* La sélection : une feuille posée sur la barre du bas, des gestes égaux. */
@media (max-width: 900px) {
  .rc-masse-barre { left: 0; right: 0; width: auto; max-width: none; transform: none;
    bottom: calc(66px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    border-width: 1px 0 0; padding: 14px 14px 12px; gap: 8px; box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); }
  .rc-masse-barre .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 6px; font-size: var(--text-sm);
    white-space: normal; line-height: 1.2; border-radius: 14px; }
  .rc-masse-barre .rc-masse-compte { font-size: var(--text-md); }
  .rc-masse-vider { top: 8px; right: 8px; }
}

/* ── Les cibles au pouce : 44 points (audit d'interface du 2 octobre 2026) ── */
@media (max-width: 900px) {
  .rc-m-puce, .rc-m-vues button { min-height: 44px; }
  .rc-fiche-poubelle { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; opacity: .7; }
  .rc-fiche-nom-geste { min-height: 44px; }
  .rc-fiche-photo-retirer { min-height: 44px; margin-top: 0; }
  .rc-j-traiter { min-height: 44px; }
  .rc-fiche-vie .btn { min-height: 44px; }
}

/* ── Le fil d'Ariane : un retour, sur une ligne ──────────────────────────────
   Au téléphone, seul le dernier lien reste, précédé de « ‹ » : c'est le geste
   « retour » d'une application. Le nom de la page est déjà le grand titre. */
@media (max-width: 900px) {
  .rc-fil { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
  .rc-fil > * { display: none !important; }
  .rc-fil > a:last-of-type { display: inline-flex !important; align-items: center; gap: 6px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted-foreground); }
  .rc-fil > a:last-of-type::before { content: "‹"; font-size: 22px; line-height: 1; color: var(--accent); }
  .rc-fiche-rang { display: none; }
}

/* « Reprendre : … » (une tâche laissée ouverte) : posé au-dessus de la barre du
   bas ; le bouton flottant monte au-dessus de lui ; la sélection le masque. */
@media (max-width: 900px) {
  .rc-bulles { left: 12px; right: 12px; max-width: none; bottom: calc(74px + env(safe-area-inset-bottom));
    overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
  .rc-bulles::-webkit-scrollbar { display: none; }
  .rc-bulle { flex: none; }
  body:has(.rc-bulles) .rc-m-flottant { bottom: calc(136px + env(safe-area-inset-bottom)); }
  body.rc-masse-active .rc-bulles { display: none; }
  /* Une activité ouverte prend tout l'écran : les bulles attendent qu'on la quitte. */
  html:has(dialog[data-bulle][open]) .rc-bulles { display: none; }
}

/* ── Contacts en tableau, au téléphone (4 octobre 2026) ────────────────────
   Huit colonnes ne tiennent pas sous le doigt : chaque rangée devient un bloc,
   le nom en tête, puis chaque valeur précédée de son libellé. */
@media (max-width: 900px) {
  .rc-vc-cadre { background: none; border: 0; border-radius: 0; overflow: visible; }
  .rc-vc-tableau, .rc-vc-tableau tbody, .rc-vc-tableau tr, .rc-vc-tableau td { display: block; }
  .rc-vc-tableau thead { display: none; }
  .rc-vc-tableau tr { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--border); }
  .rc-vc-tableau td { height: auto; border: 0; padding: 2px 0; max-width: none; white-space: normal; }
  /* ⚠️ La pile de cartes de `.rc-tableau` pose un libellé EN CAPITALES sur sa
     propre ligne : sept valeurs par personne prenaient un écran entier. Ici,
     le libellé précède la valeur, sur la même ligne. */
  .rc-vc-tableau td::before { content: none; }
  .rc-vc-tableau td[data-libelle]::before { content: attr(data-libelle) " · "; display: inline;
    font-size: inherit; letter-spacing: normal; text-transform: none; margin: 0;
    color: var(--muted-foreground); }
  .rc-vc-tableau .rc-vc-case { position: absolute; left: 0; top: 14px; width: auto; }
  .rc-vc-tableau .rc-vc-nom { font-size: var(--text-base); padding-bottom: 4px; }
  .rc-pagination-par { margin-left: 0; }
}