/* Complément propre à MatchMaBrand.
   ⚠️ `charte.css` n'est JAMAIS modifié : c'est le fichier de TVNI, repris tel
   quel. Tout ce qui est propre à ce projet vit ici, et n'utilise que les
   variables déjà définies par la charte.

   ⚠️ **L'ORDINATEUR D'ABORD** (décision du 10 septembre 2026, voir
   `docs/PARTI-PRIS-ECRANS.md`). L'application remplace un tableur : sur grand
   écran elle doit lui ressembler — un vrai tableau, dense, éditable en place.
   Le téléphone reprend la main sous 900 px, et le tableau devient des cartes.
   Le parti pris précédent disait l'inverse ; ne pas le rétablir sans relire
   le document. */

/* ── La coquille : deux espaces, une seule charpente ──────────────────────────
   Motif repris de TVNI au caractère près : barre de 200 px, entrée de menu à
   8/12 px, l'entrée active soulignée à gauche par un filet d'accent, et EN BAS
   la bascule d'espace, la carte de profil, la sortie. Deux coquilles séparées
   finiraient par diverger. */

/* ── La coquille : une bande en haut, tout le reste dessous ───────────────
   ⚠️ **LE RAIL DE 200 PX EST PARTI LE 14 SEPTEMBRE 2026.** Sur un écran dont le
   sujet est un tableau, la largeur vaut plus cher que la hauteur : 200 px de
   rail, c'est deux colonnes de moins, et c'est ce qui forçait la date, le
   statut, le téléphone et l'e-mail à se couper. La barre du haut coûte 52 px de
   hauteur, soit une rangée, et rend 200 px à chaque ligne du tableau. */
.rc-app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: calc(100dvh - var(--haut)); }
:root { --rail: 208px; --haut: 0px; }
/* La barre du haut (4 octobre 2026, `_barre_haut.html`) : ce qui colle en haut
   de l'écran colle SOUS elle. */
:root:has(.rc-haut) { --haut: 56px; }
/* ⚠️ **REPLIÉ, LE RAIL PASSE À 56 PX ET GARDE SES ICÔNES.** C'est la demande de
   Tevini du 23 septembre 2026, et c'est le compromis qui tient : 150 px rendus
   au tableau quand on y travaille, sans perdre la navigation. La transition est
   posée sur la GRILLE, pas sur le rail : sans elle, le contenu saute pendant
   que la barre glisse. */
:root.rc-rail-replie { --rail: 56px; }
.rc-app { transition: grid-template-columns .18s var(--ease-out); }

.rc-rail {
  background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 10px;
  position: sticky; top: var(--haut); align-self: start; height: calc(100dvh - var(--haut)); overflow: hidden;
}
.rc-rail-tete { display: flex; align-items: center; gap: 6px; padding: 2px 4px 18px; }
.rc-rail-marque { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  text-decoration: none; overflow: hidden; }
/* ⚠️ **C'EST « CRM » QUI CÈDE, PAS LE BADGE.** Les deux ne tiennent
   pas dans la largeur du rail : le badge se faisait rogner par `overflow` et
   l'on lisait « TEA » — un mot coupé ressemble à un bogue, là où un nom abrégé
   se comprend. Vu dans l'espace d'équipe le 24 septembre 2026. */
.rc-rail-marque .rc-eyebrow { min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* Le logo devant le nom, partout où le nom s'écrit (`_marque.html`). */
.rc-marque { display: inline-flex; align-items: center; gap: 8px; }
.rc-logo { flex: 0 0 auto; }
.rc-rail-marque .badge { flex: 0 0 auto; }
.rc-rail-bascule {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--disabled-foreground); cursor: pointer;
  transition: color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out),
              transform .18s var(--ease-out);
  /* La flèche pointe vers la gauche quand le rail est ouvert : elle montre où
     il va partir, jamais d'où il vient. */
  transform: rotate(180deg);
}
.rc-rail-bascule:hover { color: var(--foreground); background: var(--muted); }
:root.rc-rail-replie .rc-rail-bascule { transform: rotate(0deg); }

.rc-rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
/* Fenêtre basse : le menu défile, il n'écrase rien. Sans cela, les titres de
   section (coupés par leur « overflow: hidden ») perdaient la moitié du haut. */
.rc-rail-nav > * { flex-shrink: 0; }
.rc-rail-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: var(--radius-md); color: var(--muted-foreground);
  font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}
.rc-rail-item:hover { background: var(--muted); color: var(--foreground); }
.rc-rail-item[aria-current] {
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 8%, transparent); color: var(--accent); font-weight: 500;
}
.rc-rail-item svg { flex: 0 0 auto; }
/* Le titre d'une section du rail : une entreprise dont on est membre. Replié,
   le rail n'en garde qu'un trait, pour que l'icône qui suit ne flotte pas. */
.rc-rail-section {
  padding: 16px 11px 5px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--disabled-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-rail-section span { overflow: hidden; text-overflow: ellipsis; }
:root.rc-rail-replie .rc-rail-section { padding: 12px 0 4px; border-top: 1px solid var(--border); margin: 8px 10px 0; }
:root.rc-rail-replie .rc-rail-section span { display: none; }
/* Le nom d'une entreprise s'écrit ENTIER, quitte à passer à la ligne : coupé,
   « Agence Lumière · entre… » ne disait plus de quelle équipe il s'agit. */
.rc-rail-section--entreprise { white-space: normal; letter-spacing: .06em; line-height: 1.35; }
/* Le compte et la sortie sur une seule ligne (11 octobre 2026). */
.rc-rail-moi { display: flex; align-items: center; gap: 4px; }
.rc-rail-moi .rc-profile-card { flex: 1; }
.rc-rail-sortie--icone { width: 34px; height: 34px; padding: 0; justify-content: center; flex: 0 0 auto; }
:root.rc-rail-replie .rc-rail-moi { flex-direction: column; }
:root.rc-rail-replie .rc-rail-sortie--icone { width: 100%; }

.rc-rail-bas {
  flex-shrink: 0; padding-top: 12px; margin-top: 12px;
  border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px;
}
.rc-rail-sortie {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; width: 100%;
  font-family: inherit; font-size: var(--text-sm); text-align: left; white-space: nowrap;
  color: var(--muted-foreground); background: transparent; border: 0;
  border-radius: var(--radius-md); cursor: pointer;
}
.rc-rail-sortie:hover { color: var(--error); background: rgba(248,113,113,0.06); }
.rc-rail-sortie svg { flex: 0 0 auto; }

/* ── Ce que le repli efface ───────────────────────────────────────────────
   ⚠️ Les LIBELLÉS disparaissent, les cibles gardent leur taille. Réduire aussi
   les boutons ferait un rail où l'on vise mal, et c'est précisément quand il
   est replié qu'on clique vite. */
:root.rc-rail-replie .rc-rail-item span,
:root.rc-rail-replie .rc-rail-sortie span,
:root.rc-rail-replie .rc-rail-marque,
:root.rc-rail-replie .rc-space-toggle span,
:root.rc-rail-replie .rc-profile-info { display: none; }
:root.rc-rail-replie .rc-rail-tete { justify-content: center; padding-inline: 0; }
:root.rc-rail-replie .rc-rail-item,
:root.rc-rail-replie .rc-rail-sortie,
:root.rc-rail-replie .rc-space-toggle { justify-content: center; padding-inline: 0; }
:root.rc-rail-replie .rc-profile-card { justify-content: center; padding-inline: 0; }

/* Les initiales sur un fond teinté, jamais une silhouette grise identique pour
   tout le monde : une liste de silhouettes ne se lit pas.
   ⚠️ Un APLAT, pas un dégradé : la charte les interdit partout. */
.rc-pastille {
  flex: 0 0 auto; width: 2.67em; height: 2.67em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 18%, transparent); color: var(--accent);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em;
}
.rc-pastille--sm { width: 2.36em; height: 2.36em; font-size: var(--text-2xs); }
.rc-pastille--lg { width: 2.94em; height: 2.94em; font-size: var(--text-base); }
.rc-pastilles { display: flex; align-items: center; }
.rc-pastilles .rc-pastille { border: 2px solid var(--background); }
.rc-pastilles .rc-pastille + .rc-pastille { margin-left: -8px; }

/* ── La carte de profil, en bas du rail ───────────────────────────────────
   ⚠️ **LES DEUX LIGNES SE COUPENT À L'ELLIPSE, ET CE N'EST PAS DU DÉTAIL.**
   Sans `min-width: 0` sur le conteneur souple et `nowrap` sur les lignes, un
   nom un peu long passe à la ligne et la carte prend trois rangées au bas du
   rail — c'est ce qui s'est vu le 23 septembre 2026, en réécrivant ce bloc. */
.rc-profile-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--foreground); text-decoration: none; min-width: 0;
}
.rc-profile-card:hover { background: var(--background); border-color: var(--border); }
.rc-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-profile-name { font-size: 14px; font-weight: 600; }
.rc-profile-email, .rc-profile-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-profile-email { font-size: var(--text-xs); color: var(--muted-foreground); }

/* La bascule d'espace : le seul endroit où l'on change de casquette. */
.rc-space-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 11px; background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 20%, transparent); border-radius: var(--radius-md);
  color: var(--accent); font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
.rc-space-toggle:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 40%, transparent); }
.rc-space-toggle svg { flex-shrink: 0; opacity: 0.7; }

/* ── L'en-tête d'un écran ─────────────────────────────────────────────────
   Le fil d'Ariane à gauche, les gestes propres à l'écran à droite. Il n'y a
   plus de bande du haut : elle coûtait une rangée de tableau pour deux liens. */
.rc-entete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rc-entete .rc-fil { flex: 1; min-width: 0; }
.rc-entete-gestes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.rc-main { display: flex; flex-direction: column; min-width: 0; }
.rc-fil { display: flex; align-items: center; gap: 8px; font-size: 14px; flex: 1; min-width: 0; }
.rc-fil a { color: var(--muted-foreground); text-decoration: none; }
.rc-fil a:hover { color: var(--foreground); }
.rc-fil strong { font-weight: 500; }
.rc-content {
  padding: 26px 28px; display: flex; flex-direction: column; gap: 26px;
  /* ⚠️ **CENTRÉ, comme dans TVNI.** Plafonné sans `margin-inline: auto`, le
     contenu restait collé à gauche et laissait un désert à droite dès qu'on
     dépassait la largeur du cadre. */
  max-width: var(--cadre); width: 100%; margin-inline: auto;
}
/* ⚠️ **L'ÉCHELLE VIENT DE TVNI, ET SES RÔLES AUSSI.** Tevini l'y a harmonisée
   le 24 septembre 2026 : titre de page 22 (`--text-xl`), titre de carte ou de
   fenêtre 19, texte courant 15, aide 13 — et 28 réservé aux SEULS gros
   chiffres. Le titre de page était ici à 28 : il prenait le cran des chiffres,
   et chaque écran s'ouvrait une note plus haut qu'il ne fallait.

   ⚠️ Le sous-titre valait `14px` EN DUR — un cran qui n'existe dans aucune
   échelle, et qui cesse de suivre les préférences du navigateur. */
.rc-titre-page { font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.rc-sous-titre { color: var(--muted-foreground); font-size: var(--text-base); margin: 6px 0 0; }

/* ── Les blocs ────────────────────────────────────────────────────────────── */

.rc-eyebrow {
  font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--muted-foreground);
}
.rc-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rc-carte {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
}
.rc-carte--alerte { border-color: rgba(251,191,36,0.28); }
.rc-carte-chiffre {
  font-size: 32px; font-weight: 500; line-height: 1.1; margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}
.rc-carte-detail { font-size: var(--text-sm); color: var(--muted-foreground); margin: 2px 0 0; }

.rc-bloc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.rc-deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* ⚠️ **UNE CLASSE, ET NON UN `style=` EN LIGNE, ET ÉCRITE ICI.** Deux pièges,
   payés l'un après l'autre le 11 septembre 2026 :
     1. une colonne fixe en `style=` bat la feuille de style, donc le repli du
        téléphone ne s'appliquait pas ;
     2. la même règle écrite EN BAS du fichier bat le repli elle aussi — une
        média-requête n'ajoute aucune spécificité, et à égalité c'est la
        dernière écrite qui gagne.
   Elle vit donc collée à la classe qu'elle modifie, au-dessus du `@media`.
   Dans les deux cas la fiche d'un contact poussait la page à 692 px de large
   sur un écran de 390, et c'est `scripts/audit-ui.py` qui l'a vu, pas l'œil. */
.rc-deux-colonnes--fiche { grid-template-columns: 1fr 340px; }

.rc-jauge { height: 6px; background: var(--muted); border-radius: var(--radius-pill); overflow: hidden; }
.rc-jauge span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.rc-barres { display: flex; flex-direction: column; gap: 10px; }
.rc-barre-titre { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }

.rc-avis {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-md); font-size: 14px;
}
.rc-avis--succes { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.28); }
.rc-avis--alerte { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.28); }
.rc-avis--erreur { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.30); }
.rc-avis--calme  { background: var(--muted); }
.rc-avis p { margin: 0; }
.rc-avis > svg { flex: 0 0 auto; }
.rc-avis-corps { flex: 1; min-width: 0; }

.rc-onglets { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); }
.rc-onglet {
  display: inline-flex; align-items: center; height: 42px; padding: 0 12px;
  font-size: var(--text-base); color: var(--muted-foreground); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rc-onglet[aria-current] { color: var(--foreground); border-bottom-color: var(--accent); }
.rc-onglet span { margin-left: 6px; color: var(--muted-foreground); }

/* ── Le tableau : l'écran principal sur ordinateur ────────────────────────── */

/* ⚠️ `table-layout: fixed` est INDISPENSABLE ici. Les cellules du tableau sont
   des `<input>` en `width: 100%` : en disposition automatique, le navigateur
   calcule la largeur minimale de leur contenu, la colonne s'effondre, et
   « Vasseur » s'affiche « Vass ». En disposition fixe, les colonnes sans
   largeur déclarée se partagent équitablement ce qui reste. */
.rc-tableau-cadre { overflow-x: auto; margin-inline: -2px; padding-inline: 2px; }
.rc-tableau { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rc-tableau th {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-foreground); text-align: left; padding: 0 10px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  /* ⚠️ **SANS CECI, UN EN-TÊTE LONG MORD SUR SON VOISIN.** « Comment je l'ai
     connu » dépasse ses 150 px et se superposait à « Budget estimé » : on lisait
     « CONNUBUDGET EST ». `nowrap` empêche le retour à la ligne, encore faut-il
     dire ce qui arrive au trop-plein. Le titre entier reste au survol. */
  overflow: hidden; text-overflow: ellipsis;
}
.rc-tableau td {
  font-size: var(--text-base); padding: 0 10px; height: 46px;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.rc-tableau tbody tr:hover td { background: var(--card); }
.rc-tableau td.rc-num, .rc-tableau th.rc-num { font-variant-numeric: tabular-nums; text-align: right; }
.rc-tableau .rc-rang { width: 30px; text-align: center; padding: 0;
  font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* Une cellule se modifie EN PLACE : le cadre n'apparaît qu'au survol de la
   ligne. Au repos, c'est une liste qui se lit, pas un formulaire. */
.rc-cellule {
  width: 100%; height: 2.5em; padding: 0 0.64em; margin: 0 -0.57em;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--foreground); font-family: inherit; font-size: var(--text-base);
}
.rc-tableau tr:hover .rc-cellule { border-color: var(--border); background-color: var(--background); }
.rc-cellule:focus { border-color: var(--accent); background-color: var(--background);
  box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
select.rc-cellule { cursor: pointer; }

/* La dernière rangée est toujours vide : on tape un nom, on passe à la
   suivante. C'est ce qui permet de lister quarante personnes sans quitter
   l'écran, et c'est le geste que le tableur rendait naturel. */
.rc-rangee-neuve td { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 3%, transparent); }
.rc-rangee-neuve .rc-cellule { border-color: var(--border); background-color: var(--background); }

.rc-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-gestes--fin { justify-content: flex-end; }
.rc-pousse { flex: 1; }

/* Les deux gestes d'une ligne restent côte à côte : dans une colonne étroite,
   `flex-wrap` les empilait et la rangée doublait de hauteur. */
.rc-tableau .rc-gestes { flex-wrap: nowrap; }
.rc-tableau .rc-attente { color: var(--disabled-foreground); font-size: var(--text-sm); }
.rc-icone-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--muted-foreground); cursor: pointer;
}
.rc-icone-bouton:hover { background: var(--muted); color: var(--foreground); }

/* ── Formulaires ──────────────────────────────────────────────────────────── */

.rc-champ { display: flex; flex-direction: column; gap: 8px; }
.rc-champ > span, .rc-champ > label { font-size: 14px; font-weight: 500; }
.rc-champ em { font-style: normal; color: var(--muted-foreground); font-weight: 400; }
.rc-aide { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; }
.rc-saisie {
  width: 100%; height: 34px; padding: 0 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--foreground);
  font-family: inherit; font-size: var(--text-base);
}
.rc-saisie:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
textarea.rc-saisie { height: auto; min-height: 72px; padding: 10px; resize: vertical; }
/* Un champ d'appoint, plus petit — sur ORDINATEUR seulement. Sous le doigt il
   reprend les 16 px de tout le monde : en dessous, le navigateur zoome. */
.rc-saisie--discrete { font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-recherche { position: relative; }
.rc-recherche svg { position: absolute; left: 10px; top: 10px; color: var(--disabled-foreground); }
.rc-recherche .rc-saisie { padding-left: 32px; }

.rc-choix {
  display: flex; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
}
.rc-choix--retenu { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 30%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent); }
.rc-choix input { margin-top: 3px; }
.rc-choix-titre { font-size: var(--text-base); font-weight: 500; }
.rc-choix-aide { font-size: var(--text-sm); color: var(--muted-foreground); }

.rc-jetons { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-jeton {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); font-size: 14px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
}
.rc-jeton--retenu { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); border-color: transparent; color: var(--accent-hi); }
.rc-jeton input { position: absolute; opacity: 0; pointer-events: none; }

.rc-vide { text-align: center; padding: 48px 16px; color: var(--muted-foreground); }
.rc-vide .btn { margin-top: 12px; }

/* ── La barre du bas, sur téléphone seulement ─────────────────────────────── */

.rc-nav-basse { display: none; }
/* L'enveloppe des gestes d'une campagne (téléphone : rangés dans ⋯, `mobile.css`) :
   à l'ordinateur, elle ne compte pas dans la mise en page. */
.rc-campagne-gestes { display: contents; }

/* ── Le téléphone : la même application, en une colonne ───────────────────── */
/* ⚠️ Toute cible fait 44 px, tout champ 16 px. En dessous de 16 px, le
   navigateur zoome au focus, et l'écran saute au moment précis où l'on tape. */

@media (max-width: 900px) {
  /* ⚠️ Sous le doigt, la navigation reste EN BAS, à portée de pouce : c'est
     `.rc-nav-basse` qui la porte, et le rail disparaît entièrement. Le parti
     pris téléphone n'a changé ni le 14 ni le 23 septembre 2026. */
  .rc-app { grid-template-columns: 1fr; }
  .rc-rail { display: none; }
  .rc-entete { gap: 10px; }
  .rc-entete-gestes { flex-wrap: wrap; }


  /* ⚠️ **TOUT CE QUI SUIT A ÉTÉ PERDU PUIS RESTAURÉ LE 23 SEPTEMBRE 2026.** En
     retirant l'ancienne barre du haut, ce bloc est parti avec elle : le tableau
     ne se repliait plus en cartes sous le doigt, et les champs et boutons
     retombaient à 30 px. L'audit a compté 15 583 défauts — c'est lui, et lui
     seul, qui a vu que le parti pris téléphone de l'application avait disparu. */


  /* ⚠️ Une BANDE peut défiler dans elle-même ; la PAGE, jamais. Quatre onglets
     ou trois boutons ne tiennent pas dans 390 px, et les faire passer à la
     ligne décale tout le reste de l'écran. On les fait glisser sur place —
     l'ascenseur est masqué, le geste reste naturel au doigt. */
  .rc-onglets {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .rc-onglets::-webkit-scrollbar { display: none; }
  .rc-onglets > * { flex: 0 0 auto; }
    .rc-fil { flex: 0 1 auto; }
  .rc-content { padding: 16px; gap: 22px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* ⚠️ Cette règle descendait le titre de 28 à 22 SOUS LE DOIGT. Le titre vaut
     22 partout depuis l'alignement sur TVNI : elle ne faisait plus que
     réécrire la même valeur, en pixels, hors de l'échelle. Retirée. */

  .rc-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-deux-colonnes { grid-template-columns: 1fr; }

  /* Le tableau devient une pile de cartes. Jamais de défilement latéral. */
  /* Sur téléphone, la pile de cartes reprend la main : plus de largeur
     minimale, plus de défilement de bande. */
  .rc-tableau-cadre { overflow-x: visible; }
  .rc-tableau { min-width: 0 !important; }
  .rc-tableau, .rc-tableau thead, .rc-tableau tbody, .rc-tableau tr, .rc-tableau td { display: block; width: auto; }
  .rc-tableau thead { display: none; }
  .rc-tableau tr { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .rc-tableau td { height: auto; padding: 4px 0; border: 0; }
  .rc-tableau td::before {
    content: attr(data-colonne); display: block;
    font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--muted-foreground); margin-bottom: 4px;
  }
  .rc-tableau td:empty { display: none; }
  .rc-tableau .rc-rang { display: none; }
  /* La marge négative est une astuce d'ORDINATEUR — elle fait déborder de trois
     pixels une carte qui prend toute la largeur. */
  .rc-cellule { height: 44px; font-size: var(--text-md); margin: 0;
    border-color: var(--border); background: var(--card); }

  /* ⚠️ Un enfant de flex ne rétrécit pas sous la largeur de son contenu sans
     `min-width: 0` : une adresse e-mail un peu longue poussait la page à 431 px
     de large, et l'écran défilait latéralement. */
  .rc-gestes, .rc-gestes > * { min-width: 0; }
  .rc-carte-detail, .rc-profile-email { overflow-wrap: anywhere; }

  .rc-saisie, .rc-saisie--discrete { height: 44px; font-size: var(--text-md); }
  textarea.rc-saisie { height: auto; }
  .rc-jeton { min-height: 44px; }
  .rc-space-toggle { min-height: 44px; }
  /* Le fil d'Ariane et les liens d'un tableau redeviennent des cibles : sur un
     téléphone on vise le nom, pas ses dix-sept pixels de haut. */
  .rc-fil a, .rc-fil strong { display: inline-flex; align-items: center; min-height: 44px; }
  .rc-tableau td > a { display: inline-flex; align-items: center; min-height: 44px; }
  /* L'intitulé d'une tâche, dans le fil de la fiche d'une ligne : il ouvre la
     tâche, c'est une cible. Vu par l'audit sur un compte en lecture. */
  .rc-histoire-lien { display: inline-flex; align-items: center; min-height: 44px; }
  .btn { height: auto; min-height: 44px; font-size: var(--text-base); }
  /* Les deux gestes d'une ligne restent côte à côte : dans une colonne étroite,
   `flex-wrap` les empilait et la rangée doublait de hauteur. */
.rc-tableau .rc-gestes { flex-wrap: nowrap; }
.rc-tableau .rc-attente { color: var(--disabled-foreground); font-size: var(--text-sm); }
.rc-icone-bouton { width: 44px; height: 44px; }
  .rc-onglet { height: 44px; }

  .rc-nav-basse {
    /* Autant de colonnes que d'entrées : six côté utilisateur depuis « Messages
       types » et « Liens RDV » (1er octobre 2026), quatre côté collaborateur. */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    /* `width: 100vw` et non `right: 0` : quand une bande déborde, un élément
       fixe calé à droite suit le document élargi au lieu de la fenêtre. */
    position: fixed; left: 0; bottom: 0; width: 100vw; max-width: 100%; z-index: 42;
    background: var(--card); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .rc-nav-basse a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 56px; padding: 8px 4px;
    font-size: var(--text-xs); color: var(--muted-foreground); text-decoration: none;
  }
  .rc-nav-basse a[aria-current] { color: var(--accent); }
}

/* ── Les écrans d'entrée : connexion, invitation ──────────────────────────── */

.rc-entree {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.rc-entree-cadre { width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: 24px; }
.rc-entree-titre { margin: 0; font-size: 32px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; }
.rc-entree-cadre .rc-saisie { height: 44px; font-size: var(--text-md); }
.rc-entree-cadre .btn { min-height: 48px; width: 100%; }

/* La connexion « comme sur TVNI » (11 octobre 2026) : une adresse, puis le mot
   de passe OU le lien, au choix de la bascule. Sans script, les deux blocs
   restent l'un sous l'autre. */
.rc-connexion, .rc-connexion [data-pour] { display: flex; flex-direction: column; gap: 16px; }
.rc-connexion [data-pour][hidden] { display: none; }
.rc-connexion-bascule { align-self: stretch; }
.rc-connexion-bascule > * { flex: 1; text-align: center; }
.rc-connexion-lien .rc-aide { margin: 0; }
.rc-entree-cadre .rc-lien-discret {
  width: auto; min-height: 0; align-self: flex-end; margin-top: -8px; padding: 0; border: 0;
  background: none; color: var(--muted-foreground); font: inherit; font-size: var(--text-sm);
  cursor: pointer;
}
.rc-entree-cadre .rc-lien-discret:hover { color: var(--accent); }
.rc-entree-details summary { cursor: pointer; color: var(--muted-foreground); font-size: var(--text-sm); }
.rc-entree-details[open] summary { margin-bottom: 12px; }
.rc-entree-details > div { display: flex; flex-direction: column; gap: 12px; }
.rc-entree-cadre .rc-aide a { color: var(--accent); }
.rc-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ══ LE STYLE DE TVNI, REPRIS ÉCRAN PAR ÉCRAN ══════════════════════════════
   Demande de Tevini, 11 septembre 2026 : « reprends exactement le style qu'on a
   sur TVNI, notamment tes animations, l'emplacement des boutons ».

   ⚠️ **PRESQUE TOUT ÉTAIT DÉJÀ LÀ.** `charte.css` porte `kpi-card`, `carte`,
   `cartes--grille`, `seg`, `sec-head`, `encadre`, `fiche-ancres`,
   `rangee-ajout`, `mesures` — copiés de TVNI en août, et jamais employés par
   ces écrans. Ce qui suit n'est donc pas une refonte : c'est du branchement,
   plus la seule pièce qui manquait vraiment, la barre d'outils.

   ⚠️ La barre d'outils vit chez TVNI en CSS EN LIGNE dans `admin_base.html`.
   Elle descend ici, préfixée `rc-`, parce qu'elle sert sur quatre écrans. */

/* ── La barre d'outils, reprise de TVNI ────────────────────────────────────
   Chez TVNI elle vit en CSS en ligne dans `admin_base.html` ; elle descend ici,
   préfixée, parce qu'elle sert sur les quatre écrans de MatchMaBrand. */
.rc-outillage { display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--border); border-radius:8px; padding:7px 9px;
  position:relative; z-index:5; width:100%; box-sizing:border-box; }
.rc-vues { display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow:hidden; }
.rc-vue { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:6px;
  cursor:pointer; color:var(--muted-foreground); white-space:nowrap; border:0; background:transparent;
  font-family:inherit; font-size: var(--text-sm); font-weight:500; text-decoration:none;
  transition:background .14s var(--ease-out), color .14s var(--ease-out); }
.rc-vue:hover { background:var(--background); color:var(--accent); }
.rc-vue[aria-current] { background:var(--background); color:var(--foreground); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.30); }
.rc-vue-n { font-size: var(--text-xs); color:var(--muted-foreground); font-weight:400;
  font-variant-numeric:tabular-nums; padding:1px 7px; background:var(--muted); border-radius: var(--radius-pill); }
.rc-vue[aria-current] .rc-vue-n { color:var(--accent); background:color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); }

.rc-outils { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.rc-outil { position:relative; width:32px; height:32px; display:grid; place-items:center; border:0;
  background:transparent; border-radius:7px; cursor:pointer; color:var(--muted-foreground);
  transition:background .14s var(--ease-out), color .14s var(--ease-out); }
.rc-outil:hover { background:var(--background); color:var(--foreground); }
.rc-outil--actif { background:color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); color:var(--accent); }
.rc-outil-n { position:absolute; top:-1px; right:-1px; min-width:15px; height:15px;
  background:var(--accent); color:var(--on-accent); border-radius:8px; font-size: var(--text-2xs); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; padding:0 3px; }
.rc-outils-trait { width:1px; height:22px; background:var(--border); margin:0 4px; }
.rc-bouton-actions { display:inline-flex; align-items:center; gap:6px; background:var(--accent);
  color:var(--on-accent); border:0; padding:8px 13px; border-radius:7px; font-family:inherit;
  font-size: var(--text-sm); font-weight:600; cursor:pointer; text-decoration:none;
  transition:filter .14s var(--ease-out); }
.rc-bouton-actions:hover { filter:brightness(1.08); }

/* La recherche prend la place des onglets, comme chez TVNI. */
.rc-cherche { display:flex; align-items:center; gap:8px; flex:1; background:var(--background);
  border-radius:7px; padding:6px 10px; }
.rc-cherche input { border:0; background:transparent; outline:0; flex:1; font-family:inherit;
  font-size: 14px; color:var(--foreground); }
.rc-cherche svg { color:var(--muted-foreground); flex-shrink:0; }
.rc-cherche-echap { border:1px solid var(--border); background:var(--card);
  color:var(--muted-foreground); font-family:inherit; font-size: var(--text-2xs); line-height:1;
  padding:4px 7px; border-radius:5px; cursor:pointer; flex-shrink:0; }
.rc-cherche-echap:hover { color:var(--foreground); border-color:var(--border-strong); }

/* ── La barre des filtres actifs ───────────────────────────────────────────
   ⚠️ Elle ne réserve AUCUNE place quand rien n'est filtré : une ligne vide
   permanente au-dessus d'un tableau, c'est une ligne de tableau en moins. */
.rc-filtres { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.rc-filtres:empty { display:none; }
.rc-puce { display:inline-flex; align-items:center; gap:7px; background:var(--card);
  border:1px solid var(--border); border-radius:6px; padding:5px 5px 5px 11px;
  font-size: var(--text-sm); line-height:1.4; color:var(--foreground); }
.rc-puce b { font-weight:600; }
.rc-puce-quoi { color:var(--muted-foreground); font-weight:400; }
.rc-puce-oter { width:20px; height:20px; display:inline-grid; place-items:center; border:0;
  background:transparent; border-radius:4px; color:var(--muted-foreground); cursor:pointer;
  font-size: 14px; line-height:1; text-decoration:none; }
.rc-puce-oter:hover { background:rgba(248,113,113,.14); color:var(--error); }
.rc-ajout-filtre, .rc-raz { border:1px dashed var(--border-strong); background:transparent;
  color:var(--muted-foreground); font-family:inherit; font-size: var(--text-sm); padding:5px 10px;
  border-radius:6px; cursor:pointer; text-decoration:none;
  transition:color .14s, border-color .14s; }
.rc-ajout-filtre:hover, .rc-raz:hover { color:var(--accent); border-color:var(--accent); }
.rc-raz { border-style:solid; margin-left:auto; }

/* Le panneau d'un filtre, sous son bouton. */
.rc-pop { position:relative; }
.rc-pop > summary { list-style:none; cursor:pointer; }
.rc-pop > summary::-webkit-details-marker { display:none; }
/* ⚠️ Un panneau de `<details>` fermé garde une BOÎTE dans Chrome récent
   (`content-visibility: hidden`, plus `display: none`) : le panneau de 260 px
   poussait la page à 415 px de large sur un téléphone de 390, et l'écran
   défilait latéralement sans que rien ne soit visible. */
.rc-pop:not([open]) > .rc-pop-corps { display:none; }
.rc-pop-corps { position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:260px;
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:10px;
  animation:rcPop .16s var(--ease-out) both; }
@keyframes rcPop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.rc-pop-titre { font-size: var(--text-xs); letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted-foreground); }

/* ── Le tri dans l'en-tête d'une colonne ─────────────────────────────────── */
.rc-tri { display:inline-flex; align-items:center; gap:5px; color:inherit; text-decoration:none;
  font:inherit; letter-spacing:inherit; text-transform:inherit; }
.rc-tri:hover { color:var(--foreground); }
.rc-tri-sens { color:var(--accent); font-size: var(--text-2xs); }
.rc-tableau th[aria-sort] { color:var(--foreground); }

/* ── Le commentaire : une note, pas une case ──────────────────────────────
   ⚠️ Un `<input>` d'une ligne pour une phrase de deux, c'est ce qui rendait les
   commentaires inutilisables : on ne voyait que le début et on ne pouvait pas
   relire sans cliquer dedans. Au repos la note tient sur une ligne, en gris, et
   elle S'OUVRE au-dessus des rangées suivantes dès qu'on écrit dedans. */
.rc-note { width:100%; height:2.5em; min-height:2.5em; resize:none; overflow:hidden;
  padding:0.5em 0.57em; margin:0 -0.57em; background:transparent;
  border:1px solid transparent; border-radius:var(--radius-md);
  color:var(--muted-foreground); font-family:inherit; font-size: 14px; line-height:1.35;
  transition:height .16s var(--ease-out), color .16s var(--ease-out); }
/* ⚠️ Le mot-repère d'une note NE SE RÉPÈTE PAS AU REPOS. « Accroche » écrit
   trente-quatre fois de suite dans une colonne vide, c'est trente-quatre fois
   la même information — et l'œil la lit comme du contenu. Il revient au
   survol et au focus, là où l'on s'apprête à écrire. Même raison, même geste
   que `.rc-cellule--vide` pour le gabarit de date. */
.rc-note::placeholder { color:transparent; }
.rc-tableau tr:hover .rc-note::placeholder,
.rc-note:focus::placeholder { color:var(--disabled-foreground); }
.rc-tableau tr:hover .rc-note { border-color:var(--border); background:var(--background); }
/* Le repère grossit un peu au survol de la rangée : on voit qu'il est cliquable
   avant de cliquer. */
.rc-tableau tr:hover .rc-note-pleine::after { opacity:1; width:6px; height:6px; }
/* ⚠️ **AU REPOS, LA NOTE NE MONTRE QUE SON POINT.** Elle réclamait 1 088 px et
   n'en obtenait jamais plus de 200 : un tiers de phrase, payé par toutes les
   autres colonnes. Décision de Tevini du 23 septembre 2026. */
.rc-note { color: transparent; }
.rc-note::selection { background: transparent; }
/* ⚠️ Elle s'ouvre EN LARGEUR autant qu'en hauteur : dans 46 px, rendre le texte
   visible sans élargir ne servirait à rien.

   ⚠️ **`absolute` ET `right: 0`, ET LES DEUX COMPTENT.** En `relative`, la note
   gardait sa place dans le flux : la rangée entière grandissait de cent pixels
   quand on cliquait dedans, et le tableau sautait. Et calée à gauche, elle
   sortait du cadre par la droite — la colonne de note est en fin de tableau,
   elle doit donc s'ouvrir vers l'intérieur. */
.rc-cellule-note { position:relative; }
.rc-note:focus { position:absolute; top:3px; right:0; width:340px; height:132px;
  color:var(--foreground); z-index:9; border-color:var(--accent); background:var(--card);
  overflow:auto; outline:none; margin:0;
  box-shadow:0 0 0 3px var(--accent-ring), 0 14px 30px rgba(0,0,0,.45); }
/* Le point qui dit « il y a quelque chose d'écrit », visible sans ouvrir. */
.rc-note-pleine { position:relative; }
.rc-note-pleine::after { content:""; position:absolute; top:12px; right:-2px; width:5px; height:5px;
  border-radius:50%; background:var(--accent); opacity:.7; }
.rc-note-pleine:focus-within::after { opacity:0; }

/* ── Les sous-onglets d'une étape ─────────────────────────────────────────
   `.seg` vient de la charte ; il ne lui manquait qu'une rangée qui le pose. */
/* ⚠️ Le libellé d'une priorité porte son délai (« C — plus tard, on garde le
   nom au chaud ») : c'est ce qui le rend lisible trois semaines après, et ça
   fait une rangée de sous-onglets large. Elle DÉFILE sur place plutôt que de
   passer à la ligne, qui décalerait tout l'écran d'en dessous. */
.rc-sous-onglets { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-4px 0 4px; }
.rc-sous-onglets > .seg { max-width:100%; overflow-x:auto; scrollbar-width:none; }
.rc-sous-onglets > .seg::-webkit-scrollbar { display:none; }
.rc-sous-onglets > .seg > * { flex:0 0 auto; }
.rc-sous-onglets .rc-aide { margin-left:auto; }

/* ── La grille de campagnes ───────────────────────────────────────────────
   ⚠️ AUCUNE classe nouvelle : `.cartes--grille` et `.carte` sont déjà dans la
   charte, avec leur survol qui soulève et allume. Il ne leur manquait que
   l'entrée en scène, reprise de `.kpi-strip`. */
.cartes--grille > * { animation: kpiFadeIn .5s cubic-bezier(.2,.8,.2,1) backwards; }
.cartes--grille > *:nth-child(1) { animation-delay:0ms; }
.cartes--grille > *:nth-child(2) { animation-delay:60ms; }
.cartes--grille > *:nth-child(3) { animation-delay:120ms; }
.cartes--grille > *:nth-child(4) { animation-delay:180ms; }
.cartes--grille > *:nth-child(5) { animation-delay:240ms; }
.cartes--grille > *:nth-child(6) { animation-delay:300ms; }

/* Le geste d'ajout, en bout de grille et en pointillé : c'est `.rangee-ajout`
   de la charte, à la taille d'une carte. */
.rc-carte-neuve { display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:160px; padding:16px; appearance:none; background:none; cursor:pointer;
  border:1px dashed var(--border-strong); border-radius:var(--radius-xl);
  font-family:inherit; font-size: 14px; font-weight:500; color:var(--muted-foreground);
  transition:color .18s var(--ease-out), border-color .18s var(--ease-out),
             background .18s var(--ease-out); }
.rc-carte-neuve:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-wash); }

/* ── Les deux gestes d'une rangée restent À L'ÉCRAN ───────────────────────
   ⚠️ Sept colonnes de saisie ne tiennent PAS dans la largeur d'un portable, et
   le cadre défile — c'est le parti pris de cet écran, et il est le bon : rétrécir
   jusqu'à ce que tout rentre donne « Vass » pour « Vasseur ».

   Mais la dernière colonne porte les deux gestes de la rangée — enregistrer, et
   ouvrir la fiche. Les laisser hors écran par défaut, c'est cacher les deux
   seules actions du tableau derrière un défilement horizontal que personne ne
   fait spontanément. Elle se COLLE donc au bord droit du cadre.

   ⚠️ Le fond est OPAQUE, sinon les cellules qui passent dessous se voient au
   travers. Il suit la rangée : survolée, la colonne collée doit s'éclairer avec
   elle, sinon on voit un rectangle plus sombre glisser le long du tableau. */
.rc-tableau th:last-child, .rc-tableau td:last-child {
  position: sticky; right: 0; z-index: 3;
  background: var(--background);
  box-shadow: -10px 0 12px -10px rgba(0,0,0,0.65);
}
.rc-tableau tbody tr:hover td:last-child { background: var(--card); }
/* ⚠️ Le voile des rangées neuves est TRANSLUCIDE ; une cellule collée doit être
   opaque. On recompose donc exactement la même couleur : le fond de la page,
   plus le même voile en image de fond. Écrire la couleur mélangée en dur la
   ferait mentir au premier réglage du thème. */
.rc-tableau .rc-rangee-neuve td:last-child {
  background-color: var(--background);
  background-image: linear-gradient(color-mix(in srgb, var(--mmb-rouge-lumineux) 3%, transparent), color-mix(in srgb, var(--mmb-rouge-lumineux) 3%, transparent));
}
/* Une note ouverte passe PAR-DESSUS la colonne collée : elle est le seul
   élément du tableau qui déborde de sa cellule, et elle a la priorité. */
.rc-note:focus { z-index: 8; }

/* ── La rangée qui ouvre une fiche ────────────────────────────────────────
   Reprise de `.data-table` de TVNI : le survol pose un voile d'accent qui part
   de la gauche, et les gestes de la rangée n'apparaissent qu'à ce moment-là. */
.rc-tableau tbody tr { transition:background .22s var(--ease-out); }
.rc-tableau tbody tr:hover td { background:linear-gradient(90deg,
  color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent) 0%, color-mix(in srgb, var(--mmb-rouge-lumineux) 0%, transparent) 60%); }
.rc-tableau .rc-gestes-rangee { opacity:0; transition:opacity .22s var(--ease-out); }
.rc-tableau tbody tr:hover .rc-gestes-rangee,
.rc-tableau tbody tr:focus-within .rc-gestes-rangee { opacity:1; }

/* ⚠️ Une animation ne doit jamais s'imposer à qui l'a refusée dans son système. */
@media (prefers-reduced-motion: reduce) {
  .rc-tuile, .rc-note, .rc-vue, .rc-outil { transition:none; animation:none; }
  .rc-tuile:hover { transform:none; }
}

@media (max-width: 900px) {
  /* ⚠️ **TOUTE CIBLE FAIT 44 POINTS SOUS LE DOIGT, ET TOUT CHAMP 16 PX.** En
     dessous de 16 px le navigateur zoome au focus et l'écran saute au moment
     précis où l'on tape. Ces règles ne valent QUE sous le doigt : sur un écran
     d'ordinateur, un bouton de 30 px et un champ de 13 px sont la charte, et la
     densité EST la fonctionnalité d'un tableau de quarante lignes.
     `scripts/audit-ui.py` vérifie les deux, à quatre largeurs. */
  .admin-bcr { gap:2px; }
  .admin-bcr a, .admin-bcr b { display:inline-flex; align-items:center; min-height:44px; }
  .fiche-ancres a { display:inline-flex; align-items:center; min-height:44px; }
  .carte-titre { display:flex; align-items:center; min-height:44px; }
  .rc-bouton-actions { min-height:44px; }
  .rc-cherche { min-height:44px; }
  /* ⚠️ 44 px et non 40 : ce champ portait sa propre hauteur, écrite avant que
     la règle des cibles tactiles n'existe. Le zoom la portait à 44 — en le
     retirant, elle est retombée à 40, et l'audit l'a vue. */
  .rc-cherche input { font-size: var(--text-md); min-height:44px; }
  .rc-cherche-echap { min-height:32px; }

  .rc-outillage { flex-direction:column; align-items:stretch; gap:8px; }
  .rc-vues { overflow-x:auto; scrollbar-width:none; }
  .rc-vues::-webkit-scrollbar { display:none; }
  .rc-vue { flex:0 0 auto; min-height:44px; }
  .rc-outils { justify-content:flex-end; }
  .rc-outil { width:44px; height:44px; }
  /* ⚠️ **L'ORDRE COMPTE AUTANT QUE LA MÉDIA-REQUÊTE.** `.rc-deux-colonnes--fiche`
     est déclarée PLUS BAS dans ce fichier que le repli du téléphone, et à
     spécificité égale c'est la dernière qui gagne — même à l'intérieur d'un
     `@media`. La colonne de 340 px survivait donc sur un écran de 390, et la
     fiche poussait la page à 692 px de large. Le repli se redit donc ici. */
  .rc-deux-colonnes--fiche { grid-template-columns:1fr; }
  /* La rangée de navigation d'une fiche passe à la ligne plutôt que de déborder. */
  .fiche-nav { flex-wrap:wrap; }
  .rc-note { font-size: var(--text-md); height:44px; }
  .rc-note:focus { height:132px; }
  .rc-pop-corps { right:auto; left:0; max-width:calc(100vw - 32px); }
  .e-gestes { width:100%; }
  .cartes--grille { grid-template-columns:1fr; }
}

/* ── L'état, dans le titre ────────────────────────────────────────────────
   Repris de `.etat-pastille` de TVNI : la première question qu'on se pose en
   ouvrant une campagne, c'est si elle tourne encore. */
.rc-etat { display:inline-flex; align-items:center; gap:7px; vertical-align:middle;
  padding:3px 10px 3px 8px; border-radius:var(--radius-pill);
  background:var(--muted); border:1px solid var(--border);
  font-size: var(--text-sm); font-weight:500; color:var(--muted-foreground); }
.rc-etat-point { width:6px; height:6px; border-radius:50%; background:var(--muted-foreground); }
.rc-etat-point--vert { background:var(--success); box-shadow:0 0 0 3px rgba(74,222,128,.16); }

/* ── Une ligne cliquable dans un encadré de fiche ─────────────────────────── */
/* ⚠️ `flex-wrap` : dans la colonne étroite d'une fiche, le nom d'une campagne
   tient sur deux lignes et le badge se retrouvait collé au chevron, à cheval
   sur les deux. Il passe à la ligne plutôt que de comprimer le nom. */
.rc-ligne-fiche { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap;
  min-height:56px; padding:10px 0; color:inherit; text-decoration:none;
  border-top:1px solid var(--border); }
.rc-ligne-fiche .badge { margin-left:auto; }
.rc-ligne-fiche:first-of-type { border-top:0; }
.rc-ligne-fiche:hover { color:var(--foreground); }
.rc-ligne-fiche:hover .rc-ligne-fiche-nom { color:var(--accent); }
.rc-ligne-fiche-nom { font-size: var(--text-base); font-weight:500; display:block;
  transition:color .14s var(--ease-out); }
.rc-ligne-fiche > svg { color:var(--disabled-foreground); flex-shrink:0; }

/* ── Le dernier échange, en citation ──────────────────────────────────────── */
.rc-citation { border-left:2px solid var(--accent); padding:2px 0 2px 12px; margin:0 0 12px;
  font-size: 14px; line-height:1.5; color:var(--foreground); }

/* ── L'historique d'un contact ────────────────────────────────────────────── */
.rc-frise { display:flex; flex-direction:column; gap:0; }
.rc-frise-e { display:flex; gap:12px; padding:0 0 16px; position:relative; }
.rc-frise-e:last-child { padding-bottom:0; }
.rc-frise-e::before { content:""; position:absolute; left:4px; top:12px; bottom:0; width:1px;
  background:var(--border); }
.rc-frise-e:last-child::before { display:none; }
.rc-frise-point { width:9px; height:9px; border-radius:50%; background:var(--muted-foreground);
  flex-shrink:0; margin-top:4px; position:relative; z-index:1;
  box-shadow:0 0 0 3px var(--card); }
.rc-frise-point--vert { background:var(--success); }
.rc-frise-e b { display:block; font-size: 14px; font-weight:500; }

/* ── Deux corrections sur ce que la charte pose déjà ──────────────────────── */
/* ⚠️ La barre de ratio d'un KPI se remplissait en `var(--mmb-rouge-fonce) → var(--mmb-rouge)` : ce sont
   les valeurs du THÈME CLAIR, abandonné. Sur `--card` (#14161F) elles ne se
   voient pas. La charte signale elle-même ce vestige, sans l'avoir corrigé. */
.kpi-card .kpi-ratio-bar > i, .carte .kpi-ratio-bar > i {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}
.kpi-ratio-bar { background: rgba(255,255,255,0.08); }

/* ⚠️ **LA BARRE DE RATIO N'EXISTAIT QUE DANS UNE `.kpi-card`.** Toutes ses
   règles sont écrites `.kpi-card .kpi-ratio…` dans la charte : posée sur une
   `.carte` de campagne, la barre n'avait ni hauteur ni fond, et la carte
   n'affichait que « 20 % » suspendu dans le vide. Rien ne l'aurait signalé —
   une règle qui ne s'applique pas ne produit aucune erreur. */
.carte .kpi-ratio {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: var(--text-xs); color: var(--muted-foreground);
}
.carte .kpi-ratio-bar {
  flex: 1; height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
.carte .kpi-ratio-bar > i {
  display: block; height: 100%; border-radius: 2px; transform-origin: left;
  animation: kpiBarFill 1.1s cubic-bezier(.2,.8,.2,1) .25s backwards;
}
.carte .kpi-ratio-pct {
  font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums;
}
/* La rangée d'ancres colle déjà à sa section : l'écart de `.rc-content` suffit. */
.rc-content > .fiche-ancres { margin-bottom: 0; }
/* La note tient sur UNE ligne au repos : 13 px × 1.35 + 2 × 6 px de garde. */
/* ⚠️ La note tient sur DEUX lignes au repos, pas une. Une seule ligne coupait
   la phrase au milieu — c'est précisément ce qu'on reprochait à l'ancienne case.
   Deux lignes suffisent à presque tous les commentaires du fichier d'origine.
   La garde du bas est généreuse à dessein : le zoom de la charte (`--echelle`)
   arrondit les hauteurs au pixel, et sans elle une troisième ligne dépassait
   d'un cheveu sous la deuxième. */
/* ⚠️ La note tient sur DEUX lignes au repos, pas une. Une seule coupait la
   phrase au milieu — c'est exactement ce qu'on reprochait à l'ancienne case.

   ⚠️ Et la troisième ligne S'EFFACE au lieu d'être coupée net. Un `overflow:
   hidden` sur un `<textarea>` ne tranche pas où l'on croit : le texte est peint
   jusqu'au bord de la BOÎTE, garde du bas comprise, et il restait toujours un
   cheveu de la ligne suivante — d'autant que le zoom de la charte
   (`--echelle`) arrondit les hauteurs au pixel. Le fondu règle les deux d'un
   coup, et il DIT quelque chose que la coupe ne disait pas : « il y a la
   suite ». */
.rc-note { height: 46px; min-height: 46px; padding: 5px 8px; line-height: 17px;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }
.rc-tableau td { height: 54px; }
.rc-note:focus { height: 124px; -webkit-mask-image: none; mask-image: none; }

/* ── Une fenêtre qui porte un FORMULAIRE ──────────────────────────────────
   `dialog.verre` de la charte fait 460 px : la bonne largeur pour une phrase
   de confirmation, la mauvaise pour huit champs sur deux colonnes. */
/* ⚠️ `.verre` est TRANSLUCIDE : posé sur une phrase de confirmation, c'est joli ;
   posé sur huit champs, le tableau du dessous transparaît à travers le formulaire
   et on ne lit plus ce qu'on saisit. Une fenêtre de saisie est OPAQUE. */
dialog.rc-fenetre { width: min(620px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--border-strong); }
dialog.rc-fenetre::before { display: none; }
/* Les deux lignes d'un choix se lisent l'une SOUS l'autre. */
.rc-choix > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-choix-titre, .rc-choix-aide { display: block; }
dialog.verre { max-height: calc(var(--fenetre) - 64px); overflow-y: auto; }
@media (max-width: 640px) { dialog.rc-fenetre .rc-deux-colonnes { grid-template-columns: 1fr; } }

/* ══ LE BUDGET VERTICAL DE L'ÉCRAN PRINCIPAL ════════════════════════════════
   Audit d'interface du 11 septembre 2026. Mesuré dans le navigateur, à
   1 280 × 860 : la première personne était à 561 px du haut, et il restait
   CINQ lignes visibles sur quarante-quatre. Le critère de recette de
   `docs/PARTI-PRIS-ECRANS.md` en demande quarante.

   ⚠️ **CE QUI SUIT N'ENLÈVE AUCUNE FONCTION.** Tout ce qui était à l'écran y
   est encore : les chiffres sont passés en `.mesure` sur la ligne du titre, le
   fil d'Ariane en double a disparu (la coquille en pose déjà un), et le titre
   de section redisait le nom de l'onglet sélectionné juste au-dessus.

   ⚠️ Ce bloc est EN FIN DE FICHIER à dessein : `.rc-tableau td { height: 54px }`
   est écrit plus haut, et à spécificité égale c'est la dernière règle qui
   gagne. Le déplacer plus haut le rendrait silencieusement inopérant. */

/* ── La barre du haut et le cadre ─────────────────────────────────────────── */
.rc-content { padding: 18px 20px; gap: 14px; }

/* ── La tête d'écran : titre, état et chiffres sur UNE ligne ──────────────── */
.rc-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 20px; flex-wrap: wrap; min-height: 34px;
}
.rc-tete-corps { min-width: 0; }
.rc-tete h1 {
  margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.25; color: var(--foreground);
}
/* Le sous-titre suit le titre au lieu de prendre sa propre ligne : « pas encore
   partagée » n'a jamais mérité quatorze pixels de haut à lui seul. */
.rc-tete-note {
  font-size: var(--text-sm); font-weight: 400; color: var(--muted-foreground);
  white-space: nowrap;
}
.rc-tete .e-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Les chiffres de l'écran, en rangée, séparés d'un filet. */
.rc-mesures-ligne { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.rc-mesures-ligne .mesure { padding: 0 14px; border-left: 1px solid var(--border); }
.rc-mesures-ligne .mesure:first-child { border-left: 0; padding-left: 0; }
.rc-mesures-ligne .mesure-l { white-space: nowrap; }
.rc-mesures-ligne .mesure-v { font-size: var(--text-md); }
.rc-mesures-ligne .mesure-v em {
  font-style: normal; font-weight: 400; font-size: var(--text-sm); color: var(--muted-foreground);
}

/* ── Le tableau : la densité EST la fonctionnalité ────────────────────────── */
/* La rangée passe de 54 à 38 px. En dessous, la note du commentaire ne tient
   plus sur ses deux lignes, et c'est la colonne qu'on relit le plus. */
.rc-tableau td { height: 42px; }
.rc-tableau th { padding: 0 10px 7px; }
.rc-cellule { height: 30px; }
.rc-note { height: 30px; min-height: 30px; line-height: 15px; padding: 0 8px; }
.rc-note:focus { height: 116px; padding: 7px 8px; }
.rc-note-pleine::after { top: 8px; }

/* ⚠️ **`ellipsis`, ET JAMAIS `clip`.** Les cellules sont des `<input>` : au
   repos le navigateur coupe au caractère près, et « Clinique Saint-Roch »
   s'affiche « Clinique Saint-Ro ». Sept valeurs distinctes étaient coupées sur
   les cinq premières lignes. Une liste qui tranche ses mots au milieu a l'air
   cassée, pas dense. */
.rc-cellule, .rc-tableau td { text-overflow: ellipsis; }
.rc-tableau td { overflow: hidden; white-space: nowrap; }
/* La note, elle, est un bloc de deux lignes : elle garde son propre habillage. */
.rc-tableau td.rc-cellule-note { white-space: normal; overflow: visible; }

/* ── Le nom ne part JAMAIS avec le défilement ─────────────────────────────
   ⚠️ L'onglet « Tout » aligne quatorze colonnes, soit 2 298 px de tableau dans
   912 px de cadre. La bande défile — c'est le parti pris, et il est le bon —
   mais prénom et nom partaient avec, et en bout de course on ne savait plus de
   qui parlait la rangée. Ils se collent donc à gauche, comme les gestes se
   collent déjà à droite. Le liseré dit où la zone figée s'arrête. */
.rc-tableau--gel th.rc-rang, .rc-tableau--gel td.rc-rang { position: sticky; left: 0; z-index: 3; background: var(--background); }
.rc-tableau--gel tr > th:nth-child(2), .rc-tableau--gel tr > td:nth-child(2) { position: sticky; left: 30px; z-index: 3; background: var(--background); }
.rc-tableau--gel tr > th:nth-child(3), .rc-tableau--gel tr > td:nth-child(3) {
  position: sticky; left: 140px; z-index: 3; background: var(--background);
  box-shadow: 10px 0 12px -10px rgba(0,0,0,0.65);
}
.rc-tableau--gel tbody tr:hover td.rc-rang,
.rc-tableau--gel tbody tr:hover td:nth-child(2),
.rc-tableau--gel tbody tr:hover td:nth-child(3) { background: var(--card); }
.rc-tableau--gel .rc-rangee-neuve td.rc-rang,
.rc-tableau--gel .rc-rangee-neuve td:nth-child(2),
.rc-tableau--gel .rc-rangee-neuve td:nth-child(3) {
  background-color: var(--background);
  background-image: linear-gradient(color-mix(in srgb, var(--mmb-rouge-lumineux) 3%, transparent), color-mix(in srgb, var(--mmb-rouge-lumineux) 3%, transparent));
}

/* ── Un champ date vide n'annonce plus son gabarit ────────────────────────
   ⚠️ Quarante-quatre fois « mm/dd/yy » sur l'étape « Le suivi » : la colonne la
   plus bruyante de l'écran, pour zéro information — et au format du navigateur,
   qui n'est pas forcément le français. Le gabarit réapparaît au survol de la
   rangée et au focus, c'est-à-dire au moment où l'on va s'en servir. */
.rc-cellule--vide::-webkit-datetime-edit { color: transparent; }
.rc-tableau tr:hover .rc-cellule--vide::-webkit-datetime-edit,
.rc-cellule--vide:focus::-webkit-datetime-edit { color: var(--disabled-foreground); }

@media (max-width: 900px) {
  /* ⚠️ **LE REPLI TACTILE SE REDIT ICI, ET CE N'EST PAS DU ZÈLE.** Les règles
     de densité au-dessus sont écrites PLUS BAS dans le fichier que le repli
     d'origine ; à spécificité égale c'est la dernière qui gagne, média-requête
     comprise. Sans ces trois lignes, `.rc-cellule { height: 30px }` s'applique
     aussi sous le doigt : `scripts/audit-ui.py` a compté 3 227 cibles de 33 px
     là où la charte en exige 44. Le fichier documente ce piège deux fois plus
     haut ; il vient d'être payé une troisième fois. */
  .rc-cellule { height: 44px; font-size: var(--text-md); margin: 0;
    border-color: var(--border); background: var(--card); }
  .rc-tableau td { height: auto; overflow: visible; white-space: normal; }
  .rc-note { height: 44px; min-height: 44px; line-height: 20px; padding: 6px 8px; }
  .rc-note:focus { height: 132px; }
  .rc-tableau--gel th.rc-rang, .rc-tableau--gel td.rc-rang,
  .rc-tableau--gel tr > th:nth-child(2), .rc-tableau--gel tr > td:nth-child(2),
  .rc-tableau--gel tr > th:nth-child(3), .rc-tableau--gel tr > td:nth-child(3) {
    position: static; box-shadow: none; background: transparent;
  }
  .rc-tete { gap: 10px; }
  .rc-tete-note { white-space: normal; }
  /* ⚠️ **LE LIBELLÉ REDEVIENT REPLIABLE.** « SANS COORDONNÉES », en capitales
     espacées et en `nowrap`, ne peut pas se réduire : les quatre mesures
     poussaient la page à 415 px de large sur un écran de 390, et l'écran
     défilait latéralement. Le `nowrap` est une règle d'ordinateur, où la place
     ne manque pas. Vu par `scripts/audit-ui.py`, pas à l'œil. */
  .rc-mesures-ligne { width: 100%; flex-wrap: wrap; row-gap: 10px; }
  .rc-mesures-ligne .mesure { flex: 1 1 auto; min-width: 0; padding: 0 10px; }
  .rc-mesures-ligne .mesure-l { white-space: normal; }
}

/* ⚠️ **LE FONDU DE LA NOTE ÉTAIT CALÉ SUR L'ANCIENNE HAUTEUR.** Il commençait à
   62 % de 46 px — soit au milieu de la troisième ligne, ce qui était le but.
   À 30 px la note fait EXACTEMENT deux lignes de 15 px : le fondu tombait alors
   au milieu de la DEUXIÈME et mangeait le texte qu'on venait d'y mettre. Sans
   masque, la coupe se fait pile entre deux lignes, et `overflow: hidden` suffit.
   Audit d'interface du 11 septembre 2026. */
.rc-note { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 900px) {
  /* Sous le doigt la note reprend 44 px, soit deux lignes de 20 px : même
     raisonnement, même conclusion. */
  .rc-note { -webkit-mask-image: none; mask-image: none; }
}

/* ── Un geste destructif est DISCRET au repos ─────────────────────────────
   ⚠️ « Retirer » portait `btn-danger` — un aplat rouge, à côté de « Dupliquer »
   en fantôme. De loin c'est le rouge qu'on voit en premier, et c'est le seul
   bouton de l'écran qu'on ne veut pas cliquer par erreur. Il reste rouge au
   survol et au focus, c'est-à-dire quand on le vise vraiment.
   Audit d'interface du 11 septembre 2026. */
.rc-geste-oter { color: var(--muted-foreground); }
.rc-geste-oter:hover, .rc-geste-oter:focus-visible {
  color: var(--error); background: rgba(248,113,113,0.08);
}

/* La tuile d'ajout en bout de grille garde sa taille : étirée sur la hauteur
   d'une carte de campagne, elle faisait 380 px de haut pour un bouton. */
.rc-carte-neuve { align-self: start; }

/* ── Le libellé long sur ordinateur, le court sous le doigt ──────────────── */
.rc-vue-court { display: none; }

/* ── L'action unique d'un écran d'entrée est PLEINE ───────────────────────
   ⚠️ `.btn-primary` de la charte est un violet à 18 % d'opacité : juste pour un
   bouton posé parmi d'autres, trop discret pour le SEUL geste possible d'un
   écran. « Recevoir mon lien » est la première impression de la marque et la
   seule action de la page ; il se peint comme les actions principales de
   l'application (`.rc-bouton-actions`), en aplat.
   ⚠️ Portée volontairement limitée aux écrans d'entrée : changer `.btn-primary`
   repeindrait tous les boutons de l'application.
   Audit d'interface du 11 septembre 2026. */
.rc-entree-cadre .btn-primary {
  background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600;
}
.rc-entree-cadre .btn-primary:hover:not(:disabled) {
  background: var(--accent-hi); color: var(--on-accent); border-color: transparent;
}

@media (max-width: 900px) {
  .rc-vue-long { display: none; }
  .rc-vue-court { display: inline; }
  /* ⚠️ **AUCUNE ÉTAPE NE SORT PLUS DE L'ÉCRAN.** Les libellés courts ne
     suffisaient pas : à 390 px les cinq onglets mesurent encore plus que le
     rail. Ils PASSENT DONC À LA LIGNE. Une deuxième rangée coûte 38 px ; un
     onglet qu'on ne sait pas être là coûte la fonction entière — « Le suivi »
     et « Tout » étaient invisibles, sans le moindre indice, et rien dans
     l'écran ne laissait deviner qu'on pouvait faire glisser le rail. */
  .rc-vues { overflow-x: visible; flex-wrap: wrap; row-gap: 4px; }
  /* Une base de 28 % range les cinq étapes en 3 + 2, au lieu de laisser la
     cinquième seule et centrée sur sa ligne. */
  .rc-vue { flex: 1 1 28%; justify-content: center; padding: 6px 8px; font-size: var(--text-sm); }
  /* L'icône de tête mange la largeur d'un demi-libellé pour ne rien dire. */
  .rc-vue > svg { display: none; }
  .rc-vue-n { padding: 1px 5px; }
  /* ⚠️ **PAS DE `nowrap` ICI.** Le libellé tient sur une ligne parce qu'il est
     COURT, pas parce qu'on le lui interdit : `white-space: nowrap` force
     chaque cellule à la largeur de son texte, les quatre dépassent 390 px, et
     la page défile latéralement — ce que le parti pris interdit. Vu par
     `scripts/audit-ui.py` le 11 septembre 2026. */
  .rc-nav-basse a span { font-size: var(--text-2xs); }
}

/* ── Une cellule à deux lignes s'abrège sur les DEUX ──────────────────────
   ⚠️ `text-overflow` ne traverse pas : posé sur la cellule, il n'abrège pas les
   `<span>` qu'elle contient. Le nom et la coordonnée en dessous étaient donc
   coupés au caractère près — « alexandre.blanchard@exemple.inv » — dans une
   cellule qui, elle, savait s'abréger.
   Audit d'interface du 11 septembre 2026. */
.rc-cel-deux { min-width: 0; display: block; }
.rc-cel-titre, .rc-tableau td .rc-carte-detail {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-cel-titre { font-weight: 500; }

@media (max-width: 900px) {
  /* ⚠️ **L'ABRÉGEMENT EST UNE RÈGLE D'ORDINATEUR.** Sous le doigt le tableau
     devient une pile de cartes : un `white-space: nowrap` y empêche une adresse
     e-mail de passer à la ligne, et elle pousse la page à 415 px de large sur
     un écran de 390 — l'écran défile latéralement, ce que le parti pris
     interdit. Vu par `scripts/audit-ui.py`, pas à l'œil. */
  .rc-cel-titre, .rc-tableau td .rc-carte-detail {
    white-space: normal; overflow: visible; overflow-wrap: anywhere;
  }
}

/* ── L'historique d'une personne ──────────────────────────────────────────
   ⚠️ Un FIL, et non un tableau : on le lit du plus récent au plus ancien, et
   chaque note porte qui l'a écrite. C'est ce que `ligne.commentaire` ne savait
   pas faire — un champ unique que deux personnes s'effacent mutuellement. */
.rc-notes { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.rc-note-fil { padding: 12px 0; border-top: 1px solid var(--border); }
.rc-notes .rc-note-fil:first-child { border-top: 0; }
.rc-note-tete { display: flex; align-items: center; gap: 8px; }
.rc-note-qui { font-size: 14px; font-weight: 500; }
.rc-note-quand { font-size: var(--text-sm); color: var(--muted-foreground); }
/* La mention de reprise se lit sans crier : elle dit qu'un texte a changé, pas
   qu'il y a un problème. */
.rc-note-reprise { font-size: var(--text-xs); color: var(--disabled-foreground); font-style: italic; }
.rc-note-corps { margin: 8px 0 0; font-size: var(--text-base); line-height: 1.5;
  white-space: pre-wrap; color: var(--foreground); }

/* ── Ce qu'il reste à faire sur une personne ──────────────────────────────
   ⚠️ Une RANGÉE par tâche, pas une carte : on en lit cinq d'un coup d'œil pour
   savoir ce qui attend, et une carte par tâche pousserait l'historique hors de
   l'écran. */
.rc-tache-neuve { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.rc-tache-neuve .rc-saisie { height: 34px; }
/* ⚠️ **SOUS LE DOIGT, LES QUATRE CHAMPS PRENNENT 44 PX ET TOUTE LA LARGEUR.**
   Serrés sur une rangée, ils tombaient à 37 px — assez pour paraître corrects à
   l'œil, pas assez pour être touchés. Trouvé par `audit-ui.py`, pas par moi. */
@media (max-width: 900px) {
  /* ⚠️ `flex-wrap` RETIRÉ et `flex-shrink: 0` posé : en colonne, un conteneur
     qui enroule comprime la HAUTEUR de ses enfants. Les champs affichaient
     44 px dans la feuille et 23 px à l'écran — une hauteur qu'aucune règle ne
     déclarait, et qu'on ne trouve qu'en la mesurant. */
  .rc-tache-neuve { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .rc-tache-neuve > * { width: 100% !important; flex: 0 0 auto; }
  /* ⚠️ `min-height` ET NON `height` : dans une colonne flex, la hauteur
     déclarée se fait rogner — ces champs annonçaient 44 px dans la feuille et
     en mesuraient 23 à l'écran. Un minimum ne se comprime pas. */
  .rc-tache-neuve .rc-saisie { min-height: 44px; height: auto; font-size: var(--text-md); }
  .rc-tache-neuve .btn { min-height: 44px; }
  .rc-tache-gestes select { width: 100%; min-height: 44px; height: auto; font-size: var(--text-md); }
  .rc-tache { flex-wrap: wrap; row-gap: 6px; }
}
.rc-tache-neuve input[name="titre"] { flex: 1; min-width: 180px; }
.rc-tache-neuve select[name="genre"] { width: 120px; }
.rc-tache-neuve input[name="attribue_a"] { width: 130px; }
.rc-tache-neuve input[type="date"] { width: 150px; }

.rc-taches { display: flex; flex-direction: column; margin-top: 14px; }
.rc-tache { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--border); font-size: var(--text-base); }
.rc-taches .rc-tache:first-child { border-top: 0; }
/* Ce qui est réglé ne crie plus, mais reste lisible : on doit pouvoir vérifier
   ce qui a été fait sans rouvrir quoi que ce soit. */
.rc-tache--close { opacity: .5; }
.rc-tache--close .rc-tache-titre { text-decoration: line-through; }
/* ⚠️ Largeur FIXE là aussi : « RENDEZ-VOUS » est deux fois plus long que
   « MAIL », et un simple minimum laissait la colonne respirer d'une rangée à
   l'autre — donc les intitulés ne commençaient pas au même endroit. */
.rc-tache-genre { flex: 0 0 96px; width: 96px; font-size: var(--text-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tache-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tache-qui { flex: 0 0 auto; padding: 2px 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); color: var(--accent); font-size: var(--text-sm); }
.rc-tache-quand { flex: 0 0 auto; font-size: var(--text-sm); color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; }
/* ⚠️ Le retard est la seule chose qui se peint en alerte dans ce bloc : si tout
   crie, plus rien ne se voit. */
.rc-tache-retard { color: var(--error); font-weight: 500; }
.rc-tache-reports { flex: 0 0 auto; font-size: var(--text-xs); font-style: italic;
  color: var(--disabled-foreground); }
.rc-tache-gestes { margin: 0; flex: 0 0 auto; }
.rc-tache-gestes select { width: 116px; height: 30px; border-color: var(--border); }

/* ── Les filtres par canal, sur l'accueil ─────────────────────────────────
   ⚠️ Des PUCES et non des onglets : les onglets à gauche disent « qui », ces
   puces disent « quoi », et deux rangées d'onglets identiques ne se
   distingueraient pas. Une puce active se remplit, les autres restent creuses. */
.rc-filtres-genre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-puce-genre {
  display: inline-flex; align-items: center; gap: 0.46em; padding: 0.42em 0.77em;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--muted-foreground); font-size: var(--text-sm); text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
}
.rc-puce-genre:hover { color: var(--foreground); border-color: var(--muted-foreground); }
.rc-puce-genre--active {
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 42%, transparent);
  color: var(--accent); font-weight: 500;
}
.rc-puce-n { font-variant-numeric: tabular-nums; opacity: .7; font-size: var(--text-xs); }
/* Une vue qui ne porte plus rien s'efface sans disparaître : on doit voir que
   Gaëtane n'a rien dans ce carnet, sans être tenté d'y cliquer. */
.rc-vue:not([aria-current]):has(.rc-vue-n:empty) { opacity: .45; }
@media (max-width: 900px) {
  /* Sous le doigt, les puces défilent sur place plutôt que d'empiler trois
     rangées avant la première action. */
  .rc-filtres-genre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rc-filtres-genre::-webkit-scrollbar { display: none; }
  .rc-puce-genre { min-height: 44px; padding-inline: 14px; font-size: 14px; }
}

/* ═══ L'ACCUEIL ══════════════════════════════════════════════════════════
   ⚠️ **CET ÉCRAN NE SUIT PAS LA RÈGLE DE DENSITÉ DU TABLEAU, ET C'EST
   DÉLIBÉRÉ.** Le tableau d'une campagne remplace un Google Sheets : on y juge
   au nombre de lignes visibles. Ici on ouvre le matin devant dix actions, et
   ce qui compte est que la plus urgente saute aux yeux. La densité n'est pas
   le critère — la hiérarchie l'est. */


/* ── La barre de filtres ────────────────────────────────────────────────── */
.rc-barre-filtres { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between; }

/* ── Un groupe d'actions ────────────────────────────────────────────────── */
.rc-groupe { display: flex; flex-direction: column; gap: 10px; }
.rc-groupe-titre { margin: 0; font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.rc-groupe-titre--retard { color: var(--error); }
.rc-groupe-n { margin-left: 4px; opacity: .55; font-variant-numeric: tabular-nums; }

/* ── Une action ─────────────────────────────────────────────────────────── */
.rc-actions { display: flex; flex-direction: column; gap: 5px; }
/* ⚠️ **LA HAUTEUR D'UNE CARTE EST LE VRAI RÉGLAGE DE CET ÉCRAN.** À 102 px on
   voyait cinq actions et l'application paraissait « trop zoomée » ; la maquette
   validée en faisait 72 et en montrait huit. Ce n'est pas la typographie qui
   était en cause — c'était la ligne de détail qui passait à la ligne, et les
   gestes qui ajoutaient une rangée. */
.rc-action {
  display: flex; align-items: center; gap: 13px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  transition: border-color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
}
.rc-action:hover { border-color: var(--border-strong); background: var(--background); }
.rc-action:hover .rc-action-fleche { opacity: .8; transform: translateX(2px); }

.rc-action-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-action-titre { font-size: var(--text-base); color: var(--foreground); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La deuxième ligne porte le contexte — qui, par quel canal, dans quelle liste.
   Elle est volontairement plus discrète : on la lit après, ou pas du tout. */
/* ⚠️ `nowrap` : la ligne de contexte reste SUR UNE LIGNE et s'abrège. Enroulée,
   elle ajoutait une troisième rangée à chaque carte — trente pixels par action,
   pour un nom de campagne qu'on lit à peine. */
.rc-action-detail { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  overflow: hidden; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-action-detail > * { flex: 0 0 auto; }
.rc-action-detail > .rc-action-campagne { flex: 0 1 auto; }
.rc-action-personne { font-weight: 500; color: var(--foreground); opacity: .82; }
.rc-action-campagne { opacity: .6; max-width: 210px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── D'où vient une tâche ─────────────────────────────────────────────────
   ⚠️ **UN REPÈRE, PAS UNE ÉTIQUETTE DE PLUS.** La rangée porte déjà le canal
   en couleur et la personne en gras : un troisième bloc coloré la rendrait
   illisible. Celui-ci est en creux — un trait d'icône et un mot gris — et
   ne se voit que si on le cherche. C'est ce qu'on veut d'un repère : présent,
   jamais bruyant. */
.rc-attache { display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; max-width: 220px; font-size: var(--text-2xs);
  color: var(--muted-foreground); }
.rc-attache svg { flex: none; opacity: .55; }
/* ⚠️ **L'ELLIPSE NE S'APPLIQUE PAS À UN NŒUD TEXTE NU DANS UN FLEX.** Le nom
   de campagne se coupait net, sans les trois points : on ne voyait pas qu'il
   manquait quelque chose. Il lui faut son propre bloc. */
.rc-attache-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Hors campagne : la même forme, en plus effacé — c'est l'absence d'attache
   qu'on signale, pas une catégorie à part entière. */
.rc-attache--seule { font-style: italic; opacity: .62; }
@media (max-width: 900px) {
  /* ⚠️ Sous le doigt, la ligne de détail n'a pas la place de tout tenir : le
     nom de campagne se coupait net contre le bord de la carte. Le repère passe
     à la ligne plutôt que d'être tranché — c'est déjà ce que fait le carnet. */
  .rc-action-detail { flex-wrap: wrap; row-gap: 4px; }
  .rc-attache { max-width: 100%; }
}
.rc-action-reports { font-style: italic; opacity: .55; }

/* ⚠️ Le canal est un MOT TEINTÉ, pas une icône : six icônes en trait au même
   endroit se ressemblent toutes, et il faudrait les apprendre. */
.rc-action-canal { padding: 1px 7px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05); font-size: var(--text-xs); }
.rc-canal--appel    { color: #8ec7ff; background: rgba(142,199,255,0.10); }
.rc-canal--sms      { color: #9be7c4; background: rgba(155,231,196,0.10); }
.rc-canal--mail     { color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); }
.rc-canal--linkedin { color: #7fb4e8; background: rgba(127,180,232,0.10); }
.rc-canal--whatsapp { color: #86dba0; background: rgba(134,219,160,0.10); }
.rc-canal--rdv      { color: #ffc98e; background: rgba(255,201,142,0.10); }

/* ── Les teintes d'état ───────────────────────────────────────────────────
   ⚠️ **ELLES SUIVENT LE RÔLE, JAMAIS LE LIBELLÉ.** Une campagne qui renomme
   « Devenu client » en « Signé » garde le vert : c'est ce qui rend la
   personnalisation possible sans toucher à une couleur. Les valeurs reprennent
   celles que le dépôt s'était déjà données pour l'avancement par statut.

   ⚠️ **LE FOND RESTE À 10-12 %, comme les canaux.** Ces pastilles vivent dans
   un tableau dense et une carte de six lignes : à pleine saturation, elles se
   disputeraient l'attention avec le canal, qui est déjà coloré. On cherche un
   repère qu'on attrape du coin de l'œil, pas une alerte. */
.rc-teinte { padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: inherit; }
/* ⚠️ **LA CLASSE EST DOUBLÉE, ET C'EST LE SEUL MOYEN PROPRE.** Ces pastilles
   vivent DANS un menu, dont la règle `.rc-menu-choix button` pèse (0,1,1) et
   pose déjà une couleur. Une classe simple (0,1,0) perd : les options
   portaient bien leur classe et restaient grises. Doubler la classe monte à
   (0,2,0) sans ajouter un sélecteur par contexte — et sans `!important`, qui
   serait la vraie dette. */
.rc-teinte.rc-teinte--depart   { color: #cfcbe4; background: rgba(245,244,240,0.08); }
.rc-teinte.rc-teinte--en_cours { color: #8ec7ff; background: rgba(142,199,255,0.12); }
.rc-teinte.rc-teinte--abouti   { color: #86dba0; background: rgba(134,219,160,0.14); }
.rc-teinte.rc-teinte--clos     { color: #9a9aae; background: rgba(245,244,240,0.06); }
/* La priorité n'a pas de rôle : elle se teinte par RANG, du chaud au calme. */
.rc-teinte.rc-rang--1 { color: #ffc98e; background: rgba(255,201,142,0.12); }
.rc-teinte.rc-rang--2 { color: #ffd678; background: rgba(255,214,120,0.10); }
.rc-teinte.rc-rang--3 { color: #9a9aae; background: rgba(245,244,240,0.06); }

/* ⚠️ **DANS UN MENU, PAS D'APLAT : UN POINT.** La pastille est faite pour une
   valeur posée au milieu d'autre chose — une cellule, une rangée. Sur une
   ligne de menu, large et pleine, le fond devient une bande : neuf bandes
   l'une sous l'autre, et l'on ne lit plus rien. Le mot garde sa couleur, un
   point la rappelle à gauche. C'est déjà le motif des canaux (`.rc-canal i`). */
.rc-menu-choix button.rc-teinte { background: transparent; border-radius: var(--radius-sm);
  padding: 0.55em 0.75em; display: flex; align-items: center; gap: 8px; }
.rc-menu-choix button.rc-teinte::before { content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rc-menu-choix button.rc-teinte:hover { background: var(--muted); }

.rc-action-fin { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.rc-action-qui { padding: 2px 9px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); color: var(--accent); font-size: var(--text-sm); }
.rc-action-quand { font-size: var(--text-sm); color: var(--muted-foreground);
  min-width: 96px; text-align: right; }
.rc-action-quand--retard { color: var(--error); font-weight: 500; }
.rc-action-quand--vague { opacity: .5; }
.rc-action-fleche { flex: 0 0 auto; display: inline-flex; color: var(--muted-foreground);
  opacity: 0; transition: opacity var(--motion-base) var(--ease-out),
                          transform var(--motion-base) var(--ease-out); }

/* ── Rien à faire ───────────────────────────────────────────────────────── */
.rc-rien { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 44px 20px; color: var(--muted-foreground); text-align: center; }
.rc-rien svg { color: var(--accent); opacity: .5; margin-bottom: 4px; }
.rc-rien p { margin: 0; }

/* ── Vos listes, en colonne de droite ────────────────────────────────────
   ⚠️ **ELLES ÉTAIENT SOUS LES ACTIONS, ET PERSONNE NE LES VOYAIT.** Il fallait
   passer dix cartes avant d'y arriver. À droite, elles sont lues en même temps
   que la liste des actions, sans voler la place de l'une ni de l'autre. */

/* ── La file guidée ───────────────────────────────────────────────────────
   Reprise le 24 septembre 2026. Son principe était juste ; c'est sa mise en
   page qui cassait. */
.rc-file-sortir { flex: 0 0 auto; white-space: nowrap; }
.rc-file-aide { max-width: 64ch; margin-bottom: 4px; }
.rc-file-deux { display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px; align-items: start; }
.rc-file-su { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rc-file-clavier { font-size: var(--text-2xs); color: var(--disabled-foreground);
  margin-left: auto; }
.rc-file-clavier kbd { font-size: .95em; padding: 1px 5px; background: var(--muted);
  border: 1px solid var(--border); border-radius: 4px; }

@media (max-width: 900px) {
  /* Le rappel passe SOUS la saisie : à côté, il lui prendrait la moitié de la
     largeur alors que c'est la saisie qui compte ici. */
  .rc-file-deux { grid-template-columns: minmax(0, 1fr); }
  .rc-file-clavier { display: none; }
}

/* ── Le tableau et son panneau ────────────────────────────────────────────
   Option B, validée le 24 septembre 2026. ⚠️ **LE PANNEAU NE COÛTE SES 380 PX
   QUE PENDANT QU'IL EST OUVERT** : fermé, le tableau reprend toute la largeur
   et ses colonnes. C'était la seule objection à cette option. */
.rc-avec-panneau { display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px; align-items: start; }
.rc-avec-panneau--seul { grid-template-columns: minmax(0, 1fr); }
.rc-panneau { position: sticky; top: calc(var(--haut) + 26px); display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); }
.rc-panneau-fermer { position: absolute; top: 10px; right: 14px; font-size: var(--text-lg);
  color: var(--muted-foreground); text-decoration: none; line-height: 1; }
.rc-panneau-fermer:hover { color: var(--foreground); }
.rc-panneau-id { display: flex; align-items: center; gap: 11px; }
.rc-panneau-nom { display: block; font-size: var(--text-base); font-weight: 500; }
.rc-panneau-metier { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-panneau-titre { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.rc-panneau-vers { align-self: flex-start; margin-top: 6px; }

@media (max-width: 1100px) {
  /* Sous cette largeur, le panneau passe SOUS le tableau : à côté, il ne
     laisserait au tableau que trois colonnes, ce qui n'est plus un tableau. */
  .rc-avec-panneau { grid-template-columns: minmax(0, 1fr); }
  .rc-panneau { position: static; }
}

/* ── Les campagnes, une par ligne ─────────────────────────────────────────
   Option B, validée le 24 septembre 2026. Les cartes sont belles à trois ; à
   vingt elles obligent à défiler pour comparer deux chiffres. */
.rc-camp--brule td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.rc-camp-nom { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  color: inherit; }
/* ⚠️ Coupé NET, sans ellipse, « Carnet de recommandation Leverage Gaëtane »
   perdait « Bramerie » sans le dire. L'ellipse annonce l'abrègement. */
.rc-camp-nom b { font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block; }
.rc-camp-nom small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-attend--calme { background: rgba(110,231,168,.1); color: #6ee7a8; }
a.rc-attend { text-decoration: none; }
a.rc-attend:hover { filter: brightness(1.25); }
.rc-avance { display: flex; align-items: center; gap: 9px; }
.rc-jauge { flex: 1; min-width: 60px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.08); overflow: hidden; }
.rc-jauge i { display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); }
.rc-part { font-size: var(--text-xs); color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; }
/* Les étapes qui restent sont des PORTES : on entre dans la file guidée au lieu
   de rouvrir le tableau pour chercher qui n'est pas complété. */
.rc-portes { display: flex; gap: 5px; flex-wrap: wrap; }
.rc-porte-etape { padding: 0.25em 0.6em; font-size: var(--text-2xs);
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.rc-porte-etape:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) {
  /* Une porte de 24 px se rate au pouce. La règle des 44 points vaut ici comme
     partout — et ces portes sont le geste principal de l'écran sur téléphone. */
  .rc-porte-etape { min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 0.9em; }
  .rc-portes { gap: 7px; }
  /* ⚠️ En carte, le nom d'une campagne PASSE À LA LIGNE au lieu d'être coupé :
     la hauteur ne manque pas ici, et « Carnet de recommandation Leverage
     Gaëtane Bramerie » sortait de l'écran de trois pixels — assez pour que la
     page entière défile latéralement. */
  .rc-camp-nom b { white-space: normal; overflow: visible; }
}

/* ── Le carnet : les filtres comptés, la liste par initiale ───────────────
   Option B, validée le 24 septembre 2026 — la même grammaire que « toutes les
   tâches ». On a appris cet écran une fois ; on ne l'apprend pas deux fois. */
/* ⚠️ **PAS `.rc-carnet` : CE NOM EST DÉJÀ PRIS.** C'est la liste déroulante de
   la fenêtre « Ajouter une personne », plafonnée à 232 px pour défiler dans son
   cadre. Nommé ainsi, ce répertoire héritait du plafond : seize groupes
   s'empilaient dans une boîte de 232 px et tout ce qui suivait la lettre B
   disparaissait. Deuxième collision de la journée, après `.rc-fil`. */
.rc-repertoire { display: grid; grid-template-columns: 228px 1fr; gap: 26px;
  align-items: start; margin-top: 16px; }
.rc-repertoire > .rc-facettes { position: sticky; top: calc(var(--haut) + 26px); }
.rc-repertoire-liste { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* ⚠️ Ce qui attend sur une personne : le carnet l'ignorait, et c'est pourtant
   là qu'on cherche qui relancer. */
.rc-attend { display: inline-flex; align-items: center; gap: 5px; padding: 0.15em 0.6em;
  border-radius: var(--radius-pill); font-size: var(--text-2xs); white-space: nowrap;
  background: rgba(255,255,255,.06); color: var(--muted-foreground); }
.rc-attend--retard { background: rgba(255,120,120,.12); color: var(--error); font-weight: 500; }
.rc-attend--doute { background: rgba(255,214,120,.14); color: #ffd678; }
.rc-action-lien { display: inline-flex; padding: 0.1em 0.55em; border-radius: var(--radius-sm);
  font-size: var(--text-2xs); background: rgba(255,180,140,.13); color: #ffb48c; }
.rc-action-fin .rc-etiquettes { justify-content: flex-end; }

@media (max-width: 900px) {
  .rc-repertoire { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* ⚠️ **LA LISTE PASSE DEVANT LES FILTRES.** Empilés, les dix filtres
     occupaient tout le premier écran : on ouvrait son carnet et l'on voyait
     des facettes, pas des gens. On vient ici pour chercher quelqu'un — la
     recherche est juste au-dessus, et les filtres attendent en dessous. */
  .rc-repertoire > .rc-facettes { position: static; flex-direction: row; flex-wrap: wrap;
    order: 2; }
  .rc-repertoire-liste { order: 1; }
  /* Un titre de groupe se replie au lieu de se faire couper. */
  .rc-repertoire .rc-groupe-titre { white-space: normal; }
  /* ⚠️ **UNE ADRESSE E-MAIL NE SE COUPE NULLE PART.** Sans coupure forcée, elle
     pousse la ligne hors de l'écran : `tristan.fargeaudou@fin…` sortait du
     cadre sur un téléphone de 390 px. Le détail se replie, et chaque morceau
     s'abrège au besoin. */
  .rc-repertoire .rc-action-detail { flex-wrap: wrap; min-width: 0; }
  .rc-repertoire .rc-action-detail > * { min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .rc-repertoire .rc-action-fin { flex-wrap: wrap; justify-content: flex-start; }
}

/* ── Les étiquettes ───────────────────────────────────────────────────────
   Un FORMAT de propriété, pas un système à part : sans cela il y aurait deux
   endroits pour classer les gens, qui ne se filtreraient pas ensemble. */
.rc-etiquettes, .rc-etiq-champ { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-etiq-champ { margin-top: 6px; }
.rc-etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 0.28em 0.68em;
  border-radius: var(--radius-pill); font-size: var(--text-xs);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 13%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 30%, transparent); }
.rc-etiquette button { background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; opacity: .65; font-size: 1.05em; line-height: 1; }
.rc-etiquette button:hover { opacity: 1; }
.rc-etiq-porte { position: relative; }
.rc-etiq-ajout { padding: 0.35em 0.75em; font-family: inherit; font-size: var(--text-xs);
  background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill);
  color: var(--muted-foreground); cursor: pointer; }
.rc-etiq-ajout:hover { border-color: var(--accent); color: var(--accent); }
.rc-etiq-choix { position: absolute; left: 0; top: calc(100% + 5px); z-index: 50;
  min-width: 230px; max-height: 260px; overflow: auto; display: none;
  flex-direction: column; padding: 4px; background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.rc-etiq-choix--vu { display: flex; }
.rc-etiq-choix input { margin: 3px; height: 2.4em; padding: 0 0.7em; font-family: inherit;
  font-size: var(--text-xs); color: var(--foreground); background: var(--background);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rc-etiq-choix input:focus { outline: none; border-color: var(--accent); }
.rc-etiq-choix button { padding: 0.55em 0.7em; font-family: inherit; font-size: var(--text-xs);
  text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--muted-foreground); cursor: pointer; }
.rc-etiq-choix button:hover { background: var(--muted); color: var(--foreground); }
.rc-etiq-neuve { color: var(--accent); }
.rc-etiq-prise { opacity: .45; }

/* Dans une fenêtre, le menu prend la largeur du champ et s'aligne à gauche. */
.rc-menu--plein { display: block; margin-top: 4px; }
.rc-menu--plein .rc-menu-tete { justify-content: space-between; width: 100%; }
.rc-menu--plein .rc-menu-choix { left: 0; right: auto; min-width: 100%; }
.rc-etiquette--mini { padding: 0.1em 0.5em; font-size: var(--text-2xs); }
/* Une valeur du carnet se LIT dans le tableau ; elle se modifie sur la fiche,
   là où l'on voit à qui elle appartient. */
.rc-cellule-lue { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-fiche-modifier { width: 100%; justify-content: center; margin-bottom: 12px; }
.rc-fiche-val--vide { color: var(--disabled-foreground); }
.rc-suit { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0;
  padding: 11px 13px; font-size: var(--text-xs); line-height: 1.5;
  color: var(--muted-foreground); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 22%, transparent); border-radius: var(--radius-lg); }
.rc-suit span[aria-hidden], .rc-suit b { color: var(--accent); font-weight: 500; }

@media (max-width: 900px) {
  .rc-etiquette, .rc-etiq-ajout { min-height: 44px; }
  .rc-etiq-choix button { min-height: 44px; }
}

/* ── Mes propriétés : les champs qu'on ajoute à son carnet ────────────────── */
.rc-prop-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.rc-prop { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); }
.rc-prop:hover { border-color: var(--border-strong); }
.rc-prop--archivee { opacity: .55; grid-template-columns: 1fr auto; }
.rc-prop-corps { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rc-prop-nom { font-size: var(--text-base); }
.rc-prop-detail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-prop-format { display: inline-flex; padding: 0.15em 0.6em; border-radius: var(--radius-sm);
  font-size: var(--text-2xs); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent); }
.rc-prop-options { display: flex; gap: 4px; flex-wrap: wrap; }
.rc-prop-valeur { display: inline-flex; padding: 0.15em 0.55em; border-radius: var(--radius-pill);
  font-size: var(--text-2xs); background: rgba(255,255,255,.06); color: var(--muted-foreground); }
.rc-prop-remplies { font-size: var(--text-xs); color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-prop-archivees { margin-top: 22px; }
.rc-prop-archivees > summary { font-size: var(--text-xs); color: var(--muted-foreground);
  cursor: pointer; }
@media (max-width: 900px) {
  /* 18 px de haut : on vise ce repli trois fois avant de l'attraper. */
  .rc-prop-archivees > summary { min-height: 44px; display: flex; align-items: center; }
}

/* L'avertissement, dans la fenêtre de création et nulle part ailleurs. */
.rc-garde { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0;
  padding: 11px 13px; font-size: var(--text-xs); line-height: 1.5;
  color: var(--muted-foreground); background: rgba(255,180,140,.07);
  border: 1px solid rgba(255,180,140,.26); border-radius: var(--radius-lg); }
.rc-garde span[aria-hidden] { color: #ffb48c; }
.rc-garde b { color: #ffb48c; font-weight: 500; }

.rc-formats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px; margin-top: 6px; }
.rc-format { display: flex; flex-direction: column; gap: 2px; padding: 0.7em 0.8em;
  background: var(--background); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer; }
.rc-format:hover { border-color: var(--border-strong); }
.rc-format input { position: absolute; opacity: 0; pointer-events: none; }
.rc-format:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 9%, transparent); }
/* ⚠️ Le bouton radio est masqué : sans ceci, quelqu'un qui tabule ne voit pas
   où il est. Un choix invisible au clavier n'est pas un choix. */
.rc-format:has(input:focus-visible) { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-format-nom { font-size: var(--text-xs); color: var(--foreground); }
.rc-format-ex { font-size: var(--text-2xs); color: var(--disabled-foreground); }
.rc-coche { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); color: var(--muted-foreground); cursor: pointer; }

/* Les valeurs possibles : une ligne par valeur, qu'on réorganise. */
.rc-options { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.rc-option { display: grid; grid-template-columns: auto 1fr auto auto; gap: 7px;
  align-items: center; padding: 4px 6px; background: var(--background);
  border: 1px solid var(--border); border-radius: var(--radius-md); }
.rc-option:hover { border-color: var(--border-strong); }
.rc-option--prise { opacity: .4; }
.rc-option--cible { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.rc-option-poignee { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 30px; cursor: grab; color: var(--disabled-foreground); letter-spacing: 1px; }
.rc-option-poignee:active { cursor: grabbing; }
.rc-option input { height: 2.3em; padding: 0 0.6em; font-family: inherit;
  font-size: var(--text-xs); color: var(--foreground); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm); }
.rc-option input:focus { outline: none; background: var(--card); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-option-fleches { display: flex; flex-direction: column; gap: 1px; }
.rc-option-fleches button { width: 24px; height: 16px; padding: 0; font-size: 9px;
  font-family: inherit; line-height: 1; background: transparent; border: 0;
  color: var(--disabled-foreground); cursor: pointer; border-radius: 3px; }
.rc-option-fleches button:hover:not([disabled]) { background: var(--muted); color: var(--foreground); }
.rc-option-fleches button[disabled] { opacity: .3; cursor: default; }
.rc-option-oter { width: 26px; height: 26px; padding: 0; font-family: inherit;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--disabled-foreground); cursor: pointer; }
.rc-option-oter:hover { background: rgba(255,120,120,.12); color: var(--error); }
.rc-option-ajout { margin-top: 2px; padding: 0.5em 0.8em; font-family: inherit;
  font-size: var(--text-xs); background: transparent; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md); color: var(--muted-foreground); cursor: pointer; }
.rc-option-ajout:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .rc-prop { grid-template-columns: 1fr; gap: 10px; }
  .rc-formats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rc-format { min-height: 44px; }
  /* Le glisser-déposer n'existe pas au doigt : les flèches DOIVENT s'attraper. */
  .rc-option input { min-height: 44px; font-size: var(--text-md); }
  .rc-option-fleches button { width: 34px; height: 22px; }
  .rc-option-oter, .rc-option-poignee { width: 44px; height: 44px; }
  .rc-option-ajout { min-height: 44px; }
}

/* ── La fiche d'une personne — option B, validée le 24 septembre 2026 ─────
   Deux colonnes, un rôle chacune : à gauche ce qui bouge peu, à droite ce qui
   vit. L'ancienne fiche était un formulaire de quinze champs ouverts, haut de
   1 643 px, avec un « Enregistrer » au milieu qui n'enregistrait ni les tâches
   ni les notes. */
.rc-fiche { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
/* Le panneau d'une tâche prend une troisième colonne, et seulement alors. */
.rc-fiche:has(.rc-panneau-tache) { grid-template-columns: 300px 1fr 340px; }
@media (max-width: 1200px) {
  .rc-fiche:has(.rc-panneau-tache) { grid-template-columns: 340px 1fr; }
  .rc-fiche > .rc-panneau-tache { grid-column: 1 / -1; }
}
/* ⚠️ `min-width: 0` SUR LES DEUX COLONNES. Un enfant de grille vaut
   `min-width: auto` par défaut : il refuse de descendre sous la largeur de son
   contenu, et une adresse e-mail un peu longue faisait sortir la colonne de
   l'écran — 422 px de contenu pour 390. Le piège est déjà consigné ici pour
   les enfants de flex ; il vaut pour la grille. */
.rc-fiche-qui { position: sticky; top: calc(var(--haut) + 26px); min-width: 0;
  display: flex; flex-direction: column; gap: 12px; }
.rc-fiche-vie { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rc-fiche-identite { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rc-fiche-nom { font-size: var(--text-lg); font-weight: 400; margin: 0; line-height: 1.2; }
.rc-fiche-metier { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-fiche-lignes { display: flex; flex-direction: column; }
.rc-fiche-ligne { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0.25em 0; font-size: var(--text-xs);
  border-bottom: 1px solid var(--border); }
.rc-fiche-ligne:last-child { border-bottom: 0; }
/* ⚠️ Une PHRASE prend sa propre ligne : alignée à droite comme une valeur, elle
   vient toucher son libellé et se fait couper — celle qu'on lit le plus était
   la moins lisible. */
.rc-fiche-ligne--pleine { flex-direction: column; align-items: stretch; gap: 4px;
  padding-top: 0.55em; }
.rc-fiche-cle { color: var(--muted-foreground); flex: 0 0 auto; }
.rc-fiche-val { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⚠️ **LE CHAMP GARDE LA TAILLE QU'IL A EN LECTURE.** S'il grandit au clic,
   toute la colonne saute et l'on perd la ligne qu'on visait. */
.rc-sur-place { flex: 1; min-width: 0; height: 2.3em; padding: 0 0.6em; margin: -1px 0;
  font-family: inherit; font-size: var(--text-xs); color: var(--foreground);
  text-align: right; background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; }
.rc-sur-place:hover { background: var(--muted); border-color: var(--border); }
.rc-sur-place:focus { outline: none; background: var(--card); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); cursor: text; }
.rc-sur-place--texte { height: auto; min-height: 3.4em; padding: 0.5em 0.6em;
  text-align: left; line-height: 1.45; resize: vertical; cursor: text; }

/* Un menu dessiné par NOUS : celui d'un `<select>` est dessiné par le système
   et s'ouvre en blanc sous Linux, quoi que dise `color-scheme`. */
.rc-menu { position: relative; flex: 1; min-width: 0; }
.rc-menu-tete { list-style: none; display: flex; align-items: center;
  justify-content: flex-end; gap: 8px; min-width: 0; }
/* ⚠️ **UNE VALEUR LONGUE DÉBORDAIT SUR LA LIGNE SUIVANTE.** « Via mon
   responsable partenariat » se repliait sur trois lignes dans une boîte qui
   n'en faisait qu'une (40 px de contenu pour 26), et venait chevaucher « Date
   de contact ». Elle s'abrège, comme un nom de campagne ou une adresse
   e-mail ailleurs : la carte tient à des lignes régulières, et la valeur
   entière se lit dans le menu, cochée, dès qu'on l'ouvre. */
.rc-menu-tete > span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rc-menu-tete::-webkit-details-marker { display: none; }
.rc-menu-tete::after { content: ""; width: 5px; height: 5px; flex: 0 0 auto;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: translateY(-2px) rotate(45deg); }
.rc-menu[open] .rc-menu-tete { background: var(--card); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-menu-choix { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 190px; display: flex; flex-direction: column; padding: 4px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.rc-menu-choix button { padding: 0.6em 0.7em; font-family: inherit; font-size: var(--text-xs);
  text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--muted-foreground); cursor: pointer; }
.rc-menu-choix button:hover { background: var(--muted); color: var(--foreground); }
.rc-menu-coche { color: var(--accent); font-weight: 500; }
.rc-menu-coche::after { content: " ✓"; }

/* Les sept canaux, à plat, chacun sa couleur. Caché dans une liste déroulante,
   un canal demande deux gestes ; posé là, il s'attrape d'un seul. */
.rc-canaux { display: flex; gap: 7px; flex-wrap: wrap; }
.rc-canal { display: inline-flex; align-items: center; gap: 7px; padding: 0.55em 0.95em;
  font-family: inherit; font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-pill);
  cursor: pointer; border: 1px solid transparent; background: var(--card);
  color: var(--muted-foreground); }
.rc-canal:hover { border-color: var(--border-strong); }
.rc-canal i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rc-canal[aria-pressed="true"] { font-weight: 600; }
.rc-canal--appel i, .rc-canal--whatsapp i { color: #6ee7a8; }
.rc-canal--sms i { color: #ffd678; }
.rc-canal--mail i { color: #8fb6ff; }
.rc-canal--linkedin i { color: #7cc0ff; }
.rc-canal--rdv i { color: #ffb48c; }
.rc-canal--note i { color: var(--muted-foreground); }
.rc-canal--appel[aria-pressed="true"], .rc-canal--whatsapp[aria-pressed="true"] {
  background: rgba(110,231,168,.14); color: #6ee7a8; border-color: rgba(110,231,168,.4); }
.rc-canal--sms[aria-pressed="true"] { background: rgba(255,214,120,.14); color: #ffd678;
  border-color: rgba(255,214,120,.4); }
.rc-canal--mail[aria-pressed="true"] { background: rgba(120,170,255,.14); color: #8fb6ff;
  border-color: rgba(120,170,255,.4); }
.rc-canal--linkedin[aria-pressed="true"] { background: rgba(120,190,255,.14); color: #7cc0ff;
  border-color: rgba(120,190,255,.4); }
.rc-canal--rdv[aria-pressed="true"] { background: rgba(255,180,140,.14); color: #ffb48c;
  border-color: rgba(255,180,140,.4); }
.rc-canal--note[aria-pressed="true"] { background: rgba(255,255,255,.08);
  color: var(--foreground); border-color: var(--border-strong); }

/* ⚠️ Le paramétrage n'apparaît QU'APRÈS le choix du canal, et il dit lequel :
   ouvert en permanence sous sept boutons, il fait croire qu'il faut le remplir
   avant de cliquer. */
.rc-pose { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 13px 15px; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--border-strong); }
.rc-pose[hidden] { display: none; }
.rc-pose-dit { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-pose .rc-saisie { width: auto; }
.rc-pose-titre { flex: 1; min-width: 210px; }
.rc-pose-porte { position: relative; flex: 1; min-width: 210px; display: flex; }
.rc-pose-pour { width: 128px; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer; list-style: none; }
.rc-pose-pour::-webkit-details-marker { display: none; }
.rc-pose-pour::after { content: ""; width: 5px; height: 5px; margin-left: 8px; flex: 0 0 auto;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: translateY(-2px) rotate(45deg); }
.rc-menu--pour { position: relative; flex: 0 0 auto; }
.rc-menu--pour .rc-menu-choix { left: 0; right: auto; min-width: 180px; }
.rc-pose-quand { width: 152px; }
/* ⚠️ Aucune hauteur écrite ici : `.rc-saisie` fait 2,8 em et `.btn` 2,85, ils
   s'alignent déjà et suivront ensemble si le cran typographique bouge. */

.rc-propositions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 45;
  display: none; flex-direction: column; padding: 4px; max-height: 240px; overflow: auto;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.rc-propositions--vu { display: flex; }
.rc-propositions button { padding: 0.6em 0.7em; font-family: inherit; font-size: var(--text-xs);
  text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--muted-foreground); cursor: pointer; }
.rc-propositions button:hover, .rc-propositions--vise {
  background: var(--muted); color: var(--foreground); }

/* L'histoire : les actions et les notes mêlées dans l'ordre du temps. Séparées,
   on lit « rendez-vous lundi » sans voir la note « elle a décalé ». */
/* ⚠️ **PAS `.rc-fil` : C'EST LE FIL D'ARIANE DE LA COQUILLE.** Nommer ce bloc
   ainsi l'a mis en colonne et centré le 24 septembre 2026 — un nom de classe
   déjà pris ne prévient jamais, il change juste un autre écran. */
.rc-histoire { display: flex; flex-direction: column; gap: 6px; }
.rc-histoire-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center; padding: 11px 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rc-histoire-item:hover { border-color: var(--border-strong); }
.rc-histoire-item--retard { box-shadow: inset 3px 0 0 var(--error); }
.rc-histoire-item--close { opacity: .5; }
.rc-histoire-item--close .rc-histoire-texte { text-decoration: line-through; }
.rc-histoire-item--note { background: transparent; border-style: dashed; }
.rc-histoire-marque { align-self: flex-start; margin-top: 2px; }
.rc-histoire-marque--note { display: inline-flex; padding: 0.15em 0.55em;
  border-radius: var(--radius-sm); font-size: var(--text-2xs);
  background: rgba(255,255,255,.06); color: var(--muted-foreground); }
.rc-histoire-corps { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-histoire-texte { font-size: var(--text-sm); line-height: 1.4; }
.rc-histoire-pied { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--muted-foreground); }
/* ⚠️ D'où vient cet élément du fil. Sur la fiche d'une campagne la question ne
   se pose pas : tout vient de là. Ici tout se mélange. */
.rc-ou { display: inline-flex; padding: 0.1em 0.55em; border-radius: var(--radius-sm);
  font-size: var(--text-2xs); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 11%, transparent); color: var(--accent); }
.rc-ou--hors { background: rgba(255,255,255,.05); color: var(--disabled-foreground); }
.rc-porte { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0.6em 0.7em; margin: 0 -0.7em; border-radius: var(--radius-sm);
  font-size: var(--text-xs); color: var(--muted-foreground); text-decoration: none; }
.rc-porte:hover { background: var(--muted); color: var(--foreground); }
.rc-porte b { font-weight: 500; color: var(--foreground); }
.rc-porte small { display: block; font-size: var(--text-2xs); color: var(--disabled-foreground); }
.rc-histoire-gestes { display: flex; gap: 5px; }

.rc-fiche-nav { display: flex; align-items: center; gap: 6px; }
.rc-fleche { display: inline-flex; align-items: center; justify-content: center;
  width: 2.2em; height: 2.2em; font-size: var(--text-sm); text-decoration: none;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--muted-foreground); }
.rc-fleche:hover { border-color: var(--accent); color: var(--accent); }
.rc-fleche[aria-disabled] { opacity: .35; }
.rc-rang { font-size: var(--text-xs); color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; padding: 0 4px; }

.rc-avis-flottant { position: fixed; right: 18px; bottom: 18px; z-index: 60;
  padding: 9px 14px; font-size: var(--text-xs); background: var(--card);
  border: 1px solid rgba(110,231,168,.3); border-radius: var(--radius-pill); color: #6ee7a8;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.rc-avis-flottant--vu { opacity: 1; transform: none; }
.rc-avis-flottant--calme { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 40%, transparent); color: var(--accent); }

@media (max-width: 900px) {
  .rc-fiche { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rc-fiche-qui { position: static; }
  /* Les flèches font 2,2 em, soit 29 px : ratables au pouce. */
  .rc-fleche { width: 44px; height: 44px; }
  .rc-sur-place { min-height: 44px; font-size: var(--text-md); }
  .rc-menu-tete { min-height: 44px; }
  .rc-menu-choix button, .rc-propositions button { min-height: 44px; }
  .rc-canal { min-height: 44px; }
  .rc-pose-titre, .rc-pose-porte, .rc-pose-pour, .rc-pose-quand { width: 100%; flex: 1 1 100%; }
}

/* ── Toutes les tâches : les filtres à gauche, comptés ────────────────────
   Option C, validée en maquette le 24 septembre 2026. Le panneau colle au haut
   de l'écran : la liste peut être longue, les filtres doivent rester à portée. */
.rc-taches { display: grid; grid-template-columns: 228px 1fr; gap: 26px; align-items: start; }
.rc-facettes { position: sticky; top: calc(var(--haut) + 26px); display: flex; flex-direction: column; gap: 18px; }
.rc-facette-groupe { display: flex; flex-direction: column; gap: 1px; }
.rc-facette-groupe .rc-groupe-titre { margin-bottom: 6px; }
.rc-facette, .rc-facette--vide {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0.5em 0.65em; border-radius: var(--radius-sm); font-size: var(--text-xs);
  color: var(--muted-foreground); text-decoration: none;
}
.rc-facette:hover { background: var(--muted); color: var(--foreground); }
.rc-facette--choisie { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); color: var(--accent); font-weight: 500; }
.rc-facette--choisie:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); color: var(--accent); }
/* ⚠️ Une facette à zéro reste VISIBLE, grisée : « WhatsApp 0 » est une réponse.
   La retirer ferait clignoter le panneau à chaque clic, et l'on ne saurait plus
   si le filtre a disparu ou s'il n'a jamais existé. */
.rc-facette--vide { color: var(--disabled-foreground); cursor: default; }
.rc-facette-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-facette-n { font-variant-numeric: tabular-nums; font-size: var(--text-2xs); opacity: .8; }
.rc-facette-raz { align-self: flex-start; font-size: var(--text-xs);
  color: var(--accent); text-decoration: none; }
.rc-facette-raz:hover { text-decoration: underline; }
.rc-taches-liste { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* Une tâche réglée se lit encore, mais ne réclame plus rien. */
.rc-action--close { opacity: .5; }
.rc-action--close .rc-action-titre { text-decoration: line-through; }
.rc-action-statut { font-size: var(--text-2xs); color: var(--muted-foreground); }

@media (max-width: 900px) {
  /* Sous le doigt, les filtres passent AU-DESSUS et se déroulent à plat :
     un panneau collant de 228 px mangerait la moitié de l'écran. */
  .rc-taches { grid-template-columns: 1fr; gap: 18px; }
  .rc-facettes { position: static; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .rc-facette-groupe { flex: 1 1 148px; }
  /* ⚠️ **44 POINTS, ET CETTE RÈGLE EST LA DERNIÈRE DU FICHIER POUR CES
     SÉLECTEURS.** Une facette de 30 px et un « retirer les filtres » de 18 px
     se ratent au pouce. C'est le piège qui s'est refermé trois fois ici : une
     règle de densité écrite plus bas écrase le repli tactile sans rien dire. */
  .rc-facette, .rc-facette--vide { min-height: 44px; padding: 0.6em 0.7em; }
  .rc-facette-raz { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Le cadre de lecture des listes (l'ancien Dashboard). */
.rc-content--lecture { max-width: 1400px; }

/* Un en-tête de colonne réduite : trois points centrés, jamais un libellé coupé. */
/* À DROITE, comme le point de `.rc-note-pleine` qu'il surplombe. Centré, il
   flottait à vingt pixels du repère qu'il est censé annoncer. */
.rc-th-reduite { text-align: right; color: var(--texte-faible); letter-spacing: 0; }

.rc-accueil { display: grid; grid-template-columns: 1fr 296px; gap: 26px;
  align-items: start; }
/* ⚠️ **LE PANNEAU D'UNE TÂCHE EST PLUS LARGE QUE LA COLONNE DES CAMPAGNES.**
   296 px suffisent à une liste de noms ; il y faut ici un intitulé, des
   précisions à écrire et quatre gestes. La grille s'élargit quand il est
   ouvert, et reprend sa mesure dès qu'on le ferme. */
.rc-accueil:has(.rc-panneau-tache) { grid-template-columns: 1fr 380px; }

/* ── Le panneau d'une tâche ───────────────────────────────────────────────
   Il reprend le cadre du panneau d'une ligne : même place, même croix, même
   manière de se fermer. Deux panneaux qui se ressemblent s'apprennent une
   seule fois. */
.rc-panneau-tache { position: sticky; top: calc(var(--haut) + 24px); gap: 14px; padding: 18px; }
.rc-panneau-canal { align-self: flex-start; }
.rc-panneau-tache-titre { margin: 0; font-size: var(--text-lg); font-weight: 550;
  line-height: 1.3; }
.rc-panneau-precision { display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--border); }
.rc-panneau-precision textarea { width: 100%; }
.rc-panneau-enregistrer { align-self: flex-start; }
/* Le bouton s'efface quand la frappe suffit : le bloc se resserre d'autant. */
.rc-panneau-precision--auto { gap: 0; }
.rc-panneau-precision--auto textarea { margin-top: 8px; }
.rc-panneau-faits { padding-top: 14px; border-top: 1px solid var(--border); }
.rc-panneau-qui { color: var(--accent); text-decoration: none; }
/* L'intitulé d'une tâche du fil est un lien, mais il se lit comme du texte :
   c'est la rangée entière qui invite, pas un mot souligné au milieu. */
/* Les notes, dans le panneau d'une tâche. Elles sont à la PERSONNE : leur
   titre le dit, et leur cadre est plus discret que celui des précisions —
   on les relit, on ne les remplit pas d'abord. */
.rc-panneau-notes { display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--border); }
.rc-panneau-notes > .rc-groupe-titre em { font-style: normal; font-weight: 400;
  color: var(--muted-foreground); }
.rc-panneau-note { padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--background); border: 1px solid var(--border); }
.rc-panneau-note-corps { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
.rc-panneau-note-pied { display: block; margin-top: 4px; font-size: var(--text-2xs);
  color: var(--muted-foreground); }
.rc-panneau-note-rien { font-size: var(--text-sm); }
.rc-panneau-note-pose { display: flex; gap: 8px; }
.rc-panneau-note-pose .rc-saisie { flex: 1; min-width: 0; }

/* Les deux suites et le choix de date vivent dans un même formulaire : il ne
   doit pas rompre l'alignement de l'encart qui les porte. */
.rc-suite-formes { display: contents; }
.rc-suite-date { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-suite-date .rc-saisie { height: 2.2em; font-size: var(--text-xs); width: auto; }

.rc-histoire-lien { color: inherit; text-decoration: none; }
.rc-histoire-lien:hover { color: var(--accent); }
.rc-panneau-qui:hover { text-decoration: underline; }
/* ⚠️ Les gestes se replient : « Reporter » ouvre un menu, et quatre boutons
   côte à côte sortiraient du panneau dès la première langue plus bavarde. */
.rc-panneau-gestes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px;
  border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  /* Sous le doigt, le panneau passe sous la liste au lieu de la serrer. */
  .rc-accueil:has(.rc-panneau-tache) { grid-template-columns: minmax(0, 1fr); }
  /* ⚠️ **`relative`, PAS `static`.** En `static`, la croix — qui est posée en
     absolu — se cale sur la PAGE : elle s'affichait tout en haut de l'écran,
     à côté du titre, loin du panneau qu'elle ferme. Elle mesurait pourtant ses
     44 px : aucune mesure ne pouvait le voir, seule la capture l'a montré. */
  .rc-panneau-tache { position: relative; top: auto; }
  /* ⚠️ 19 px et 18 px : la croix et le nom de la personne se rataient. Ce sont
     les deux seules sorties du panneau — les manquer, c'est y rester. */
  .rc-panneau-tache .rc-panneau-fermer { min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    top: 4px; right: 6px; }
  .rc-panneau-tache .rc-panneau-qui { min-height: 44px; display: inline-flex;
    align-items: center; }
}
.rc-accueil-actions { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.rc-accueil-listes { display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: calc(var(--haut) + 24px); }
.rc-liste {
  display: flex; flex-direction: column; gap: 7px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  transition: border-color var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out);
}
.rc-liste:hover { border-color: var(--border-strong); transform: translateY(-1px); }
/* ⚠️ **DEUX LIGNES, PAS UNE.** « Carnet de recommandation Leverage Gaëtane
   Bramerie » coupé à « Leverage G… » ne permet pas de distinguer deux carnets
   d'un même client. Sur deux lignes, on lit l'essentiel du nom. */
.rc-liste-nom { min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.rc-liste-alerte { flex: 0 0 auto; font-size: var(--text-sm); color: var(--error); font-weight: 500; }
.rc-liste-calme { flex: 0 0 auto; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-liste-jauge .kpi-ratio-bar { display: block; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.08); overflow: hidden; }
.rc-liste-jauge .kpi-ratio-bar > i { display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); }
.rc-liste-pied { display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rc-liste-alerte, .rc-liste-calme { white-space: nowrap; }

.rc-lien-discret { display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: none; }
.rc-lien-discret:hover { color: var(--foreground); }
/* ⚠️ Discret ne veut pas dire minuscule : sous le doigt, ce lien mesurait 20 px
   de haut. On garde sa discrétion — le texte reste petit et gris — mais la
   cible fait 44 px. Trouvé par l'audit, pas à l'œil. */
@media (max-width: 900px) {
  .rc-lien-discret { min-height: 44px; padding-inline: 8px; font-size: 14px; }
}

/* Sur un écran intermédiaire, la colonne de droite passe dessous plutôt que
   d'écraser les intitulés — c'est eux qu'on vient lire. */
@media (max-width: 1150px) {
  .rc-accueil { grid-template-columns: 1fr; gap: 22px; }
  .rc-accueil-listes { position: static;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .rc-accueil-listes > .rc-gestes { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* ⚠️ **`min-width: 0` SUR LES DEUX RANGÉES, SINON ELLES POUSSENT LA PAGE.**
     Un enfant flex qui défile (`overflow-x: auto`) déborde quand son parent ne
     l'autorise pas à rétrécir : mesuré à 644 px pour un écran de 390. Et la
     rangée des personnes DÉFILE ici plutôt que d'enrouler — enroulée, elle
     empilait trois rangées avant la première action. */
  .rc-barre-filtres { flex-direction: column; align-items: stretch; gap: 10px;
                      min-width: 0; }
  .rc-barre-filtres > * { min-width: 0; max-width: 100%; }
  .rc-barre-filtres .rc-vues { flex-wrap: nowrap; overflow-x: auto;
                               scrollbar-width: none; }
  .rc-barre-filtres .rc-vues::-webkit-scrollbar { display: none; }
  /* ⚠️ La flèche de fin disparaît sous le doigt : elle ne se révèle qu'au
     survol, et il n'y a pas de survol sur un téléphone. */
  .rc-action-fleche { display: none; }
  .rc-action { align-items: flex-start; padding: 12px 13px; min-height: 44px; }
  .rc-action-fin { flex-direction: column; align-items: flex-end; gap: 4px; }
  .rc-action-quand { min-width: 0; }
  .rc-action-campagne { display: none; }
}

/* ── Sélectionner une liste, ou l'ouvrir ──────────────────────────────────
   ⚠️ **LE LIEN DE SÉLECTION COUVRE LA CARTE EN ABSOLU.** Il ne l'enveloppe pas :
   « Ouvrir » vit à l'intérieur, et un `<a>` dans un `<a>` est invalide. Le lien
   couvrant est un frère du contenu, posé par-dessus ; le bouton « Ouvrir »
   repasse au-dessus de lui par son `z-index`. */
.rc-liste { position: relative; cursor: pointer; }
.rc-liste:hover { border-color: var(--border-strong); }
.rc-liste-couvre { position: absolute; inset: 0; z-index: 1;
  border-radius: var(--radius-lg); }

/* La carte choisie se voit de loin : bordure, fond teinté, et un liseré à
   gauche — trois repères plutôt qu'un, parce que le fond seul se perd sur un
   thème sombre. */
.rc-liste--active { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.rc-liste--active .rc-liste-nom { color: var(--accent); }

.rc-liste-gestes { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--border); }
.rc-liste-etat { display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--accent); font-weight: 500; }
.rc-liste-geste {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 9px; border-radius: var(--radius-md);
  color: var(--muted-foreground); font-size: var(--text-sm); text-decoration: none;
  transition: background var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
}
.rc-liste-geste:hover { background: var(--muted); color: var(--foreground); }
.rc-liste-geste svg { flex: 0 0 auto; opacity: .8; }
@media (max-width: 900px) {
  .rc-liste-geste { min-height: 44px; font-size: 14px; padding-inline: 14px; }
}

/* ── Ajouter des personnes ────────────────────────────────────────────────
   ⚠️ **CE BLOC A QUITTÉ LE TABLEAU.** Il en était la dernière rangée, donc ses
   champs avaient la largeur des colonnes — le commentaire tenait dans 46 px,
   c'est-à-dire nulle part. Ici chaque champ prend la place que son contenu
   demande, et le nom peut proposer le carnet. */
.rc-ajout { display: flex; flex-direction: column; gap: 10px; margin-top: 18px;
  padding: 18px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); }
.rc-ajout-tete { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rc-ajout-ligne { display: grid; gap: 10px;
  grid-template-columns: minmax(200px, 1.3fr) minmax(130px, .9fr) minmax(110px, .8fr)
                         minmax(120px, .9fr) minmax(200px, 1.6fr); }
.rc-ajout-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* ⚠️ Le libellé n'est visible que sur la PREMIÈRE rangée : répété trois fois,
   il triplait la hauteur du bloc pour redire la même chose. */
.rc-ajout-ligne:not(:first-of-type) .rc-ajout-champ > span { display: none; }
.rc-ajout-champ > span { font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-ajout-champ > span em { font-style: normal; opacity: .6; }
.rc-ajout .rc-saisie { height: 36px; }
@media (max-width: 900px) {
  /* Sous le doigt, une personne à la fois : cinq champs côte à côte y sont
     illisibles, et l'on ajoute rarement dix noms depuis un téléphone. */
  .rc-ajout-ligne { grid-template-columns: 1fr; gap: 8px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .rc-ajout-ligne:not(:first-of-type) .rc-ajout-champ > span { display: block; }
  .rc-ajout .rc-saisie { height: 44px; font-size: var(--text-md); }
}

/* ── Le menu d'une liste déroulante, dessiné par nous ─────────────────────
   ⚠️ Le menu natif d'un `<select>` est peint par le SYSTÈME : sous Linux il
   s'ouvre en blanc au milieu d'une page noire, quoi que dise `color-scheme`.
   Le `<select>` reste dans la page et garde son rôle — ce panneau lui prend
   seulement la main au clic, et rien ne casse sans JavaScript. */
/* ⚠️ `.rc-groupe-titre` a une marge NULLE — c'est voulu partout ailleurs, où
   le bloc qui le porte pose l'espace. Dans cette fenêtre, « Du carnet » venait
   coller au libellé du premier champ, et les deux se lisaient comme une seule
   ligne. L'espace se pose ici, sans toucher au titre commun. */
.rc-fenetre .rc-groupe-titre { margin-bottom: 10px; }

.rc-liste-menu { position: fixed; z-index: 200; display: none; flex-direction: column;
  max-height: 320px; overflow: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: 0 16px 38px rgba(0,0,0,.55); }
.rc-liste-menu--vu { display: flex; }
.rc-liste-menu button { padding: 0.55em 0.75em; font-family: inherit;
  font-size: var(--text-sm); text-align: left; white-space: nowrap;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--muted-foreground); cursor: pointer; }
.rc-liste-menu button:hover, .rc-liste-menu--vise {
  background: var(--muted); color: var(--foreground); }
.rc-liste-menu--pris { color: var(--accent); font-weight: 500; }
.rc-liste-menu--pris::after { content: " ✓"; }
/* Le champ montre qu'il est ouvert, comme le ferait le menu natif. */
select[data-ouvert] { border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring); }

/* ── La file guidée ───────────────────────────────────────────────────────
   ⚠️ **UNE PERSONNE À L'ÉCRAN.** C'est l'écart avec le tableau : on ne vient
   pas voir l'ensemble, on vient répondre à une question sur quelqu'un. Le cadre
   est étroit À DESSEIN — un formulaire de trois champs étalé sur 1 200 px se
   lit moins bien qu'un formulaire de 560 px. */
/* ⚠️ **620 PX SUFFISAIENT TANT QUE LA CARTE ÉTAIT SEULE.** Depuis qu'un rappel
   de 280 px l'accompagne, il ne restait que 320 px à la saisie — et les deux
   boutons s'empilaient l'un sous l'autre. */
.rc-file { display: flex; flex-direction: column; gap: 18px; max-width: 960px; }
/* ⚠️ Sur UNE ligne : « Revenir au tableau » se pliait sur trois lignes dans un
   coin de l'écran, et un bouton qui se plie ainsi n'a plus l'air d'un bouton. */
.rc-file-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rc-file-tete .rc-titre-page { flex: 1; min-width: 0; }
.rc-file-jauge { display: flex; align-items: center; gap: 12px; }
.rc-file-compte { flex: 0 0 auto; font-size: var(--text-sm); color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; }
.rc-file-jauge .kpi-ratio-bar { flex: 1; display: block; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.08); overflow: hidden; }
.rc-file-jauge .kpi-ratio-bar > i { display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); }

.rc-file-carte { display: flex; flex-direction: column; gap: 18px; padding: 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rc-file-qui { display: flex; align-items: center; gap: 14px; }
.rc-file-nom { margin: 0; font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.01em; }
.rc-file-contexte { margin: 3px 0 0; font-size: 14px; color: var(--muted-foreground); }
.rc-file-note { display: flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 10px 12px; background: var(--background); border-radius: var(--radius-md);
  font-size: 14px; color: var(--muted-foreground); line-height: 1.45; }
.rc-file-note svg { flex: 0 0 auto; margin-top: 2px; opacity: .7; }
.rc-file-champs { display: flex; flex-direction: column; gap: 14px; }
.rc-file-champs .rc-saisie { height: 42px; font-size: var(--text-md); }
.rc-file-gestes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 4px; }

@media (max-width: 900px) {
  .rc-file-carte { padding: 18px 16px; }
  .rc-file-champs .rc-saisie { height: 48px; font-size: var(--text-md); }
  .rc-file-gestes .btn { min-height: 48px; flex: 1; justify-content: center; }
  .rc-file-gestes .rc-lien-discret { flex-basis: 100%; justify-content: center; }
}

/* Le bouton qui lance la file : discret à côté de l'action principale, mais
   nommé et chiffré — « Compléter 6 coordonnées » se décide d'un coup d'œil. */
.rc-bouton-file { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 28%, transparent); }
.rc-bouton-file:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 18%, transparent);
  border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }

/* ── La fenêtre « Ajouter une personne » ──────────────────────────────────
   ⚠️ On cherche d'abord dans le carnet, on crée ensuite. Retaper quelqu'un
   qu'on a déjà saisi est la première chose qu'on reproche à un outil de ce
   genre — deux fiches pour la même personne, la seconde. */
.rc-fenetre--large { max-width: 620px; width: calc(100vw - 40px); }
.rc-carnet { margin-top: 14px; }
.rc-carnet-liste { display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
  max-height: 232px; overflow-y: auto; }
.rc-carnet-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  color: inherit; font-family: inherit; text-align: left; cursor: pointer;
  transition: background var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
.rc-carnet-item:hover { background: var(--muted); border-color: var(--border); }
.rc-carnet-item svg { flex: 0 0 auto; opacity: 0; color: var(--accent); }
.rc-carnet-item:hover svg { opacity: .9; }
.rc-carnet-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-carnet-nom { font-size: var(--text-base); font-weight: 500; }
.rc-carnet-detail { font-size: var(--text-sm); color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le message qui dit que la personne est inconnue : il ouvre la création, il
   n'annonce pas un échec. */
.rc-carnet-rien { margin: 12px 0 0; padding: 10px 12px; font-size: var(--text-sm);
  color: var(--muted-foreground); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 18%, transparent); border-radius: var(--radius-md); }
.rc-fenetre-corps { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
  .rc-carnet-item { min-height: 52px; }
  .rc-fenetre--large .rc-saisie { height: 44px; font-size: var(--text-md); }
}

/* ═══ LES COMPOSANTS, REPRIS LE 23 SEPTEMBRE 2026 ════════════════════════
   Tevini : « les champs, boutons et listes déroulantes ressemblent à un
   formulaire administratif ». Le diagnostic était juste — un bouton de 30 px
   avec du texte de 12 px, un `<select>` avec la flèche du système : c'est
   l'apparence d'un intranet de 2010. On ne change ni les couleurs ni la
   structure, seulement la matière. */

/* ── Les champs ──────────────────────────────────────────────────────────
   Un fond plutôt qu'un simple trait : le champ se voit comme une surface où
   l'on écrit, et non comme une case à remplir. */
.rc-saisie {
  /* ⚠️ **EN `em`, PAS EN PIXELS — MÉTHODE REPRISE DE TVNI.** La boîte suit son
     texte : changer le cran typographique fait grandir le champ dans la même
     proportion, au lieu de laisser un texte de 17 px dans une case de 42.
     C'est aussi ce qui donne les 44 px tactiles sans les écrire : sous le
     doigt la police passe à 16 px, et 2,8 em valent alors 44,8. */
  height: 2.8em; padding: 0 0.8em;
  background-color: var(--background); border: 1px solid var(--border);
  border-radius: var(--radius-lg); font-size: var(--text-base);
  transition: border-color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.rc-saisie:hover:not(:focus) { border-color: var(--border-strong); }
.rc-saisie:focus { border-color: var(--accent); background-color: var(--card);
  box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.rc-saisie::placeholder { color: var(--disabled-foreground); }
textarea.rc-saisie { padding: 10px 12px; line-height: 1.5; }

/* ⚠️ **UN RACCOURCI `background` EFFACE LE `no-repeat`, ET LE CHEVRON SE
   RÉPÈTE EN MOSAÏQUE.** C'est arrivé ici : `.rc-saisie:focus` (0,2,0) bat
   `select.rc-saisie` (0,1,1), et son raccourci remettait `background-repeat`
   à sa valeur par défaut. Au repos la flèche était juste ; au premier clic le
   champ se remplissait de chevrons. **Sur une saisie, on écrit
   `background-color`, jamais `background`** — la couleur est la seule chose
   qu'on veut changer.

/* ⚠️ **LA FLÈCHE DES LISTES DÉROULANTES EST DESSINÉE PAR NOUS.** Celle du
   système ne suit ni la couleur du thème ni sa taille, et elle diffère d'un
   navigateur à l'autre : c'est elle, plus que tout le reste, qui donnait à ces
   écrans un air de formulaire administratif. */
select.rc-saisie, select.rc-cellule {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9aae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
select.rc-cellule { background-position: right 4px center; }
select.rc-saisie:focus, select.rc-cellule:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b4a8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Les boutons ─────────────────────────────────────────────────────────
   Plus hauts, plus lisibles, et ils s'enfoncent au clic : un bouton qui ne
   répond pas donne l'impression que rien ne s'est passé. */
.btn { height: 2.85em; padding: 0 1.28em; font-size: var(--text-base);
       border-radius: var(--radius-lg); }
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset; }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset,
                                 0 4px 14px color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); }
.btn-sm { height: 2.3em; padding: 0 0.92em; font-size: var(--text-sm); }

/* ── La fluidité ─────────────────────────────────────────────────────────
   ⚠️ **UNE SEULE RÈGLE, ET AUCUNE LIGNE DE JAVASCRIPT.** Tevini : « tout se
   fait par rechargement, l'application paraît lente même quand elle est
   rapide ». Le navigateur sait fondre une page dans la suivante — c'est le
   clignotement blanc qui donnait cette impression, pas le temps de réponse.
   Là où la fonction n'existe pas, il ne se passe rien de plus qu'avant.
   ⚠️ RETIRÉ LE 12 OCTOBRE 2026 (Tevini : « quand je clique, ce n'est pas
   fluide, il y a un petit à-coup ») : le fondu retardait chaque page. Le fond
   sombre posé dans le <head> suffit à éviter le flash blanc. Voir la fin
   d'`activites.css`. */

/* Ce qui apparaît glisse au lieu de surgir. `prefers-reduced-motion` est
   respecté plus bas : une animation imposée rend certaines personnes malades. */
@keyframes rc-entre { from { opacity: 0; transform: translateY(4px); } }
.rc-action, .rc-liste, .rc-file-carte, .rc-groupe {
  animation: rc-entre var(--motion-base) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .rc-action, .rc-liste, .rc-file-carte, .rc-groupe { animation: none; }
  .btn:active { transform: none; }
}

/* ⚠️ **LE REPLI TACTILE SE REDIT ICI, ET C'EST LA TROISIÈME FOIS QUE CE PIÈGE
   SE REFERME.** `CLAUDE.md` le dit noir sur blanc : à spécificité égale, c'est
   la dernière règle du fichier qui gagne, média-requête comprise. La refonte
   des composants ci-dessus a ramené les champs à 38 px et 13,5 px sous le
   doigt — 8 085 défauts à l'audit, et un téléphone qui zoome à chaque frappe. */
/* ⚠️ **SOUS LE DOIGT, ON NE RÈGLE PLUS QUE LA POLICE.** C'est tout le bénéfice
   du passage en `em` : un champ de 2,8 em dont le texte passe à 17 px mesure
   47 px sans qu'aucune règle ne l'écrive. Avant, il fallait redire la hauteur
   de chaque composant à chaque point de rupture — et en oublier un ne se
   voyait qu'à l'audit. Le `min-height` reste comme filet pour ce qui n'est pas
   encore exprimé en em. */
@media (max-width: 900px) {
  .rc-saisie, .rc-saisie--discrete { font-size: var(--text-md); min-height: 44px; }
  textarea.rc-saisie { height: auto; min-height: 72px; }
  .btn, .btn-sm { font-size: var(--text-md); min-height: 44px; }
}

/* ── Le retour d'un enregistrement ────────────────────────────────────────
   ⚠️ **DISCRET, MAIS PRÉSENT.** Une cellule qui s'enregistre sans rien dire
   laisse douter qu'on ait bien tapé ; une cellule qui clignote en vert à chaque
   frappe fatigue en dix minutes. Un liseré qui s'allume et s'efface suffit. */
.rc-tableau td { transition: box-shadow var(--motion-base) var(--ease-out); }
.rc-enregistre-en-cours { box-shadow: inset 2px 0 0 var(--muted-foreground); }
.rc-enregistre { box-shadow: inset 2px 0 0 #6ee7a8; }
/* ⚠️ L'échec, lui, RESTE : il ne s'efface pas tout seul au bout d'une seconde.
   C'est ce que promet le parti pris — « un envoi qui échoue le dit ». */
.rc-echoue { box-shadow: inset 2px 0 0 var(--error); background: rgba(248,113,113,0.05); }
.rc-echoue::after { content: "non enregistré"; position: absolute; right: 6px; top: 2px;
  font-size: var(--text-2xs); color: var(--error); pointer-events: none; }
.rc-tableau td:has(.rc-echoue), .rc-echoue { position: relative; }
@media (prefers-reduced-motion: reduce) { .rc-tableau td { transition: none; } }

/* ── L'invite à la file guidée ────────────────────────────────────────────
   Elle occupe sa propre ligne, sous les onglets : dans la barre d'outils, elle
   serrait les onglets au point d'en couper un. */
.rc-invite { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 22%, transparent);
  border-radius: var(--radius-lg); color: inherit; text-decoration: none;
  transition: background var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out); }
.rc-invite:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 40%, transparent); }
.rc-invite > svg:first-child { flex: 0 0 auto; color: var(--accent); }
.rc-invite > svg:last-child { flex: 0 0 auto; color: var(--muted-foreground); }
.rc-invite-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-invite-titre { font-size: var(--text-base); font-weight: 500; color: var(--accent); }
.rc-invite-aide { font-size: var(--text-sm); color: var(--muted-foreground); }
@media (max-width: 900px) { .rc-invite { min-height: 56px; } }

/* ═══ LES GESTES RAPIDES DE L'ACCUEIL — option B, 24 septembre 2026 ══════
   ⚠️ **TOUJOURS VISIBLES, JAMAIS RÉVÉLÉS AU SURVOL.** Un geste caché derrière
   un survol n'existe pas sur un téléphone, et c'est là que la cliente
   travaille. C'est ce qui a fait choisir cette option contre la liste dense. */
.rc-action { position: relative; }
/* ⚠️ **LA CARTE QUI A UN MENU OUVERT PASSE AU-DESSUS DES SUIVANTES.** Sans
   cela, le menu de report s'affiche bien — mais la carte d'en dessous, plus
   loin dans la page, recouvre ses boutons : on voit les délais, on clique, et
   c'est la fiche de la personne suivante qui s'ouvre. */
.rc-action:has(details[open]) { z-index: 30; }
/* Le lien vers la fiche COUVRE la carte sans l'envelopper : les boutons vivent
   à l'intérieur, et un bouton dans un lien est invalide. */
.rc-action-couvre { position: absolute; inset: 0; z-index: 1;
  border-radius: var(--radius-lg); }
/* ⚠️ **LE CORPS DE LA RANGÉE NE DOIT PAS PASSER DEVANT LE LIEN.** Il était
   au-dessus comme les gestes, alors qu'il ne porte rien de cliquable : cliquer
   sur l'intitulé d'une tâche ne faisait donc RIEN, et c'est justement là qu'on
   clique. Seuls la fin de rangée et les gestes ont besoin de la première place,
   parce qu'ils portent des boutons — un bouton sous un lien ne se presse pas. */
.rc-action-fin, .rc-action-gestes { position: relative; z-index: 2; }
/* ⚠️ **LES GESTES PRENNENT LA DERNIÈRE PLACE, PAS LA PREMIÈRE.** Posés dans le
   flux, ils volaient la largeur de l'intitulé — qui est ce qu'on vient lire.
   Ils sont donc en fin de rangée, à taille fixe, et c'est le corps qui absorbe
   ce qui reste. */
.rc-action-gestes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rc-action { gap: 14px; }
/* ⚠️ **L'ÉCHÉANCE AU-DESSUS, LES GESTES EN DESSOUS.** Mis sur la même ligne que
   l'intitulé, les quatre boutons lui volaient sa largeur et quatre titres sur
   cinq se faisaient couper. En colonne, ils prennent la hauteur — qui ne
   manque pas — au lieu de la largeur, qui manque. */
.rc-action-fin { flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 5px; }
/* La deuxième ligne d'une action reste SOUS le titre, jamais à côté : le nom,
   le canal et la campagne se lisent d'un bloc. */
.rc-action-corps { flex: 1 1 auto; }

.rc-geste { display: inline-flex; align-items: center; gap: 4px;
  padding: 0.42em 0.8em; font-family: inherit; font-size: var(--text-xs);
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--muted-foreground); cursor: pointer; white-space: nowrap;
  transition: color var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out); }
.rc-geste:hover { color: var(--foreground); border-color: var(--border-strong); }
.rc-geste--fait { border-color: rgba(110,231,168,.32); color: #6ee7a8; }
.rc-geste--fait:hover { background: rgba(110,231,168,.10); border-color: rgba(110,231,168,.55); }

/* Le menu des délais : en CSS pur, au survol et au focus — un menu qui
   n'apparaît qu'au survol se rate au clavier. */
.rc-geste-report, .rc-geste-note { position: relative; }
/* La flèche native du `<details>` disparaît : on a la nôtre, dessinée. */
.rc-geste-report > summary, .rc-geste-note > summary { list-style: none; }
.rc-geste-report > summary::-webkit-details-marker,
.rc-geste-note > summary::-webkit-details-marker { display: none; }
details[open] > summary.rc-geste { color: var(--foreground); border-color: var(--accent); }
details[open] > summary.rc-geste svg { transform: rotate(90deg); }
.rc-geste svg { transition: transform var(--motion-base) var(--ease-out); }
.rc-geste-choix { display: none; position: absolute; right: 0; top: calc(100% + 5px); z-index: 20;
  flex-direction: column; min-width: 11em; padding: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.rc-geste-report[open] .rc-geste-choix { display: flex; }
.rc-geste-choix button { padding: 0.6em 0.75em; font-family: inherit; font-size: var(--text-xs);
  text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--muted-foreground); cursor: pointer; width: 100%; }
.rc-geste-choix button:hover { background: var(--muted); color: var(--foreground); }

/* Le champ de note se déplie sur place. ⚠️ Il s'ouvre au clic sur « Note » et
   reste ouvert tant qu'on y écrit : refermé au survol perdu, on perdrait la
   phrase qu'on était en train de taper. */
.rc-geste-champ { display: none; position: absolute; right: 0; top: calc(100% + 5px); z-index: 20;
  align-items: center; gap: 6px; padding: 7px; min-width: 24em;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 28%, transparent);
  border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.rc-geste-note[open] .rc-geste-champ { display: flex; margin: 0; }
.rc-geste-champ .rc-saisie { flex: 1; height: 2.4em; }

/* ── L'encart « et ensuite ? » ───────────────────────────────────────────── */
.rc-suite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px; font-size: var(--text-xs);
  background: rgba(110,231,168,.07); border: 1px solid rgba(110,231,168,.26);
  border-radius: var(--radius-lg); }
.rc-suite-dit { display: inline-flex; align-items: center; gap: 5px;
  color: #6ee7a8; font-weight: 500; }
.rc-suite-propose { color: var(--muted-foreground); }
.rc-suite-choix { display: inline-flex; align-items: center; gap: 6px;
  padding: 0.45em 0.85em; font-family: inherit; font-size: var(--text-xs);
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--foreground); cursor: pointer; }
.rc-suite-choix:hover { border-color: var(--accent); color: var(--accent); }
.rc-suite-choix em { font-style: normal; opacity: .55; }
.rc-suite-rien { color: var(--disabled-foreground); text-decoration: none; font-size: var(--text-xs); }
.rc-suite-rien:hover { color: var(--muted-foreground); }

/* ── La porte vers toutes les tâches ─────────────────────────────────────── */
.rc-vers-tout { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 0.5em 0.9em; font-size: var(--text-xs); text-decoration: none;
  color: var(--muted-foreground); border: 1px solid var(--border); border-radius: var(--radius-pill);
  white-space: nowrap; }
.rc-vers-tout:hover { color: var(--foreground); border-color: var(--border-strong); }
/* ⚠️ **UN GESTE POSÉ DANS UNE PHRASE DOIT SE VOIR.** `.action` est gris au
   repos par charte — très bien au bout d'une rangée, où l'on sait que c'est un
   geste. Au milieu d'un sous-titre, « montrer ce qui est réglé » ressemblait au
   texte qui l'entoure : personne n'aurait cliqué. Un liseré discret le désigne
   sans crier — la charte pose déjà la bordure en transparent et la colore au
   survol, il n'y a qu'à la rendre visible au repos. */
.rc-sous-titre .action { border-bottom-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }

.rc-vers-tout-n { padding: 1px 6px; border-radius: var(--radius-pill); font-size: var(--text-2xs);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); color: var(--accent); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  /* 33 px : sous le doigt, la porte vers « toutes les tâches » se rate. */
  .rc-vers-tout { min-height: 44px; }
  /* ⚠️ Un lien posé dans une phrase garde la hauteur de la phrase. Celui-ci
     est un GESTE — « montrer ce qui est réglé » — et il faisait 28 px. */
  .rc-sous-titre .action { min-height: 44px; }
  .rc-action { flex-wrap: wrap; }
  .rc-action-gestes { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap;
    padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border); }
  .rc-geste { min-height: 44px; font-size: var(--text-sm); padding-inline: 1em; }
  .rc-geste-champ { min-width: 0; width: calc(100vw - 72px); right: auto; left: 0; }
  .rc-suite-choix { min-height: 44px; }
}

/* ═══ LES PROPRIÉTÉS EN UNE SEULE LISTE — RC-1, 25 septembre 2026 ═════════
   Maquettes validées par Tevini : « Mes propriétés » ordonnée et masquable,
   la fenêtre « Modifier le contact » sans cadre « Du carnet », et la
   confirmation qui dit combien de valeurs partent avant de supprimer. */

/* Une ligne : [ordre] [nom et format] [remplies] [gestes] [œil]. */
.rc-prop--ordonnee { grid-template-columns: auto minmax(0, 1fr) 92px 262px 44px;
  gap: 14px; padding: 9px 12px 9px 8px; }
.rc-prop--ordonnee .rc-prop-corps { gap: 4px; }
.rc-prop--ordonnee .rc-prop-remplies { text-align: right; }
.rc-prop-ordre { display: flex; align-items: center; gap: 2px; }
.rc-prop--ordonnee[draggable="true"] { cursor: grab; }
.rc-prop--ordonnee .rc-option-poignee { cursor: grab; }
.rc-prop-gestes { justify-content: flex-end; flex-wrap: wrap; }
.rc-prop-base { display: inline-flex; padding: 0.15em 0.55em; border-radius: var(--radius-sm);
  font-size: var(--text-2xs); color: var(--muted-foreground);
  border: 1px solid var(--border-strong); }
.rc-prop-masquee { margin-left: 8px; font-size: var(--text-2xs);
  color: var(--muted-foreground); font-style: italic; }
/* ⚠️ Masquée ne veut pas dire absente : la ligne reste, en pointillés et à
   demi-teinte, pour qu'on sache où la rallumer. */
.rc-prop--masquee { background: transparent; border-style: dashed; }
.rc-prop--masquee .rc-prop-nom, .rc-prop--masquee .rc-prop-detail,
.rc-prop--masquee .rc-prop-remplies { opacity: .5; }
.rc-prop--prise { opacity: .4; }
.rc-prop--cible { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }

.rc-oeil { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  color: var(--muted-foreground); cursor: pointer; }
.rc-oeil:hover { border-color: var(--border-strong); color: var(--foreground); }
.rc-oeil:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-oeil--off { color: var(--disabled-foreground); }
.rc-oeil--verrou, .rc-oeil--verrou:hover { cursor: default; border-color: transparent;
  color: var(--disabled-foreground); }
.rc-geste--danger:hover { color: var(--error); border-color: rgba(248,113,113,.45); }

@media (max-width: 900px) {
  /* Sous le doigt : l'ordre à gauche, le nom au milieu, l'œil à droite ; les
     gestes et le compte passent dessous. Chaque cible fait 44 points. */
  .rc-prop--ordonnee { grid-template-columns: auto minmax(0, 1fr) 44px;
    grid-template-areas: "ordre corps oeil" "ordre remplies remplies" "ordre gestes gestes";
    gap: 6px 10px; }
  .rc-prop--ordonnee .rc-prop-ordre { grid-area: ordre; }
  .rc-prop--ordonnee .rc-prop-corps { grid-area: corps; }
  .rc-prop--ordonnee .rc-prop-remplies { grid-area: remplies; text-align: left; }
  .rc-prop--ordonnee .rc-prop-gestes { grid-area: gestes; justify-content: flex-start; }
  .rc-prop--ordonnee > form, .rc-prop--ordonnee > .rc-oeil { grid-area: oeil; }
  .rc-prop-ordre .rc-option-fleches button { width: 44px; height: 44px; font-size: 12px; }
  /* La poignée ne sert à rien sous le doigt : le glisser-déposer n'y existe
     pas. Les flèches font le travail, et gardent la place. */
  .rc-prop-ordre .rc-option-poignee { display: none; }
  .rc-prop--ordonnee { padding: 8px 10px 8px 4px; }
  .rc-oeil { width: 44px; height: 44px; }
}

/* ── La fenêtre « Modifier le contact » ───────────────────────────────── */
.rc-fenetre-tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rc-fenetre-tete .dialogue-titre { margin: 0; }
/* Les notes et les étiquettes tiennent toute la largeur : un paragraphe dans
   une demi-colonne se lit trois mots par ligne. */
.rc-champ--plein { grid-column: 1 / -1; }
.rc-montant { position: relative; display: block; }
.rc-montant .rc-saisie { padding-right: 2em; }
.rc-montant i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-style: normal; color: var(--muted-foreground); font-size: var(--text-sm); }
/* ⚠️ **UNE ZONE DE TEXTE N'EST PAS UN CHAMP D'UNE LIGNE.** La règle de densité
   des fenêtres (« 44 px sous le doigt ») s'appliquait à TOUT `.rc-saisie`, et
   écrasait les notes en une bande de 44 px au téléphone — on y lisait une
   demi-ligne. Relevé au brouillon, corrigé le 25 septembre 2026 (RC-1). */
.rc-fenetre--large textarea.rc-saisie { height: auto; min-height: 120px; }

/* ── La confirmation de suppression ──────────────────────────────────────── */
dialog.rc-fenetre--etroite { width: min(580px, calc(100vw - 32px)); }
.rc-aide--phrase { line-height: 1.55; }
.rc-aide--phrase b { color: var(--foreground); font-weight: 500; }
.rc-gestes--replie { flex-wrap: wrap; }

/* ── La fiche : un texte long garde ses retours à la ligne ──────────────── */
.rc-fiche-val--texte { white-space: pre-wrap; }
@media (max-width: 900px) {
  /* Le lien garde sa cible de 44 points, et son texte reste aligné sur le titre. */
  .rc-fenetre-tete .rc-lien-discret { margin-left: -8px; }
}


/* ══ Tâches « Contacter », réunions, série ═══════════════════════════════════
   Maquette d'ensemble validée par Tevini le 25 septembre 2026 (dashboard
   variante C, panneau, fiche, barre « Reprendre »). Les règles sont celles de
   la maquette, préfixées `rc-j-` : la maquette avait été construite sur ces
   deux feuilles, et reprendre ses règles telles quelles est ce qui garantit
   que l'écran ressemble à ce qui a été validé. Voir
   `docs/notes/NOTES-taches-reunions.md`. */
/* Maquette — les composants NOUVEAUX. Tout le reste vient des deux vraies
   feuilles (charte.css + crm.css). */

/* ── Types de tâche ─────────────────────────────────────────── */
.rc-j-type { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); white-space: nowrap;
  color: #cfcbe4; background: rgba(245,244,240,0.07); }
.rc-j-type b { font-weight: 500; }
.rc-j-type .rc-j-sep { opacity: .45; }
.rc-j-type--contacter { color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); }
.rc-j-type--rdv { color: #ffc98e; background: rgba(255,201,142,0.10); }
.rc-j-type--autre { color: #cfcbe4; background: rgba(245,244,240,0.07); }
.rc-j-canal-vide { font-style: italic; opacity: .7; }
.rc-j-c--whatsapp { color: #86dba0; } .rc-j-c--mail { color: var(--mmb-rouge-lumineux); }
.rc-j-c--appel { color: #8ec7ff; } .rc-j-c--sms { color: #9be7c4; }
.rc-j-c--linkedin { color: #7fb4e8; }

/* ── En-tête ─────────────────────────────────────────────────── */
.rc-j-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rc-j-tete-droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-j-recherche { position: relative; display: flex; align-items: center; min-width: 0; }
.rc-j-recherche svg { position: absolute; left: 12px; color: var(--muted-foreground); pointer-events: none; }
.rc-j-recherche .rc-saisie { padding-left: 36px; width: 330px; max-width: 100%; font-size: var(--text-sm); height: 2.85em; }
.rc-j-recherche--pleine { flex: 1; }
.rc-j-recherche--pleine .rc-saisie { width: 100%; }
.rc-j-traiter { gap: 8px; }
.rc-j-traiter svg { flex: none; }

/* ── La carte des tâches (A et C) ────────────────────────────── */
.rc-j-carte { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; min-width: 0; }
.rc-j-carte-tete { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rc-j-onglets { display: flex; gap: 2px; flex: 1; min-width: 0; flex-wrap: wrap; }
.rc-j-onglets .rc-vue { min-height: 36px; }
.rc-j-onglets .rc-vue--retard .rc-vue-n { color: var(--error); background: rgba(248,113,113,.12); }
.rc-j-carte-outils { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rc-j-carte-outils .rc-filtres-genre { flex: 0 0 auto; }
.rc-j-sep-v { width: 1px; align-self: stretch; background: var(--border); margin-inline: 2px; }
.rc-j-pour { font-size: var(--text-sm); color: var(--muted-foreground); display: inline-flex; gap: 6px; align-items: center; }
.rc-j-pour .rc-saisie { height: 2.5em; font-size: var(--text-sm); width: auto; }

/* Rangées compactes */
.rc-j-rangees { display: flex; flex-direction: column; }
.rc-j-rangee { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto;
  align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.rc-j-rangee:last-child { border-bottom: 0; }
.rc-j-rangee:hover { background: var(--background); }
.rc-j-rangee .rc-pastille { width: 30px; height: 30px; font-size: 11px; }
.rc-j-rangee-corps { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-j-rangee-titre { font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-j-rangee-detail { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm);
  color: var(--muted-foreground); white-space: nowrap; overflow: hidden; }
.rc-j-rangee-detail > * { flex: 0 0 auto; }
.rc-j-rangee-detail .rc-attache { flex: 0 1 auto; min-width: 70px; }
.rc-j-rangee-quand { font-size: var(--text-sm); color: var(--muted-foreground); text-align: right; min-width: 88px; white-space: nowrap; }
.rc-j-rangee-quand small { display: block; font-size: var(--text-2xs); }
.rc-j-rangee-quand--retard small { color: var(--muted-foreground); font-weight: 400; }
.rc-j-rangee-quand--retard { color: var(--error); font-weight: 500; }
.rc-j-rangee-gestes { display: flex; gap: 6px; }
.rc-j-rangee--courante { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.rc-j-rangee--faite { opacity: .5; }
.rc-j-rangee--faite .rc-j-rangee-titre { text-decoration: line-through; }
.rc-j-sous-titre-liste { padding: 10px 12px 4px; font-size: var(--text-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-foreground); }
.rc-j-sous-titre-liste--retard { color: var(--error); }
.rc-j-carte-pied { padding: 10px 12px; border-top: 1px solid var(--border); display: flex;
  justify-content: space-between; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-j-geste-plein { min-height: 32px; padding-inline: 1em; font-size: var(--text-sm); }
.rc-j-anniv { color: #ffc98e; }

.rc-j-colonne { display: flex; flex-direction: column; gap: 8px; }
.rc-j-colonne + .rc-j-colonne { margin-top: 18px; }

/* ── Panneau, mode série ─────────────────────────────────────── */
.rc-j-serie-tete { display: flex; align-items: center; gap: 8px; margin: -4px 0 0;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.rc-j-serie-rang { flex: 1; font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 7px; }
.rc-j-serie-rang strong { font-weight: 600; }
.rc-j-serie-barre { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: -6px; }
.rc-j-serie-barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.rc-j-fleche { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); }
.rc-j-fleche:hover { color: var(--foreground); border-color: var(--border-strong); }
.rc-j-fermer { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-md);
  color: var(--muted-foreground); font-size: 18px; }
.rc-j-personne { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--radius-lg);
  background: var(--background); border: 1px solid var(--border); }
.rc-j-personne .rc-pastille { width: 40px; height: 40px; }
.rc-j-personne-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-j-personne-nom { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-base); font-weight: 500; color: var(--accent); text-decoration: none; }
.rc-j-personne-sous { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-j-personne-liens { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.rc-j-personne-liens a { font-size: var(--text-xs); color: var(--foreground); text-decoration: none; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); }
.rc-j-gestes-grands { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.rc-j-gestes-grands .rc-geste { justify-content: center; min-height: 40px; font-size: var(--text-sm); }
.rc-geste--fait-plein { background: rgba(110,231,168,.14); border-color: rgba(110,231,168,.6); color: #86efb6; font-weight: 600; }

.rc-j-bloc { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 30%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 5%, transparent); }
.rc-j-bloc-titre { margin: 0; font-size: var(--text-base); font-weight: 550; }
.rc-j-bloc-aide { margin: -4px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-j-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-j-chips .rc-canal { min-height: 34px; background: var(--background); border-color: var(--border); }
.rc-j-chips .rc-canal--instagram i { color: #f5a3c7; } .rc-j-chips .rc-canal--facebook i { color: #8fb0ff; }
.rc-j-chips .rc-canal--whatsapp[aria-pressed="true"] { background: rgba(110,231,168,.14); color: #6ee7a8; border-color: rgba(110,231,168,.5); }
.rc-j-lien-passer { align-self: flex-start; font-size: var(--text-xs); color: var(--muted-foreground);
  background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.rc-j-fait { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg);
  background: rgba(110,231,168,.08); border: 1px solid rgba(110,231,168,.28); color: #86efb6; font-size: var(--text-sm); }
.rc-j-fait strong { font-weight: 600; }
.rc-j-fait span { color: var(--muted-foreground); }
.rc-j-fait a { white-space: nowrap; }
.rc-j-fait a { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-xs); }

.rc-j-segment { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; gap: 3px;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rc-j-segment button { min-height: 36px; border: 0; border-radius: var(--radius-md); background: transparent;
  font-family: inherit; font-size: var(--text-sm); color: var(--muted-foreground); cursor: pointer; }
.rc-j-segment button[aria-pressed="true"] { background: var(--muted); color: var(--foreground); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.rc-j-etiquette { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: -4px; }
.rc-j-bloc .rc-saisie { width: 100%; font-size: var(--text-sm); }
.rc-j-dates { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-j-puce { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); background: var(--background); }
.rc-j-puce[aria-pressed="true"] { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); color: var(--accent); font-weight: 500; }
.rc-j-puce em { font-style: normal; opacity: .7; margin-left: 5px; font-size: var(--text-xs); }
.rc-j-date { gap: 6px; }
.rc-j-dates .rc-saisie { width: 150px; height: 34px; font-size: var(--text-sm); border-radius: var(--radius-pill); }
.rc-j-bloc-boutons { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rc-j-bloc-boutons .btn { width: 100%; }
.rc-j-suggestions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-j-suggestions button { font-family: inherit; font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px dashed var(--border-strong); background: transparent; color: var(--foreground); cursor: pointer; }
.rc-j-suggestions button[aria-pressed="true"] { border-style: solid; border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); color: var(--accent); }
.rc-j-suggestions[hidden] { display: none; }
/* Une pastille = la phrase, son étoile et sa croix, dans UNE bulle (5 octobre
   2026) : l'étoile épingle en tête, la croix ne propose plus la phrase. */
.rc-j-pastille { display: inline-flex; align-items: stretch; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); }
.rc-j-pastille--epinglee { border-style: solid; border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }
.rc-j-suggestions .rc-j-pastille button { border: 0; background: transparent; }
.rc-j-suggestions .rc-j-pastille-texte { padding-right: 4px; }
.rc-j-suggestions .rc-j-pastille-etoile, .rc-j-suggestions .rc-j-pastille-croix {
  padding: 4px 6px; color: var(--muted-foreground); line-height: 1; }
.rc-j-suggestions .rc-j-pastille-croix { padding-right: 10px; }
.rc-j-pastille--epinglee .rc-j-pastille-etoile { color: var(--accent); }
.rc-j-suggestions .rc-j-pastille-etoile:hover, .rc-j-suggestions .rc-j-pastille-croix:hover { color: var(--foreground); }
.rc-j-suggestions .rc-j-annuler { border-style: solid; color: var(--muted-foreground); }

.rc-j-bandeau-serie { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 28%, transparent); font-size: var(--text-sm); color: var(--accent); }
.rc-j-bandeau-serie span { color: var(--muted-foreground); }
.rc-j-bandeau-serie a { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-xs); }

/* ── Barre flottante « Reprendre » ───────────────────────────── */
.rc-j-reprendre { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 70;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; max-width: calc(100vw - 32px);
  background: #1c1f2b; border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 42%, transparent); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 4px color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent); }
.rc-j-reprendre-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-j-reprendre-rang { font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.rc-j-reprendre-titre { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-j-reprendre-titre span { color: var(--muted-foreground); }
.rc-j-reprendre .btn { flex: none; }
.rc-j-reprendre-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px;
  color: var(--muted-foreground); font-size: 18px; text-decoration: none; }
.rc-j-reprendre-x:hover { background: var(--muted); color: var(--foreground); }

/* ── Sous le doigt ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .rc-j-tete { align-items: stretch; flex-direction: column; }
  .rc-j-tete-droite { flex-direction: column; align-items: stretch; }
  .rc-j-recherche .rc-saisie { width: 100%; font-size: 16px; }
  .rc-j-traiter { width: 100%; min-height: 44px; }
  .rc-j-carte-tete { padding: 6px; }
  .rc-j-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rc-j-onglets::-webkit-scrollbar { display: none; }
  .rc-j-onglets .rc-vue { flex: 0 0 auto; min-height: 44px; }
  .rc-j-carte-outils { flex-wrap: wrap; }
  .rc-j-carte-outils .rc-j-recherche { flex: 1 1 100%; }
  .rc-j-carte-outils .rc-filtres-genre { flex: 1 1 100%; min-width: 0; }
  .rc-j-rangee-detail .rc-attache { display: none; }
  .rc-j-rangee { grid-template-columns: 30px minmax(0,1fr) auto; grid-template-areas: "p c g" "p q g"; row-gap: 2px; padding: 11px 12px; }
  .rc-j-rangee .rc-pastille { grid-area: p; align-self: start; }
  .rc-j-rangee-corps { grid-area: c; }
  .rc-j-rangee-quand { grid-area: q; text-align: left; min-width: 0; font-size: var(--text-xs); }
  .rc-j-rangee-gestes { grid-area: g; align-self: center; }
  .rc-j-rangee-detail { flex-wrap: wrap; row-gap: 3px; white-space: normal; }
  .rc-j-rangee-titre { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rc-j-geste-plein { min-height: 44px; min-width: 64px; justify-content: center; }
  .rc-j-reprendre { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .rc-j-fleche, .rc-j-fermer { width: 44px; height: 44px; }
  .rc-j-puce, .rc-j-chips .rc-canal, .rc-j-segment button { min-height: 44px; }
}

/* ═══ Maquette d'ensemble — tâches, réunions, agenda Google ═══════════════ */

/* Canal suggéré (chip de rangée) */
.rc-j-canal { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); white-space: nowrap; background: rgba(245,244,240,0.07); color: #cfcbe4; }
.rc-j-canal svg { opacity: .8; }
.rc-j-canal--appel { color: #8ec7ff; background: rgba(142,199,255,.10); }
.rc-j-canal--sms { color: #9be7c4; background: rgba(155,231,196,.10); }
.rc-j-canal--whatsapp { color: #86dba0; background: rgba(134,219,160,.10); }
.rc-j-canal--mail { color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); }
.rc-j-canal--linkedin { color: #7fb4e8; background: rgba(127,180,232,.10); }
.rc-j-canal--instagram { color: #f5a3c7; background: rgba(245,163,199,.10); }
.rc-j-canal--libre { font-style: italic; color: var(--muted-foreground); background: transparent;
  border: 1px dashed rgba(255,255,255,.14); }
.rc-j-rang { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs);
  color: #ffc98e; background: rgba(255,201,142,.10); white-space: nowrap; }

/* Puces de canal (filtres) */
.rc-j-filtres-canal { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-j-filtre { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--background);
  font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.rc-j-filtre i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rc-j-filtre b { font-weight: 400; font-size: var(--text-xs); opacity: .75; }
.rc-j-filtre--appel i { color: #8ec7ff; } .rc-j-filtre--sms i { color: #9be7c4; }
.rc-j-filtre--whatsapp i { color: #86dba0; } .rc-j-filtre--mail i { color: var(--mmb-rouge-lumineux); }
.rc-j-filtre--linkedin i { color: #7fb4e8; } .rc-j-filtre--libre i { color: transparent; border: 1px dashed var(--muted-foreground); }

.rc-j-carte-outils .rc-j-recherche--pleine { flex: 1 1 260px; }

/* Onglet Traitées */
.rc-j-onglets .rc-vue--traitees .rc-vue-n { color: #6ee7a8; background: rgba(110,231,168,.10); }

/* Gestes de rangée : Fait + Reporter */
.rc-j-rangee-gestes .rc-geste-report { position: relative; }
.rc-j-rangee-gestes .rc-geste { white-space: nowrap; }

/* ── Colonne de droite : réunions ─────────────────────────────── */
.rc-j-col-tete { display: flex; align-items: center; gap: 8px; }
.rc-j-col-tete .rc-groupe-titre { flex: 1; margin: 0; }
.rc-j-plus { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: var(--text-sm);
  text-decoration: none; white-space: nowrap; }
.rc-j-plus:hover { border-color: var(--border-strong); }
.rc-j-reunion { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit; }
.rc-j-reunion-heure { font-size: var(--text-md); font-variant-numeric: tabular-nums; color: #ffc98e; line-height: 1.1; }
.rc-j-reunion-heure small { display: block; font-size: var(--text-2xs); color: var(--muted-foreground); margin-top: 2px; }
.rc-j-reunion-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-j-reunion-titre { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-j-reunion-qui { font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: center; }
.rc-j-reunion-qui svg { flex: none; opacity: .7; }
.rc-j-reunion-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rc-j-reunion--passee .rc-j-reunion-heure { color: var(--muted-foreground); }
.rc-j-reunion--completee { opacity: .62; }
.rc-j-reunion--acompleter { border-color: rgba(251,191,36,.30); }
.rc-j-etat { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-2xs); white-space: nowrap; }
.rc-j-etat--avenir { color: #8ec7ff; background: rgba(142,199,255,.10); }
.rc-j-etat--acompleter { color: var(--warning-text); background: rgba(251,191,36,.12); }
.rc-j-etat--completee { color: #6ee7a8; background: rgba(110,231,168,.10); }
/* L'issue d'une réunion close remplace « complétée » (`reunions.ISSUES`). */
.rc-j-etat--tenue { color: #6ee7a8; background: rgba(110,231,168,.10); }
.rc-j-etat--annulee, .rc-j-etat--absente { color: var(--error); background: rgba(248,113,113,.12); }
.rc-j-etat--reportee { color: var(--warning-text); background: rgba(251,191,36,.12); }
.rc-j-etat--encours { color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); }
.rc-j-completer { min-height: 30px; padding: 0 10px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600;
  border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.10); color: var(--warning-text);
  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.rc-j-source { font-size: var(--text-2xs); color: var(--muted-foreground); display: inline-flex; gap: 4px; align-items: center; }
.rc-j-g { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 700;
  background: #f5f4f0; color: #3b6fd8; font-style: normal; flex: none; }
.rc-j-sous-col { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--warning-text); margin: 6px 0 -2px; }
.rc-j-ligne-completer { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px dashed rgba(251,191,36,.28);
  border-radius: var(--radius-lg); font-size: var(--text-sm); }
.rc-j-ligne-completer span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-j-ligne-completer em { font-style: normal; color: var(--muted-foreground); }

/* ── Les brouillons à envoyer (5 octobre 2026) ─────────────────── */
.rc-j-messages { margin-bottom: 18px; }
.rc-j-compte { margin-left: 4px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--text-2xs);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); color: var(--accent); vertical-align: middle; }
.rc-j-brouillon { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); font-size: var(--text-sm); color: inherit; text-decoration: none; }
.rc-j-brouillon:hover { border-color: var(--border-strong); background: rgba(255,255,255,.03); }
.rc-j-brouillon-canal { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: var(--radius-md); color: var(--canal, var(--muted-foreground));
  background: color-mix(in srgb, var(--canal, #888) 12%, transparent); }
.rc-j-brouillon-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-j-brouillon-texte b, .rc-j-brouillon-texte em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-j-brouillon-texte b { font-weight: 600; }
.rc-j-brouillon-texte em { font-style: normal; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-j-brouillon-ia { color: var(--accent); display: inline-flex; }
.rc-j-brouillon-envoyer { font-size: var(--text-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }


/* ── Panneau : exécuter ───────────────────────────────────────── */
.rc-j-panneau-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-j-panneau-sous { margin: -6px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-j-panneau-sous b { color: var(--foreground); font-weight: 500; }
.rc-j-executer { display: flex; flex-direction: column; gap: 8px; }
.rc-j-appeler { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; width: 100%;
  border-radius: var(--radius-lg); border: 1px solid rgba(142,199,255,.55); background: rgba(142,199,255,.14);
  color: #b7dbff; font-size: var(--text-md); font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; }
.rc-j-appeler span { font-variant-numeric: tabular-nums; font-weight: 500; }
.rc-j-ecrire { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rc-j-ecrire a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); font-size: var(--text-sm); color: var(--foreground); text-decoration: none; }
.rc-j-ecrire a i { width: 7px; height: 7px; border-radius: 50%; }
.rc-j-bloc--neutre { border-color: var(--border); background: var(--background); }

/* Le fait qui vient d'être noté */
.rc-j-fait-note { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-lg);
  background: rgba(142,199,255,.07); border: 1px solid rgba(142,199,255,.25); font-size: var(--text-sm); }
.rc-j-fait-note svg { color: #8ec7ff; flex: none; }
.rc-j-fait-note strong { font-weight: 600; }
.rc-j-fait-note span { color: var(--muted-foreground); }
.rc-j-fait-note a { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-xs); white-space: nowrap; }
.rc-j-fait-note--vert { background: rgba(110,231,168,.07); border-color: rgba(110,231,168,.25); }
.rc-j-fait-note--vert svg { color: #6ee7a8; }

.rc-j-question { display: flex; flex-direction: column; gap: 8px; }
.rc-j-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-j-deux .rc-geste { justify-content: center; min-height: 40px; font-size: var(--text-sm); }
.rc-j-case { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); min-height: 32px; cursor: pointer; }
.rc-j-case input { width: 17px; height: 17px; accent-color: var(--mmb-rouge-lumineux); margin: 0; flex: none; }
.rc-j-case small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-j-bloc textarea.rc-saisie, .rc-j-champ textarea.rc-saisie { min-height: 84px; height: auto; resize: vertical; line-height: 1.45;
  padding-top: 9px; font-size: var(--text-sm); width: 100%; }
.rc-j-segment--2 { grid-template-columns: repeat(2, 1fr); }
.rc-j-envoyer { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rc-j-envoyer .rc-aide { font-size: var(--text-2xs); margin: 0; }

/* Clore la tentative : les quatre issues */
.rc-j-clore-titre { margin: 0; font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.rc-j-issues { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-j-issue { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-height: 56px; text-align: left;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--background);
  font-family: inherit; color: var(--foreground); cursor: pointer; }
.rc-j-issue b { font-size: var(--text-base); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.rc-j-issue b i { width: 8px; height: 8px; border-radius: 50%; }
.rc-j-issue--fait b i { background: #6ee7a8; } .rc-j-issue--pasabouti b i { background: #fbbf24; }
.rc-j-issue--reporte b i { background: #7dd3fc; } .rc-j-issue--annule b i { background: rgba(245,244,240,.45); }
.rc-j-issue--fait[aria-pressed="true"] { border-color: rgba(110,231,168,.6); background: rgba(110,231,168,.09); }
.rc-j-issue--pasabouti[aria-pressed="true"] { border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.08); }
.rc-j-issue[aria-pressed="false"] { opacity: .6; }
.rc-j-suite { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 30%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 5%, transparent); }
.rc-j-suite--ambre { border-color: rgba(251,191,36,.30); background: rgba(251,191,36,.04); }
.rc-j-propose { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--background); border: 1px solid var(--border); }
.rc-j-propose-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-j-propose-titre { font-size: var(--text-base); font-weight: 500; }
.rc-j-propose-sous { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-j-propose-sous b { color: var(--warning-text); font-weight: 500; }
.rc-j-lien { font-size: var(--text-xs); color: var(--accent); text-decoration: none; white-space: nowrap; }

/* Historique du panneau */
.rc-j-histo { display: flex; flex-direction: column; gap: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.rc-j-histo .rc-groupe-titre { margin: 0 0 6px; }
.rc-j-histo-item { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px; padding: 7px 0; align-items: start;
  font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.rc-j-histo-item:last-child { border-bottom: 0; }
.rc-j-histo-item svg { margin-top: 2px; color: var(--muted-foreground); }
.rc-j-histo-item q { display: block; color: var(--muted-foreground); font-size: var(--text-xs); margin-top: 2px; quotes: "« " " »"; }
.rc-j-histo-item time { font-size: var(--text-2xs); color: var(--muted-foreground); white-space: nowrap; margin-top: 2px; }
.rc-j-histo-item--appel svg { color: #8ec7ff; } .rc-j-histo-item--sms svg { color: #9be7c4; }
.rc-j-histo-item--reunion svg { color: #ffc98e; } .rc-j-histo-item--tache svg { color: var(--mmb-rouge-lumineux); }
.rc-j-histo-voir { font-size: var(--text-xs); color: var(--accent); text-decoration: none; margin-top: 8px; }

/* ── Fiche contact ─────────────────────────────────────────────── */
.rc-j-fiche-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-j-fiche-actions .rc-j-appeler { width: auto; min-height: 40px; padding: 0 14px; font-size: var(--text-sm); }
.rc-j-fiche-actions .rc-j-ecrire { display: flex; gap: 6px; }
.rc-j-fiche-actions .rc-j-ecrire a { min-height: 40px; padding: 0 12px; }
.rc-j-fiche-actions .rc-j-pousse { margin-left: auto; }
.rc-j-a-venir { display: flex; flex-direction: column; gap: 8px; }
.rc-j-carte-venir { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); }
.rc-j-carte-venir--tache { box-shadow: inset 3px 0 0 var(--accent); }
.rc-j-carte-venir--reunion { box-shadow: inset 3px 0 0 #ffc98e; }
.rc-j-carte-venir-corps { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-j-carte-venir-titre { font-size: var(--text-base); font-weight: 500; }
.rc-j-carte-venir-detail { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-j-marque { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); white-space: nowrap; }
.rc-j-marque--tache { color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); }
.rc-j-marque--reunion { color: #ffc98e; background: rgba(255,201,142,.10); }
.rc-j-histo-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rc-j-histo-tete .rc-groupe-titre { margin: 0; flex: 1; }
.rc-j-jour { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); margin: 8px 0 -2px; }
.rc-j-fil { display: flex; flex-direction: column; gap: 6px; }
.rc-j-evt { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 11px 14px;
  border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); }
.rc-j-evt-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--muted); color: var(--muted-foreground); }
.rc-j-evt--appel .rc-j-evt-ico { color: #8ec7ff; background: rgba(142,199,255,.10); }
.rc-j-evt--sms .rc-j-evt-ico { color: #9be7c4; background: rgba(155,231,196,.10); }
.rc-j-evt--reunion .rc-j-evt-ico { color: #ffc98e; background: rgba(255,201,142,.10); }
.rc-j-evt--tache .rc-j-evt-ico { color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); }
.rc-j-evt--note { background: transparent; border-style: dashed; }
.rc-j-evt-corps { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-j-evt-titre { font-size: var(--text-sm); font-weight: 500; }
.rc-j-evt-titre em { font-style: normal; font-weight: 400; color: var(--muted-foreground); }
.rc-j-evt-texte { font-size: var(--text-sm); line-height: 1.45; color: var(--foreground); opacity: .88; }
.rc-j-evt-texte q { quotes: "« " " »"; }
.rc-j-evt-pied { font-size: var(--text-xs); color: var(--muted-foreground); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-j-evt time { font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; }
.rc-j-cr { margin-top: 4px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--background);
  border-left: 2px solid rgba(255,201,142,.5); font-size: var(--text-sm); line-height: 1.5; }

/* ── Sous le doigt ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rc-j-rangee { grid-template-columns: 30px minmax(0,1fr) auto; grid-template-areas: "p c c" "p q g"; row-gap: 6px; }
  .rc-j-rangee-gestes { align-self: end; }
  .rc-j-rangee-quand { align-self: center; }
  .rc-j-filtres-canal { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; }
  .rc-j-filtres-canal::-webkit-scrollbar { display: none; }
  .rc-j-filtre { min-height: 44px; flex: none; }
  .rc-j-reunion { min-height: 56px; }
  .rc-j-completer, .rc-j-plus { min-height: 44px; }
  .rc-j-ligne-completer { min-height: 52px; }
}

/* correctifs */
.rc-j-reunion { position: relative; grid-template-columns: 50px minmax(0,1fr) auto; }
.rc-j-reunion-couvre { position: absolute; inset: 0; border-radius: inherit; }
.rc-j-reunion .rc-j-completer { position: relative; z-index: 1; }
.rc-j-reunion-qui { gap: 6px; }
.rc-j-reunion-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rc-j-ligne-completer span { display: flex; flex-direction: column; gap: 1px; }
.rc-j-ligne-completer em { font-size: var(--text-xs); }
.rc-j-reunion .rc-j-completer { grid-column: 2 / -1; justify-self: start; margin-top: 4px; }
.rc-j-ligne-completer b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-accueil:has(.rc-panneau-tache) .rc-j-rangee-detail .rc-attache { display: none; }
.rc-j-histo-voir { display: inline-flex; align-items: center; gap: 4px; }
.rc-j-rappel-reunions { display: none; }
@media (max-width: 900px) {
  .rc-j-rappel-reunions { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
    border-radius: var(--radius-lg); border: 1px solid rgba(255,201,142,.28); background: rgba(255,201,142,.05);
    color: var(--foreground); text-decoration: none; font-size: var(--text-sm); }
  .rc-j-rappel-reunions svg { color: #ffc98e; flex: none; }
  .rc-j-rappel-reunions > span:first-of-type { flex: 1; min-width: 0; }
  .rc-j-rappel-reunions b { font-weight: 500; }
}

/* ── Compléments de l'implémentation (le réel a des besoins que la maquette
   n'avait pas : liens qui couvrent, boutons radio, états fermés) ──────── */
.rc-j-rangee-couvre, .rc-j-reunion-couvre, .rc-j-ligne-couvre { position: absolute; inset: 0;
  border-radius: inherit; z-index: 0; }
.rc-j-rangee-gestes, .rc-j-carte-venir .rc-histoire-gestes { position: relative; z-index: 1; }
.rc-j-rangee-detail .rc-action-qui { flex: 0 0 auto; }
.rc-j-rangees--seules { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rc-j-rangee:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.rc-j-canal--facebook { color: #8fb0ff; background: rgba(143,176,255,.10); }
.rc-j-filtre--instagram i { color: #f5a3c7; } .rc-j-filtre--facebook i { color: #8fb0ff; }
.rc-j-filtre[aria-current] { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent); }
.rc-j-filtre:hover { border-color: var(--border-strong); color: var(--foreground); }

/* Les choix du panneau sont des BOUTONS RADIO : ils marchent sans script. Le
   rond natif s'efface, la puce entière devient la cible. */
.rc-j-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rc-j-chips .rc-canal, .rc-j-puce { position: relative; cursor: pointer; }
.rc-j-chips .rc-canal:has(.rc-j-radio:checked) { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent);
  border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 55%, transparent); color: var(--mmb-rouge-lumineux); font-weight: 600; }
.rc-j-puce:has(.rc-j-radio:checked) { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent);
  border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); color: var(--accent); font-weight: 500; }
.rc-j-chips .rc-canal:has(.rc-j-radio:focus-visible), .rc-j-puce:has(.rc-j-radio:focus-visible) {
  box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-j-libre { font-style: italic; }
.rc-j-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rc-j-date input { border: 0; background: transparent; color: inherit; font: inherit;
  font-size: var(--text-sm); padding: 0; min-width: 0; color-scheme: dark; }
.rc-j-date input[type="date"] { width: 8.2em; }
.rc-j-date input[type="time"] { width: 5.4em; }

/* L'en-tête du panneau : croix et flèches sont des boutons de la rangée. */
.rc-j-fermer { border: 0; background: none; cursor: pointer; font-family: inherit; text-decoration: none; }
.rc-j-fermer:hover { color: var(--foreground); background: var(--muted); }
.rc-j-poubelle:hover { color: var(--error); }
.rc-j-fleche[aria-disabled] { opacity: .35; }
.rc-j-serie-rang--simple { color: var(--muted-foreground); }
.rc-j-panneau-meta .rc-j-etat--close { color: var(--muted-foreground); background: rgba(245,244,240,.08); }
.rc-j-precisions summary { cursor: pointer; font-size: var(--text-xs); color: var(--muted-foreground);
  list-style: none; }
.rc-j-precisions summary::-webkit-details-marker { display: none; }
.rc-j-precisions summary::before { content: "+ "; }
.rc-j-precisions[open] summary::before { content: "– "; }
.rc-j-precisions .rc-panneau-precision { padding-top: 6px; border-top: 0; }
.rc-j-deux .rc-geste { width: 100%; justify-content: center; min-height: 40px; }
.rc-j-defaire { margin: 0 0 0 auto; }
.rc-j-defaire button { border: 0; background: none; color: var(--muted-foreground);
  font-family: inherit; font-size: var(--text-xs); cursor: pointer; white-space: nowrap; padding: 4px 2px; }
.rc-j-defaire button:hover { color: var(--foreground); text-decoration: underline; }
.rc-j-fait-note { flex-wrap: wrap; }
.rc-j-bloc-titre--petit { font-size: var(--text-sm); }
.rc-j-clore { display: flex; flex-direction: column; gap: 14px; margin: 0; }
textarea.rc-saisie.rc-j-note, .rc-j-bloc textarea.rc-saisie { min-height: 76px; height: auto; resize: vertical;
  line-height: 1.45; padding-top: 9px; font-size: var(--text-sm); width: 100%; }
.rc-j-suite--neutre { border-color: var(--border); background: var(--background); }
.rc-j-erreur { margin: 0; font-size: var(--text-sm); color: var(--error); }
.rc-j-arreter { color: var(--warning-text); }
.rc-j-suivante { margin: 0; font-size: var(--text-xs); }
.rc-j-suivante strong { color: var(--foreground); font-weight: 500; }
.rc-j-point--sms { background: #9be7c4; } .rc-j-point--whatsapp { background: #86dba0; }
.rc-j-point--mail { background: var(--mmb-rouge-lumineux); }
.rc-j-histo .rc-panneau-note-pose { margin-top: 8px; }
.rc-j-histo-item span { min-width: 0; overflow-wrap: anywhere; }

/* L'en-tête et la carte du dashboard. */
.rc-j-pour { display: inline-flex; gap: 6px; align-items: center; margin: 0;
  font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-j-pour .rc-saisie { height: 2.5em; font-size: var(--text-sm); width: auto; }
.rc-j-carte .rc-j-onglets .rc-vue-n:empty { display: none; }
.rc-j-onglets .rc-vue--retard .rc-vue-n { color: var(--error); background: rgba(248,113,113,.12); }
.rc-j-onglets .rc-vue--traitees .rc-vue-n { color: #6ee7a8; background: rgba(110,231,168,.10); }
.rc-j-recherche { margin: 0; }
.rc-j-bandeau-serie { margin: 10px 12px 0; }
.rc-j-bandeau-serie button { border: 0; background: none; color: var(--muted-foreground); font-family: inherit;
  font-size: var(--text-xs); cursor: pointer; }
.rc-j-bandeau-serie button:hover { color: var(--foreground); }
.rc-j-rangees .rc-rien { padding: 28px 16px; }
.rc-j-rien-col { margin: 0; }
.rc-j-ligne-completer { position: relative; }
.rc-j-ligne-completer:hover, .rc-j-reunion:has(.rc-j-reunion-couvre):hover { border-color: var(--border-strong); }
.rc-j-reunion--encours { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.rc-j-etat--encours { color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); }

/* « Toutes les tâches » : le panneau prend la place des filtres. */
.rc-taches:has(.rc-panneau-tache) { grid-template-columns: minmax(0, 1fr) 380px; }
.rc-taches:has(.rc-panneau-tache) > .rc-facettes { display: none; }
.rc-taches .rc-groupe { display: flex; flex-direction: column; gap: 8px; }

/* La fiche d'une personne. */
.rc-j-fiche-actions .rc-j-poser { display: flex; gap: 6px; }
.rc-j-plus { font-family: inherit; cursor: pointer; }
.rc-j-plus[aria-pressed="true"] { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); color: var(--accent); }
.rc-j-pose-canaux { flex: 1 1 100%; }
.rc-j-carte-venir { position: relative; }
.rc-j-carte-venir-detail .rc-ou { font-size: var(--text-xs); }
.rc-j-histo-onglets { flex: 0 1 auto; }
.rc-j-evt-porte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.rc-j-evt-porte .rc-j-evt { grid-column: 1 / -1; grid-row: 1; padding-right: 110px; }
.rc-j-evt-geste { grid-column: 2; grid-row: 1; margin: 9px 12px 0 0; position: relative; }
.rc-j-evt-titre, .rc-j-evt-texte { overflow-wrap: anywhere; }
.rc-j-source { display: inline-flex; gap: 4px; align-items: center; font-size: var(--text-2xs); }

/* La barre « Reprendre ». */
.rc-j-reprendre-type { flex: none; }
.rc-j-reprendre-x { border: 0; background: none; cursor: pointer; font-family: inherit; }

@media (max-width: 1100px) {
  .rc-taches:has(.rc-panneau-tache) { grid-template-columns: minmax(0, 1fr); }
}

/* ⚠️ **SOUS LE DOIGT, CES RÈGLES SONT LES DERNIÈRES DU FICHIER POUR CES
   SÉLECTEURS**, à dessein : une règle de densité écrite plus bas écraserait
   le repli tactile sans rien dire — le piège qui s'est déjà refermé trois fois. */
@media (max-width: 900px) {
  .rc-j-tete-droite { width: 100%; }
  .rc-j-pour { width: 100%; }
  .rc-j-pour .rc-saisie { flex: 1; min-height: 44px; font-size: 16px; }
  .rc-j-traiter { width: 100%; min-height: 44px; justify-content: center; }
  .rc-j-tete-droite > form { width: 100%; }
  .rc-j-recherche .rc-saisie, .rc-j-bloc textarea.rc-saisie, textarea.rc-saisie.rc-j-note,
  .rc-j-clore .rc-saisie, .rc-j-date input, .rc-j-histo .rc-saisie { font-size: 16px; }
  .rc-j-clore input.rc-saisie, .rc-j-histo input.rc-saisie { min-height: 44px; }
  .rc-j-fermer, .rc-j-fleche, .rc-j-reprendre-x { min-width: 44px; min-height: 44px; }
  .rc-j-defaire button, .rc-j-bandeau-serie button { min-height: 44px; padding: 0 8px; }
  .rc-j-suggestions button, .rc-j-plus, .rc-j-ecrire a, .rc-j-appeler, .rc-j-puce, .rc-j-chips .rc-canal,
  .rc-j-segment button, .rc-j-filtre, .rc-j-deux .rc-geste, .rc-j-case { min-height: 44px; }
  .rc-j-personne-nom, .rc-j-histo-voir, .rc-panneau-qui { min-height: 44px; display: inline-flex; align-items: center; }
  .rc-j-precisions summary { min-height: 44px; display: flex; align-items: center; }
  .rc-j-panneau-sous .rc-panneau-qui { min-height: 0; display: inline; }
  .rc-j-issue { min-height: 56px; }
  .rc-j-rangee-quand small { display: inline; margin-left: 6px; }
  .rc-j-fiche-actions .rc-j-pousse { display: none; }
  .rc-j-evt-porte .rc-j-evt { padding-right: 14px; }
  .rc-j-evt-porte { grid-template-columns: minmax(0, 1fr); }
  .rc-j-evt-geste { grid-column: 1; grid-row: 2; margin: 0; justify-self: end; }
  .rc-j-histo-tete .rc-vues { overflow-x: auto; flex-wrap: nowrap; }
  .rc-j-reprendre { left: 16px; right: 16px; transform: none; max-width: none; flex-wrap: wrap; }
  .rc-j-reprendre-corps { flex: 1 1 60%; }
  .rc-j-reprendre-type { display: none; }
}
.rc-j-reunion-heure--journee { font-size: var(--text-sm); }
.rc-j-personne-liens span { font-size: var(--text-xs); color: var(--foreground); padding: 3px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); overflow-wrap: anywhere; }
@media (max-width: 900px) {
  /* Une zone de texte n'est pas un champ d'une ligne (voir la fenêtre « Modifier
     le contact ») : le message à envoyer se relit en entier avant de partir. */
  .rc-j-bloc textarea.rc-saisie, textarea.rc-saisie.rc-j-note { height: auto; min-height: 132px; }
}
@media (max-width: 900px) {
  .rc-j-date input { min-height: 44px; }
}
@media (max-width: 900px) {
  /* Sous le doigt, la carte « À faire » s'empile : la marque, le corps, puis
     les gestes — trois colonnes serraient l'intitulé à un mot par ligne. */
  .rc-j-carte-venir { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rc-j-carte-venir > .rc-j-marque, .rc-j-carte-venir > .rc-j-etat { justify-self: start; }
  .rc-j-carte-venir .rc-histoire-gestes { justify-self: end; }
}

/* ══ Réunions et agendas Google (maquettes 05, 06 et 08, 25 septembre 2026) ══
   Préfixe `rc-r-`. Les fenêtres reprennent la grammaire du panneau d'une tâche
   (issues, « Et ensuite ? », puces de canal et de date) : ce sont les mêmes
   gestes, ils se ressemblent. */
dialog.rc-r-fenetre { width: min(640px, calc(100vw - 32px)); padding: 22px 24px; }
dialog.rc-r-fenetre .rc-fenetre-tete { margin-bottom: 4px; align-items: center; gap: 10px; }
.rc-r-sous { margin: 0 0 14px; font-size: var(--text-sm); color: var(--muted-foreground);
  display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; }
.rc-r-sous b { color: var(--foreground); font-weight: 500; }
.rc-r-champs { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.rc-r-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rc-r-etiq { font-size: var(--text-xs); color: var(--muted-foreground); margin: 0; padding: 0; }
.rc-r-champ .rc-saisie, .rc-r-report .rc-saisie { width: 100%; font-size: var(--text-sm); }
.rc-r-champ textarea.rc-saisie { height: auto; min-height: 76px; resize: vertical; line-height: 1.45; padding-top: 9px; }
.rc-r-grille-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.rc-r-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-r-aide { font-size: var(--text-2xs); color: var(--muted-foreground); margin: 0; line-height: 1.45; }
.rc-r-aide--haut { margin-top: -8px; }
.rc-r-alerte { color: var(--warning-text); }
.rc-r-pied { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border); flex-wrap: wrap; }
.rc-r-pied .rc-r-pousse { margin-right: auto; }
.rc-r-pied .btn { text-decoration: none; }

/* Lieu, et le lien Meet demandé */
.rc-r-lieu { display: flex; gap: 8px; }
.rc-r-lieu .rc-saisie { flex: 1; min-width: 0; }
.rc-r-meet { position: relative; white-space: nowrap; cursor: pointer; gap: 6px; }
.rc-r-meet-oui { display: none; }
.rc-r-meet:has(input:checked) { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); color: var(--accent); }
.rc-r-meet:has(input:checked) .rc-r-meet-non { display: none; }
.rc-r-meet:has(input:checked) .rc-r-meet-oui { display: inline; }
.rc-r-meet:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Les personnes : les puces, la recherche, le carnet */
.rc-r-personnes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--background); min-height: 44px; }
.rc-r-puces { display: contents; }
.rc-r-puce { display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); font-size: var(--text-sm); max-width: 100%; min-width: 0; }
.rc-r-puce .rc-pastille { width: 22px; height: 22px; font-size: 9px; flex: none; }
.rc-r-puce small { color: var(--muted-foreground); font-size: var(--text-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rc-r-puce button { width: 26px; height: 26px; border: 0; background: none; color: var(--muted-foreground);
  cursor: pointer; font-size: 15px; font-family: inherit; flex: none; border-radius: 50%; }
.rc-r-puce button:hover { color: var(--foreground); background: var(--muted); }
.rc-r-cherche { flex: 1; min-width: 140px; border: 0; background: transparent; color: var(--foreground);
  font-family: inherit; font-size: var(--text-sm); outline: none; padding: 4px 6px; min-height: 30px; }
.rc-r-carnet { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); }
/* Avec le script : la liste n'apparaît que filtrée par la frappe. */
.rc-r-carnet--filtre { display: none; }
.rc-r-carnet--filtre.rc-r-carnet--ouvert { display: flex; }
.rc-r-carnet--filtre .rc-r-carnet-item { display: none; }
.rc-r-carnet--filtre .rc-r-carnet-item--vu { display: flex; }
.rc-r-carnet-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; min-height: 40px;
  font-size: var(--text-sm); cursor: pointer; border-top: 1px solid var(--border); }
.rc-r-carnet-item:first-child { border-top: 0; }
.rc-r-carnet-item:hover { background: var(--muted); }
.rc-r-carnet-item input { width: 16px; height: 16px; accent-color: var(--mmb-rouge-lumineux); margin: 0; flex: none; }
.rc-r-carnet--filtre .rc-r-carnet-item input { position: absolute; opacity: 0; pointer-events: none; }
.rc-r-carnet-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rc-r-carnet-item small { color: var(--muted-foreground); font-size: var(--text-2xs); margin-left: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rc-r-carnet-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.rc-r-invitation { flex-wrap: wrap; row-gap: 0; }

/* L'agenda où l'écrire */
.rc-r-agenda { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); font-size: var(--text-sm); flex-wrap: wrap; }
.rc-r-agenda > input { width: 17px; height: 17px; accent-color: var(--mmb-rouge-lumineux); margin: 0; }
.rc-r-agenda > label, .rc-r-agenda > span { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: pointer; }
.rc-r-agenda b { font-weight: 500; }
.rc-r-agenda em { font-style: normal; color: var(--muted-foreground); }
.rc-r-changer summary { list-style: none; cursor: pointer; color: var(--accent); font-size: var(--text-xs);
  min-height: 32px; display: inline-flex; align-items: center; }
.rc-r-changer summary::-webkit-details-marker { display: none; }
.rc-r-changer[open] { flex-basis: 100%; }
.rc-r-changer-liste { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }

/* Compléter : les trois résultats, le report */
.rc-r-resultats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rc-r-resultat { position: relative; min-height: 48px; justify-content: center; cursor: pointer; }
.rc-r-resultat--tenue b i { background: #6ee7a8; } .rc-r-resultat--annulee b i { background: rgba(245,244,240,.45); }
.rc-r-resultat--reportee b i { background: #7dd3fc; }
.rc-r-resultat--absente b i { background: #fbbf24; }
.rc-r-resultat--absente:has(input:checked) { border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.08); }
.rc-r-resultat:has(input:checked) { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 55%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 8%, transparent); }
.rc-r-resultat--tenue:has(input:checked) { border-color: rgba(110,231,168,.6); background: rgba(110,231,168,.09); }
.rc-r-resultat--reportee:has(input:checked) { border-color: rgba(125,211,252,.6); background: rgba(125,211,252,.08); }
.rc-r-resultat:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-r-report { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-lg);
  border: 1px solid rgba(125,211,252,.3); background: rgba(125,211,252,.04); }
.rc-r-fenetre form:not(:has(input[name="resultat"][value="reportee"]:checked)) .rc-r-report { display: none; }
.rc-r-fenetre form:has(input[name="resultat"][value="reportee"]:checked) .rc-r-ensuite { display: none; }
.rc-r-ensuite .rc-r-grille-2 { align-items: start; }

/* Le lien « Réunion » parmi les canaux de la fiche d'une ligne */
.rc-r-canal-reunion { text-decoration: none; color: #ffc98e; gap: 5px; }
.rc-j-ligne-completer .rc-j-completer { position: relative; z-index: 1; flex: none; }
.rc-j-evt-geste .rc-j-completer, .rc-j-evt-geste .rc-geste { text-decoration: none; }

/* ── Réglages (maquette 08) ── */
.rc-r-reglages { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
.rc-r-reglage { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rc-r-reglage-tete { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.rc-r-reglage-tete > div { flex: 1 1 320px; min-width: 0; }
.rc-r-reglage-tete h2 { margin: 0; font-size: var(--text-md); font-weight: 550; }
.rc-r-reglage-tete p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted-foreground); max-width: 56ch; line-height: 1.5; }
.rc-r-compte { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rc-r-compte-tete { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--background); flex-wrap: wrap; }
.rc-r-g { width: 26px; height: 26px; font-size: 14px; }
.rc-r-compte-nom { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-r-compte-nom b { font-weight: 500; font-size: var(--text-base); overflow-wrap: anywhere; }
.rc-r-compte-nom small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-r-etat { color: #6ee7a8; font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 5px; }
.rc-r-etat i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rc-r-etat--erreur { color: var(--warning-text); flex-basis: 100%; order: 5; }
.rc-r-table { overflow-x: auto; }
.rc-r-agendas { width: 100%; border-collapse: collapse; font-size: var(--text-sm); table-layout: fixed; }
.rc-r-agendas th { font-weight: 400; font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground); text-align: center; padding: 8px 10px; border-top: 1px solid var(--border); }
.rc-r-agendas th:first-child { text-align: left; padding-left: 14px; }
.rc-r-agendas th:nth-child(2), .rc-r-agendas td:nth-child(2) { width: 80px; }
.rc-r-agendas th:nth-child(3), .rc-r-agendas td:nth-child(3) { width: 240px; }
.rc-r-agendas td { padding: 6px 10px; height: 46px; border-top: 1px solid var(--border); text-align: center; }
.rc-r-agendas td:first-child { text-align: left; padding-left: 14px; overflow-wrap: anywhere; }
.rc-r-agendas td:first-child i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 9px; vertical-align: -1px; }
.rc-r-agendas input { width: 18px; height: 18px; accent-color: var(--mmb-rouge-lumineux); margin: 0; cursor: pointer; }
.rc-r-agendas input:disabled { opacity: .35; cursor: not-allowed; }
.rc-r-agendas small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-r-agendas tr:has(input[name="lu"]:not(:checked)) td:first-child { color: var(--muted-foreground); }
.rc-r-agendas tr:has(input[name="lu"]:not(:checked)) input[name="recoit"] { opacity: .35; }
.rc-r-connecter { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: transparent;
  color: var(--foreground); font-family: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.rc-r-connecter:hover { background: var(--muted); }
.rc-r-bas { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 900px) {
  .rc-r-grille-3, .rc-r-grille-2, .rc-r-resultats { grid-template-columns: 1fr; }
  .rc-r-resultat, .rc-r-carnet-item, .rc-r-changer summary, .rc-r-meet, .rc-r-connecter { min-height: 44px; }
  .rc-r-puce button { width: 44px; height: 44px; }
  .rc-r-cherche { min-height: 44px; }
  .rc-r-lieu { flex-wrap: wrap; }
  .rc-r-lieu .rc-saisie { flex-basis: 100%; }
  .rc-r-pied .btn { flex: 1 1 auto; }
  .rc-r-pied .rc-r-pousse { margin-right: 0; }
  dialog.rc-r-fenetre { padding: 18px 16px; }
  .rc-r-agendas th:nth-child(3), .rc-r-agendas td:nth-child(3) { width: 110px; }
  .rc-r-agendas th:nth-child(2), .rc-r-agendas td:nth-child(2) { width: 56px; }
  .rc-r-agendas td { height: 52px; }
  .rc-r-agendas input { width: 22px; height: 22px; }
  .rc-r-reglage { padding: 16px; }
  .rc-r-compte-tete .btn { min-height: 44px; }
}
.rc-r-puce-nom { white-space: nowrap; flex: none; }
.rc-r-fenetre form:has(input[name="resultat"][value="reportee"]:checked) button[value="planifier"] { display: none; }
@media (max-width: 900px) {
  /* Sous 16 px, le téléphone zoome sur le champ touché. */
  .rc-r-fenetre .rc-saisie, .rc-r-fenetre .rc-r-champ .rc-saisie, .rc-r-cherche,
  .rc-r-fenetre .rc-j-date input { font-size: var(--text-md); }
  .rc-r-fenetre .rc-saisie { min-height: 44px; }
}
.rc-r-case { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }

/* ── Réglages : cadence de relance et rappels (maquette 08) ── */
.rc-r-lignes { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rc-r-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  padding: 8px 14px; min-height: 52px; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.rc-r-ligne:first-child { border-top: 0; }
.rc-r-ligne-nom { flex: 1 1 auto; min-width: 0; }
.rc-r-ligne-reglage { display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  color: var(--muted-foreground); font-size: var(--text-sm); }
.rc-r-nombre, .rc-r-choix { height: 36px; background: var(--background); font-size: var(--text-sm); }
.rc-r-nombre { width: 64px; text-align: center; padding: 0 6px; }
.rc-r-choix { width: auto; padding: 0 8px; }
.rc-r-coche { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-sm); min-height: 36px; }
.rc-r-coche input { width: 18px; height: 18px; accent-color: var(--mmb-rouge-lumineux); margin: 0; flex: none; cursor: pointer; }
.rc-r-coche small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-r-exemple { margin: 0; padding: 11px 13px; border-radius: var(--radius-md); background: var(--background);
  font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }
.rc-r-exemple b { color: var(--foreground); font-weight: 500; }
@media (max-width: 900px) {
  /* Sous 16 px, le téléphone zoome sur le champ touché ; sous 44 px, le doigt rate. */
  .rc-r-nombre, .rc-r-choix { font-size: var(--text-md); min-height: 44px; }
  .rc-r-coche { min-height: 44px; }
  .rc-r-coche input { width: 22px; height: 22px; }
  .rc-r-ligne { padding: 8px 12px; }
}

/* ── Réglages : mes horaires de rendez-vous (maquette D, 27 septembre 2026) ──
   Préfixe `rc-h-`. Un jour sans plage s'éteint et dit « Pas de rendez-vous ». */
.rc-h-form { margin-top: 16px; }
.rc-h-jours { display: flex; flex-direction: column; }
.rc-h-jour { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--border); font-size: var(--text-sm); }
.rc-h-jour:first-child { border-top: 0; }
.rc-h-nom { font-weight: 500; }
.rc-h-jour--vide .rc-h-nom { font-weight: 400; color: var(--muted-foreground); }
.rc-h-plages { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; }
.rc-h-plage { display: inline-flex; gap: 4px; align-items: center; height: 38px; padding: 0 4px 0 8px;
  border-radius: var(--radius-md); background: var(--background); border: 1px solid var(--border);
  color: var(--muted-foreground); }
.rc-h-heure { width: 76px; height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--foreground);
  font-family: inherit; font-size: var(--text-sm); color-scheme: dark; }
/* L'horloge du navigateur alourdit chaque plage (maquette D : « 9:00 → 12:30 ») ;
   l'heure se tape, et les flèches du clavier la font défiler. */
.rc-h-heure::-webkit-calendar-picker-indicator { display: none; }
.rc-h-heure:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.rc-h-retirer { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--muted-foreground); font-size: 16px; line-height: 1; }
.rc-h-retirer:hover { color: var(--foreground); background: var(--muted); }
.rc-h-aucun { display: none; color: var(--muted-foreground); }
.rc-h-jour--vide .rc-h-aucun { display: inline; }
.rc-h-ajouter { border: 0; background: none; padding: 4px 2px; cursor: pointer; font-family: inherit;
  font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-h-ajouter:hover { color: var(--accent); }
.rc-h-reglages { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; }
.rc-h-reglage { display: inline-flex; gap: 10px; align-items: center; font-size: var(--text-sm); }
.rc-h-agendas { font-size: var(--text-xs); overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .rc-h-jour { grid-template-columns: 1fr; gap: 6px; }
  .rc-h-plage { height: 46px; }
  .rc-h-heure { font-size: var(--text-md); height: 44px; width: 88px; }
  .rc-h-retirer, .rc-h-ajouter { min-width: 44px; min-height: 44px; }
  .rc-h-reglage { flex-wrap: wrap; }
}

/* ── RC-11 : la rangée ouvre le panneau, les actions d'une tentative ───────
   Maquettes 01 à 06, validées par Tevini le 25 septembre 2026. */
.rc-j-chevron { position: relative; z-index: 0; pointer-events: none; display: grid; place-items: center;
  width: 24px; color: var(--muted-foreground); opacity: .7; }
.rc-j-rangee:hover .rc-j-chevron { opacity: 1; color: var(--foreground); }
.rc-j-attente { display: flex; align-items: center; gap: 5px; width: fit-content; margin: 4px 0 0 auto;
  padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); white-space: nowrap; font-weight: 400;
  color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }
.rc-j-attente svg { flex: none; }
/* « Brouillon prêt » (4 octobre 2026) : un texte attend dans la fenêtre du canal. */
.rc-brouillon-pret { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; white-space: nowrap;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; line-height: 18px;
  color: #ffd27a; background: rgba(255,200,90,.12); border: 1px solid rgba(255,200,90,.35); }
.rc-brouillon-pret svg { flex: none; }

.rc-j-ecrire--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rc-j-ecrire--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rc-j-ecrire--1 { grid-template-columns: minmax(0,1fr); }
.rc-j-point--linkedin { background: #7fb4e8; }
.rc-j-coche { width: 14px; height: 14px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(110,231,168,.18); color: #6ee7a8; }
.rc-j-appeler { position: relative; }
.rc-j-coche--appel { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 18px; height: 18px; }

.rc-j-actions { display: flex; flex-direction: column; gap: 6px; }
.rc-j-actions-tete { display: flex; align-items: baseline; gap: 8px; }
.rc-j-actions-tete .rc-j-clore-titre { flex: 1; }
.rc-j-actions-tete small { font-size: var(--text-2xs); color: var(--warning-text); white-space: nowrap; }
.rc-j-action { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 4px 10px; align-items: center;
  padding: 8px 8px 8px 10px; border-radius: var(--radius-lg); background: var(--background); border: 1px solid var(--border);
  scroll-margin-top: 80px; }
.rc-j-action-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #8ec7ff; background: rgba(142,199,255,.10); }
.rc-j-action--sms .rc-j-action-ico, .rc-j-action--whatsapp .rc-j-action-ico { color: #86dba0; background: rgba(134,219,160,.10); }
.rc-j-action--mail .rc-j-action-ico { color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); }
.rc-j-action--linkedin .rc-j-action-ico { color: #7fb4e8; background: rgba(127,180,232,.10); }
.rc-j-action-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-j-action-ligne { font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rc-j-action-ligne b { font-weight: 600; }
.rc-j-h { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rc-j-action-note { font-size: var(--text-xs); color: var(--muted-foreground); quotes: "« " " »"; }
.rc-j-res { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); }
.rc-j-res i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.rc-j-res--vert { color: #6ee7a8; background: rgba(110,231,168,.10); }
.rc-j-res--ambre { color: var(--warning-text); background: rgba(251,191,36,.10); }
.rc-j-res--rouge { color: #fca5a5; background: rgba(248,113,113,.10); }
.rc-j-outils { display: flex; gap: 2px; }
.rc-j-outil { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md);
  border: 0; background: none; color: var(--muted-foreground); cursor: pointer; }
.rc-j-outil:hover { background: var(--muted); color: var(--foreground); }
.rc-j-outil--danger:hover { color: var(--error); }

/* La note, tout de suite sous l'action */
.rc-j-action-note-pose { grid-column: 2 / -1; margin: 0; }
.rc-j-action-note-pose .rc-saisie { width: calc(100% + 8px); height: 30px; font-size: var(--text-xs); background: transparent;
  border-color: transparent; padding: 0 8px; margin-left: -8px; color: var(--muted-foreground); }
.rc-j-action-note-pose .rc-saisie:focus { color: var(--foreground); }
.rc-j-action-note-pose .rc-saisie:hover { border-color: var(--border); }
.rc-j-action-note-pose .rc-saisie:focus { border-color: var(--border-strong); background: var(--card); }

/* L'appel dont on attend le résultat */
.rc-j-action--question { border-color: rgba(142,199,255,.45); background: rgba(142,199,255,.06); }
.rc-j-question, .rc-j-vocal { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 4px 2px 2px; }
.rc-j-vocal { grid-column: 2 / -1; padding: 0; }
.rc-j-question p { margin: 0; font-size: var(--text-sm); font-weight: 550; }
.rc-j-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-j-choix button, .rc-j-choix label { flex: 1 1 auto; white-space: nowrap; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; text-align: left; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); color: var(--foreground); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }
.rc-j-choix button:hover, .rc-j-choix label:hover { border-color: var(--border-strong); }
.rc-j-choix i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rc-j-choix svg { flex: none; }
.rc-j-c-vert i { background: #6ee7a8; } .rc-j-c-ambre i { background: #fbbf24; }
.rc-j-c-rouge svg { color: #fca5a5; }
.rc-j-choix label:has(input:checked) { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 60%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); font-weight: 600; }

/* Modifier une action */
.rc-j-action--edition { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 5%, transparent); }
.rc-j-edition { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 6px 2px 2px; }
.rc-j-edition-ligne { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 8px; }
.rc-j-edition-message { display: flex; flex-direction: column; gap: 4px; }
.rc-j-edition-message textarea { resize: vertical; min-height: 72px; }
.rc-j-edition label:not(.rc-j-case) { display: flex; flex-direction: column; gap: 5px; }
.rc-j-edition .rc-j-choix label { flex-direction: row; gap: 8px; }
.rc-j-edition .rc-saisie { width: 100%; font-size: var(--text-sm); height: 40px; }
.rc-j-edition input[type=time] { color-scheme: dark; }
.rc-j-edition-boutons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rc-j-edition-boutons .btn { min-height: 40px; height: auto; padding: 0 16px; font-size: var(--text-sm); }
.rc-j-supprimer { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: #fca5a5; font-family: inherit;
  font-size: var(--text-sm); cursor: pointer; }
.rc-j-supprimer:hover { border-color: rgba(248,113,113,.45); }

/* Injoignable : ce qui ne passe pas par le numéro */
.rc-j-conseil { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px;
  border-radius: var(--radius-md); border: 1px solid rgba(251,191,36,.32); background: rgba(251,191,36,.05); }
.rc-j-conseil-titre { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--warning-text); }
.rc-j-conseil p { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.45; }
.rc-j-conseil .rc-j-conseil-titre { color: var(--warning-text); }
.rc-j-conseil-canaux { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-j-conseil-canaux a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--card); color: var(--foreground);
  font-size: var(--text-sm); text-decoration: none; }
.rc-j-conseil-canaux a i { width: 7px; height: 7px; border-radius: 50%; }
.rc-j-conseil .rc-j-lien { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--text-sm);
  white-space: normal; align-self: flex-start; }

@media (max-width: 480px) { .rc-j-ecrire--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .rc-j-rangee { grid-template-areas: "p c g" "p q g"; }
  .rc-j-chevron { grid-area: g; align-self: center; }
  .rc-j-rangee-quand .rc-j-attente { margin-left: 0; display: inline-flex; margin-top: 2px; }
  .rc-j-outil { width: 44px; height: 44px; }
  .rc-j-ecrire a { min-height: 44px; }
  .rc-j-edition-boutons .btn, .rc-j-supprimer, .rc-j-conseil-canaux a { min-height: 44px; }
  .rc-j-edition .rc-saisie, .rc-j-action-note-pose .rc-saisie { height: 44px; font-size: 16px; }
  .rc-j-conseil .rc-j-lien { min-height: 44px; }
  .rc-j-edition-ligne { grid-template-columns: minmax(0,1fr); }
}

/* ══ RC-13 · Les fenêtres centrées : la tâche et la réunion ══════════════════
   Maquettes 02 à 08, validées par Tevini le 25 septembre 2026. Les règles sont
   celles de la maquette, renommées `rc-modale-` / `rc-r-`.

   ⚠️ **SANS SCRIPT, LA FENÊTRE EST DÉJÀ UNE FENÊTRE.** Le serveur la rend
   `<dialog open>` : non modale, elle se poserait dans le flux. La règle
   `:not(:modal)` la fixe au centre et peint le voile par une ombre ; le
   script la repasse en vraie modale (`showModal`), qui a son `::backdrop`. */
dialog.rc-modale { width: min(1060px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px);
  padding: 0; overflow: hidden; background: var(--card); border: 1px solid var(--border-strong); }
dialog.rc-modale[open] { display: flex; flex-direction: column; }
dialog.rc-modale::before { display: none; }
dialog.rc-modale::backdrop { background: rgba(5, 6, 10, .72); }
dialog.rc-modale[open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 90;
  height: fit-content; box-shadow: 0 0 0 100vmax rgba(5, 6, 10, .72); }
html:has(dialog.rc-modale[open]) { overflow: hidden; }
/* ⚠️ LA BARRE DE DÉFILEMENT DE LA PAGE EST MASQUÉE (Tevini, 14 octobre 2026) :
   la page défile toujours (molette, pavé, doigt), seule la barre disparaît.
   Les zones qui défilent à l’intérieur (listes, volets) gardent la leur. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
dialog.rc-modale-reunion { width: min(700px, calc(100vw - 48px)); }

.rc-modale-tete { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex;
  flex-direction: column; gap: 8px; flex: none; }
.rc-modale-tete .rc-j-serie-tete { margin: 0; border: 0; padding: 0; }
.rc-modale-tete .rc-j-serie-barre { margin: -2px 0 2px; }
.rc-modale-tete .rc-panneau-tache-titre { margin: 2px 0 0; font-size: var(--text-lg); }
.rc-modale-tete .rc-j-panneau-sous { margin: 0; }
.rc-modale-tete .rc-panneau-qui { color: var(--accent); }
.rc-modale-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rc-modale-tache .rc-modale-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: stretch; }
.rc-modale-gauche, .rc-modale-droite { display: flex; flex-direction: column; gap: 18px;
  padding: 20px 24px 24px; min-width: 0; }
.rc-modale-gauche { border-right: 1px solid var(--border); background: rgba(255, 255, 255, .012); }
.rc-modale-zone { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rc-modale-zone:empty { display: none; }
.rc-zone-agir .rc-j-clore-titre, .rc-zone-clore > .rc-j-clore-titre { margin: 0; }
.rc-zone-histo .rc-j-histo { margin: 0; padding: 0; border: 0; }
.rc-modale-suivante { margin: 0; padding: 12px 24px; border-top: 1px solid var(--border); flex: none;
  font-size: var(--text-xs); }

/* Les notes de la tâche, la préparation et le compte rendu : écrits à la frappe. */
.rc-notes { display: flex; flex-direction: column; gap: 8px; }
.rc-notes-forme, .rc-r-forme-auto { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.rc-notes-tete, .rc-r-bloc-tete { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.rc-notes-tete .rc-j-clore-titre, .rc-r-bloc-tete .rc-j-clore-titre { flex: 1; margin: 0; }
.rc-enregistre { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-2xs); color: #6ee7a8; }
.rc-enregistre--encours { color: var(--muted-foreground); }
.rc-enregistre--encours svg { display: none; }
.rc-enregistre--alerte { color: var(--error); }
.rc-enregistre--alerte svg { display: none; }
.rc-copier { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--card);
  color: var(--foreground); font-family: inherit; font-size: var(--text-xs); cursor: pointer; }
.rc-copier:hover { border-color: var(--accent); }
textarea.rc-saisie.rc-notes-zone { width: 100%; height: auto; min-height: 210px; resize: vertical;
  line-height: 1.55; padding: 11px 12px; font-size: var(--text-sm); }
.rc-notes-bouton { align-self: flex-start; }
.rc-aide-fine { margin: 0; font-size: var(--text-2xs); color: var(--muted-foreground); line-height: 1.45; }

/* ── La fiche d'une réunion ── */
.rc-r-tete { gap: 12px; padding: 18px 24px 16px; }
.rc-r-ligne1 { display: flex; align-items: center; gap: 10px; }
.rc-r-sur { flex: 1; font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-foreground); }
.rc-r-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-r-titre h2 { margin: 0; font-size: var(--text-lg); font-weight: 550; letter-spacing: -.015em;
  overflow-wrap: anywhere; }
.rc-r-infos { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px 10px;
  align-items: center; font-size: var(--text-sm); }
.rc-r-ico { color: var(--muted-foreground); display: grid; place-items: center; }
.rc-r-discret { color: var(--muted-foreground); }
.rc-r-val { min-width: 0; overflow-wrap: anywhere; }
.rc-r-lien { color: var(--accent); text-decoration: none; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rc-r-lien:hover { text-decoration: underline; }
.rc-r-rejoindre { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px;
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent);
  color: var(--accent); font-size: var(--text-sm); font-weight: 550; text-decoration: none; white-space: nowrap; }
.rc-r-puces { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 2 / -1; }
.rc-r-puce-lien { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 2px 10px 2px 3px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 22%, transparent);
  color: var(--foreground); font-size: var(--text-sm); text-decoration: none; }
.rc-r-puce-lien .rc-pastille { width: 24px; height: 24px; font-size: 9px; flex: none; }
.rc-r-puce-lien svg { color: var(--muted-foreground); }
.rc-r-puce-lien:hover { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); }
.rc-r-corps { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 18px; }
.rc-r-bloc { display: flex; flex-direction: column; gap: 8px; }
textarea.rc-saisie.rc-r-prepa { width: 100%; height: auto; min-height: 150px; resize: vertical; line-height: 1.55;
  padding: 11px 12px; font-size: var(--text-sm); }
textarea.rc-saisie.rc-r-prepa--court { min-height: 84px; }
.rc-r-cr-plie > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); color: var(--muted-foreground);
  font-size: var(--text-sm); cursor: pointer; list-style: none; }
.rc-r-cr-plie > summary::-webkit-details-marker { display: none; }
.rc-r-cr-plie > summary b { color: var(--foreground); font-weight: 550; }
.rc-r-cr-plie > summary span { flex: 1; }
.rc-r-cr-plie[open] > summary { margin-bottom: 10px; }
.rc-r-cr { border-radius: var(--radius-lg); border: 1px solid rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .035); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.rc-r-cr > .rc-r-bloc-tete .rc-j-clore-titre { color: var(--warning-text); }
.rc-r-cr--fait { border-color: var(--border); background: transparent; }
.rc-r-cr--fait > .rc-r-bloc-tete .rc-j-clore-titre { color: inherit; }
.rc-r-cr--avance { border-color: var(--border); background: transparent; }
.rc-r-cr-forme { display: flex; flex-direction: column; gap: 14px; margin: 0; }
textarea.rc-saisie.rc-r-cr-zone { width: 100%; height: auto; min-height: 110px; resize: vertical;
  line-height: 1.55; padding: 11px 12px; font-size: var(--text-sm); }
.rc-r-cr-aide { margin-top: -8px; }
.rc-r-cr-lu { margin: 0; white-space: pre-line; font-size: var(--text-sm); line-height: 1.55; }
.rc-r-cr .rc-j-suite { margin: 0; }
.rc-r-cr-boutons { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; }
.rc-r-cr-boutons .btn { width: auto; }
/* « Reportée » : la nouvelle date paraît, la suite s'efface, et le bouton
   devient « Reporter la réunion » — il n'y a rien à planifier d'une réunion
   qui n'a pas eu lieu. */
.rc-r-cr-forme .rc-r-reporter { display: none; }
.rc-r-cr-forme:not(:has(input[name="resultat"][value="reportee"]:checked)) .rc-r-report { display: none; }
.rc-r-cr-forme:has(input[name="resultat"][value="reportee"]:checked) .rc-r-ensuite { display: none; }
.rc-r-cr-forme:has(input[name="resultat"][value="reportee"]:checked) .rc-r-reporter { display: flex; }
.rc-modale-pied { flex: none; display: flex; gap: 8px; align-items: center; padding: 14px 24px;
  border-top: 1px solid var(--border); flex-wrap: wrap; margin: 0; }
.rc-modale-pied .btn { text-decoration: none; gap: 6px; }
.rc-r-pousse-droite { order: 2; margin-left: auto; }
.rc-r-pied-aide { order: 1; }
.rc-r-annuler { order: 1; }
.rc-r-annuler > summary { list-style: none; }
.rc-r-annuler > summary::-webkit-details-marker { display: none; }
.rc-r-danger { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: var(--radius-md); border: 1px solid transparent; color: #fca5a5; font-size: var(--text-sm);
  cursor: pointer; }
.rc-r-danger:hover, .rc-r-annuler[open] > .rc-r-danger { border-color: rgba(248, 113, 113, .45); }
.rc-r-annuler-forme { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0;
  font-size: var(--text-xs); color: var(--muted-foreground); max-width: 440px; }
.rc-r-danger-plein { color: #fca5a5; border-color: rgba(248, 113, 113, .45); }

/* ── Les cartes qui OUVRENT (fiche d'une personne, fiche d'une ligne, campagne) ── */
.rc-j-carte-chevron { position: relative; z-index: 1; pointer-events: none; display: flex; align-items: center;
  gap: 10px; color: var(--muted-foreground); justify-self: end; }
a.rc-j-carte-chevron { pointer-events: auto; text-decoration: none; min-height: 32px; }
.rc-j-carte-venir:hover .rc-j-carte-chevron > svg, .rc-histoire-item:hover .rc-j-carte-chevron > svg {
  color: var(--foreground); }
.rc-j-attente-pastille { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); white-space: nowrap; color: var(--mmb-rouge-lumineux); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }
.rc-j-attente-texte { color: var(--mmb-rouge-lumineux); }
.rc-histoire-item--ouvre { position: relative; }
.rc-histoire-item--ouvre:hover { border-color: var(--border-strong); }

/* ══ Les sélecteurs thémés (maquettes 06 et 07) ══════════════════════════════
   Posés par `_saisies.js` sur les vrais champs, à l'ordinateur seulement. */
.rc-pop { position: fixed; z-index: 210; display: none; padding: 10px; background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  color: var(--foreground); }
.rc-pop--vu { display: block; }
.rc-cal { width: 292px; }
.rc-cal-tete { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.rc-cal-tete b { flex: 1; font-size: var(--text-sm); font-weight: 600; padding-left: 6px; }
.rc-cal-titre { flex: 1; text-align: left; min-height: 34px; border: 0; border-radius: var(--radius-md); background: none;
  color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 600; padding: 0 6px; cursor: pointer; }
.rc-cal-titre:hover { background: var(--muted); }
.rc-cal-titre span { color: var(--muted-foreground); font-size: var(--text-2xs); }
.rc-cal-annees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rc-cal-annees button { height: 44px; border: 1px solid transparent; border-radius: var(--radius-md); background: none;
  color: var(--foreground); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.rc-cal-annees button:hover { background: var(--muted); }
.rc-cal-annees .rc-cal-auj { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 55%, transparent); color: var(--accent); }
.rc-cal-annees .rc-cal-choisi, .rc-cal-annees .rc-cal-choisi:hover { background: var(--accent); color: #14161F; font-weight: 600; }
.rc-cal-fl { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--muted-foreground); cursor: pointer; }
.rc-cal-fl:hover { background: var(--muted); color: var(--foreground); }
.rc-cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rc-cal-grille abbr { text-decoration: none; text-align: center; font-size: var(--text-2xs);
  color: var(--muted-foreground); padding: 4px 0 6px; letter-spacing: .04em; }
.rc-cal-grille button { height: 36px; border: 1px solid transparent; border-radius: var(--radius-md); background: none;
  color: var(--foreground); font-family: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  cursor: pointer; padding: 0; }
.rc-cal-grille button:hover, .rc-cal-grille .rc-cal-vise { background: var(--muted); }
.rc-cal-grille .rc-cal-hors { color: rgba(245, 244, 240, .22); }
.rc-cal-grille .rc-cal-passe { color: rgba(245, 244, 240, .38); }
.rc-cal-grille .rc-cal-we { color: var(--muted-foreground); }
.rc-cal-grille .rc-cal-auj { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 55%, transparent); color: var(--accent); font-weight: 600; }
.rc-cal-grille .rc-cal-choisi, .rc-cal-grille .rc-cal-choisi:hover { background: var(--accent); color: #14161F;
  font-weight: 650; }
.rc-cal-grille .rc-cal-vise { box-shadow: 0 0 0 2px var(--accent-ring); }
/* Un jour hors bornes (`min`, `max`) : éteint, et rien ne se passe au survol. */
.rc-cal-grille button:disabled, .rc-cal-grille button:disabled:hover { color: rgba(245, 244, 240, .16); background: none; cursor: default; }
.rc-cal-pied { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border); }
.rc-cal-pied button { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: none;
  font-family: inherit; font-size: var(--text-xs); color: var(--accent); cursor: pointer; }
.rc-cal-pied button + button { color: var(--muted-foreground); }
.rc-cal-pied button:hover { background: var(--muted); }
.rc-heure { width: 176px; padding: 4px; }
.rc-heure-liste { max-height: 252px; overflow-y: auto; display: flex; flex-direction: column; }
.rc-heure-liste button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none;
  text-align: left; font-family: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  flex: none; }
.rc-heure-liste button:hover, .rc-heure-liste .rc-heure-vise { background: var(--muted); color: var(--foreground); }
.rc-heure-liste .rc-heure-pleine { color: var(--foreground); }
.rc-heure-liste .rc-heure-choisie { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); color: var(--accent); font-weight: 600; }
.rc-heure-aide { white-space: nowrap; margin: 4px 0 0; padding: 6px 10px 4px; border-top: 1px solid var(--border);
  font-size: var(--text-2xs); color: var(--muted-foreground); }
/* Le déclencheur d'une date : il tient la place du champ natif, qui reste
   dans la page (c'est lui que le formulaire envoie). */
.rc-date-bouton { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  cursor: pointer; text-align: left; font-family: inherit; color: var(--foreground); }
.rc-date-bouton--vide { color: var(--muted-foreground); }
.rc-date-bouton svg, .rc-heure-champ + .rc-heure-ico { color: var(--muted-foreground); flex: none; }
.rc-date-bouton[aria-expanded="true"], .rc-heure-champ[aria-expanded="true"] { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
/* ⚠️ **LE CHAMP NATIF NE MESURE RIEN, BORDURE ET MARGE COMPRISES.** Il garde
   ses classes (`rc-cellule` dans le tableau d'une campagne) : `1px` de large
   y devenait 24 × 2 px avec le rembourrage — une « cible de 2 px » pour
   l'audit. Et, sorti du flux sans ancêtre positionné, il se mesurait contre
   `<body>` : posé dans la dernière colonne de l'onglet « Tout », il faisait
   défiler la PAGE de côté (2 260 px pour 1 280), là où seul le cadre du
   tableau doit défiler. Zéro sur zéro, il ne pèse plus sur rien. */
.rc-champ-natif { position: absolute !important; width: 0 !important; height: 0 !important;
  min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important;
  margin: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
/* Une date VIDE du tableau se tait comme avant (`rc-cellule--vide`) : son
   icône revient au survol de la rangée et au focus. */
.rc-tableau .rc-date-bouton--vide svg { opacity: 0; }
.rc-tableau tr:hover .rc-date-bouton--vide svg, .rc-tableau .rc-date-bouton--vide:focus svg,
.rc-tableau .rc-date-bouton--vide[aria-expanded="true"] svg { opacity: 1; }
.rc-heure-enrobe { position: relative; display: block; }
.rc-heure-enrobe .rc-heure-ico { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; display: flex; }
.rc-heure-enrobe .rc-saisie { padding-right: 32px; width: 100%; }
/* Dans une puce (« Autre date », « Heure ») : le texte de la puce change. */
.rc-j-puce.rc-j-date .rc-date-puce { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  color: inherit; font: inherit; font-size: var(--text-sm); padding: 0; cursor: pointer; }
.rc-j-puce.rc-j-date:has(.rc-date-puce--pris) { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent);
  border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); color: var(--accent); font-weight: 500; }
.rc-j-puce.rc-j-date:has([aria-expanded="true"]) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-j-puce.rc-j-date input.rc-heure-champ { width: 4.6em; }
.rc-j-puce.rc-j-date input.rc-heure-champ::placeholder { color: inherit; opacity: 1; }
/* La liste d'un `<select>` : le choix courant porte sa coche (maquette 07). */
.rc-liste-menu .rc-liste-menu--pris::after { content: "✓"; margin-left: 12px; color: var(--accent); }
.rc-liste-menu button { display: flex; justify-content: space-between; align-items: center; }

/* ══ Au téléphone : une feuille plein écran, une seule colonne ══════════════
   ⚠️ Dernières règles du fichier pour ces sélecteurs, à dessein (voir plus
   haut : une règle de densité écrite après écraserait le repli tactile). */
@media (max-width: 700px) {
  dialog.rc-modale, dialog.rc-modale-reunion { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0; border: 0; }
  dialog.rc-modale[open]:not(:modal) { height: 100dvh; }
  .rc-modale-tete { padding: 10px 16px 14px; }
  .rc-modale-tete .rc-panneau-tache-titre, .rc-r-titre h2 { font-size: var(--text-lg); }
  .rc-modale-tache .rc-modale-corps { display: flex; flex-direction: column; gap: 20px; padding: 16px 16px 24px; }
  .rc-modale-gauche, .rc-modale-droite { display: contents; }
  /* Maquette B-téléphone (26 septembre 2026) : le résumé « Avec {prénom} »
     sous la personne, avant « Appeler » ; le fil tout en bas. */
  .rc-zone-personne { order: 1; } .rc-zone-resume { order: 2; } .rc-zone-agir { order: 3; }
  .rc-zone-notes { order: 4; } .rc-zone-clore { order: 5; } .rc-zone-histo { order: 6; }
  textarea.rc-saisie.rc-notes-zone { min-height: 300px; font-size: 16px; }
  textarea.rc-saisie.rc-r-prepa, textarea.rc-saisie.rc-r-cr-zone { font-size: 16px; }
  .rc-copier, .rc-r-danger, .rc-r-rejoindre, .rc-r-puce-lien, .rc-r-cr-plie > summary { min-height: 44px; }
  .rc-copier { padding: 0 14px; }
  .rc-modale-suivante { padding: 12px 16px; }
  .rc-r-lien { display: block; line-height: 44px; }
  .rc-j-outil { width: 44px; height: 44px; }
  .rc-j-action-note-pose .rc-saisie { min-height: 44px; font-size: 16px; }
  .rc-r-tete { padding: 10px 16px 14px; }
  .rc-r-corps { padding: 16px 16px 24px; }
  .rc-modale-pied { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .rc-modale-pied .btn, .rc-notes-bouton { min-height: 44px; }
  /* La fiche d'une réunion défile EN ENTIER au téléphone : son en-tête (quand,
     où, qui) prendrait sinon la moitié de l'écran, et le compte rendu
     s'écrirait dans une fente. */
  dialog.rc-modale-reunion[open] { overflow-y: auto; }
  dialog.rc-modale-reunion .rc-r-corps { flex: none; overflow: visible; }
  .rc-r-rejoindre { padding: 0 10px; }
  .rc-r-cr-boutons .btn { flex: 1 1 auto; min-height: 44px; }
  .rc-r-cr-forme .rc-saisie { font-size: 16px; min-height: 44px; }
  .rc-r-resultats { grid-template-columns: 1fr; }
  .rc-r-grille-2 { grid-template-columns: 1fr; }
  a.rc-j-carte-chevron { min-height: 44px; min-width: 44px; justify-content: flex-end; }
}
.rc-j-puce.rc-j-date input.rc-heure-champ:focus, .rc-j-puce.rc-j-date input.rc-heure-champ:focus-visible {
  outline: none; box-shadow: none; }
/* Sous le doigt (≤ 900 px, la bascule de la feuille) : les cibles de 44 px et
   les champs de 16 px valent aussi pour la tablette, où la fenêtre garde sa
   forme d'ordinateur. */
@media (max-width: 900px) {
  .rc-copier, .rc-r-danger, .rc-r-rejoindre, .rc-r-puce-lien, .rc-r-cr-plie > summary,
  .rc-modale-pied .btn, .rc-notes-bouton { min-height: 44px; }
  .rc-r-lien { display: block; line-height: 44px; }
  textarea.rc-saisie.rc-notes-zone, textarea.rc-saisie.rc-r-prepa, textarea.rc-saisie.rc-r-cr-zone,
  .rc-r-cr-forme .rc-saisie, .rc-heure-champ, .rc-date-bouton { font-size: 16px; }
  .rc-r-cr-forme .rc-saisie { min-height: 44px; }
  .rc-j-puce.rc-j-date .rc-date-puce { min-height: 44px; min-width: 44px; justify-content: center; }
  .rc-j-puce.rc-j-date input.rc-heure-champ { font-size: 16px; min-height: 44px; }
  .rc-j-outil { width: 44px; height: 44px; }
  .rc-j-action-note-pose .rc-saisie { min-height: 44px; font-size: 16px; }
  a.rc-j-carte-chevron { min-height: 44px; min-width: 44px; justify-content: flex-end; }
}


/* ══ Les canaux d'une personne (26 septembre 2026, maquettes A1 à A4) ═══════
   Plusieurs valeurs par canal, la première est la principale. Les icônes des
   réseaux sont en TRAIT, de la couleur du texte : jamais la couleur de marque. */

/* La fenêtre « Modifier le contact » : le bloc « Pour le joindre ». */
.rc-joindre { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: rgba(255, 255, 255, .015); min-width: 0; }
.rc-joindre-titre-bloc { margin: 0; font-size: var(--text-base); font-weight: 550; }
.rc-joindre > .rc-aide-fine { margin: 0 0 6px; }
.rc-joindre-canal { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; min-width: 0; }
.rc-joindre-canal[hidden] { display: none; }
.rc-joindre-nom { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); font-weight: 500; }
.rc-joindre-nom svg { color: var(--muted-foreground); }
.rc-joindre-liste { display: flex; flex-direction: column; gap: 8px; }
.rc-joindre-rangee { display: grid; grid-template-columns: 18px minmax(0, 1fr) 92px 112px 32px; gap: 8px; align-items: center; }
.rc-joindre-rangee--tiree { opacity: .45; }
.rc-joindre-poignee { color: var(--disabled-foreground); cursor: grab; display: inline-flex; justify-content: center; }
.rc-joindre-rangee .rc-saisie { min-width: 0; }
.rc-joindre-etiquette.rc-saisie { font-size: var(--text-sm); }
.rc-joindre-principal { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid transparent; background: none; color: var(--muted-foreground);
  font: inherit; font-size: var(--text-xs); cursor: pointer; white-space: nowrap; }
.rc-joindre-principal:hover { color: var(--accent); }
.rc-joindre-est { display: none; }
.rc-joindre-rangee:first-child .rc-joindre-principal { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent); cursor: default; }
.rc-joindre-rangee:first-child .rc-joindre-est { display: inline; }
.rc-joindre-rangee:first-child .rc-joindre-devient { display: none; }
.rc-joindre-retirer { width: 32px; height: 32px; border: 0; background: none; color: var(--muted-foreground);
  font-size: var(--text-lg); line-height: 1; cursor: pointer; border-radius: var(--radius-md); }
.rc-joindre-retirer:hover { color: var(--error); background: rgba(248, 113, 113, .08); }
.rc-joindre-ajouter { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-left: 26px;
  border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: 4px 0; }
.rc-joindre-reseaux { position: relative; margin-top: 8px; }
.rc-joindre-reseaux[hidden] { display: none; }
.rc-joindre-bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent);
  color: var(--accent); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.rc-joindre-bouton[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-joindre-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: min(380px, 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong); background: var(--card); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.rc-joindre-menu[hidden] { display: none; }
.rc-joindre-menu-titre { grid-column: 1 / -1; margin: 0 0 4px 6px; font-size: var(--text-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-foreground); }
.rc-joindre-menu button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0;
  border-radius: var(--radius-md); background: none; color: var(--foreground); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer; }
.rc-joindre-menu button svg { color: var(--muted-foreground); flex: none; }
.rc-joindre-menu button:hover, .rc-joindre-menu button:focus-visible { background: rgba(255, 255, 255, .05); }

/* La fiche : principale, étiquette, « +1 » qui déplie. */
.rc-fiche-canal { align-items: flex-start; gap: 12px; }
.rc-fiche-canal .rc-fiche-cle { display: inline-flex; align-items: center; gap: 7px; padding-top: 1px; }
.rc-canal-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.rc-canal-vals > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; max-width: 100%; }
.rc-canal-vals > summary::-webkit-details-marker { display: none; }
.rc-canal-val { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.rc-canal-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rc-canal-val--autre, .rc-canal-vals > .rc-canal-val { color: var(--muted-foreground); }
.rc-canal-etiq { flex: none; font-size: var(--text-2xs); color: var(--muted-foreground); padding: 1px 7px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
.rc-canal-plus { flex: none; display: inline-flex; font-size: var(--text-2xs); color: var(--accent); padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); border-radius: var(--radius-pill); }
.rc-canal-plus-r { display: none; }
.rc-canal-vals[open] .rc-canal-plus-n { display: none; }
.rc-canal-vals[open] .rc-canal-plus-r { display: inline; }
.rc-canal-sur-place { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; flex: 1; }
.rc-canal-sur-place .rc-sur-place { width: 100%; }
.rc-canal-vals--autres > summary { justify-content: flex-end; }
.rc-fiche-entree { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.rc-fiche-suivi { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rc-fiche-suivi label { font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-fiche-suivi select { width: auto; min-width: 180px; }
.rc-fiche-reseau { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: var(--text-sm); cursor: pointer; padding: 6px 0; }
/* « +2 » dans une cellule du tableau, et sur un panneau. */
.rc-canal-indice { font-size: var(--text-2xs); color: var(--accent); padding: 0 6px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); background: var(--card); white-space: nowrap; }
td.rc-cellule-canal { position: relative; }
td.rc-cellule-canal .rc-cellule { padding-right: 30px; }
td.rc-cellule-canal .rc-canal-indice { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* « Appeler » en bouton double : le principal, et le chevron des autres. */
.rc-appel { display: flex; align-items: stretch; position: relative; min-width: 0; }
.rc-appel .rc-j-appeler { flex: 1; min-width: 0; }
.rc-appel:has(.rc-appel-autres) .rc-j-appeler { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rc-appel-autres > summary { list-style: none; height: 100%; display: flex; align-items: center; justify-content: center;
  width: 52px; border: 1px solid rgba(142, 199, 255, .55); border-left-color: rgba(142, 199, 255, .3);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: rgba(142, 199, 255, .14); color: #b7dbff; cursor: pointer; }
.rc-appel-autres > summary::-webkit-details-marker { display: none; }
.rc-appel-autres > summary svg { transform: rotate(90deg); }
.rc-appel-autres[open] > summary { background: rgba(142, 199, 255, .24); }
.rc-appel-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; display: flex; flex-direction: column;
  gap: 2px; padding: 8px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); min-width: 260px; }
.rc-appel-menu a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: var(--radius-md);
  color: var(--foreground); text-decoration: none; font-size: var(--text-sm); }
.rc-appel-menu a svg { color: #b7dbff; flex: none; }
.rc-appel-menu a b { font-weight: 550; font-variant-numeric: tabular-nums; }
.rc-appel-menu a small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-appel-menu a:hover, .rc-appel-menu a:first-child { background: rgba(255, 255, 255, .04); }
.rc-appel-principal { margin-left: auto; font-size: var(--text-2xs); color: var(--accent); padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); border-radius: var(--radius-pill); }
.rc-appel-menu p { margin: 6px 12px 2px; font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-j-fiche-actions .rc-appel .rc-j-appeler { width: auto; }
.rc-j-fiche-actions .rc-appel-autres > summary { width: 36px; }
.rc-j-fiche-actions .rc-appel-menu { right: auto; }

/* Les réseaux, en boutons : avec leur nom dans la fenêtre d'une tâche, en
   icônes sur la fiche. */
.rc-reseau { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 10px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background);
  font: inherit; font-size: var(--text-sm); color: var(--foreground); text-decoration: none; cursor: pointer; min-width: 0; }
.rc-reseau svg { color: var(--muted-foreground); flex: none; }
.rc-reseau:hover { border-color: var(--border-strong); }
.rc-reseaux-icones { display: inline-flex; gap: 6px; }
.rc-reseaux-icones .rc-reseau { width: 40px; min-height: 40px; padding: 0; }
.rc-j-ecrire--n { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-j-ecrire .rc-reseau .rc-j-coche { margin-right: -2px; }
.rc-j-personne-liens span { display: inline-flex; align-items: center; gap: 6px; }
.rc-j-personne-liens span svg { color: var(--muted-foreground); flex: none; }
.rc-j-personne-liens em { font-style: normal; color: var(--accent); font-size: var(--text-2xs); }
.rc-j-coord { color: var(--muted-foreground); }

/* ══ « Avec {prénom} » dans la fenêtre d'une tâche (option B2) ═══════════════ */
.rc-avec-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-avec-tete .rc-groupe-titre { margin: 0; }
.rc-avec-tete .rc-j-histo-voir { margin: 0; }
.rc-avec-tete--fil { display: none; }
.rc-avec-bref { display: none; margin: 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-avec-resume { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--background); overflow: hidden; }
.rc-avec-case { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; min-width: 0; }
.rc-avec-case:nth-child(odd) { border-right: 1px solid var(--border); }
.rc-avec-case:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.rc-avec-cle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-foreground); }
.rc-avec-case b { font-size: var(--text-sm); font-weight: 500; }
.rc-avec-case small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-avec-rien { color: var(--disabled-foreground); }
.rc-avec-vert { color: var(--success); }
.rc-avec-fil { gap: 12px; border-top: 0; padding-top: 0; }
.rc-avec-court, .rc-avec-tout { display: flex; flex-direction: column; }
.rc-avec-tout > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; cursor: pointer; }
.rc-avec-tout > summary::-webkit-details-marker { display: none; }
.rc-avec-voir, .rc-avec-replier { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-sm); }
.rc-avec-voir svg { transform: rotate(90deg); }
.rc-avec-replier svg { transform: rotate(-90deg); }
.rc-avec-replier { display: none; }
.rc-avec-tout > summary small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-avec-tout[open] .rc-avec-voir { display: none; }
.rc-avec-tout[open] .rc-avec-replier { display: inline-flex; }
/* Ouvert, « Voir tout » REMPLACE les cinq éléments par le fil entier. */
.rc-avec-fil:has(.rc-avec-tout[open]) .rc-avec-court { display: none; }
.rc-avec-tout[open] > summary { order: 2; }
.rc-avec-tout .rc-j-jour { margin: 12px 0 4px; }

.rc-flux { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; position: relative; }
/* Un élément qui s'ouvre (4 octobre 2026) : toute la rangée est le lien ;
   ce qui s'ouvre de soi-même (une note, un compte rendu) reste au-dessus. */
.rc-flux-ouvre { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-md, 8px); }
.rc-flux--ouvrable:hover, .rc-j-evt--ouvrable:hover { background: var(--accent-wash); }
.rc-flux--ouvrable:hover .rc-flux-titre b, .rc-j-evt--ouvrable:hover .rc-j-evt-titre { color: var(--accent-hi); }
.rc-flux--ouvrable [data-riche], .rc-j-evt--ouvrable [data-riche], .rc-j-evt--ouvrable .rc-j-evt-geste { position: relative; z-index: 1; }
.rc-j-evt--ouvrable { position: relative; }
.rc-flux::before { content: ""; position: absolute; left: 12px; top: 34px; bottom: -8px; width: 1px; background: var(--border); }
.rc-flux:last-child::before { display: none; }
.rc-flux-ico { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); position: relative; }
.rc-flux--tache .rc-flux-ico { color: var(--accent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.rc-flux--faite .rc-flux-ico { color: var(--success); border-color: rgba(74, 222, 128, .45); }
.rc-flux-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-flux-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-sm); }
.rc-flux-titre b { font-weight: 550; }
.rc-flux-titre small { font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-flux-titre--texte { display: block; }
.rc-flux-pied { font-size: var(--text-xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc-flux-pied q { quotes: "« " " »"; }
.rc-flux-action + .rc-flux-action::before { content: " · "; }
.rc-flux-issue { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-2xs); padding: 1px 7px;
  border-radius: var(--radius-pill); background: rgba(251, 191, 36, .12); color: var(--warning-text); }
.rc-flux-issue i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rc-flux-issue--faite { background: rgba(74, 222, 128, .12); color: var(--success); }
.rc-flux-issue--annulee { background: rgba(255, 255, 255, .06); color: var(--muted-foreground); }
.rc-flux time { font-size: var(--text-2xs); color: var(--muted-foreground); white-space: nowrap; padding-top: 3px; }

@media (max-width: 700px) {
  .rc-joindre { padding: 12px; }
  .rc-joindre-rangee { grid-template-columns: 18px minmax(0, 1fr) 32px; grid-template-areas:
      "p v x" ". e s"; row-gap: 8px; }
  .rc-joindre-poignee { grid-area: p; }
  .rc-joindre-valeur { grid-area: v; }
  .rc-joindre-retirer { grid-area: x; width: 44px; height: 44px; }
  .rc-joindre-etiquette { grid-area: e; }
  .rc-joindre-principal { grid-area: s; justify-self: start; min-height: 44px; }
  .rc-joindre-rangee { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-template-areas: "p v v x" ". e s s"; }
  .rc-joindre-ajouter, .rc-fiche-reseau { min-height: 44px; }
  .rc-joindre-menu button { min-height: 44px; }
  .rc-joindre-bouton { min-height: 44px; }
  .rc-avec-tete--resume { display: none; }
  .rc-avec-bref { display: block; }
  .rc-avec-tete--fil { display: flex; }
  .rc-appel-autres > summary { min-height: 48px; }
  .rc-appel-menu a { min-height: 44px; }
  .rc-reseau { min-height: 44px; }
  .rc-avec-voir, .rc-avec-replier { min-height: 44px; }
  .rc-canal-plus { min-height: 24px; align-items: center; }
}
/* Sous le doigt, quelle que soit la largeur (tablette comprise) : 44 px —
   même seuil que le reste de l'écran (900 px). */
@media (max-width: 900px), (pointer: coarse) {
  .rc-fiche-reseau, .rc-joindre-ajouter, .rc-joindre-bouton, .rc-joindre-menu button,
  .rc-joindre-principal, .rc-appel-menu a, .rc-reseau, .rc-avec-voir, .rc-avec-replier { min-height: 44px; }
  .rc-joindre-retirer { width: 44px; height: 44px; }
  .rc-reseaux-icones .rc-reseau { width: 44px; }
}

/* ══ Tableau de bord — campagnes en haut (26 septembre 2026) ═══════════════════
   Option C, cartes compactes, validée par Tevini. Les campagnes montent sous
   l'en-tête, en grille de cartes deux fois moins hautes ; les réunions gardent
   une colonne étroite et atténuée à droite, la carte des tâches prend le reste.
   ⚠️ Ce bloc est EN FIN DE FICHIER à dessein : il resserre `.rc-liste`, écrite
   plus haut, à spécificité égale. */
.rc-j-campagnes { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rc-j-campagnes-tete { flex-wrap: nowrap; }
.rc-j-campagnes-tete .rc-groupe-titre { flex: 1; min-width: 0; }
.rc-j-campagnes-grille { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* La carte compacte : le nom et « Ouvrir » sur une ligne, la jauge, puis le
   compte et l'état. Le nom s'abrège par « … » ; il se lit en entier au survol. */
.rc-j-campagnes-grille .rc-liste { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 6px 8px; padding: 10px 12px; margin: 0; min-width: 0; }
.rc-j-campagnes-grille .rc-liste-nom { grid-column: 1; grid-row: 1; display: block;
  font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-j-campagnes-grille .rc-liste-gestes { grid-column: 2; grid-row: 1; justify-content: flex-end;
  margin: 0; padding: 0; border: 0; gap: 2px; }
.rc-j-campagnes-grille .rc-liste-geste { font-size: var(--text-xs); padding: 3px 6px; }
.rc-j-campagnes-grille .rc-liste-jauge { grid-column: 1 / -1; }
.rc-j-campagnes-grille .rc-liste-pied { grid-column: 1 / -1; justify-content: flex-start;
  gap: 12px; font-size: var(--text-xs); min-width: 0; }
.rc-j-campagnes-grille .rc-liste-alerte,
.rc-j-campagnes-grille .rc-liste-calme { font-size: var(--text-xs); }
.rc-j-campagnes-grille .rc-liste-de { margin-left: auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Les réunions : un tiers de la largeur, les tâches deux tiers (Tevini, 28
   septembre 2026 : à 250 px, la colonne était trop étroite). Plus discrète. */
.rc-accueil { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rc-accueil-listes { opacity: .85; font-size: var(--text-sm); }
.rc-accueil-listes .rc-groupe-titre { font-size: var(--text-2xs); }

@media (max-width: 1150px) {
  .rc-accueil { grid-template-columns: minmax(0, 1fr); }
  .rc-accueil-listes { display: flex; opacity: 1; }
}
@media (max-width: 900px) {
  .rc-j-campagnes-grille { grid-template-columns: minmax(0, 1fr); }
  .rc-j-campagnes-grille .rc-liste-nom { font-size: 14px; }
  .rc-j-campagnes-grille .rc-liste-geste { min-height: 44px; font-size: 14px; padding-inline: 12px; }
  .rc-j-campagnes-grille .rc-liste-pied { font-size: var(--text-sm); }
}

/* ══ Profil (26 septembre 2026) ═════════════════════════════════════════════
   « Mon compte » modifiable (maquette P-mon-compte-modifiable) et la photo
   qui remplace les initiales. Bloc délimité : d'autres chantiers ajoutent le
   leur en fin de fichier. */
.rc-pastille--photo { object-fit: cover; padding: 0; background: var(--muted); }
.rc-pastille--xl { width: 3.5em; height: 3.5em; font-size: var(--text-base); }
.rc-profil { max-width: 560px; gap: 16px; }
.rc-profil-formulaire { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.rc-profil-photo { display: flex; align-items: center; gap: 14px; }
.rc-profil-apercu { display: inline-flex; flex: 0 0 auto; }
.rc-profil-photo-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rc-profil-photo-corps b { font-size: 14px; font-weight: 500; }
.rc-profil-photo-corps small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-profil-photo-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-profil-choisir { position: relative; cursor: pointer; }
.rc-profil-choisir:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-profil-aide { margin-top: -8px; font-size: var(--text-xs); }
.rc-profil-envoi { display: flex; justify-content: flex-end; }
.rc-profil-portes { border-top: 1px solid var(--border); padding-top: 6px;
  display: flex; flex-direction: column; gap: 4px; }
.rc-profil-tel { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.rc-profil-tel:hover { color: var(--accent); }
/* Sous le doigt : 44 px, même seuil que le reste de l'écran (900 px). */
@media (max-width: 900px), (pointer: coarse) {
  .rc-profil-photo-gestes .btn { min-height: 44px; }
  .rc-profil .rc-porte { min-height: 44px; }
  .rc-profil-tel { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 480px) {
  .rc-profil-photo { align-items: flex-start; }
  .rc-profil-envoi .btn { width: 100%; }
}
/* ══ fin Profil ══════════════════════════════════════════════════════════ */

/* ══ Mon IA (26 septembre 2026) ═══════════════════════════════════════════════
   Maquettes 2 (« Mon IA ») et 3 (page d'accord), validées par Tevini le
   26 septembre 2026. Tout ce bloc est préfixé `ia-` et ne touche à rien
   d'autre. Les couleurs des logos sont celles des marques, et elles seules ne
   viennent pas de la charte : on reconnaît Claude et ChatGPT à leur couleur. */
.ia-logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 600; font-size: 15px; flex: none; color: #fff; }
.ia-logo--claude { background: #D97757; }
.ia-logo--chatgpt { background: #10A37F; }
.ia-logo--petit { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.ia-sections { display: flex; flex-direction: column; gap: 18px; }
.ia-rangee { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-top: 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.ia-rangee + .ia-rangee { margin-top: 10px; }
/* Trois cases depuis le 1er octobre 2026 (« Supprimer ») : le nom garde sa
   largeur, et les gestes passent à la ligne plutôt que de l'écraser. */
.ia-rangee { flex-wrap: wrap; }
.ia-nom { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1 1 200px; }
.ia-gestes { margin-left: auto; }
.ia-nom b { font-size: 15px; font-weight: 500; }
.ia-nom small { color: var(--muted-foreground); font-size: 13px; }
.ia-droits { display: flex; gap: 16px; align-items: center; margin: 0; font-size: 13.5px;
  color: var(--muted-foreground); }
.ia-case { display: inline-flex; gap: 7px; align-items: center; min-height: 32px; cursor: pointer; }
.ia-case input { accent-color: var(--accent); }
.ia-gestes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ia-couper { margin: 0; display: inline-flex; }
.ia-adresse { display: flex; gap: 8px; align-items: center; margin: 14px 0 18px; }
.ia-adresse code { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 10px; background: var(--background);
  border: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; user-select: all; }
.ia-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ia-mode { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; }
.ia-mode h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.ia-mode ol { margin: 0; padding-left: 20px; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.7; }
.ia-mode ol b { color: var(--foreground); font-weight: 500; }
.ia-mode + .ia-mode { margin: 0; }
.ia-rangee ~ .rc-r-aide, .ia-colonnes + .rc-r-aide { margin-top: 14px; }
.ia-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.ia-liste li { display: flex; gap: 9px; align-items: flex-start; }
.ia-liste li svg { flex: none; margin-top: 3px; }
.ia-oui svg { color: #3dd68c; }
.ia-non svg { color: #e5484d; }
.rc-r-reglage .ia-jamais { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 14px;
  font-size: 13.5px; color: var(--muted-foreground); }
/* La page d'accord : partie du gabarit de connexion. */
.ia-accord { gap: 18px; }
.ia-accord-tete { display: flex; flex-direction: column; gap: 10px; }
.ia-accord-titre { display: flex; gap: 12px; align-items: center; }
.ia-accord-sous { color: var(--muted-foreground); font-size: 15px; margin: 0; }
.ia-accord-formulaire { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.ia-bloc { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--card); }
.ia-bloc h2 { margin: 0; font-size: 14.5px; font-weight: 500; }
.ia-bascule { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
  background: var(--background); font-size: 14px; cursor: pointer; }
.ia-bascule input { margin-top: 3px; accent-color: var(--accent); flex: none; width: 18px; height: 18px; }
.ia-bascule-aide { display: block; color: var(--muted-foreground); font-size: 13.5px; margin-top: 2px; line-height: 1.55; }
.ia-bascule-aide b { color: var(--foreground); }
.ia-qui { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border); font-size: 14px; }
.ia-qui-nom { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ia-qui-nom b { overflow-wrap: anywhere; }
.ia-qui-nom small { color: var(--muted-foreground); overflow-wrap: anywhere; }
.ia-qui-changer { margin: 0 0 0 auto; flex: none; }
.rc-entree-cadre .ia-qui-changer button { width: auto; min-height: 32px; padding: 0; border: 0; background: none;
  color: var(--foreground); font: inherit; font-size: 13px; cursor: pointer; }
.rc-entree-cadre .ia-qui-changer button:hover { color: var(--accent); }
.ia-boutons { display: flex; gap: 10px; }
.ia-boutons .btn { flex: 1; justify-content: center; }
.ia-accord-pied { margin: 0; font-size: 12.5px; color: var(--muted-foreground); text-align: center; line-height: 1.55; }
@media (max-width: 900px) {
  .ia-colonnes, .rc-r-reglage .ia-jamais { grid-template-columns: 1fr; }
  .ia-rangee { flex-wrap: wrap; }
  .ia-droits, .ia-gestes { width: 100%; }
  .ia-adresse { flex-wrap: wrap; }
  .ia-adresse code { width: 100%; }
  .ia-adresse .btn { width: 100%; justify-content: center; }
}
@media (max-width: 900px), (pointer: coarse) {
  .ia-case, .ia-gestes .btn, .rc-entree-cadre .ia-qui-changer button { min-height: 44px; }
}
/* « Ce que votre IA a modifié » (maquette 2) : une rangée par écriture, la date,
   la phrase, puis « Annuler » ou son état. Barrée une fois annulée. */
.ia-journal { display: flex; flex-direction: column; margin-top: 14px; }
.ia-ecrit { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 4px; border-top: 1px solid var(--border); font-size: 13.5px; }
.ia-ecrit:first-child { border-top: 0; }
.ia-ecrit time { color: var(--muted-foreground); font-size: 12.5px; }
.ia-ecrit p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ia-ecrit p small { display: block; color: var(--muted-foreground); font-size: 12.5px; margin-top: 2px; }
.ia-ecrit--annulee p { opacity: .55; text-decoration: line-through; }
.ia-ecrit-gestes { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ia-annuler { margin: 0; display: inline-flex; }
.ia-journal-vide { margin-top: 14px; }
/* « Ouvrir dans mon IA » (maquettes 4 et 5) : un <details>, sans script. */
.ia-ouvrir { position: relative; display: inline-flex; }
.ia-ouvrir > summary { list-style: none; cursor: pointer; }
.ia-ouvrir > summary::-webkit-details-marker { display: none; }
.ia-ouvrir-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 330px;
  max-width: calc(100vw - 32px); padding: 8px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.ia-ouvrir--gauche .ia-ouvrir-menu { right: auto; left: 0; }
.ia-ouvrir-menu a { display: flex; align-items: center; gap: 12px; padding: 10px; min-height: 44px;
  border-radius: 8px; color: var(--foreground); text-decoration: none; font-size: 14px; }
.ia-ouvrir-menu a:hover, .ia-ouvrir-menu a:focus-visible { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 8%, transparent); }
.ia-ouvrir-menu a small { display: block; color: var(--muted-foreground); font-size: 12.5px; }
.ia-ouvrir-menu .ia-logo { width: 28px; height: 28px; font-size: 13px; }
.ia-ouvrir-menu p { margin: 6px 10px 4px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted-foreground); line-height: 1.5; white-space: normal; }
/* « Demander à mon IA » en bas du rail, au-dessus du profil (1er octobre 2026).
   ⚠️ Le menu est en `fixed` : le rail coupe ce qui dépasse (`overflow: hidden`)
   et il est plus étroit que le menu. Il s'ouvre donc À DROITE du rail, calé en
   bas, là où le regard est déjà. */
.ia-ouvrir--rail { display: flex; }
/* Même habit que « Traiter la tâche affichée » (`btn-primary`), demande de
   Tevini du 1er octobre 2026 : c'est un geste qu'on vient chercher. */
.rc-rail-ia { width: 100%; height: 36px; gap: 8px; list-style: none; white-space: nowrap; }
.rc-rail-ia::-webkit-details-marker { display: none; }
.ia-ouvrir--rail[open] .rc-rail-ia { background: color-mix(in srgb, var(--mmb-rouge) 28%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge) 50%, transparent); }
.rc-rail-ia svg { flex: none; }
.ia-ouvrir--rail .ia-ouvrir-menu { position: fixed; top: auto; right: auto;
  left: calc(var(--rail) + 8px); bottom: 72px; }
:root.rc-rail-replie .rc-rail-ia { padding-inline: 0; }
:root.rc-rail-replie .rc-rail-ia span { display: none; }
/* Dans la fiche, le bouton ne sert plus que sur téléphone, où le rail disparaît. */
@media (min-width: 901px) { .ia-ouvrir--page { display: none; } }
/* La page de confidentialité (brouillon) et son lien discret. */
.rc-entree-cadre.ia-confid { max-width: 40rem; gap: 20px; }
.ia-confid section h2 { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.ia-confid section p, .ia-confid section li { color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.ia-confid section p { margin: 0 0 8px; }
.ia-confid section ul { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ia-confid b { color: var(--foreground); font-weight: 500; }
.ia-confid-cle { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.ia-confidentialite { margin: 0; text-align: center; font-size: 12.5px; }
.ia-confidentialite a { color: var(--muted-foreground); }
.ia-confidentialite a:hover { color: var(--foreground); }
@media (max-width: 900px) {
  .ia-ecrit { grid-template-columns: minmax(0, 1fr) auto; }
  .ia-ecrit time { grid-column: 1 / -1; }
  /* Sous le doigt, le bouton passe à gauche de sa rangée : le menu s'ouvre
     vers la droite, sinon il sortirait de l'écran (vu à 390 px). */
  .ia-ouvrir-menu { right: auto; left: 0; }
}
@media (max-width: 900px), (pointer: coarse) {
  .ia-annuler .btn, .ia-ouvrir > summary.btn { min-height: 44px; }
  .ia-confidentialite a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ══ « Quand » : des raccourcis, puis la date et l'heure (26 septembre 2026) ══
   Les raccourcis (+2h … +1 mois) remplissent les deux champs dessous, qui
   restent visibles pour qu'on corrige. */
.rc-j-quand { margin-top: 8px; }
/* ══ fin « Quand » ═════════════════════════════════════════════════════════ */

/* ══ Fenêtre de tâche en deux colonnes (26 septembre 2026) ═══════════════════
   Chantier W, maquettes V1 à V5 et R-A, validées par Tevini. Depuis le 29
   septembre 2026, sur le modèle de la fenêtre épurée de Leverage : À GAUCHE
   la personne, À DROITE la tâche ; au téléphone (< 900 px) une colonne.
   ⚠️ Bloc placé EN FIN de fichier à dessein : il reprend des règles de la
   fenêtre RC-13 (plus haut) et doit passer après elles. */
dialog.rc-modale-tache.rc-w { width: min(1320px, calc(100vw - 48px)); }
.rc-w .rc-modale-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  grid-template-rows: minmax(0, 1fr); overflow: hidden; }
/* Chaque colonne défile pour elle-même (29 septembre 2026) : modifier une
   action en bas de la tâche ne fait plus sortir la personne de l'écran. */
.rc-w .rc-modale-gauche, .rc-w .rc-modale-droite { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.rc-w .rc-modale-gauche { background: rgba(255, 255, 255, .012); gap: 22px; }
.rc-w .rc-modale-droite { background: none; gap: 24px; padding-left: 32px; padding-right: 32px; }
.rc-w .rc-modale-zone { gap: 10px; }
/* Les titres de zone : petites capitales discrètes (maquette V1). */
.rc-w-titre { margin: 0; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-foreground); }
.rc-w .rc-notes-tete, .rc-w .rc-j-actions-tete { display: flex; align-items: center; gap: 10px; }
.rc-w .rc-notes-tete .rc-copier { margin-left: auto; }

/* La tâche : le titre en grand, puis quand et la tentative sur une ligne. */
.rc-w .rc-zone-titre { gap: 8px; }
.rc-w .rc-zone-titre .rc-panneau-tache-titre { margin: 0; font-size: var(--text-xl); line-height: var(--leading-tight); }
.rc-w-quand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--text-sm); }
.rc-w-echeance { color: var(--muted-foreground); }
.rc-w-echeance--retard { color: var(--error); font-weight: 500; }
/* « RDV » au bout des canaux, dans leur forme, teinté de l'accent. */
.rc-w-rdv-bouton { color: var(--accent); }
.rc-w-rdv-bouton[aria-pressed="true"] { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.rc-w-canaux > .rc-infobulle { align-self: center; }

/* Contacter : « Appeler » et les canaux sur une ligne qui passe à la suivante. */
.rc-w-canaux { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.rc-w-canaux .rc-appel { flex: 0 1 auto; }
.rc-w-canaux .rc-j-appeler { width: auto; padding: 0 16px; min-height: 44px; position: relative; }
/* Déjà appelé : la coche verte, AVANT le mot (V2), sans recouvrir le numéro. */
.rc-w-canaux .rc-j-appeler .rc-j-coche--appel { position: static; transform: none; order: -1; }
.rc-w-canaux .rc-j-ecrire { display: contents; }
/* Les notes de la tâche : un brouillon, pas une page (V1) — le téléphone
   garde sa zone haute, plus bas. */
.rc-w textarea.rc-saisie.rc-notes-zone { min-height: 88px; }
.rc-w-canaux .rc-j-ecrire a, .rc-w-canaux .rc-j-ecrire .rc-reseau { flex: 0 0 auto; min-height: 44px; padding: 0 14px; }

/* Clore : les quatre issues sur une ligne, le nom seul, centré (29 septembre
   2026 : plus de petit texte dessous, demande de Tevini). */
.rc-w .rc-j-issues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-w .rc-j-issue { min-height: 44px; padding-top: 0; padding-bottom: 0; align-items: center; justify-content: center; }

/* Planifier un RDV : un encadré en haut de la colonne de gauche (V5). */
.rc-w-rdv { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 5%, transparent); }
.rc-w-rdv-tete { display: flex; align-items: center; gap: 10px; }
.rc-w-rdv-titre { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 500; }
.rc-w-rdv-fermer { margin-left: auto; font-size: var(--text-xs); color: var(--muted-foreground); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.rc-w-rdv-fermer:hover { color: var(--foreground); }
.rc-w-rdv .rc-j-etiquette { margin: 0; }
.rc-w-rdv-duree { max-width: 220px; }
/* La personne choisie tient dans la largeur, son adresse s'abrège. */
.rc-w-rdv .rc-r-puces { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.rc-w-rdv .rc-r-puce { max-width: 100%; min-width: 0; }
.rc-w-rdv .rc-r-puce-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* La personne : sa carte. */
.rc-w-carte { border: 0; background: none; padding: 0; }
.rc-w-carte .rc-j-personne-nom { font-size: var(--text-lg); }
.rc-w-carte .rc-j-personne-liens { gap: 4px 14px; }
.rc-w-carte .rc-j-personne-liens > span { padding: 0; border: 0; background: none; color: var(--muted-foreground); }
.rc-w-carte .rc-pastille { width: 44px; height: 44px; }
.rc-w-nom-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* « Dans ses campagnes » : le statut en un clic (R-A). */
.rc-w-campagnes { display: flex; flex-direction: column; gap: 8px; }
.rc-w-camp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-w-camp .rc-sc-nom { font-size: var(--text-sm); overflow-wrap: anywhere; }
/* Les statuts dans un rail, comme la barre d'étapes de Leverage. */
.rc-w-camp .rc-sc-statuts { gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: var(--background); }
.rc-w-camp .rc-sc-statut { border-color: transparent; padding: 6px 12px; }

/* La note de la tâche, repliée : un lien discret qui l'ouvre. */
.rc-w-notes > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 32px; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-w-notes > summary::-webkit-details-marker { display: none; }
.rc-w-notes > summary:hover { color: var(--foreground); }
.rc-w-notes[open] > summary { display: none; }

/* La note sur la personne : un vrai champ, le bouton dessous (29 septembre 2026). */
.rc-w-note { flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--card); }
.rc-w-note:focus-within { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.rc-w-note textarea.rc-saisie { border: 0; background: none; padding: 2px 4px; resize: none; min-height: 44px;
  box-shadow: none; outline: none; }
.rc-w-note-pied { display: flex; align-items: center; gap: 10px; }
.rc-w-note-pied small { flex: 1; min-width: 0; font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-w-note-pied .btn { display: inline-flex; align-items: center; gap: 6px; }
.rc-w-note-pied .btn:disabled { opacity: .45; cursor: default; }
.rc-w-note-ok { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--success); }

/* Activité : les filtres en liens, puis le fil. */
.rc-w .rc-zone-activite .rc-j-histo { margin: 0; padding: 0; border: 0; gap: 10px; }
.rc-w-filtres { flex: none; flex-wrap: wrap; overflow: visible; }
.rc-w-filtres .rc-vue { font-size: var(--text-xs); }

/* ── Jusqu'à 900 px : une colonne ──
   L'ordre du téléphone : la personne (compacte), Contacter, (le RDV), les
   actions, Clore, les notes, puis le reste de la colonne de droite. */
@media (max-width: 900px) {
  .rc-w .rc-modale-corps { display: flex; flex-direction: column; gap: 22px; padding: 16px 16px 24px; overflow-y: auto; }
  .rc-w .rc-modale-gauche, .rc-w .rc-modale-droite { display: contents; }
  .rc-w .rc-zone-description { order: 3; }
  .rc-w .rc-zone-titre { order: 0; } .rc-w .rc-zone-personne { order: 1; } .rc-w .rc-zone-campagnes { order: 2; }
  .rc-w .rc-zone-agir { order: 3; } .rc-w .rc-zone-rdv { order: 4; } .rc-w .rc-zone-actions { order: 5; }
  .rc-w .rc-zone-clore { order: 6; } .rc-w .rc-zone-poser { order: 7; } .rc-w .rc-zone-activite { order: 9; }
  .rc-w textarea.rc-saisie.rc-notes-zone { min-height: 160px; }
  .rc-w-carte .rc-pastille { width: 36px; height: 36px; }
  .rc-w .rc-j-issues { grid-template-columns: 1fr 1fr; }
  .rc-w-rdv-bouton, .rc-w-rdv-fermer, .rc-w-filtres .rc-vue, .rc-w-notes > summary { min-height: 44px; }
  .rc-w-rdv .rc-saisie { font-size: 16px; min-height: 44px; }
  .rc-w-camp .rc-sc-nom { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Au téléphone, la feuille plein écran de RC-13 (plus haut), que la largeur
   de l'ordinateur ci-dessus écraserait. */
@media (max-width: 700px) {
  dialog.rc-modale-tache.rc-w { width: 100vw; }
}
@media (max-width: 480px) {
  .rc-w-canaux .rc-appel { flex: 1 1 100%; }
  .rc-w-canaux .rc-j-ecrire a, .rc-w-canaux .rc-j-ecrire .rc-reseau { flex: 1 1 calc(50% - 4px); justify-content: center; }
}
/* ══ fin Fenêtre de tâche en deux colonnes ═══════════════════════════════════ */

/* ══ Ne plus contacter (26 septembre 2026) ═════════════════════════════════
   L'état d'une personne hors de la fenêtre d'une tâche (maquettes F1 à F4) :
   la pastille près du nom, le bandeau rouge, le geste qui le pose, et le
   numéro barré d'un « Faux numéro ». Les couleurs sont celles de la charte
   (`--error`, `--success`) : un état, pas une identité. */
.rc-npc { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 2px 9px 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
  font-size: var(--text-xs); font-weight: 500; line-height: 1.5;
  color: var(--error); background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.35); }
.rc-npc i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* Dans le tableau d'une campagne, un point rouge à côté du rang : la colonne
   « Ce qui attend » porte la pastille, mais elle est loin à droite. */
.rc-npc-point { display: inline-block; width: 7px; height: 7px; margin-left: 5px; vertical-align: middle;
  border-radius: 50%; background: var(--error); box-shadow: 0 0 0 3px rgba(248,113,113,.18); }
.rc-npc--ok { color: var(--success); background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.30); }
.rc-fiche-identite .rc-npc { display: flex; width: fit-content; margin-top: 6px; }
.rc-npc-bandeau { flex-wrap: wrap; margin-bottom: 14px; }
.rc-npc-bandeau p { flex: 1 1 16rem; min-width: 0; }
.rc-npc-bandeau b { color: var(--error); font-weight: 600; }
.rc-npc-bandeau form { margin: 0; }
.rc-npc-retirer { border: 1px solid var(--border); background: var(--card); color: var(--foreground);
  border-radius: var(--radius-md); padding: 5px 12px; font: inherit; font-size: var(--text-sm);
  cursor: pointer; white-space: nowrap; }
.rc-npc-retirer:hover, .rc-npc-retirer:focus-visible { border-color: var(--muted-foreground); }
.rc-npc-poser { margin: 8px 0 6px; }
.rc-npc-poser > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; font-size: var(--text-sm); color: var(--error); padding: 4px 0; }
.rc-npc-poser > summary::-webkit-details-marker { display: none; }
.rc-npc-poser form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
  padding: 12px; border: 1px solid rgba(248,113,113,.30); border-radius: var(--radius-md); }
.rc-npc-poser fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-npc-poser legend { font-size: var(--text-sm); color: var(--muted-foreground); margin-bottom: 4px; }
.rc-npc-motif { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.rc-npc-poser .btn { align-self: flex-start; }
.rc-npc-faux { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 0;
  font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-npc-faux span { flex: 1 1 12rem; min-width: 0; }
.rc-canal-val--faux s { color: var(--error); text-decoration-thickness: 1px; }
.rc-canal-etiq--faux { color: var(--error); border-color: rgba(248,113,113,.35); }
@media (max-width: 900px), (pointer: coarse) {
  .rc-npc-retirer, .rc-npc-poser > summary, .rc-npc-motif { min-height: 44px; }
}
/* ══ fin Ne plus contacter ═════════════════════════════════════════════════ */

/* ══ Ne plus contacter et propositions, DANS la fenêtre d'une tâche (chantier P,
   maquettes F1 à F4). Le bandeau sous l'en-tête, la pastille d'état et son
   menu, les boutons éteints, le numéro barré, l'encadré « mettre à jour ? ». */
.rc-w-npc { margin: 14px 0 0; }
.rc-w-npc-reunions { color: var(--foreground); font-weight: 500; }
.rc-w-etat { position: relative; display: inline-block; }
.rc-w-etat > summary { list-style: none; cursor: pointer; display: inline-flex; border-radius: var(--radius-pill); }
.rc-w-etat > summary::-webkit-details-marker { display: none; }
.rc-w-etat > summary .rc-npc::after { content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; }
.rc-w-etat-menu { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: min(320px, 78vw);
  display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-md);
  background: var(--card); border: 1px solid var(--border-strong); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.rc-w-etat-menu form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.rc-w-etat-menu fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-w-etat-menu legend { font-size: var(--text-sm); font-weight: 550; margin-bottom: 6px; }
.rc-w-etat-menu .btn { align-self: flex-start; }
.rc-w-eteints { display: flex; flex-wrap: wrap; gap: 8px; opacity: .45; }
.rc-w-eteint { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-sm); cursor: not-allowed; }
.rc-w-eteint i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rc-w-faux { color: var(--error); display: inline-flex; align-items: center; gap: 5px; }
.rc-w-faux s, .rc-j-coord s { text-decoration-thickness: 1px; color: var(--error); }
.rc-w-faux-phrase { grid-column: 2 / -1; margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.45; }
.rc-w-neveut-case { width: fit-content; padding: 6px 12px; border: 1px solid rgba(248,113,113,.40);
  border-radius: var(--radius-md); }
.rc-w-prop { display: flex; flex-direction: column; gap: 0; margin: 12px 0 0; padding: 4px 16px 14px;
  border: 1px solid rgba(248,113,113,.40); border-radius: var(--radius-md); background: rgba(248,113,113,.05); }
.rc-w-prop-titre { margin: 0; padding: 12px 0; font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.rc-w-prop-titre b { color: var(--error); font-weight: 600; }
.rc-w-prop-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.rc-w-prop-ligne--retrait { opacity: .75; }
.rc-w-prop-quoi { display: flex; flex-direction: column; gap: 2px; flex: 1 1 14rem; min-width: 0; font-size: var(--text-sm); }
.rc-w-prop-quoi small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-w-prop-agir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-w-prop-agir select { width: auto; max-width: 15rem; }
.rc-w-prop-agir .rc-w-prop-npc select { max-width: 24rem; }
.rc-w-prop-npc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--error); }
.rc-w-prop-fait { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--success); }
.rc-w-prop-boutons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
@media (max-width: 700px) {
  .rc-w-prop-agir, .rc-w-prop-agir select { width: 100%; max-width: none; }
  .rc-w-prop-npc { flex-wrap: wrap; width: 100%; }
  .rc-w-prop-agir .btn, .rc-w-prop-boutons .btn { flex: 1 1 auto; }
  .rc-w-etat-menu { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
}
@media (max-width: 900px), (pointer: coarse) {
  .rc-w-etat > summary, .rc-w-neveut-case { min-height: 44px; align-items: center; }
  /* La barre « Appeler · SMS · … » de la fiche : 40 px l'emportaient sur le
     repli tactile (deux classes contre une). Vu par l'audit sur une fiche
     sans réseau, chantier P. */
  .rc-j-fiche-actions .rc-j-appeler, .rc-j-fiche-actions .rc-j-ecrire a { min-height: 44px; }
}
/* La fiche : le numéro faux se lit EN ENTIER (il se réduisait à « θ… »), et
   « Ne plus contacter… » est un geste discret, pas un état. */
.rc-canal-val--faux { flex-wrap: wrap; justify-content: flex-end; }
.rc-canal-val--faux .rc-canal-texte { flex: none; overflow: visible; text-overflow: clip; }
.rc-canal-vals > summary:has(.rc-canal-val--faux) { flex-wrap: wrap; justify-content: flex-end; }
.rc-npc-poser > summary.rc-geste { color: var(--muted-foreground); font-size: var(--text-sm); padding: 6px 12px; }
.rc-npc-poser > summary.rc-geste:hover, .rc-npc-poser[open] > summary.rc-geste { color: var(--foreground); border-color: var(--border-strong); }
/* ══ fin Ne plus contacter dans la fenêtre ═════════════════════════════════ */

/* ══ Sélecteur de créneaux et Envoyer depuis ═══════════════════════════════
   Maquettes A (un jour, puis une heure) et C (« Envoyer l'invitation
   depuis »), validées par Tevini le 27 septembre 2026. Balisage :
   `_creneaux.html` ; script : `_creneaux.js`.
   ⚠️ Les puces de durée SONT le champ `duree` (radios) ; les jours et les
   heures sont des boutons dessinés par le script. Sous 768 px, chaque cible
   fait au moins 44 px, et la bande des jours défile sous le doigt. */
.rc-crn { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02); border: 1px solid var(--border); min-width: 0; }
.rc-crn-etiq { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 4px 0;
  font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.rc-crn-etiq small { text-transform: none; letter-spacing: 0; font-size: var(--text-xs); }
.rc-crn-etiq[hidden] { display: none; }
.rc-crn-durees { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.rc-crn-puce { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--background);
  font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.rc-crn-puce:hover { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }
.rc-crn-puce:has(.rc-j-radio:checked) { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 55%, transparent);
  color: var(--accent); font-weight: 500; }
.rc-crn-puce:has(.rc-j-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-crn-choix { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rc-crn-choix[hidden] { display: none; }
.rc-crn-etat { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-crn-etat:empty, .rc-crn-etat[hidden] { display: none; }
.rc-crn-etat--alerte { color: var(--warning-text); }
[data-creneaux][aria-busy="true"] .rc-crn-jours,
[data-creneaux][aria-busy="true"] .rc-crn-heures { opacity: .45; }
.rc-crn-jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; }
.rc-crn-jours:empty { display: none; }
.rc-crn-jour { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 4px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--background);
  color: var(--foreground); font-family: inherit; font-size: var(--text-xs); cursor: pointer; scroll-snap-align: start; }
.rc-crn-jour b { font-size: var(--text-lg); font-weight: 500; line-height: 1.15; }
.rc-crn-jour small { font-size: var(--text-2xs); color: var(--success); white-space: nowrap; }
.rc-crn-jour:hover:not(:disabled) { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }
.rc-crn-jour[aria-pressed="true"] { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 60%, transparent); color: var(--accent); }
.rc-crn-jour[aria-pressed="true"] small { color: var(--accent); }
.rc-crn-jour--complet { opacity: .45; cursor: default; }
.rc-crn-jour--complet small { color: var(--muted-foreground); }
.rc-crn-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.rc-crn-heures:empty { display: none; }
.rc-crn-heure { min-height: 38px; border-radius: var(--radius-lg); border: 1px solid rgba(74,222,128,.35);
  background: rgba(74,222,128,.06); color: var(--foreground); font-family: inherit; font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; cursor: pointer; }
.rc-crn-heure:hover { border-color: rgba(74,222,128,.6); }
.rc-crn-heure[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.rc-crn-jour:focus-visible, .rc-crn-heure:focus-visible, .rc-crn-autre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-crn-choisi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; padding: 10px 14px;
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 8%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent);
  font-size: var(--text-sm); }
.rc-crn-choisi b { font-weight: 500; }
.rc-crn-choisi[hidden] { display: none; }
.rc-crn-fuseau { color: var(--muted-foreground); }
.rc-crn-source, .rc-crn-google { margin: 4px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.7;
  overflow-wrap: anywhere; }
.rc-crn-source a, .rc-crn-google a, .rc-crn-autre { color: var(--accent); text-decoration: none; }
.rc-crn-source a:hover, .rc-crn-google a:hover, .rc-crn-autre:hover { text-decoration: underline; }
.rc-crn-autre { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.rc-crn-source [hidden], .rc-crn-source[hidden], .rc-crn-google[hidden] { display: none; }
.rc-crn-repli { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.rc-crn-repli[hidden] { display: none; }

/* « Envoyer l'invitation depuis » */
.rc-env { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: rgba(255,255,255,.02); font-size: var(--text-sm); min-width: 0; }
.rc-env-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.rc-env-g { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-md); flex: none;
  background: #fff; color: #4285f4; font-style: normal; font-weight: 700; font-size: 13px; }
.rc-env-etiq { white-space: nowrap; }
.rc-env .rc-env-choix { width: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: var(--text-sm); }
.rc-env-autre { font-size: var(--text-xs); color: var(--muted-foreground); text-decoration: none; }
.rc-env-autre:hover { color: var(--accent); }
.rc-env-case { color: var(--foreground); }
.rc-env-aide { margin: -4px 0 0 27px; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-env--aucun .rc-env-case { opacity: .45; cursor: default; }
.rc-env--aucun .rc-env-aide { display: none; }
.rc-r-meet--eteint { opacity: .45; cursor: default; }

@media (max-width: 767px) {
  .rc-crn { padding: 12px; }
  .rc-crn-puce, .rc-crn-heure, .rc-crn-autre, .rc-env-autre { min-height: 44px; }
  .rc-crn-autre, .rc-env-autre { display: inline-flex; align-items: center; }
  .rc-crn-jour { width: 76px; min-height: 64px; }
  .rc-crn-heures { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .rc-crn-source a { display: inline-flex; align-items: center; min-height: 44px; }
  .rc-env .rc-env-choix { flex: 1 1 100%; width: 100%; min-height: 44px; }
  .rc-env-case { min-height: 44px; }
  .rc-env-aide { margin-left: 0; }
}
/* ══ fin Sélecteur de créneaux et Envoyer depuis ═══════════════════════════ */

/* ── Rendez-vous (`/user/rendez-vous`, maquette du 27 septembre 2026) ─────
   Les lignes de la colonne du dashboard, en pleine largeur : « Compléter »
   reprend sa place à droite, au lieu de passer dessous. */
.rc-rdv-onglets { margin: 14px 0 4px; }
.rc-rdv { max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.rc-rdv-section { margin-top: 18px; }
.rc-rdv-jour { margin: 14px 0 0; font-size: var(--text-xs); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-foreground); }
.rc-rdv-jour b { color: var(--foreground); font-weight: 500; }
@media (min-width: 640px) {
  .rc-rdv .rc-j-reunion .rc-j-completer { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 0; }
}
/* « Tous les rendez-vous › » ferme la colonne du dashboard : l'en-tête, avec
   « + Réunion », n'a pas la place d'un troisième élément. */
.rc-j-tous-rdv { align-self: flex-end; margin-top: 4px; }

/* « Planifier un RDV » : sa propre fenêtre, par-dessus la tâche (28 septembre
   2026). Le formulaire perd l'encadré qu'il portait DANS la tâche. */
.rc-w-rdv-fenetre .rc-w-rdv { padding: 0; border: 0; background: none; }
.rc-w-rdv-fenetre .rc-w-rdv-titre { font-size: var(--text-lg); font-weight: 600; }
.rc-w-rdv-fenetre .rc-w-rdv-tete .rc-j-fermer { margin-left: auto; }

/* ── Les canaux qui manquent (28-29 septembre 2026) : un bouton discret au
   bout de la rangée « Contacter », qui déroule la liste et le champ. ───── */
.rc-manquants { position: relative; display: inline-flex; margin: 0; }
.rc-manque-menu > summary { list-style: none; }
.rc-manque-menu > summary::-webkit-details-marker { display: none; }
.rc-manque-bouton { display: inline-flex; align-items: center; gap: 5px; height: 100%; min-height: 36px;
  padding: 0 12px; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap;
  border: 1px dashed rgba(245, 244, 240, .18); color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-manque-bouton:hover, .rc-manque-menu[open] > .rc-manque-bouton { color: var(--foreground);
  border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 50%, transparent); }
.rc-manque-bouton svg:last-child { transform: rotate(90deg); opacity: .7; }
.rc-manque-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(320px, 86vw);
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong); background: #111219; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.rc-manquants-titre { margin: 2px 4px 0; font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground); }
.rc-manque-liste { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.rc-manque { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--text-sm); color: var(--foreground); }
.rc-manque:hover { background: rgba(255, 255, 255, .05); }
.rc-manque .rc-j-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rc-manque:has(:checked) { color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); }
.rc-manque:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.rc-manque-saisie { display: none; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.rc-manquants:has(input[name="canal"]:checked) .rc-manque-saisie { display: flex; }
.rc-manque-dit { display: none; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-manque-ligne { display: flex; gap: 8px; }
.rc-manque-ligne .rc-saisie { flex: 1; min-width: 0; }
.rc-manque-aide { font-size: var(--text-2xs); color: var(--muted-foreground); }
@media (max-width: 900px) {
  .rc-manque-bouton, .rc-manque { min-height: 44px; }
  .rc-manque-ligne .rc-saisie { font-size: 16px; min-height: 44px; }
}

/* ── La prospection (maquettes P1 à P3, 28 septembre 2026) ─────────────────
   La file du dashboard, la fenêtre « Envoyer l'accroche », le fil d'une
   personne. Tout part des couleurs de la charte ; les canaux gardent les leurs. */
.rc-j-filtre--telegram i { color: #7fd0f5; } .rc-j-filtre--discord i { color: var(--mmb-rouge-lumineux); }
.rc-j-filtre--tiktok i { color: #f5f4f0; }
.rc-pro-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px 0;
  font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-pro-releve { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: var(--radius-pill);
  color: var(--success); border: 1px solid rgba(74, 222, 128, .25); background: rgba(74, 222, 128, .06); }
.rc-pro-releve i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rc-pro-releve--vieille { color: var(--warning-text); border-color: rgba(251, 191, 36, .3);
  background: rgba(251, 191, 36, .06); }
.rc-pro-envoyes b { font-weight: 500; color: var(--foreground); margin-left: 8px; }
.rc-pro-files { padding: 8px 12px 0; flex-wrap: wrap; }
.rc-pro-signal { display: block; font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-pro-apercu { display: block; font-size: var(--text-sm); margin-top: 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rc-pro-apercu i { font-style: normal; color: var(--disabled-foreground); }
.rc-pro-age { display: block; color: var(--muted-foreground); }
.rc-pro-age--tiede, .rc-pro-age--froid { color: var(--warning-text); }

/* La fenêtre (P2) */
.rc-pro { display: flex; flex-direction: column; gap: 14px; }
.rc-pro-pourquoi { padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--card); }
.rc-pro-pourquoi p { margin: 6px 0 0; font-size: var(--text-sm); color: var(--muted-foreground); white-space: pre-line; }
.rc-pro-forme { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.rc-pro-texte { min-height: 170px; font-size: var(--text-base); line-height: 1.55; resize: vertical;
  border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 30%, transparent); }
.rc-pro-retouche { font-size: var(--text-2xs); color: var(--muted-foreground); margin-left: auto; }
.rc-pro-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-pro-ouvrir { flex: 1; min-width: 220px; justify-content: center; font-weight: 600; color: var(--accent-hi);
  background: color-mix(in srgb, var(--mmb-rouge) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 30%, transparent); }
.rc-pro-ouvrir:hover { background: color-mix(in srgb, var(--mmb-rouge) 22%, transparent); }
.rc-pro-avec { font-weight: 400; color: var(--muted-foreground); }
.rc-pro-apres { margin-top: 6px; }
.rc-pro-envoye, .rc-pro-choix { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%;
  text-align: left; padding: 12px 14px; border-radius: var(--radius-lg); cursor: pointer; font: inherit;
  color: var(--foreground); border: 1px solid var(--border); background: var(--card); }
.rc-pro-envoye { border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .07); }
.rc-pro-envoye:hover { background: rgba(74, 222, 128, .12); }
.rc-pro-choix:hover { border-color: var(--border-strong); }
.rc-pro-envoye b, .rc-pro-choix b { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); }
.rc-pro-envoye b i, .rc-pro-choix b i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.rc-pro-choix b i.rc-pro-gris { background: var(--muted-foreground); }
.rc-pro-choix b i.rc-pro-bleu { background: var(--info); }
.rc-pro-envoye span, .rc-pro-choix span { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-pro-autres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-pro-autres form { margin: 0; }

/* La bascule « J'écris / X m'a écrit » (fenêtre d'un échange). ⚠️ Le fil P3 avait repris
   le nom `.rc-fil`, qui est celui du FIL D'ARIANE : les titres de page s'empilaient. */
.rc-fil-bascule { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.rc-fil-bascule label { padding: 8px 10px; font-size: var(--text-sm); color: var(--muted-foreground); cursor: pointer; }
.rc-fil-bascule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-fil-bascule label:has(:checked) { background: var(--muted); color: var(--foreground); }
.rc-fil-bascule label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 900px) {
  .rc-pro-autres { grid-template-columns: 1fr; }
  .rc-pro-outils > * { flex: 1 1 100%; min-width: 0; }
  .rc-pro-ouvrir { white-space: normal; flex-wrap: wrap; min-height: 48px; }
  .rc-pro-avec { flex-basis: 100%; text-align: center; font-size: var(--text-xs); }
  .rc-pro-texte { font-size: 16px; }
  .rc-fil-bascule label { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Le modèle de départ d'une campagne (lot 3) : deux cartes, un choix. */
.rc-modeles { border: 0; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-modele { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.rc-modele input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-modele b { font-size: var(--text-base); }
.rc-modele span { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.45; }
.rc-modele:has(:checked) { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 55%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent); }
.rc-modele:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .rc-modeles { grid-template-columns: 1fr; } }
.pz-briques { display: flex; flex-direction: column; gap: 10px; }
.rc-brique { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.rc-brique input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.rc-brique span { display: flex; flex-direction: column; gap: 2px; }
.rc-brique small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-brique:has(:checked) { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }

/* Le pipeline (lot 3) : les statuts en colonnes, qui défilent dans leur bande. */
.rc-pipe { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.rc-pipe-bilan { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--text-xs); }
.rc-pipe-alerte { color: var(--warning-text); padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .06); }
.rc-pipe-calme { color: var(--muted-foreground); padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.rc-pipe-colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px;
  overflow-x: auto; padding-bottom: 6px; }
.rc-pipe-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--border); align-self: start; }
.rc-pipe-col--abouti { border-color: rgba(74, 222, 128, .3); }
.rc-pipe-col--clos { opacity: .8; }
.rc-pipe-tete { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm);
  font-weight: 600; padding: 2px 4px 6px; }
.rc-pipe-tete b { font-weight: 600; font-size: var(--text-xs); color: var(--muted-foreground); background: var(--muted);
  padding: 1px 8px; border-radius: var(--radius-pill); }
.rc-pipe-carte { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px;
  background: var(--muted); border: 1px solid var(--border); text-decoration: none; color: var(--foreground); }
.rc-pipe-carte:hover { border-color: var(--border-strong); }
.rc-pipe-nom { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-pipe-action { font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-pipe-action--retard { color: var(--warning-text); }
.rc-pipe-action--vide { color: var(--disabled-foreground); font-style: italic; }
.rc-pipe-plus { font-size: var(--text-xs); color: var(--accent); padding: 4px; }
.rc-pipe-sources { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); }
.rc-pipe-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: 8px; }
.rc-pipe-table th { text-align: left; font-weight: 500; font-size: var(--text-2xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-foreground); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rc-pipe-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.rc-pipe-table td:not(:first-child), .rc-pipe-table th:not(:first-child) { text-align: right; }
@media (max-width: 900px) { .rc-pipe-colonnes { grid-auto-columns: 78%; } }

/* Les liens de rendez-vous (lot 4). */
.rdv-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
/* La liste des liens et la création (1er octobre 2026), même bloc partout. */
.rdv-liens { display: flex; flex-direction: column; gap: 10px; }
.rdv-etapes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rdv-etapes li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--muted-foreground);
  line-height: 1.45; padding: 12px; border-radius: var(--radius-lg); background: var(--accent-wash); border: 1px solid var(--border); }
.rdv-etapes li span { flex: none; display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center;
  justify-content: center; font-size: var(--text-xs); font-weight: 600; color: var(--accent-hi);
  background: var(--accent-ring); border: 1px solid var(--accent-ring-strong); }
.rdv-lien, .rdv-vide { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--card); }
.rdv-lien:hover { border-color: var(--accent-ring-strong); }
.rdv-lien-icone { flex: none; display: inline-flex; width: 40px; height: 40px; border-radius: 10px; align-items: center;
  justify-content: center; color: var(--accent); background: var(--accent-ring); }
.rdv-lien-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rdv-lien-texte b { font-weight: 500; font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv-lien-texte span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--muted-foreground); }
.rdv-etat { font-size: var(--text-xs); padding: 3px 10px; border-radius: var(--radius-pill); color: var(--success);
  background: rgba(74, 222, 128, .08); border: 1px solid rgba(74, 222, 128, .22); }
.rdv-lien--pause .rdv-etat { color: var(--muted-foreground); background: transparent; border-color: var(--border); }
.rdv-lien--pause .rdv-lien-icone { color: var(--muted-foreground); background: rgba(255, 255, 255, .04); }
.rdv-vide p { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.rdv-vide b { color: var(--foreground); font-weight: 500; }
.rdv-nouveau { margin-top: 6px; padding: 16px; border-radius: var(--radius-lg); border: 1px dashed var(--accent-ring-strong);
  background: var(--accent-wash); display: flex; flex-direction: column; gap: 10px; }
.rdv-nouveau h3 { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--accent-hi); }
.rdv-nouveau-champs { display: grid; grid-template-columns: 1fr 140px auto; gap: 12px; align-items: end; }
.rdv-nouveau .rc-champ { margin: 0; }
.rdv-nouveau .rc-aide { margin: 0; }
.rdv-nouveau-champs .btn { min-height: 44px; }
@media (max-width: 760px) {
  .rdv-etapes { grid-template-columns: 1fr; }
  .rdv-nouveau-champs { grid-template-columns: 1fr 1fr; }
  .rdv-nouveau-titre { grid-column: 1 / -1; }
  .rdv-lien { flex-wrap: wrap; }
  .rdv-lien-texte { flex-basis: calc(100% - 54px); }
  .rdv-lien .rdv-etat { margin-left: 54px; }
  .rdv-lien .btn { margin-left: auto; min-height: 44px; }
}
/* Régler un lien (refaite le 1er octobre 2026) : cinq sections numérotées,
   dans l'ordre où l'on se pose les questions. */
.rdv-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rdv-tete .rc-titre-page { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rdv-tete .rdv-etat { font-size: var(--text-xs); font-weight: 500; }
.rdv-etat--pause { color: var(--muted-foreground); background: transparent; border-color: var(--border); }
.rdv-reglage { display: flex; flex-direction: column; gap: 14px; }
.rdv-section { display: flex; flex-direction: column; gap: 14px; }
.rdv-section .rc-champ, .rdv-section .rc-aide { margin: 0; }
.rdv-section-titre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--text-base); font-weight: 600; }
.rdv-section-titre > span { flex: none; display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center;
  justify-content: center; font-size: var(--text-xs); color: var(--accent-hi); background: var(--accent-ring);
  border: 1px solid var(--accent-ring-strong); }
.rdv-section-titre em { font-style: normal; font-weight: 400; font-size: var(--text-sm); color: var(--muted-foreground); }
.rdv-groupe { border: 0; padding: 0; margin: 0; }
.rdv-groupe legend { font-size: var(--text-sm); font-weight: 500; margin-bottom: 8px; padding: 0; }
.rdv-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv-pastille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rdv-pastille span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--border); font-size: var(--text-sm); font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s; }
.rdv-pastille span:hover { border-color: var(--accent-ring-strong); }
.rdv-pastille input:checked + span { color: var(--accent-hi); border-color: var(--accent-ring-strong); background: var(--accent-ring); font-weight: 500; }
.rdv-pastille input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.rdv-bascule { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); cursor: pointer; }
.rdv-bascule:has(input:checked) { border-color: var(--accent-ring-strong); background: var(--accent-wash); }
.rdv-bascule input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
.rdv-bascule-texte { display: flex; flex-direction: column; gap: 2px; }
.rdv-bascule-texte b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--text-sm); }
.rdv-bascule-texte small { font-size: var(--text-xs); color: var(--muted-foreground); }
.rdv-alerte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--muted-foreground);
  padding: 10px 12px; border-radius: var(--radius-md); border: 1px dashed var(--border-strong); }
.rdv-horaires { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  font-size: var(--text-sm); color: var(--muted-foreground); padding: 10px 12px; border-radius: var(--radius-md); background: var(--accent-wash); }
.rdv-horaires > span svg { vertical-align: -2px; margin-right: 4px; }
.rdv-horaires b { color: var(--foreground); font-weight: 500; }
.rdv-court { max-width: 320px; }
.rdv-large { grid-column: 1 / -1; }
.rdv-case { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); }
.rdv-case input { width: 18px; height: 18px; accent-color: var(--primary); }
.rdv-questions { display: flex; flex-direction: column; gap: 10px; }
.rdv-question { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rdv-question .rc-champ { margin: 0; }
.rdv-question--vide { border-style: dashed; }
/* « Choix proposés » seulement pour un choix ; une seule question vide à la fois. */
.rdv-options { display: none; }
.rdv-question:has(select[name$="_type"] option[value^="choix"]:checked) .rdv-options { display: flex; }
.rdv-question--vide:has(input[name$="_libelle"]:placeholder-shown) ~ .rdv-question--vide { display: none; }
.rdv-enregistrer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 12px 0;
  background: linear-gradient(to top, var(--background) 70%, transparent); }
.rdv-enregistrer .btn { min-height: 44px; padding-inline: 24px; }
.rdv-retirer { margin-top: 8px; }
@media (max-width: 900px) { .rdv-enregistrer { bottom: calc(57px + env(safe-area-inset-bottom)); } .rdv-enregistrer .btn { flex: 1; } }
.rdv-copier { display: flex; flex-direction: column; gap: 8px; }
.rdv-copier-details summary { list-style: none; display: inline-flex; gap: 6px; cursor: pointer; }
.rdv-copier-details summary::-webkit-details-marker { display: none; }
.rdv-copier-forme { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.rdv-copie-prete { display: flex; gap: 8px; }
.rdv-copie-prete .rc-saisie { flex: 1; min-width: 0; font-size: var(--text-sm); }
@media (max-width: 900px) { .rdv-modeles, .rdv-question { grid-template-columns: 1fr; } }

/* ══ Photo d'un contact (29 septembre 2026, maquette validée) ════════════════════════════════════
   La pastille de la fiche se clique pour poser la photo ; la fenêtre « Nouveau
   contact » l'offre en tête. Bloc délimité. */
.rc-fiche-photo { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.rc-fiche-photo-geste { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
.rc-fiche-photo:hover .rc-fiche-photo-geste,
.rc-fiche-photo:focus-within .rc-fiche-photo-geste { color: var(--accent); border-color: var(--accent); }
.rc-photo-pose { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.rc-photo-pose--survol { border-color: var(--accent); background: var(--muted); }
.rc-photo-pose-cercle { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--muted); color: var(--muted-foreground); }
img.rc-photo-pose-cercle { object-fit: cover; }
.rc-photo-pose-corps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rc-photo-pose-corps .btn { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.rc-photo-pose-corps small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-fiche-photo-form { margin: 0; display: inline-flex; flex: 0 0 auto; }
.rc-photo-retirer { margin-right: auto; }
/* ── La fenêtre d'un échange (29 septembre 2026) ─────────────────────────── */
.rc-j-fiche-actions .rc-j-poser { flex-wrap: wrap; }
.rc-j-sep-actions { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--border); }
/* ⚠️ **LA COULEUR EST SUR LE NOM ET L'ICÔNE, PLUS DE PASTILLE** (demande de
   Tevini du 1er octobre 2026) : chaque canal porte sa teinte, la coche verte
   « déjà fait » reste. */
.rc-j-echange i[class^="rc-j-point--"] { display: none; }
.rc-j-echange { color: var(--canal, var(--foreground)); }
.rc-j-echange svg { color: inherit; }
.rc-j-echange:hover { border-color: color-mix(in srgb, var(--canal, var(--foreground)) 45%, transparent); }
.rc-j-echange--appel     { --canal: #8ec7ff; }
.rc-j-echange--sms       { --canal: #9be7c4; }
.rc-j-echange--whatsapp  { --canal: #6ee7a8; }
.rc-j-echange--mail      { --canal: var(--mmb-rouge-lumineux); }
.rc-j-echange--linkedin  { --canal: #7fb4e8; }
.rc-j-echange--instagram { --canal: #f58fc4; }
.rc-j-echange--facebook  { --canal: #8fa8ff; }
.rc-j-echange--telegram  { --canal: #7fd3f5; }
.rc-j-echange--discord   { --canal: var(--mmb-rouge-lumineux); }
.rc-j-echange--tiktok    { --canal: #ff8fa3; }

dialog.rc-echange { width: min(600px, calc(100vw - 32px)); }
.rc-echange-forme { display: flex; flex-direction: column; gap: 14px; }
.rc-echange-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-echange-tete h2 { margin: 0; font-size: var(--text-lg); }
.rc-echange-tete h2 span { color: var(--text-muted); font-weight: 400; }
.rc-echange-sens { display: flex; gap: 6px; }
.rc-echange-texte { width: 100%; min-height: 150px; resize: vertical; }
.rc-echange-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Le texte de l'IA déposé : la phrase, et « Revenir à mon texte » à côté (2 octobre 2026). */
.rc-echange-ia-dit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rc-echange-ia-dit[hidden] { display: none; }
.rc-echange-resultat { border: 0; padding: 0; margin: 0; }
.rc-echange-action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* « Faire un essai » (5 octobre 2026) : le même geste, vers moi. */
.rc-essai { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.rc-essai > summary { list-style: none; cursor: pointer; align-self: flex-start; }
.rc-essai > summary::-webkit-details-marker { display: none; }
.rc-essai[open] { padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.rc-essai-ligne { display: flex; align-items: center; gap: 8px; width: 100%; }
.rc-essai-ligne > span { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }
.rc-essai-ligne .rc-saisie { flex: 1; min-width: 0; }
.rc-essai-apercu { margin: 0; width: 100%; max-height: 180px; overflow: auto; white-space: pre-wrap; font: inherit;
  font-size: var(--text-sm); padding: 8px 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .04); }
.rc-mail .rc-essai { padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.rc-mail .rc-essai[hidden] { display: none; }
.rc-echange-pied { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.rc-j-evt-message { white-space: pre-line; }
.rc-message-edition { display: flex; flex-direction: column; gap: 8px; width: 100%; }
@media (max-width: 640px) { .rc-echange-pied .btn { flex: 1; min-height: 44px; } }
.rc-j-evt-porte .rc-j-evt-geste { display: flex; gap: 10px; }
.rc-j-evt-geste form button.rc-geste { font-family: inherit; cursor: pointer; }
.rc-j-evt-porte--message .rc-j-evt { padding-right: 14px; }
.rc-j-evt-porte--message .rc-j-evt-geste { grid-column: 2; grid-row: 1; align-self: end; margin: 0 12px 10px 0; }
.rc-j-evt-porte--message .rc-j-evt { padding-bottom: 14px; }
.rc-j-evt-porte .rc-message-edition { grid-column: 1 / -1; }

/* ── « Dans ses campagnes » (29 septembre 2026) ─────────────────────────── */
.rc-sc { --sc-depart: #cfcbe4; --sc-en_cours: #8ec7ff; --sc-abouti: #86dba0; --sc-clos: #9a9aae; --sc-aucun: #cfcbe4; }
.rc-sc-campagne { padding: 12px 0; border-top: 1px solid var(--border); }
.rc-sc-campagne:first-of-type { border-top: 0; padding-top: 4px; }
.rc-sc-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-sc-nom { font-weight: 500; color: var(--foreground); text-decoration: none; flex: 1; min-width: 0; }
a.rc-sc-nom:hover { text-decoration: underline; }
.rc-sc-note { color: var(--disabled-foreground); font-size: var(--text-2xs); }
.rc-sc-etat { font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--radius-pill); }
.rc-sc-barre { display: flex; gap: 3px; margin: 10px 0 8px; }
.rc-sc-barre i { flex: 1; height: 4px; border-radius: 2px; background: rgba(245,244,240,.08); }
.rc-sc-barre i.rc-sc-fait { background: var(--sc-aucun); }
.rc-sc-barre i.rc-teinte--en_cours { background: var(--sc-en_cours); }
.rc-sc-barre i.rc-teinte--abouti { background: var(--sc-abouti); }
.rc-sc-barre i.rc-teinte--clos { background: var(--sc-clos); }
.rc-sc-statuts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rc-sc-statut { font: inherit; font-size: var(--text-xs); padding: 5px 10px; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted-foreground); }
.rc-sc-statut:hover { border-color: var(--border-strong); color: var(--foreground); }
.rc-sc-statut[aria-pressed="true"] { cursor: default; font-weight: 500; }
.rc-sc-statut.rc-teinte--depart[aria-pressed="true"], .rc-sc-statut.rc-teinte--aucun[aria-pressed="true"] { color: var(--sc-depart); background: rgba(245,244,240,.08); border-color: rgba(245,244,240,.2); }
.rc-sc-statut.rc-teinte--en_cours[aria-pressed="true"] { color: var(--sc-en_cours); background: rgba(142,199,255,.12); border-color: rgba(142,199,255,.35); }
.rc-sc-statut.rc-teinte--abouti[aria-pressed="true"] { color: var(--sc-abouti); background: rgba(134,219,160,.14); border-color: rgba(134,219,160,.4); }
.rc-sc-statut.rc-teinte--clos[aria-pressed="true"] { color: var(--sc-clos); background: rgba(245,244,240,.06); border-color: rgba(245,244,240,.18); }
@media (max-width: 640px) { .rc-sc-statut { min-height: 40px; } }
.rc-sc-barre--close i { background: rgba(245,244,240,.05); }
.rc-sc-details { margin-top: 10px; }
.rc-sc-details > summary { cursor: pointer; font-size: var(--text-xs); color: var(--muted-foreground); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.rc-sc-details > summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.rc-sc-details[open] > summary::before { transform: rotate(90deg); }
.rc-sc-details > summary:hover { color: var(--foreground); }
.rc-sc-details > .rc-fiche-lignes { margin-top: 8px; }
/* Retirer de CETTE campagne (3 octobre 2026) : discret, au pied des détails. */
.rc-sc-retirer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.rc-sc-retirer > summary { cursor: pointer; list-style: none; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-sc-retirer > summary::-webkit-details-marker { display: none; }
.rc-sc-retirer > summary:hover, .rc-sc-retirer[open] > summary { color: var(--error); }
.rc-sc-retirer-corps { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-fiche-rang { font-size: var(--text-xs); color: var(--muted-foreground); margin-right: 6px; align-self: center; }

/* ══ Documents d'un contact (29 septembre 2026, maquette validée) ══════════════════════════════
   Une carte sous la personne : la liste, « Ajouter », glisser-déposer. */
.rc-docs { display: flex; flex-direction: column; gap: 4px; }
.rc-docs-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; }
.rc-docs-ajouter { position: relative; display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 0 10px; border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--text-xs); color: var(--accent); }
.rc-docs-ajouter:hover { background: var(--muted); }
.rc-doc { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-radius: var(--radius-md); }
.rc-doc + .rc-doc { border-top: 1px solid var(--border); }
.rc-doc:hover { background: var(--muted); }
.rc-doc-ouvre { position: absolute; inset: 0; border-radius: inherit; }
.rc-doc-icone { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent); }
.rc-doc-corps { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rc-doc-nom { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-doc-corps small { font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-doc-retirer { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border: 0;
  border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rc-doc-retirer:hover { color: var(--error); background: var(--card); }
.rc-docs-vide { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-docs-vide svg { flex: none; margin-top: 2px; }
.rc-docs { margin: 0; }
.rc-docs--survol { outline: 2px dashed var(--accent); outline-offset: -6px; }
.rc-docs--envoi { opacity: .7; pointer-events: none; }
.rc-doc-suppr { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.rc-doc-suppr > summary { list-style: none; }
.rc-doc-suppr > summary::-webkit-details-marker { display: none; }
.rc-doc-suppr[open] > summary { color: var(--error); }
.rc-doc-suppr-corps { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
  font-size: var(--text-xs); color: var(--muted-foreground); }

/* ── L'infobulle (29 septembre 2026) ──
   Les phrases explicatives passent derrière un petit « i » (`_infobulle.html`)
   pour que la page soit épurée. Au repos, la phrase est cachée à l'œil mais
   reste lue par les lecteurs d'écran ; survol, focus ou doigt l'affichent. */
.rc-infobulle { position: relative; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%;
  color: var(--muted-foreground); cursor: help; text-transform: none; letter-spacing: normal;
  font-weight: 400; }
.rc-infobulle:hover, .rc-infobulle:focus-visible { color: var(--foreground); }
.rc-infobulle:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.rc-infobulle-texte { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rc-infobulle:hover .rc-infobulle-texte, .rc-infobulle:focus .rc-infobulle-texte {
  clip: auto; clip-path: none; width: max-content; height: auto; overflow: visible; white-space: normal;
  left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: var(--z-dropdown, 30);
  max-width: min(280px, 80vw); padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--foreground); text-align: left; }
.rc-infobulle--droite:hover .rc-infobulle-texte, .rc-infobulle--droite:focus .rc-infobulle-texte {
  left: auto; right: -6px; transform: none; }
.rc-infobulle--gauche:hover .rc-infobulle-texte, .rc-infobulle--gauche:focus .rc-infobulle-texte {
  left: -6px; transform: none; }
/* Le bouton « Créer un lien de rendez-vous » et son « i », sur une ligne. */
.rdv-copier-vide { display: flex; align-items: center; gap: 2px; }
.rdv-copier-vide .btn { flex: 1; }

/* ── Poser une note ou une tâche depuis la fiche (29 septembre 2026) ──
   Un encart, deux onglets, le même champ que dans la fenêtre d'une tâche. */
.rc-compose { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.rc-compose [hidden] { display: none !important; }
.rc-compose-onglets { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px;
  border-radius: var(--radius-lg); background: var(--background); border: 1px solid var(--border); }
.rc-compose-onglets button { font: inherit; font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: none;
  color: var(--muted-foreground); cursor: pointer; }
.rc-compose-onglets button:hover { color: var(--foreground); }
.rc-compose-onglets button[aria-selected="true"] { background: var(--card); color: var(--foreground); font-weight: 500; }
.rc-compose-tache .rc-compose-canaux { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-compose-quand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rc-compose-quand .rc-j-dates { margin: 0; }
.rc-compose-precise > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--text-xs); color: var(--muted-foreground); min-height: 28px; }
.rc-compose-precise > summary::-webkit-details-marker { display: none; }
.rc-compose-precise > summary:hover { color: var(--foreground); }
.rc-compose-precise[open] > summary { display: none; }
.rc-compose-precise textarea.rc-saisie { width: 100%; resize: vertical; }
/* La barre des canaux de la fiche, au format de la fenêtre d'une tâche. */
.rc-j-fiche-actions .rc-fiche-canaux { width: 100%; }
.rc-fiche-canaux .rc-j-echange { min-height: 44px; padding: 0 14px; }
@media (max-width: 640px) {
  .rc-compose-onglets button { min-height: 44px; }
  .rc-compose-precise > summary { min-height: 44px; }
}

/* ══ LES NOTES MONTRÉES (30 septembre, simplifiées le 2 octobre 2026) ════════
   `_note_riche.html` : la note se lit telle quelle ; longue, elle se replie
   (son début, en fondu) ; un clic l'ouvre en grand (`rc-riche-fenetre`), où
   elle s'écrit directement. Le repli n'existe qu'avec le script (`rc-riche-js`). */
.rc-riche-bloc { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rc-riche { min-width: 0; width: 100%; font-size: var(--text-sm); line-height: 1.55; color: var(--foreground); overflow-wrap: anywhere; }
.rc-riche > :first-child { margin-top: 0; }
.rc-riche > :last-child { margin-bottom: 0; }
.rc-riche p, .rc-riche ul, .rc-riche ol, .rc-riche blockquote, .rc-riche pre { margin: 0 0 4px; }
.rc-riche h1, .rc-riche h2, .rc-riche h3 { margin: 8px 0 2px; line-height: 1.3; font-weight: 600; font-size: var(--text-base); }
.rc-riche ul, .rc-riche ol { padding-left: 20px; }
.rc-riche blockquote { padding: 1px 0 1px 10px; border-left: 3px solid var(--border-strong); color: var(--muted-foreground); }
.rc-riche a { color: var(--accent); }
.rc-riche hr { border: 0; border-top: 1px solid var(--border-strong); margin: 8px 0; }
/* Une image garde la taille choisie dans l'éditeur (`width="50%"`), jamais
   déformée ; dans la fiche, elle ne dépasse pas 420 px. */
.rc-riche img { display: block; max-width: min(100%, 420px); height: auto; margin: 4px 0;
  border-radius: var(--radius-md); border: 1px solid var(--border); }
.rc-riche code, .rc-riche pre { font-family: var(--font-code); font-size: var(--text-xs); }
.rc-riche ul[data-cases] { list-style: none; padding-left: 2px; }
.rc-riche ul[data-cases] > li { position: relative; padding-left: 24px; }
.rc-riche ul[data-cases] > li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px;
  border: 1.5px solid var(--muted-foreground); border-radius: 4px; }
.rc-riche ul[data-cases] > li[data-coche="1"]::before { background: var(--success); border-color: var(--success);
  box-shadow: inset 0 0 0 2px var(--card); }
.rc-riche ul[data-cases] > li[data-coche="1"] { color: var(--muted-foreground); text-decoration: line-through; }
[data-riche-cocher] .rc-riche ul[data-cases] > li::before { cursor: pointer; }
/* Un clic ouvre la note : elle le dit au survol, sans rien ajouter à l'écran. */
.rc-riche-js [data-riche-corps] { cursor: pointer; border-radius: var(--radius-sm); }
.rc-riche-js [data-riche-corps]:hover { background: var(--accent-wash); box-shadow: 0 0 0 6px var(--accent-wash); }
.rc-riche-js .rc-riche--replie { max-height: 9.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
/* L'aperçu d'un fil étroit : trois lignes, le titre à la taille du texte. */
.rc-riche--apercu { max-height: 4.7em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.rc-riche--apercu h1, .rc-riche--apercu h2, .rc-riche--apercu h3 { margin: 0; }
.rc-riche--apercu img { width: auto; max-height: 60px; }
.rc-riche-voir { padding: 2px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--text-xs);
  cursor: pointer; }
.rc-riche-voir:hover { text-decoration: underline; }
html:not(.rc-riche-js) .rc-riche-voir { display: none; }

/* La fenêtre d'une note ouverte : la note, et rien autour. */
dialog.rc-riche-fenetre { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px);
  padding: 0; overflow: hidden; background: var(--card); color: var(--foreground);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
dialog.rc-riche-fenetre[open] { display: flex; flex-direction: column; }
dialog.rc-riche-fenetre::backdrop { background: rgba(5, 6, 10, .72); }
.rc-riche-fenetre-tete { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 10px 26px; flex: none; }
.rc-riche-fenetre-titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-riche-fenetre-titres h2 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.rc-riche-fenetre-titres small { color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-riche-fenetre-forme { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rc-riche-fenetre-forme[hidden] { display: none; }
.rc-riche-fenetre-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 26px 20px; }
.rc-riche--grand { font-size: var(--text-base); line-height: 1.65; }
.rc-riche--grand h1, .rc-riche--grand h2 { font-size: var(--text-lg); margin-top: 16px; }
.rc-riche--grand h3 { font-size: var(--text-md); margin-top: 12px; }
.rc-riche--grand img { max-width: 100%; max-height: none; }
/* L'éditeur, dans la fenêtre, n'a pas de cadre : on écrit dans la page. */
.rc-riche-fenetre .rc-ed, .rc-riche-fenetre .rc-ed:focus-within { border: 0; background: none; box-shadow: none; overflow: visible; }
.rc-riche-fenetre .rc-ed-zone { min-height: 220px !important; max-height: none; padding: 4px 0; font-size: var(--text-base); line-height: 1.65; }
.rc-riche-fenetre .rc-ed-zone h2 { font-size: var(--text-lg); }
/* Dans la fenêtre, la barre reste AU-DESSUS du texte, toujours là : elle ne
   passe plus sur une capture en bas de page. */
.rc-riche-fenetre .rc-ed--note { display: flex; flex-direction: column; }
.rc-riche-fenetre .rc-ed--note .rc-ed-barre { display: flex; order: -1; position: sticky; top: 0; z-index: 2; background: var(--card);
  padding: 4px 0 8px; border-top: 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.rc-riche-fenetre-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: none; padding: 12px 18px 14px 26px;
  border-top: 1px solid var(--border); }
.rc-riche-fenetre-pied small { flex: 1 1 200px; color: var(--muted-foreground); font-size: var(--text-xs); }
@media (max-width: 767px) {
  dialog.rc-riche-fenetre { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .rc-riche-fenetre-tete { padding: 12px 10px 8px 16px; }
  .rc-riche-fenetre-corps { padding: 4px 16px 16px; }
  .rc-riche-fenetre-pied { padding: 10px 16px 14px; }
  .rc-riche-fenetre-pied { flex-wrap: nowrap; }
  .rc-riche-fenetre-pied small { display: none; }
  .rc-riche-fenetre-pied .btn { flex: 1; min-height: 44px; }
}

/* Un document déposé dans une note (2 octobre 2026) : une carte, son nom et
   son poids, un trombone. Il est rangé dans les Documents de la personne ; un
   clic l'ouvre (PDF, image) ou le télécharge. */
.rc-riche a[data-document], .rc-ed-zone a[data-document] { display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; padding: 7px 12px 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--background); color: var(--foreground); text-decoration: none; font-size: var(--text-sm);
  overflow-wrap: anywhere; }
.rc-riche a[data-document]::before, .rc-ed-zone a[data-document]::before { content: ""; flex: none; width: 16px; height: 16px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 11.5-7.8 7.8a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 11.5-7.8 7.8a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.rc-riche a[data-document]:hover { border-color: var(--accent); }

/* ── Les boutons violets : le format de tvni ─────────────────────────────
   Tevini, le 30 septembre 2026 : « même format que sur tvni pour tous les
   boutons violets ». 13 px, 2,5 em de haut, coins de 6 px, à toutes les
   largeurs. ⚠️ **SOUS LE DOIGT AUSSI, et c'est voulu** : le plancher de 44 px
   ne s'applique plus à eux. `.btn.btn-…` et la fin du fichier, pour passer
   devant les replis tactiles écrits plus haut. */
.btn.btn-primary, .btn.btn-fort, .rc-bouton-actions.rc-bouton-actions {
  height: 2.5em; min-height: 0; padding: 0 1.167em; gap: 0.5em;
  font-size: var(--text-sm); border-radius: var(--radius-md);
}
.btn.btn-primary.btn-sm, .btn.btn-fort.btn-sm {
  height: 2.261em; padding: 0 0.87em; gap: 0.435em; font-size: var(--text-xs);
}

/* ── La page des campagnes (refonte du 30 septembre 2026) ─────────────────
   Une carte en long par campagne, empilées : qui, où en sont les gens, ce qui
   attend. La teinte d'une étape vient de son RÔLE, jamais de son libellé. */
.rc-cp-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rc-cp-titre { font-size: var(--text-xl); font-weight: 600; margin: 0; letter-spacing: var(--tracking-tight); }
.rc-cp-resume { margin: 6px 0 0; color: var(--muted-foreground); font-size: var(--text-base); }
.rc-cp-resume b { color: var(--foreground); font-weight: 500; }
.rc-cp-resume .rc-cp-rouge { color: var(--error); }

.rc-cp-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 28px; }
.rc-cp-chiffre { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.rc-cp-chiffre small { display: block; color: var(--muted-foreground); font-size: var(--text-sm); }
.rc-cp-chiffre strong { display: block; font-size: 26px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rc-cp-chiffre em { font-style: normal; font-weight: 400; color: var(--muted-foreground); font-size: var(--text-sm); }
.rc-cp-chiffre--alerte strong { color: var(--error); }

.rc-cp-section { font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); margin: 0 0 10px; }
.rc-cp-liste { display: flex; flex-direction: column; gap: 10px; }
.rc-cp { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; gap: 28px; align-items: center;
         background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
         padding: 18px 20px; position: relative; transition: border-color var(--motion-base) var(--ease-out); }
.rc-cp:hover { border-color: var(--border-strong); }
.rc-cp--retard::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px;
                         border-radius: 3px; background: var(--error); }
.rc-cp--fini { opacity: 0.72; }

.rc-cp-nom { font-size: var(--text-md); font-weight: 600; color: var(--foreground); text-decoration: none; }
.rc-cp-nom:hover { color: var(--accent-hi); }
.rc-cp-meta { margin-top: 5px; color: var(--muted-foreground); font-size: var(--text-sm);
              display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rc-cp-type { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-pill);
              border: 1px solid var(--border-strong); }

.rc-cp-avance-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
                     font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-cp-avance-tete b { color: var(--foreground); font-size: var(--text-base); font-weight: 600; }
.rc-cp-barre { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--muted); margin: 8px 0 7px; }
.rc-cp-barre i { display: block; height: 100%; }
.rc-cp-legende { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-cp-legende span { display: inline-flex; align-items: center; gap: 5px; }
.rc-cp-legende i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rc-cp-t--depart { background: rgba(245,244,240,0.20); }
.rc-cp-t--en-cours-1 { background: var(--info); }
.rc-cp-t--en-cours-2 { background: var(--accent); }
.rc-cp-t--en-cours-3 { background: var(--warning); }
.rc-cp-t--en-cours-4 { background: #F0ABFC; }
.rc-cp-t--abouti { background: var(--success); }
.rc-cp-t--clos { background: rgba(245,244,240,0.08); }

.rc-cp-agir { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 140px; }
.rc-cp-agir .btn { height: 2.5em; min-height: 0; padding: 0 1.167em; font-size: var(--text-sm); border-radius: var(--radius-md); }
.rc-cp-etat { font-size: var(--text-sm); font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); }
.rc-cp-etat--retard { color: #FCA5A5; background: rgba(248,113,113,0.12); }
.rc-cp-etat--faire { color: var(--accent-hi); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); }
.rc-cp-etat--ok { color: #86EFAC; background: rgba(74,222,128,0.10); }

.rc-cp-completer { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
                   border-top: 1px solid var(--border); padding-top: 12px; margin-top: -4px;
                   font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-cp-completer a { color: var(--foreground); text-decoration: none; padding: 3px 10px; border-radius: var(--radius-pill);
                     background: var(--muted); border: 1px solid var(--border); }
.rc-cp-completer a:hover { border-color: var(--accent); color: var(--accent-hi); }

.rc-cp-terminees { margin-top: 26px; }
.rc-cp-terminees summary { cursor: pointer; color: var(--muted-foreground); font-size: var(--text-sm); padding: 8px 0; }
.rc-cp-terminees .rc-cp-liste { margin-top: 6px; }
.rc-cp-vide { background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
              padding: 32px; text-align: center; margin-top: 24px; color: var(--muted-foreground); }
.rc-cp-vide b { color: var(--foreground); }

/* Sous le doigt : la carte s'empile, les liens restent des cibles. */
@media (max-width: 760px) {
  .rc-cp-tete .btn { width: 100%; }
  .rc-cp-chiffres { gap: 8px; margin: 18px 0 22px; }
  .rc-cp-chiffre { padding: 10px 12px; }
  .rc-cp-chiffre strong { font-size: 20px; }
  .rc-cp-chiffre em { display: none; }
  .rc-cp { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .rc-cp-agir { flex-direction: row; justify-content: space-between; align-items: center; }
  .rc-cp-agir .btn { min-height: 40px; }
  .rc-cp-completer a { display: inline-flex; align-items: center; min-height: 36px; }
  .rc-cp-nom { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── La fiche d'une réunion, en deux colonnes (30 septembre 2026) ─────────
   Elle prend la mise en page de la fenêtre d'une tâche (`rc-modale-tache`) :
   seules les pastilles des invités et la liste des échanges rangés sur la
   réunion lui sont propres. */
.rc-r-qui { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 12px; }
.rc-r-qui-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: var(--radius-pill);
              border: 1px solid var(--border); color: var(--muted-foreground); text-decoration: none; font-size: var(--text-sm); }
.rc-r-qui-p .rc-pastille { width: 22px; height: 22px; font-size: 10px; }
.rc-r-qui-p[aria-current="true"] { border-color: color-mix(in srgb, var(--mmb-rouge) 45%, transparent); color: var(--foreground); background: color-mix(in srgb, var(--mmb-rouge) 10%, transparent); }
.rc-r-faits { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
              font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-r-faits li { display: flex; align-items: center; gap: 6px; }
.rc-r-faits b { color: var(--foreground); font-weight: 500; }
.rc-r-faits svg { color: var(--success); }
.rc-r-deux .rc-r-bloc { padding-left: 0; padding-right: 0; }
.rc-j-issue[aria-current="true"] { border-color: var(--accent); }
@media (max-width: 760px) {
  .rc-r-qui-p { min-height: 40px; }
}
/* Au téléphone, la fiche d'une réunion suit l'ordre de la fenêtre d'une
   tâche : la personne, ses campagnes, Prévenir, puis la préparation, « Après
   la réunion », le compte rendu, et l'Activité en dernier. */
@media (max-width: 900px) {
  .rc-r-deux .rc-r-bloc[aria-label="Préparation"] { order: 4; }
  .rc-r-deux #compte-rendu { order: 7; }
}

/* ── Installer l'application (30 septembre 2026, repris de TVNI) ──────────
   ⚠️ `[hidden]` doit l'emporter : `.rc-rail-sortie` et `.cpt-onglet` posent un
   `display: flex` qui, sans cette règle, montrait le bouton sur un appareil
   qui ne sait pas installer — un bouton qui n'aboutit à rien. */
[data-installer-app][hidden] { display: none !important; }
.rc-rail-installer:hover { color: var(--accent); background: var(--muted); }
.rc-installer-tete { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.rc-installer-tete .dialogue-titre { margin-bottom: 4px; }
.rc-installer-tete p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.rc-installer-icone { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; }
.rc-installer-etapes { margin: 0; padding-left: 22px; display: grid; gap: 10px;
  color: var(--foreground); font-size: var(--text-base); line-height: 1.5; }
.rc-installer-etapes li::marker { color: var(--muted-foreground); font-weight: 600; }
/* La charte pose les svg en bloc : l'icône « Partager » cassait sa phrase. */
.rc-installer-partager { display: inline-block; vertical-align: -3px; margin: 0 2px; color: var(--accent); }
.cpt-installer-tel { display: none; }
@media (max-width: 900px) {
  .cpt-installer-tel { display: flex; justify-content: center; gap: 8px; width: 100%; min-height: 44px; }
  .rc-installer .dialogue-actions .btn { min-height: 44px; }
}

/* Le code à six chiffres du mail de connexion (30 septembre 2026). */
.rc-code-connexion { display: flex; flex-direction: column; gap: 12px; }
.rc-code-saisie { font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.25em; text-align: center; }

/* ── Les rappels sur mes appareils (30 septembre 2026) ──────────────────── */
.rc-appareils-etat { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-appareils[data-etat="active"] .rc-appareils-etat { color: var(--success, var(--accent)); }
.rc-appareils-message { margin: 0; font-size: var(--text-sm); color: var(--foreground); }
.rc-appareils-message--erreur { color: var(--error); }
.rc-appareils-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rc-appareils-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--border); }
.rc-appareils-nom { flex: 1 1 200px; min-width: 0; font-weight: 500; }
.rc-appareils-quand { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-appareils-gestes { display: flex; gap: 4px; }
@media (max-width: 900px) {
  .rc-appareils .btn { min-height: 44px; }
  .rc-appareils-gestes { width: 100%; }
}

/* ══ Sociétés et relations (1er octobre 2026) ══════════════════════════════════
   Maquette validée par Tevini le même jour. Une société est un contact d'un
   autre genre : une pastille carrée et le mot « Société », rien de plus.
   « Ses relations » se saisit vite : une puce, trois lettres, Entrée. */
.rc-pastille--societe { border-radius: 28%; }
.rc-pastille--xs { width: 24px; height: 24px; font-size: 10px; }
.rc-genre { display: inline-flex; align-items: center; font-size: var(--text-2xs); font-weight: 500;
  padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--muted-foreground);
  white-space: nowrap; vertical-align: middle; }
.rc-genre--fort { color: var(--accent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); }
.rc-rel-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rc-rel-ligne { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.rc-rel-ligne:first-of-type { border-top: 0; }
.rc-rel-nom { flex: 0 0 auto; max-width: 45%; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-rel-qui { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--foreground);
  text-decoration: none; font-size: var(--text-sm); }
.rc-rel-qui:hover .rc-rel-autre { text-decoration: underline; }
.rc-rel-qui .rc-genre { flex-shrink: 0; }
.rc-rel-autre { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-rel-qui .rc-rel-detail { flex: 1 1 0; }
.rc-rel-detail { color: var(--muted-foreground); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.rc-rel-retirer { border: 0; background: none; color: var(--muted-foreground); cursor: pointer; padding: 6px;
  border-radius: 6px; display: inline-flex; opacity: .6; }
.rc-rel-retirer:hover { opacity: 1; color: var(--error); }
.rc-rel-ligne form { display: flex; align-items: center; }
.rc-rel-plus { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--text-sm);
  cursor: pointer; padding: 8px 0 0; list-style: none; }
.rc-rel-plus::-webkit-details-marker { display: none; }
.rc-rel-saisie[open] > .rc-rel-plus { display: none; }
.rc-rel-saisie form { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); border-radius: 10px;
  padding: 10px; background: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.rc-rel-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-rel-puce { position: relative; cursor: pointer; }
.rc-rel-puce input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rc-rel-puce span { display: inline-flex; align-items: center; font-size: var(--text-xs); padding: 3px 9px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--muted-foreground); }
.rc-rel-puce input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rc-rel-puce input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-rel-nouvelle { display: none; flex-direction: column; gap: 6px; }
.rc-rel-nouvelle small { color: var(--muted-foreground); font-size: var(--text-2xs); }
form:has(input[name="valeur"][value="autre"]:checked) .rc-rel-nouvelle { display: flex; }
.rc-rel-champ { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 0 10px; background: var(--background); }
.rc-rel-champ:focus-within { border-color: var(--accent); }
.rc-rel-champ b { font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.rc-rel-champ b:empty { display: none; }
.rc-rel-nom-saisi { flex: 1; min-width: 0; border: 0; background: none; color: var(--foreground); font: inherit;
  font-size: var(--text-sm); padding: 8px 0; outline: none; }
.rc-rel-propositions { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.rc-rel-propositions button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 10px; border: 0;
  background: none; color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.rc-rel-propositions button small { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-2xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.rc-rel-propositions button[aria-selected="true"], .rc-rel-propositions button:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); }
.rc-rel-fin { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rc-rel-genre { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 8px; }
.rc-rel-genre label { position: relative; cursor: pointer; }
.rc-rel-genre input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rc-rel-genre span { display: inline-flex; font-size: var(--text-xs); padding: 3px 10px; border-radius: 6px;
  color: var(--muted-foreground); }
.rc-rel-genre input:checked + span { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); color: var(--accent); }
.rc-rel-chez { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rc-rel-chez-titre { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-rel-chez-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rc-rel-chez-champs .btn { justify-self: start; }
.rc-rel-chez-champs .rc-saisie { min-width: 0; }
.rc-societe-relier { border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--text-2xs);
  cursor: pointer; padding: 0 0 0 6px; }
/* Le genre, dans « Nouveau contact » : une société n'a ni prénom ni société. */
.rc-genre-choix { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-strong);
  border-radius: 10px; margin-top: 14px; }
.rc-genre-choix label { position: relative; cursor: pointer; }
.rc-genre-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rc-genre-choix span { display: inline-flex; padding: 5px 14px; border-radius: 7px; font-size: var(--text-sm);
  color: var(--muted-foreground); }
.rc-genre-choix input:checked + span { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); color: var(--accent); }
.rc-genre-choix input:focus-visible + span { outline: 2px solid var(--accent); }
form:has(input[name="genre"][value="societe"]:checked) [data-pour="personne"] { display: none; }
form:has(input[name="genre"][value="personne"]:checked) [data-pour="societe"] { display: none; }
/* La page « Mes relations ». */
.rc-types { display: flex; flex-direction: column; gap: 6px; }
.rc-type { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rc-type-gestes { display: inline-flex; gap: 2px; }
.rc-type-gestes button { border: 0; background: none; color: var(--muted-foreground); cursor: pointer; padding: 6px 8px;
  border-radius: 6px; font: inherit; font-size: var(--text-sm); }
.rc-type-gestes button:hover { color: var(--foreground); background: var(--muted); }
@media (max-width: 900px), (pointer: coarse) {
  .rc-rel-puce span, .rc-rel-genre span { min-height: 44px; padding-inline: 12px; }
  .rc-rel-saisie .btn, .rc-rel-chez .btn, .rc-type .btn { min-height: 44px; }
  .rc-rel-nom-saisi, .rc-rel-chez-champs .rc-saisie, .rc-rel-nouvelle .rc-saisie { font-size: 16px; }
  .rc-rel-nom-saisi { min-height: 44px; }
  .rc-rel-plus, .rc-rel-retirer, .rc-rel-propositions button, .rc-type-gestes button, .rc-societe-relier { min-height: 44px; }
  .rc-rel-retirer { min-width: 44px; justify-content: center; align-items: center; }
  /* Sous le doigt, la relation passe au-dessus du nom : il garde la largeur. */
  .rc-rel-ligne { flex-wrap: wrap; row-gap: 2px; }
  .rc-rel-nom { flex-basis: 100%; max-width: none; }
  .rc-rel-qui { flex: 1 1 0; }
  .rc-type { grid-template-columns: 1fr; }
}

/* ── Les actions en masse (maquette du 1er octobre 2026, `_masse.html`) ─────
   ⚠️ La case passe AU-DESSUS du lien qui couvre la rangée (`-couvre`) :
   cocher ne doit jamais ouvrir la tâche ou la fiche. */
.rc-masse-case { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -4px; cursor: pointer; flex: none; }
.rc-masse-case input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.rc-masse-tete { display: flex; align-items: center; gap: 8px; }
.rc-j-rangee--choix { grid-template-columns: 20px 30px minmax(0,1fr) auto auto; }
.rc-action > .rc-masse-case { margin-right: 4px; }
.rc-rang .rc-masse-case { margin-right: 2px; }
.rc-masse-barre { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); flex-wrap: wrap;
  padding: 9px 10px 9px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  background: var(--card); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.rc-masse-barre[hidden] { display: none; }
.rc-masse-compte { font-weight: 600; margin-right: 8px; white-space: nowrap; }
.rc-masse-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 4px; }
.rc-masse-vider { border: 0; background: none; color: var(--muted-foreground); font-size: 18px; cursor: pointer;
  min-width: 36px; min-height: 36px; border-radius: var(--radius-md); }
.rc-masse-vider:hover { color: var(--foreground); background: var(--muted); }
/* La barre ne cache pas la dernière rangée. */
body.rc-masse-active .rc-content { padding-bottom: 96px; }
.rc-masse-bloc { cursor: default; }
.rc-masse-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.rc-masse-ligne .rc-saisie { max-width: 200px; }
.rc-masse-recap { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--muted-foreground); display: grid; gap: 4px; }
.rc-masse-quand { display: grid; grid-template-columns: minmax(0,1fr) 140px; gap: 12px; }
/* Contacts : les campagnes à cocher, et « Supprimer » en rouge discret (2 octobre 2026). */
.rc-masse-campagnes { display: grid; gap: 2px; margin-top: 12px; max-height: 50vh; overflow-y: auto; }
.rc-masse-campagne { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md);
  cursor: pointer; min-height: 40px; }
.rc-masse-campagne:hover { background: var(--muted); }
.rc-masse-campagne input { width: 17px; height: 17px; accent-color: var(--primary); }
.rc-masse-danger { color: var(--error); }
/* Sous le doigt : la case prend sa colonne dans la grille des rangées (qui
   y passe en zones), et la barre se pose AU-DESSUS du menu du bas, comme
   « Reprendre » (`.rc-j-reprendre`). */
@media (max-width: 900px) {
  .rc-j-rangee--choix { grid-template-columns: 28px 30px minmax(0,1fr) auto;
    grid-template-areas: "x p c g" "x p q g"; }
  .rc-j-rangee--choix > .rc-masse-case { grid-area: x; align-self: center; }
  .rc-masse-barre { left: 12px; right: 12px; transform: none; width: auto; gap: 6px;
    bottom: calc(76px + env(safe-area-inset-bottom)); padding: 8px 8px 8px 12px; }
  .rc-masse-compte { flex: 1 1 100%; margin: 0 0 2px; }
  .rc-masse-sep { display: none; }
  .rc-masse-barre .btn { flex: 1 1 40%; }
  .rc-masse-vider { position: absolute; top: 4px; right: 4px; }
  body.rc-masse-active .rc-content { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .rc-masse-case { width: 44px; height: 44px; margin: -12px; }
}

/* Le statut dans une campagne, en liste déroulante à droite du nom
   (1er octobre 2026, `_statut_campagne.html`). La teinte suit le RÔLE. */
.rc-sc-choix { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.rc-sc-liste { font: inherit; font-size: var(--text-xs); font-weight: 500; padding: 5px 28px 5px 11px; border-radius: var(--radius-pill);
  cursor: pointer; appearance: none; -webkit-appearance: none; color: var(--sc-depart);
  background: rgba(245,244,240,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8a6b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid rgba(245,244,240,.2); }
.rc-sc-liste:hover { border-color: var(--border-strong); }
.rc-sc-liste option { color: var(--foreground); background: var(--card, #16161c); }
.rc-sc-liste.rc-teinte--en_cours { color: var(--sc-en_cours); background-color: rgba(142,199,255,.12); border-color: rgba(142,199,255,.35); }
.rc-sc-liste.rc-teinte--abouti { color: var(--sc-abouti); background-color: rgba(134,219,160,.14); border-color: rgba(134,219,160,.4); }
.rc-sc-liste.rc-teinte--clos { color: var(--sc-clos); background-color: rgba(245,244,240,.06); border-color: rgba(245,244,240,.18); }
@media (max-width: 640px) { .rc-sc-liste { min-height: 40px; } }

/* « Planifier un rendez-vous », en haut à droite de la tâche (1er octobre 2026). */
.rc-w-rdv-haut { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  font-size: var(--text-xs); text-decoration: none; margin-right: 4px; }
@media (max-width: 640px) { .rc-w-rdv-haut { min-height: 40px; } }

/* La campagne de ce qu'on pose depuis une tâche (1er octobre 2026). */
.rc-w-pose-campagne { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-w-pose-campagne select { font: inherit; color: var(--foreground); background: var(--background); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 5px 8px; max-width: 220px; }
.rc-zone-poser .rc-w-note-pied { flex-wrap: wrap; }
.rc-zone-campagnes-gauche { margin-top: 4px; }

.rc-compose-suite .rc-j-clore { margin: 0; }

/* ⚠️ **LE RÉGLAGE D'UNE TÂCHE SUR TOUTE LA LARGEUR** (demandes de Tevini du
   1er octobre 2026) : dans la zone « Note / Tâche » de la fenêtre d'une
   tâche, les canaux ont la forme des boutons de canaux de la tâche — encadrés,
   le nom et l'icône dans la couleur du canal, sans pastille — et les canaux,
   les raccourcis de « Quand », la date et l'heure se partagent la largeur. */
.rc-zone-poser .rc-canaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.rc-zone-poser .rc-canaux .rc-canal { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--background); color: var(--canal, var(--foreground)); font-size: var(--text-sm); cursor: pointer; }
.rc-zone-poser .rc-canaux .rc-canal > i { display: none; }
.rc-zone-poser .rc-canaux .rc-canal svg { color: inherit; flex: none; }
.rc-zone-poser .rc-canaux .rc-canal:hover { border-color: var(--border-strong); }
.rc-zone-poser .rc-canaux .rc-canal:has(input:checked) { border-color: color-mix(in srgb, var(--canal, var(--foreground)) 55%, transparent);
  background: color-mix(in srgb, var(--canal, var(--foreground)) 14%, transparent); font-weight: 500; }
.rc-zone-poser .rc-canaux .rc-j-libre { color: var(--muted-foreground); font-style: italic; }
.rc-zone-poser .rc-canal--appel     { --canal: #8ec7ff; }
.rc-zone-poser .rc-canal--sms       { --canal: #9be7c4; }
.rc-zone-poser .rc-canal--whatsapp  { --canal: #6ee7a8; }
.rc-zone-poser .rc-canal--mail      { --canal: var(--mmb-rouge-lumineux); }
.rc-zone-poser .rc-canal--linkedin  { --canal: #7fb4e8; }
.rc-zone-poser .rc-j-raccourcis { display: flex; flex-wrap: wrap; gap: 8px; height: auto; }
.rc-zone-poser .rc-j-raccourcis > * { flex: 1 1 56px; }
.rc-zone-poser .rc-j-raccourcis .rc-j-puce { justify-content: center; min-height: 40px; border-radius: var(--radius-md); }
.rc-zone-poser .rc-j-quand { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-zone-poser .rc-j-quand .rc-j-puce { justify-content: center; min-height: 40px; border-radius: var(--radius-md); width: 100%; }
.rc-zone-poser .rc-compose-quand { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

/* « Note » et « Tâche » dans la fenêtre d'une tâche : toute la largeur, la
   forme des encadrés de résultat (demande de Tevini du 1er octobre 2026). */
.rc-zone-poser .rc-compose-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: stretch;
  padding: 0; border: 0; background: none; }
.rc-zone-poser .rc-compose-onglets button { justify-content: center; min-height: 44px; font-size: var(--text-base); font-weight: 600;
  color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.rc-zone-poser .rc-compose-onglets button:hover { border-color: var(--border-strong); }
.rc-zone-poser .rc-compose-onglets button[aria-selected="true"] { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent);
  color: var(--foreground); }

/* ── La fenêtre d'un échange, à la forme du reste (1er octobre 2026) ──────
   Qui écrit (ou appelle), le résultat d'un appel : des encadrés sur toute la
   largeur, 44 px ; l'action (« Appeler », « Ouvrir LinkedIn ») dans la couleur
   du canal ; « Annuler » et « Terminé » à la même hauteur. */
.rc-echange { --canal: var(--accent-hi); }
.rc-echange[data-canal="appel"] { --canal: #8ec7ff; } .rc-echange[data-canal="sms"] { --canal: #9be7c4; }
.rc-echange[data-canal="whatsapp"] { --canal: #6ee7a8; } .rc-echange[data-canal="mail"] { --canal: var(--mmb-rouge-lumineux); }
.rc-echange[data-canal="linkedin"] { --canal: #7fb4e8; } .rc-echange[data-canal="instagram"] { --canal: #f58fc4; }
.rc-echange[data-canal="facebook"] { --canal: #8fa8ff; } .rc-echange[data-canal="telegram"] { --canal: #7fd3f5; }
.rc-echange[data-canal="discord"] { --canal: var(--mmb-rouge-lumineux); } .rc-echange[data-canal="tiktok"] { --canal: #ff8fa3; }
.rc-echange .rc-echange-sens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.rc-echange .rc-echange-sens label, .rc-echange .rc-echange-choix { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--background); color: var(--foreground); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.rc-echange .rc-echange-sens label:hover, .rc-echange .rc-echange-choix:hover { border-color: var(--border-strong); }
.rc-echange .rc-echange-sens label:has(:checked), .rc-echange .rc-echange-choix:has(:checked) {
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); color: var(--foreground); }
.rc-echange .rc-echange-resultat .rc-j-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
/* Les résultats d'un appel, chacun sa couleur (5 octobre 2026) : l'icône la
   porte toujours ; choisi, le bouton entier se teinte. */
.rc-echange .rc-echange-choix { gap: 7px; padding: 0 8px; white-space: nowrap; --teinte: var(--muted-foreground); }
.rc-echange .rc-echange-choix svg { color: var(--teinte); flex: none; }
.rc-echange .rc-echange-choix--repondu { --teinte: #6ee7a8; }
.rc-echange .rc-echange-choix--pas_repondu { --teinte: #fbbf24; }
.rc-echange .rc-echange-choix--injoignable { --teinte: #fb923c; }
.rc-echange .rc-echange-choix--faux_numero { --teinte: #fca5a5; }
.rc-echange .rc-echange-resultat .rc-echange-choix:has(:checked) {
  background: color-mix(in srgb, var(--teinte) 14%, transparent);
  border-color: color-mix(in srgb, var(--teinte) 55%, transparent); color: var(--teinte); }
.rc-echange .rc-echange-action { align-items: stretch; }
.rc-echange .rc-pro-ouvrir { flex: none; min-height: 44px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--canal) 45%, transparent);
  background: color-mix(in srgb, var(--canal) 12%, transparent); color: var(--canal); display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; font-size: var(--text-sm); }
.rc-echange .rc-pro-ouvrir:hover { background: color-mix(in srgb, var(--canal) 20%, transparent); }
.rc-echange .rc-pro-ouvrir .rc-pro-avec { color: var(--muted-foreground); font-weight: 400; }
.rc-echange .rc-choix-modele > .btn { min-height: 32px; padding: 0 12px; font-size: var(--text-xs); }
.rc-echange .rc-echange-pied .btn { min-height: 44px; min-width: 120px; padding: 0 18px; font-size: var(--text-sm);
  border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; }
.rc-echange .rc-echange-pied .btn-ghost { border: 1px solid var(--border); }
.rc-echange [hidden] { display: none !important; }
/* « Déjà écrit » : une pastille de hauteur fixe, qui ne s'étire pas. */
.rc-zone-poser .rc-j-suggestions { align-items: center; }
.rc-zone-poser .rc-j-suggestions button { min-height: 32px; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; }
/* La campagne dans la fenêtre d'une tâche : un encadré, son icône, son nom,
   et le statut de la personne à droite (1er octobre 2026). */
.rc-w-camp--carte { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.rc-w-camp--carte .rc-sc-tete { flex-wrap: nowrap; gap: 10px; }
.rc-w-camp-ico { flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); display: inline-flex; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent-hi, var(--mmb-rouge-lumineux)); }
.rc-w-camp-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-w-camp-corps .rc-sc-nom { flex: none; }
.rc-w-camp-corps small { font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-w-camp--carte .rc-sc-choix { flex: none; }
.rc-zone-campagnes .rc-w-titre { margin: 0 0 8px; }
/* ⚠️ Le menu « Contactable » s'accroche à la CARTE de la personne, pas à la
   pastille (1er octobre 2026) : posé près du bord droit de la colonne, il
   débordait et se faisait couper. Il prend la largeur de la carte. */
.rc-w .rc-j-personne.rc-w-carte { position: relative; }
.rc-w .rc-j-personne .rc-w-etat { position: static; }
.rc-w .rc-j-personne .rc-w-etat-menu { left: 0; right: 0; width: auto; top: calc(100% + 6px); }
/* ── Liens RDV (maquette validée par Tevini le 1er octobre 2026) ──────────
   La liste de ses liens et la page d'un lien. Les chiffres sont plus petits
   que ceux des autres écrans : demandé à la validation (« un peu trop gros »). */
.lr-pile { display: flex; flex-direction: column; gap: 22px; }
.lr-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lr-tete .rc-titre-page { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lr-gestes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lr-fil { font-size: var(--text-sm); color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.lr-fil:hover { color: var(--foreground); }
.lr-periode { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.lr-periode a { padding: 7px 12px; min-height: 36px; display: inline-flex; align-items: center; font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: none; }
.lr-periode a[aria-current] { background: var(--muted); color: var(--foreground); }
.lr-cartes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lr-cartes .rc-carte { padding: 12px 14px; }
.lr-cartes .rc-carte-chiffre { font-size: 22px; margin-top: 4px; }
.lr-cartes .rc-carte-chiffre small { font-size: 13px; color: var(--muted-foreground); margin-left: 6px; font-weight: 400; }
.lr-cartes .lr-prochain-carte .rc-carte-chiffre { font-size: 17px; }
.lr-pour { display: flex; gap: 4px; flex-wrap: wrap; }
.lr-lien-nom { display: flex; align-items: center; gap: 10px; color: var(--foreground); text-decoration: none; min-width: 0; }
.lr-lien-nom > span:last-child { min-width: 0; }
.lr-lien-nom b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-lien-nom small { color: var(--muted-foreground); font-size: var(--text-sm); display: block; }
.lr-icone { flex: 0 0 34px; height: 34px; border-radius: var(--radius-md); background: rgb(139 127 224 / .14); color: var(--accent); display: grid; place-items: center; }
.lr-taux { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.lr-taux .rc-jauge { width: 52px; }
.lr-tableau td { height: 60px; }
.lr-pause td > * { opacity: .55; }
.lr-resume { display: none; }
.lr-nouveau h2, .lr-bloc-titre h2 { font-size: var(--text-lg); font-weight: 500; margin: 0; display: flex; align-items: center; gap: 8px; }
.lr-champs { display: grid; grid-template-columns: 2fr 160px; gap: 12px; }
.lr-cases { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.lr-case { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-sm); cursor: pointer; }
.lr-case input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.lr-case:has(input:checked) { border-color: var(--accent); background: rgb(139 127 224 / .10); }
.lr-aide { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; }
.lr-vide { display: flex; gap: 12px; align-items: center; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.lr-vide p { margin: 0; }
/* La page d'un lien */
.lr-deux { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.lr-bloc-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lr-entonnoir { display: flex; flex-direction: column; gap: 10px; }
.lr-etage { display: grid; grid-template-columns: 110px 1fr 90px; gap: 12px; align-items: center; font-size: var(--text-sm); }
.lr-etage-barre { height: 22px; background: var(--muted); border-radius: var(--radius-sm); overflow: hidden; }
.lr-etage-barre span { display: block; height: 100%; background: var(--accent); opacity: .85; border-radius: var(--radius-sm); }
.lr-etage-barre--vert span { background: var(--success); }
.lr-etage b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.lr-etage b small { color: var(--muted-foreground); font-weight: 400; margin-left: 4px; }
.lr-mini { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lr-mini th { font-size: var(--text-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); text-align: right; padding: 0 0 8px 10px; border-bottom: 1px solid var(--border); }
.lr-mini th:first-child, .lr-mini td:first-child { text-align: left; padding-left: 0; }
.lr-mini td { text-align: right; padding: 10px 0 10px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.lr-mini tr:last-child td { border-bottom: 0; }
.lr-semaines { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; height: 150px; }
.lr-semaine { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.lr-semaine-barres { display: flex; gap: 3px; align-items: flex-end; height: 115px; }
.lr-semaine-barres i { display: block; width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; }
.lr-semaine-barres .c { background: var(--muted-foreground); opacity: .35; }
.lr-semaine-barres .r { background: var(--accent); }
.lr-semaine small { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.lr-legende { display: flex; gap: 14px; font-size: var(--text-sm); color: var(--muted-foreground); }
.lr-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.lr-prochain { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.lr-prochain:last-child { border-bottom: 0; }
.lr-prochain em { color: var(--muted-foreground); font-style: normal; display: block; }
@media (max-width: 900px) {
  .lr-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr-cartes .rc-carte:first-child { grid-column: 1 / -1; }
  .lr-deux, .lr-champs { grid-template-columns: 1fr; }
  .lr-etage { grid-template-columns: 80px 1fr 70px; }
  .lr-semaines { gap: 4px; }
  .lr-semaine-barres i { width: 8px; }
  .lr-semaine small { font-size: 9px; }
  /* Le tableau des liens devient une pile de cartes de trois lignes. */
  .lr-tableau tr { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
  .lr-tableau td { height: auto; }
  .lr-tableau td[data-colonne] { display: none; }
  .lr-tableau td[data-colonne]::before { content: none; }
  .lr-tableau td.lr-premiere { display: block; }
  .lr-tableau td.lr-pour-cellule { display: block; padding: 6px 0 8px 44px; }
  .lr-tableau td.lr-resume { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-left: 44px; font-size: var(--text-sm); color: var(--muted-foreground); }
  .lr-tableau td.lr-resume b { color: var(--foreground); font-weight: 500; }
  .lr-tableau td:last-child { position: static; background: transparent; box-shadow: none; }
  .lr-tableau tbody tr:hover td { background: transparent; }
  .lr-resas td[data-colonne] { display: flex; }
  .lr-resas td[data-colonne]::before { content: attr(data-colonne); }
}
.lr-nouveau fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lr-nouveau legend { padding: 0; margin-bottom: 8px; }
.lr-tableau td[data-colonne="Taux"] { overflow: visible; }

/* ⚠️ **L'EN-TÊTE D'UNE RÉUNION SUR UNE SEULE LIGNE** (demande de Tevini du
   2 octobre 2026, fiche à deux colonnes) : le titre et son état, l'horaire, le
   lieu, « Rejoindre » bien visible, la croix au bout. Le libellé « Réunion »,
   l'adresse de visio en toutes lettres et la mention de l'agenda Google n'y
   sont plus : la campagne et les personnes sont dans la colonne de gauche. */
.rc-r-deux .rc-r-tete { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 16px; padding: 16px 24px; min-height: 0; }
/* La hauteur de l'en-tête d'une tâche : 16 px, une rangée de 44 px, 16 px. */
.rc-r-deux .rc-r-tete > * { min-height: 0; }
.rc-r-deux .rc-r-titre { order: 1; flex-wrap: nowrap; min-width: 0; flex: 0 1 auto; gap: 8px; }
.rc-r-deux .rc-r-titre h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-base); }
.rc-r-deux .rc-r-infos { order: 2; flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0;
  overflow: hidden; white-space: nowrap; }
.rc-r-deux .rc-r-ligne1 { order: 3; margin-left: auto; }
.rc-r-deux .rc-r-sur { display: none; }
.rc-r-deux .rc-r-infos > span:empty, .rc-r-deux .rc-r-infos .rc-r-lien,
.rc-r-deux .rc-r-infos .rc-r-ico:has(+ .rc-r-lien), .rc-r-deux .rc-r-infos .rc-r-ico:has(.rc-j-g),
.rc-r-deux .rc-r-infos .rc-r-ico:has(.rc-j-g) + .rc-r-val { display: none; }
.rc-r-deux .rc-r-infos .rc-r-ico { display: inline-flex; color: var(--muted-foreground); }
.rc-r-deux .rc-r-infos .rc-r-val { margin-right: 12px; }
.rc-r-deux .rc-r-rejoindre { min-height: 32px; padding: 0 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); color: var(--foreground); font-weight: 500; text-decoration: none; }
.rc-r-deux .rc-r-rejoindre:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 24%, transparent); }
/* « Modèles » au bout de la ligne (2 octobre 2026) : sa liste s'ouvre vers la
   gauche et sortait de la fenêtre, coupée. Collée au bord droit, elle y tient. */
.rc-echange .rc-notes-tete .rc-choix-modele { margin-left: auto; }

/* L'éditeur de mail, maquette du 2 octobre 2026 : reçu / envoyé, aperçu,
   documents de la fiche. */
.rc-mail .rc-mail-sens { margin: 0 24px 4px; }
.rc-mail [hidden] { display: none !important; }
.rc-mail-docs { position: relative; display: inline-block; }
.rc-mail-docs > summary { list-style: none; cursor: pointer; }
.rc-mail-docs > summary::-webkit-details-marker { display: none; }
.rc-mail-docs-liste { position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 0; width: 300px; max-height: 240px; overflow: auto;
  padding: 6px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border-strong);
  box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.rc-mail-docs-liste button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: var(--radius-md); background: none; color: var(--foreground); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: left; }
.rc-mail-docs-liste button:hover { background: var(--muted); }
.rc-mail-docs-liste small { color: var(--muted-foreground); flex: none; }
.mdl-mail-plus { display: grid; grid-template-columns: 1fr; gap: 10px; }
.mdl-mail-plus[hidden] { display: none; }
/* Un message mis en forme dans l'activité (2 octobre 2026). */
.rc-j-evt-message.ml-apercu { white-space: normal; }
.rc-j-evt-message.ml-apercu > :first-child { margin-top: 0; }
.rc-j-evt-message.ml-apercu > :last-child { margin-bottom: 0; }

/* ── Le panneau « Modèles et variables » (2 octobre 2026, `_panneau_modeles.html`) ──
   Le même à droite de toutes les fenêtres d'échange : recherche, modèles en
   cartes, variables groupées et repliables. */
dialog.rc-echange--panneau { width: min(980px, calc(100vw - 32px)); padding: 0; }
.rc-echange-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.rc-echange--panneau .rc-echange-forme { padding: 24px; min-width: 0; }
.rc-pm { display: flex; flex-direction: column; gap: 16px; padding: 18px 16px; min-width: 0;
  border-left: 1px solid var(--border); background: color-mix(in srgb, var(--background) 60%, var(--card));
  max-height: calc(100vh - 80px); overflow: auto; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
.rc-pm-recherche { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--background); color: var(--muted-foreground); }
.rc-pm-recherche input { border: 0; background: transparent; padding-left: 0; min-height: 36px; }
.rc-pm-recherche input:focus { box-shadow: none; }
.rc-pm-bloc { display: flex; flex-direction: column; gap: 8px; }
.rc-pm-titre { margin: 0; font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--muted-foreground); }
.rc-pm-modeles { display: flex; flex-direction: column; gap: 6px; }
.rc-pm-groupe { margin: 4px 0 0; font-size: var(--text-2xs); color: var(--disabled-foreground, var(--muted-foreground)); }
.rc-pm-modele { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.rc-pm-modele:hover { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent); }
.rc-pm-modele-nom { font-size: var(--text-sm); font-weight: 500; }
.rc-pm-modele small { font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-pm-vgroupe { border-top: 1px solid var(--border); padding: 6px 0; }
.rc-pm-vgroupe:first-child { border-top: 0; padding-top: 0; }
.rc-pm-vgroupe > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-xs); font-weight: 500; color: var(--foreground); padding: 4px 0; }
.rc-pm-vgroupe > summary::-webkit-details-marker { display: none; }
.rc-pm-vgroupe > summary small { color: var(--muted-foreground); font-weight: 400; }
.rc-pm-vliste { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
.rc-pm-var--vide { opacity: .5; }
@media (max-width: 860px) {
  .rc-echange-grille { grid-template-columns: 1fr; }
  .rc-pm { border-left: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-xl) var(--radius-xl); max-height: none; }
}
/* Renseigner une variable vide, sous son groupe (2 octobre 2026). */
.rc-pm-var--vide { opacity: .55; border-style: dashed; }
.rc-pm-renseigner { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent); }
.rc-pm-renseigner label { font-size: var(--text-xs); color: var(--foreground); font-weight: 500; }
.rc-pm-renseigner-pied { display: flex; gap: 6px; flex-wrap: wrap; }
/* Une variable remplie et son crayon, collés (2 octobre 2026). */
.rc-pm-paire { display: inline-flex; align-items: stretch; }
.rc-pm-paire .rc-pm-var { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rc-pm-crayon { border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--background); color: var(--muted-foreground); font-size: 11px; padding: 0 6px; cursor: pointer; }
.rc-pm-crayon:hover { color: var(--foreground); background: var(--muted); }

/* La barre « Contacter », épinglée sous l'en-tête (2 octobre 2026). */
.rc-modale-barre { flex: none; padding: 10px 24px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 55%, var(--card)); }
.rc-modale-barre .rc-zone-agir { margin: 0; padding: 0; border: 0; }
.rc-modale-barre .rc-w-titre { margin: 0 0 6px; }
.rc-modale-barre .rc-w-canaux { flex-wrap: wrap; }
@media (max-width: 640px) { .rc-modale-barre { padding: 8px 16px; } }
[data-repli-auto][hidden], .rc-js [data-repli-auto] { display: none !important; }
.rc-modale-barre .rc-zone-agir:has(.rc-w-canaux) > .rc-w-titre { display: none; }

/* ⚠️ **LES FENÊTRES À LA TAILLE DE LEUR COLONNE DE GAUCHE** (demande de Tevini
   du 2 octobre 2026) : entre 641 et 1100 px, les règles « tactiles » grossissaient
   la droite (16-17 px, boutons de 44-48 px) à côté d'une gauche en 13 px. Dans
   les fenêtres d'une tâche, d'une réunion et d'un échange, tout revient à
   13-14 px et 36-40 px ; le téléphone (640 px et moins) garde ses cibles. */
@media (min-width: 641px) {
  .rc-w .rc-j-issue, .rc-modale-reunion .rc-j-issue { min-height: 38px !important; }
  .rc-w .rc-j-issue b, .rc-modale-reunion .rc-j-issue b { font-size: var(--text-sm); }
  .rc-zone-poser .rc-compose-onglets button { min-height: 38px !important; font-size: var(--text-sm); }
  .rc-modale-barre .rc-j-echange, .rc-modale-barre .rc-manquants summary, .rc-modale-barre .rc-j-plus {
    min-height: 34px !important; font-size: var(--text-xs); padding: 0 10px; }
  .rc-w .rc-ed--note .rc-ed-zone, .rc-modale-reunion .rc-ed--note .rc-ed-zone, .rc-echange .rc-ed--note .rc-ed-zone {
    font-size: var(--text-sm); }
  .rc-w .btn, .rc-modale-reunion .btn, .rc-echange .btn {
    min-height: 36px !important; font-size: var(--text-sm) !important; padding: 0 14px; }
  .rc-r-pied .btn { min-height: 36px !important; }
  .rc-w .rc-copier, .rc-modale-reunion .rc-copier, .rc-w .rc-w-filtres .rc-vue, .rc-modale-reunion .rc-w-filtres .rc-vue {
    min-height: 30px !important; }
  .rc-echange .rc-echange-sens label, .rc-echange .rc-echange-choix { min-height: 38px; font-size: var(--text-sm); }
  .rc-echange .rc-pro-ouvrir { min-height: 38px; }
  .rc-zone-poser .rc-canaux .rc-canal, .rc-zone-poser .rc-j-raccourcis .rc-j-puce, .rc-zone-poser .rc-j-quand .rc-j-puce {
    min-height: 34px !important; font-size: var(--text-xs); }
  .rc-w .rc-saisie, .rc-modale-reunion .rc-saisie, .rc-echange .rc-saisie { font-size: var(--text-sm); }
}
@media (min-width: 641px) {
  .rc-w .rc-ed--note .rc-ed-barre button, .rc-modale-reunion .rc-ed--note .rc-ed-barre button,
  .rc-echange .rc-ed--note .rc-ed-barre button { min-width: 28px !important; min-height: 28px !important; height: 28px; padding: 0 5px; }
  .rc-w .rc-ed--note .rc-ed-barre, .rc-modale-reunion .rc-ed--note .rc-ed-barre, .rc-echange .rc-ed--note .rc-ed-barre { padding: 3px 6px; }
}

/* Les canaux dans l'en-tête d'une tâche (2 octobre 2026) : l'étiquette, les
   canaux, puis « Planifier un rendez-vous » et les gestes, sur une ligne. */
.rc-modale-tete .rc-j-serie-tete:has(.rc-entete-canaux) .rc-j-serie-rang { flex: none; }
.rc-entete-canaux { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0 8px; }
.rc-entete-canaux .rc-j-echange, .rc-entete-canaux .rc-manque-bouton { min-height: 32px !important; padding: 0 9px;
  font-size: var(--text-xs); }
.rc-manque-liste--liens { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.rc-manque--lien { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-md);
  color: var(--canal, var(--foreground)); text-decoration: none; font-size: var(--text-sm); }
.rc-manque--lien:hover { background: var(--muted); }
.rc-manque--lien.rc-j-echange--appel { --canal: #8ec7ff; } .rc-manque--lien.rc-j-echange--sms { --canal: #9be7c4; }
.rc-manque--lien.rc-j-echange--whatsapp { --canal: #6ee7a8; } .rc-manque--lien.rc-j-echange--mail { --canal: var(--mmb-rouge-lumineux); }
.rc-manque--lien.rc-j-echange--linkedin { --canal: #7fb4e8; } .rc-manque--lien.rc-j-echange--instagram { --canal: #f58fc4; }
.rc-manque--lien.rc-j-echange--facebook { --canal: #8fa8ff; } .rc-manque--lien.rc-j-echange--telegram { --canal: #7fd3f5; }
.rc-manque--lien.rc-j-echange--discord { --canal: var(--mmb-rouge-lumineux); } .rc-manque--lien.rc-j-echange--tiktok { --canal: #ff8fa3; }
@media (max-width: 900px) { .rc-entete-canaux { order: 5; flex-basis: 100%; margin: 8px 0 0; } }
.rc-modale-tete .rc-j-serie-tete:has(.rc-entete-canaux) { flex-wrap: wrap; row-gap: 6px; }

/* Les fenêtres défilent sans montrer leur barre (demande de Tevini du 2 octobre
   2026) : la molette, le pavé et le doigt font défiler comme avant. */
/* Les colonnes d'une activité aussi (historique, sous-activité, activité,
   volets de Ma journée), demande de Tevini du 14 octobre 2026. */
dialog.rc-fenetre, dialog.rc-fenetre *, .rc-volet, .rc-volet *, .rc-histo, .rc-histo *,
.rc-gauche, .rc-gauche *, .mj-conv-volet, .mj-conv-volet * { scrollbar-width: none; }
dialog.rc-fenetre::-webkit-scrollbar, dialog.rc-fenetre *::-webkit-scrollbar,
.rc-volet::-webkit-scrollbar, .rc-volet *::-webkit-scrollbar, .rc-histo::-webkit-scrollbar, .rc-histo *::-webkit-scrollbar,
.rc-gauche::-webkit-scrollbar, .rc-gauche *::-webkit-scrollbar,
.mj-conv-volet::-webkit-scrollbar, .mj-conv-volet *::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* La fiche d'une personne : l'en-tête d'une tâche (2 octobre 2026). */
.rc-fiche-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-fiche-entete .rc-entete-canaux { margin: 0; }

/* Les BULLES des activités en cours (14 octobre 2026, `_bulles.js`) : en bas
   à gauche, à côté du rail, AU-DESSUS des volets — trois colonnes ouvertes
   ne les cachent pas. Les initiales, la pastille de ce qu'on faisait (la
   couleur de sa sorte), le prénom ; la croix oublie la bulle, pas le brouillon. */
.rc-bulles { position: fixed; left: calc(var(--rail) + 16px); bottom: 16px; z-index: 70; display: flex;
  align-items: center; gap: 8px; max-width: calc(100vw - var(--rail) - 32px); }
.rc-bulle { position: relative; display: flex; align-items: center; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border-strong); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.rc-bulle a { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; color: var(--foreground);
  text-decoration: none; font-size: var(--text-sm); }
.rc-bulle:hover { border-color: var(--accent-ring-strong); }
.rc-bulle-rond { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--muted); color: var(--accent-hi); font-size: 11px; font-weight: 600; }
.rc-bulle-sorte { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); border: 1px solid var(--border-strong);
  color: var(--c-tache, var(--muted-foreground)); }
.rc-bulle--appel .rc-bulle-sorte { color: var(--c-appel, var(--success)); }
.rc-bulle--mail .rc-bulle-sorte { color: var(--c-mail, var(--accent)); }
.rc-bulle--message .rc-bulle-sorte { color: var(--c-message, var(--info)); }
.rc-bulle--rdv .rc-bulle-sorte { color: var(--c-rdv, var(--accent)); }
.rc-bulle-nom { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-bulle-x { border: 0; background: none; color: var(--muted-foreground); font-size: 15px; line-height: 1;
  padding: 6px 10px 6px 2px; cursor: pointer; }
.rc-bulle-x:hover { color: var(--foreground); }
.rc-bulles-plus { position: relative; }
.rc-bulles-plus > summary { list-style: none; width: 40px; height: 40px; border-radius: 50%; display: grid;
  place-items: center; background: var(--card); border: 1px solid var(--border-strong); cursor: pointer;
  color: var(--foreground); font-size: var(--text-sm); font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.rc-bulles-plus > summary::-webkit-details-marker { display: none; }
.rc-bulles-menu { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column;
  align-items: flex-start; gap: 6px; }

/* ── La fiche d'une personne en deux colonnes (maquette du 2 octobre 2026) ──
   La forme de la fenêtre d'une tâche : la barre des canaux en haut, deux
   colonnes qui défilent CHACUNE, sans barre de défilement visible. */
.rc-fiche-barre { display: flex; align-items: center; gap: 10px; padding: 10px 0 14px; }
.rc-fiche-barre .rc-fiche-entete { flex: 1; margin: 0; }
@media (min-width: 901px) {
  .rc-fiche-cadre { display: flex; flex-direction: column; height: calc(100dvh - var(--rc-fiche-haut, 96px)); min-height: 480px; }
  .rc-fiche-cadre .rc-fiche { flex: 1; min-height: 0; grid-template-columns: 360px minmax(0, 1fr); gap: 0;
    align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
    background: var(--card); }
  .rc-fiche-cadre .rc-fiche-qui, .rc-fiche-cadre .rc-fiche-vie { overflow-y: auto; min-height: 0; padding: 20px;
    scrollbar-width: none; }
  .rc-fiche-cadre .rc-fiche-qui::-webkit-scrollbar, .rc-fiche-cadre .rc-fiche-vie::-webkit-scrollbar { display: none; }
  .rc-fiche-cadre .rc-fiche-qui { border-right: 1px solid var(--border); background: rgba(255,255,255,.012);
    display: flex; flex-direction: column; gap: 16px; }
  .rc-fiche-cadre .rc-fiche-qui > .carte, .rc-fiche-cadre .rc-fiche-qui > form.carte { margin: 0; }
}
@media (max-width: 900px) {
  .rc-fiche-barre { position: sticky; top: var(--haut); z-index: 20; background: var(--background); padding: 8px 0; margin: 0 -16px;
    padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--border); }
}
.rc-sc-campagne.rc-w-camp--carte { margin-bottom: 8px; }
.rc-sc-campagne.rc-w-camp--carte .rc-sc-barre { margin: 10px 0 2px; }
@media (min-width: 901px) {
  .rc-fiche-cadre .rc-fiche-qui > .carte, .rc-fiche-cadre .rc-fiche-qui > form.carte {
    border: 0; background: none; box-shadow: none; padding: 0 0 16px; border-radius: 0; border-bottom: 1px solid var(--border); }
  .rc-fiche-cadre .rc-fiche-qui > :last-child { border-bottom: 0; }
}
/* « Note / Tâche » de la fiche : les onglets de la fenêtre d'une tâche. */
.rc-fiche-vie .rc-compose-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: stretch;
  padding: 0; border: 0; background: none; }
.rc-fiche-vie .rc-compose-onglets button { justify-content: center; min-height: 38px; font-size: var(--text-sm); font-weight: 600;
  color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.rc-fiche-vie .rc-compose-onglets button[aria-selected="true"] { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
/* La fiche au téléphone (maquette du 2 octobre 2026) : les canaux sur UNE ligne
   qui défile de côté, « Planifier » réduit à son icône ; puis la personne, sa
   campagne, ce qui attend et l'activité, et seulement ensuite relations et documents. */
@media (max-width: 900px) {
  .rc-fiche-barre { flex-wrap: nowrap; gap: 8px; }
  .rc-fiche-barre .rc-fiche-entete { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .rc-fiche-barre .rc-fiche-entete::-webkit-scrollbar { display: none; }
  .rc-fiche-barre .rc-entete-canaux { flex-wrap: nowrap; }
  .rc-fiche-barre .rc-j-echange, .rc-fiche-barre .rc-manque-bouton { white-space: nowrap; flex: none; }
  .rc-fiche-barre .rc-w-rdv-haut { flex: none; order: 2; font-size: 0; gap: 0; padding: 0 12px; min-height: 40px; }
  .rc-fiche-barre .rc-w-rdv-haut svg { width: 18px; height: 18px; }
  .rc-fiche-cadre .rc-fiche { display: flex; flex-direction: column; gap: 16px; }
}
@media (max-width: 900px) { .rc-fiche-barre .rc-manque-pop { position: fixed; top: 116px; left: 16px; right: 16px; width: auto; } }
.rc-fiche-infos > summary { list-style: none; cursor: pointer; font-size: var(--text-xs); color: var(--muted-foreground);
  padding: 6px 0; display: flex; align-items: center; gap: 6px; }
.rc-fiche-infos > summary::-webkit-details-marker { display: none; }
.rc-fiche-infos > summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.rc-fiche-infos[open] > summary::before { transform: rotate(90deg); }
@media (min-width: 901px) { .rc-fiche-infos > summary { display: none; } }
@media (max-width: 900px) {
  .rc-fiche-barre .rc-fiche-entete { display: flex; }
  .rc-fiche-barre .rc-entete-canaux { order: 1; }
  .rc-fiche-barre .rc-w-rdv-haut { order: 2; }
}
@media (max-width: 900px) {
  .rc-fiche-barre .rc-entete-canaux { flex: none; margin: 0; }
  .rc-fiche-barre .rc-fiche-entete { gap: 6px; }
}
@media (max-width: 640px) {
  .rc-w-camp--carte .rc-sc-tete { flex-wrap: wrap; }
  .rc-w-camp--carte .rc-w-camp-corps { flex: 1 1 calc(100% - 44px); }
  .rc-w-camp--carte .rc-sc-choix { flex: 1 1 100%; }
  .rc-w-camp--carte .rc-sc-liste { width: 100%; }
}
@media (max-width: 900px) { .rc-fiche-barre .rc-w-rdv-haut { order: 0; } .rc-fiche-barre .rc-entete-canaux { order: 1; } }

/* La colonne de gauche de la fiche, épurée (2 octobre 2026) : le rapport des
   colonnes de la fenêtre d'une tâche, aucune carte ni dégradé — des séparateurs,
   des gestes discrets. */
@media (min-width: 901px) {
  .rc-fiche-cadre .rc-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .rc-fiche-cadre .rc-fiche-qui { padding: 20px 24px; gap: 18px; }
  .rc-fiche-cadre .rc-fiche-vie { padding: 20px 28px; }
}
.rc-fiche-cadre .rc-fiche-qui .carte { border: 0; background: none; box-shadow: none; padding: 0; border-radius: 0; }
.rc-fiche-cadre .rc-fiche-qui .carte::before, .rc-fiche-cadre .rc-fiche-qui .carte::after { display: none; }
.rc-fiche-cadre .rc-fiche-qui > .carte + .carte, .rc-fiche-cadre .rc-fiche-qui > * + .carte { border-top: 1px solid var(--border); padding-top: 16px; }
.rc-fiche-cadre .rc-fiche-modifier { width: auto; display: inline-flex; margin: 12px 8px 4px 0; min-height: 32px;
  padding: 0 12px; font-size: var(--text-xs); }
.rc-fiche-cadre .rc-npc-poser { display: inline-block; margin: 12px 0 4px; vertical-align: top; }
.rc-fiche-cadre .rc-npc-poser > summary { min-height: 32px; padding: 0 12px; font-size: var(--text-xs); }
.rc-fiche-cadre .rc-fiche-identite { margin-bottom: 4px; }
.rc-fiche-cadre .rc-sc .rc-groupe-titre, .rc-fiche-cadre .rc-rel .rc-groupe-titre, .rc-fiche-cadre .rc-docs .rc-groupe-titre {
  font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 8px; }
.rc-r-par-lien { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }

/* ── Les informations de la fiche, rangées et modifiables sur place ──────────
   (2 octobre 2026, `_fiche_infos.html`) */
.rc-infos { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.rc-infos-bloc { display: flex; flex-direction: column; }
.rc-infos-titre { margin: 0 0 4px; font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--muted-foreground); }
.rc-info { display: flex; align-items: center; gap: 10px; min-height: 34px; border-bottom: 1px solid var(--border); transition: background .2s; }
.rc-info:last-of-type { border-bottom: 0; }
.rc-info-cle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
  color: var(--muted-foreground); min-width: 120px; }
.rc-info-droite { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.rc-info-val { min-width: 0; max-width: 100%; border: 1px solid transparent; background: none; color: var(--foreground);
  font: inherit; font-size: var(--text-sm); text-align: right; padding: 4px 8px; border-radius: var(--radius-md); cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rc-info-val:hover, .rc-info-val:focus-visible { border-color: var(--border-strong); background: var(--background); outline: none; }
.rc-info-val--vide { color: var(--disabled-foreground, var(--muted-foreground)); font-style: italic; }
.rc-info-champ { flex: 1; min-width: 0; min-height: 30px; font-size: var(--text-sm); padding: 4px 8px; }
textarea.rc-info-champ { min-height: 64px; }
.rc-info-plus { border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); background: none; color: var(--accent-hi, var(--mmb-rouge-lumineux));
  border-radius: var(--radius-md); font-size: var(--text-2xs); padding: 1px 6px; cursor: pointer; }
.rc-info--envoi { opacity: .7; }
.rc-info--ok { background: rgba(110,231,168,.08); }
.rc-info--refus { background: rgba(255,120,120,.10); }
.rc-infos-ajouter { align-self: flex-start; margin-top: 6px; border: 0; background: none; color: var(--accent-hi, var(--mmb-rouge-lumineux));
  font: inherit; font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; }
@media (max-width: 640px) {
  .rc-info { min-height: 44px; }
  .rc-info-cle { min-width: 100px; }
}
.rc-infos-ajout-reseau { margin-top: 6px; }
.rc-infos-ajout-reseau .rc-manque-bouton { border: 0; background: none; color: var(--accent-hi, var(--mmb-rouge-lumineux)); padding: 4px 0;
  font-size: var(--text-xs); min-height: 0; }
.rc-echange-vers { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-echange-vers select { flex: 1; min-width: 0; }
.rc-echange-quand { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-echange-quand .rc-w-titre { margin: 0; }
.rc-echange-quand input { max-width: 240px; }
/* Le jour et l'heure côte à côte (5 octobre 2026). */
.rc-echange-quand-champs:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-echange-quand-champs .rc-date-bouton { width: 220px; }
.rc-echange-quand-champs .rc-heure-enrobe { width: 120px; }
/* Un canal et toutes ses valeurs (2 octobre 2026). */
.rc-info--canal { align-items: flex-start; }
/* Une grille pour toute la liste : les valeurs, les étiquettes et les outils
   s'alignent d'une ligne à l'autre. */
.rc-canal-liste { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; column-gap: 4px; row-gap: 1px; padding: 3px 0; }
.rc-canal-ligne { display: contents; }
.rc-canal-liste > .rc-info-val--vide, .rc-canal-liste > .rc-canal-v { grid-column: 1 / -1; justify-self: end; }
.rc-canal-liste .rc-canal-ajout { grid-column: 1 / -1; justify-self: end; }
.rc-canal-ligne--faux .rc-canal-v { text-decoration: line-through; color: var(--muted-foreground); }
.rc-canal-liste button { background: none; border: 0; padding: 2px 4px; border-radius: 6px; color: inherit; font: inherit; cursor: pointer; }
.rc-canal-liste .rc-canal-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; justify-self: end; font-size: var(--text-sm); }
.rc-canal-liste button:hover { background: var(--muted); }
.rc-canal-liste .rc-canal-etiq { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-canal-liste .rc-canal-etiq--vide { visibility: hidden; font-size: 0; padding: 0; }
.rc-canal-liste:hover .rc-canal-etiq--vide, .rc-canal-liste .rc-canal-etiq--vide:focus-visible { visibility: visible; font-size: var(--text-xs); padding: 2px 4px; opacity: .6; }
.rc-canal-outils { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.rc-canal-principal { width: 22px; text-align: center; color: var(--accent-hi, var(--mmb-rouge-lumineux)); font-size: var(--text-sm); }
.rc-canal-liste .rc-canal-outil { color: var(--muted-foreground); width: 22px; text-align: center; }
.rc-canal-liste .rc-canal-outil--sur { width: auto; color: var(--destructive, #f87171); font-size: var(--text-xs); }
.rc-canal-liste .rc-canal-ajout { font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-canal-liste .rc-info-champ { max-width: 100%; }
@media (hover: hover) {
  .rc-canal-liste .rc-canal-outil { opacity: 0; }
  .rc-canal-liste:hover .rc-canal-outil, .rc-canal-liste .rc-canal-outil:focus-visible, .rc-canal-liste .rc-canal-outil--sur { opacity: 1; }
}
.rc-canal-liste > .rc-info-champ { grid-column: 1 / -1; }
/* Les campagnes en tête de la colonne de droite (2 octobre 2026). */
.rc-fiche-cadre .rc-fiche-campagnes { margin-bottom: 18px; }
.rc-fiche-cadre .rc-fiche-campagnes .rc-sc-campagne:last-child { margin-bottom: 0; }
/* Les onglets de la fiche : Informations, Relations, Documents (2 octobre 2026).
   Le format des onglets « Note / Tâche » de la colonne de droite. */
.rc-fiche-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-self: stretch; width: 100%; }
.rc-fiche-onglets button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--muted-foreground); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.rc-fiche-onglets button:hover { color: var(--foreground); }
.rc-fiche-onglets button[aria-selected="true"] { color: var(--foreground); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.rc-fiche-onglets .rc-groupe-n { font-weight: 500; }
.rc-fiche-cadre .rc-fiche-panneau > .carte { border-top: 0 !important; padding-top: 0 !important; }
.rc-fiche-cadre .rc-fiche-panneau .rc-rel .rc-groupe-titre { display: none; }
.rc-fiche-cadre .rc-fiche-panneau .rc-rel-tete { justify-content: flex-end; }
/* Le nom se modifie sur place ; la pastille d'état ouvre « Ne plus contacter ». */
.rc-fiche-nom-geste { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
  text-align: left; border-radius: 6px; }
.rc-fiche-nom-geste:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
/* Le nom modifié SUR PLACE, et la poubelle à côté (2 octobre 2026). */
.rc-fiche-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rc-fiche-nom-champs { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-fiche-nom-champs .rc-saisie { width: 9.5em; font-size: var(--text-base); }
.rc-fiche-poubelle { border: 0; background: none; padding: 4px; border-radius: 6px; color: var(--muted-foreground);
  cursor: pointer; display: inline-flex; opacity: .55; }
.rc-fiche-poubelle:hover, .rc-fiche-poubelle:focus-visible { opacity: 1; color: var(--error); background: var(--muted); }
.rc-fiche-photo-retirer { border: 0; background: none; padding: 0; margin-top: 4px; font: inherit; font-size: var(--text-xs);
  color: var(--muted-foreground); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: block; }
.rc-npc-geste { cursor: pointer; font: inherit; font-size: var(--text-xs); }
.rc-npc-geste svg { transform: rotate(90deg); opacity: .7; }
.rc-npc-geste:hover { filter: brightness(1.15); }
.rc-npc-fenetre { display: flex; flex-direction: column; gap: 12px; }
.rc-npc-fenetre fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-npc-fenetre legend { font-size: var(--text-sm); color: var(--muted-foreground); margin-bottom: 4px; }
@media (max-width: 900px) {
  .rc-fiche-cadre .rc-fiche-qui { display: flex; flex-direction: column; gap: 14px; order: 1; align-self: stretch; width: 100%; }
  .rc-fiche-cadre .rc-fiche-vie { order: 2; }
}
.rc-canal-liste .rc-canal-faux { color: var(--error); font-size: var(--text-xs); padding: 2px 4px; }
/* « Chercher partout » (2 octobre 2026) : sa fenêtre, ouverte par le champ de
   la barre du haut — en haut de l'écran au téléphone, pour que le clavier ne
   la cache pas. */
.rc-chercher { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 120px)); padding: 0;
  margin-top: 10vh; display: none; flex-direction: column; overflow: hidden; }
.rc-chercher[open] { display: flex; }
.rc-chercher-champ { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border);
  color: var(--muted-foreground); }
.rc-chercher-champ input { flex: 1; min-width: 0; border: 0; background: none; color: var(--foreground); font: inherit;
  font-size: 16px; outline: none; padding: 6px 0; }
.rc-chercher-champ input::-webkit-search-cancel-button { display: none; }
.rc-chercher-fermer { border: 0; background: none; color: var(--muted-foreground); font: inherit; font-size: var(--text-sm);
  cursor: pointer; padding: 6px 4px; }
.rc-chercher-resultats { overflow-y: auto; padding: 6px 8px 10px; scrollbar-width: none; }
.rc-chercher-resultats::-webkit-scrollbar { display: none; }
.rc-chercher-aide { color: var(--muted-foreground); font-size: var(--text-sm); padding: 14px 8px; margin: 0; }
.rc-chercher-groupe { font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground);
  margin: 10px 8px 4px; font-weight: 600; }
.rc-chercher-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-lg);
  color: var(--foreground); text-decoration: none; min-height: 48px; }
.rc-chercher-item:hover, .rc-chercher-item--actif { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); }
.rc-chercher-corps { display: flex; flex-direction: column; min-width: 0; }
.rc-chercher-titre { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-chercher-corps small { font-size: var(--text-xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-chercher-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent-hi, var(--mmb-rouge-lumineux)); }
.rc-chercher-tous { display: block; padding: 8px 10px; font-size: var(--text-xs); color: var(--accent-hi, var(--mmb-rouge-lumineux)); }
@media (max-width: 900px) {
  .rc-chercher { margin: 12px auto auto; max-height: calc(100dvh - 24px); width: calc(100vw - 24px); }
  .rc-chercher-item { min-height: 56px; }
}
/* Le téléphone au quotidien (demande de Tevini du 2 octobre 2026 : « ordinateur
   d'abord, téléphone soigné ») — ce qu'on vient faire d'abord passe devant. */
@media (max-width: 640px) {
  /* Les textes d'aide longs et les chiffres d'en-tête : utiles à
     l'ordinateur, ils repoussent l'essentiel hors de l'écran du téléphone. */
  .rc-replie-telephone { display: none !important; }
  .rc-tete-note { display: none; }
  /* Contacts : la recherche, puis « Nouveau contact » en grand, puis la liste. */
  .rc-outils { flex-wrap: wrap; gap: 8px; }
  .rc-outils .rc-outils-trait { display: none; }
  .rc-outils .rc-bouton-actions { order: -1; flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .rc-outils .rc-outil-second { flex: 1 1 0; justify-content: center; min-height: 40px; }
}
/* L'accueil au téléphone : les tâches du jour d'abord, les campagnes ensuite. */
@media (max-width: 900px) {
  .rc-content:has(> .rc-accueil) { display: flex; flex-direction: column; }
  .rc-content:has(> .rc-accueil) > .rc-j-campagnes { order: 10; margin-top: 24px; }
}
/* Le carnet au téléphone : la case, la pastille et le nom sur UNE ligne. */
@media (max-width: 900px) {
  [data-masse-zone] .rc-action { align-items: center; padding: 10px 12px; gap: 10px; }
  [data-masse-zone] .rc-action > .rc-action-corps { flex: 1 1 0; min-width: 0; }
  [data-masse-zone] .rc-action-detail { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  [data-masse-zone] .rc-action-detail > span { flex: none; }
  [data-masse-zone] .rc-action-detail > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ══ LA BARRE DU HAUT (4 octobre 2026, `_barre_haut.html`) ══════════════════
   Le style de TVNI, à la demande de Tevini (`.topbar` de sa charte) : bandeau
   sombre, recherche en verre, boutons carrés avec leur nombre. Les deux
   panneaux reprennent la cloche de TVNI (`cloche.css`). */
.rc-haut { position: sticky; top: 0; z-index: 50; height: 56px; background: #0F0F1A;
  background-image: radial-gradient(120% 200% at 20% 0%, color-mix(in srgb, var(--mmb-rouge) 10%, transparent) 0%, transparent 50%),
                    linear-gradient(180deg, #0F0F1A 0%, #14111E 100%);
  border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 1px 3px rgba(14,17,38,.20); }
.rc-haut-in { display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 24px; }
.rc-haut-marque { display: inline-flex; align-items: center; gap: 9px;
  color: var(--accent); font-size: var(--text-xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.rc-haut-chercher { margin-left: auto; width: 25em; max-width: 50vw; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 32px; font-size: var(--text-sm); text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 6px;
  color: rgba(255,255,255,.45); transition: all .18s ease; }
.rc-haut-chercher:hover { background: rgba(255,255,255,.12); border-color: color-mix(in srgb, var(--mmb-rouge) 40%, transparent); }
.rc-haut-chercher svg { color: rgba(255,255,255,.55); flex: none; }
.rc-haut-chercher-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-haut-kbd { font-size: var(--text-2xs); color: rgba(255,255,255,.50); padding: 1px 6px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 3px; font-family: var(--font-mono, monospace); }
.rc-haut-droite { display: flex; align-items: center; gap: 6px; flex: none; }
.rc-haut-menu { position: relative; }
.rc-haut-menu > summary { list-style: none; }
.rc-haut-menu > summary::-webkit-details-marker { display: none; }
.rc-haut-btn { position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px; color: rgba(255,255,255,.78); cursor: pointer; transition: all .14s ease; }
.rc-haut-btn:hover, .rc-haut-menu[open] > .rc-haut-btn { background: rgba(255,255,255,.12);
  border-color: color-mix(in srgb, var(--mmb-rouge) 40%, transparent); color: #FFFFFF; }
.rc-haut-cpt { position: absolute; top: -5px; right: -3px; min-width: 17px; height: 17px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); border: 2px solid #0F0F1A;
  font-size: 10px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-haut-cpt--rose { background: #F472B6; color: #1A0B14; }
.rc-haut-panneau { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 60; width: 392px;
  max-height: min(560px, calc(100dvh - 90px)); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0,0,0,.45); overflow: hidden; }
.rc-haut-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.rc-haut-tete h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--foreground); }
.rc-haut-tete form { margin: 0; }
.rc-haut-geste { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--text-sm); color: var(--accent); }
.rc-haut-geste:hover { color: var(--accent-hi); text-decoration: underline; }
.rc-haut-corps { overflow-y: auto; overscroll-behavior: contain; }
.rc-haut-sec { margin: 0; padding: 10px 16px 4px; font-size: var(--text-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-foreground); }
.rc-haut-ligne { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.rc-haut-ligne:last-child { border-bottom: 0; }
a.rc-haut-ligne:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 5%, transparent); }
.rc-haut-ligne form { margin: 0; flex: none; }
.rc-haut-qui { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.rc-haut-ic { width: 32px; height: 32px; flex: none; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.05); color: var(--muted-foreground);
  font-size: var(--text-xs); font-weight: 600; }
.rc-haut-ic--violet { background: color-mix(in srgb, var(--mmb-rouge) 16%, transparent); color: var(--accent-hi); }
.rc-haut-ic--rose { background: rgba(244,114,182,.14); color: #F9A8D4; }
.rc-haut-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rc-haut-l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: var(--text-sm); color: var(--foreground); font-weight: 500; }
.rc-haut-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rc-haut-quand { font-size: var(--text-xs); color: var(--muted-foreground); font-weight: 400; white-space: nowrap; flex: none; }
.rc-haut-retard { color: var(--warning, #FBBF24); white-space: normal; text-align: right; flex: 0 1 auto; }
.rc-haut-l2 { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 2px; }
.rc-haut-ligne--futur .rc-haut-nom { color: var(--muted-foreground); }
.rc-haut-notif--non-lue { background: color-mix(in srgb, var(--mmb-rouge) 5%, transparent); }
.rc-haut-notif--non-lue::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%; background: var(--accent); }
.rc-haut-souhaite { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 8px; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
  background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.30); color: #86EFAC; }
.rc-haut-souhaite:hover { background: rgba(74,222,128,.20); border-color: rgba(74,222,128,.50); }
.rc-haut-vide { margin: 0; padding: 32px 24px; text-align: center; color: var(--muted-foreground);
  font-size: var(--text-sm); }
.rc-haut-vide strong { display: block; margin-bottom: 4px; color: var(--foreground); font-size: var(--text-base); }
.rc-haut-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-haut-pied a { color: var(--muted-foreground); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.rc-haut-pied a:hover { color: var(--foreground); }
.rc-haut-pied a.rc-haut-tout { color: var(--accent); font-weight: 500; }
.rc-haut-page { padding: 0; overflow: hidden; }
/* Le rail garde sa flèche de repli ; le nom est passé dans la barre. */
.rc-app--haut .rc-rail-marque { visibility: hidden; }
/* La marque est dans la barre du haut : la tête du rail ne porte plus que la
   flèche de repli, elle n'a pas à prendre une ligne entière de hauteur. */
.rc-app--haut .rc-rail-tete { padding-bottom: 2px; margin-bottom: -4px; }
/* ⚠️ 44 px sous le doigt, tablette comprise : la règle d'`audit-ui.py`. */
@media (max-width: 1024px) {
  .rc-haut-marque { display: inline-flex; align-items: center; min-height: 44px; }
  .rc-haut-chercher, .rc-haut-btn { height: 44px; }
  .rc-haut-btn { width: 44px; }
}
@media (max-width: 767px) {
  .rc-haut-in { padding: 0 12px; gap: 8px; }
  /* Au téléphone, le logo reste et le nom s'efface : la recherche prend la place. */
  .rc-haut-marque > span, .rc-haut-kbd { display: none; }
  .rc-haut-marque { flex: 0 0 auto; justify-content: center; min-width: 44px; min-height: 44px; }
  .rc-haut-chercher { flex: 1; min-width: 0; width: auto; max-width: none; margin-left: 0; height: 44px; font-size: 16px; }
  .rc-haut-panneau { position: fixed; left: 8px; right: 8px; top: 62px; width: auto;
    max-height: calc(100dvh - 140px); }
  .rc-haut-souhaite { height: 44px; }
  .rc-haut-ligne, .rc-haut-geste, .rc-haut-pied a { min-height: 44px; }
}

/* ── Contacts : vues, liste ou tableau, pages (4 octobre 2026) ─────────────
   Carnet : `docs/notes/NOTES-vues-contacts.md`. Les onglets reprennent
   `.rc-vue` de la barre d'outils : une vue s'apprend une fois. */
/* ⚠️ Les onglets REVIENNENT À LA LIGNE au lieu de défiler : un rail qui défile
   coupe le menu « ⋯ » d'une vue, qui s'ouvre sous lui. */
.rc-vues-contacts { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; flex-wrap: wrap; }
.rc-vues-contacts > * { flex: none; }
.rc-vue-neuve { color: var(--accent); }
/* ⚠️ PAS `.rc-pop` : ce nom sert deux fois dans cette feuille, et le second
   (une bulle positionnée en script) cache l'élément d'office. */
.rc-vc-pop { position: relative; }
.rc-vc-pop > summary { list-style: none; cursor: pointer; }
.rc-vc-pop > summary::-webkit-details-marker { display: none; }
.rc-vc-pop:not([open]) > .rc-pop-corps { display: none; }
.rc-vue-menu > summary.rc-vue { padding: 6px 8px; }
.rc-vue-menu[open] > summary.rc-vue { background: var(--background); color: var(--foreground); }
/* Le menu d'une vue s'ouvre vers la DROITE : ancré à droite comme les autres
   panneaux, il sortirait de l'écran par la gauche sur la première vue. */
.rc-pop-corps--gauche { right: auto; left: 0; }
.rc-vue-renommer { display: flex; flex-direction: column; gap: 8px; }

.rc-outillage .rc-cherche { min-width: 220px; }
.rc-affichage { display: inline-flex; flex: none; background: var(--background); border-radius: 7px; padding: 2px; }
.rc-affichage a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px;
  font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); text-decoration: none; }
.rc-affichage a:hover { color: var(--foreground); }
.rc-affichage a[aria-current] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 3px rgba(0,0,0,.30); }

.rc-colonnes { flex: none; }
.rc-colonnes > summary { white-space: nowrap; }
.rc-colonnes .rc-pop-corps { width: 300px; }
.rc-colonnes-liste { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; margin: 0 -6px; }
.rc-colonne-choix { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 6px;
  font-size: var(--text-sm); cursor: grab; }
.rc-colonne-choix:hover { background: var(--background); }
.rc-colonne-choix input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.rc-colonne-choix small { margin-left: auto; font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-poignee { color: var(--disabled-foreground); display: inline-flex; }

.rc-vue-modifiee { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.rc-vue-modifiee form { display: contents; }
.rc-vue-modifiee-mot { font-size: var(--text-sm); color: var(--warning-text); margin-right: 2px; }

/* Le tableau des contacts : des cellules de texte, pas des champs — la
   disposition automatique suffit, et chaque colonne prend ce qu'elle montre. */
.rc-vc-cadre { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.rc-vc-tableau { table-layout: auto; }
.rc-vc-tableau th { padding: 12px 12px 10px; position: sticky; top: 0; background: var(--card); }
.rc-vc-tableau td { font-size: var(--text-sm); padding: 0 12px; white-space: nowrap;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.rc-vc-tableau tbody tr:last-child td { border-bottom: 0; }
.rc-vc-tableau td.rc-vc-liste { white-space: normal; }
.rc-vc-tableau .rc-vc-case { width: 38px; padding-right: 0; }
.rc-vc-nom a { display: inline-flex; align-items: center; gap: 9px; color: var(--foreground);
  text-decoration: none; font-weight: 500; }
.rc-vc-nom a:hover span { color: var(--accent); }
.rc-vc-vide { color: var(--disabled-foreground); }
.rc-vc-tableau tbody tr:hover td { background: var(--background); }
.rc-vc-tableau td.rc-vc-texte { max-width: 220px; }

.rc-pagination { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px;
  font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-pagination-pages { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rc-pagination-pages a { min-width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 7px; color: var(--foreground); text-decoration: none; }
.rc-pagination-pages a:hover { border-color: var(--accent); }
.rc-pagination-pages a[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.rc-pagination-saut { align-self: center; padding: 0 2px; }
.rc-pagination-par { margin-left: auto; }
.rc-pagination-par label { display: inline-flex; align-items: center; gap: 8px; }
.rc-pagination-par .rc-saisie { width: auto; padding: 5px 8px; }

.rc-masse-tout { border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--text-sm);
  text-decoration: underline; cursor: pointer; padding: 4px 6px; }
.rc-masse-tout[hidden] { display: none; }

/* ══ Les entreprises (4 octobre 2026, chantier « Équipes de prospection ») ══
   « Mes entreprises » dans Mon compte, l'écran « Équipe », et l'invitation
   reçue par mail. Une ligne = une pastille, un nom, un détail, des gestes. */
.en-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.en-ligne {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--border); color: var(--foreground); text-decoration: none;
}
.en-ligne:first-of-type { border-top: 0; }
.en-ligne--lien { border-radius: var(--radius-md); }
.en-ligne--lien:hover { background: var(--accent-wash); }
.en-ligne-corps { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.en-ligne-corps small { color: var(--muted-foreground); font-size: var(--text-sm); }
.en-ligne-gestes { display: flex; gap: 8px; align-items: center; color: var(--muted-foreground); }
.en-ligne-gestes form { margin: 0; }
.en-creer { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
.en-creer .rc-champ { flex: 1; }
.en-bloc { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.en-inviter { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: 0; }
.en-inviter input { flex: 1 1 240px; }
.en-inviter select { flex: 0 0 160px; }
.en-role { max-width: 160px; height: 36px; }
.en-lien { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.en-lien code { flex: 1 1 280px; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--background);
  border: 1px solid var(--border); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.en-bloc .rc-gestes form { margin: 0; }
.en-tableau form { margin: 0; }
.en-moi { color: var(--muted-foreground); font-weight: 400; }
.en-promesse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.en-promesse li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted-foreground); font-size: 14px; line-height: 1.5; }
.en-promesse li svg { flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.en-promesse b { color: var(--foreground); font-weight: 500; }
@media (max-width: 767px) {
  .en-creer { flex-direction: column; align-items: stretch; }
  .en-inviter select { flex: 1 1 100%; }
}

/* Les campagnes d'équipe (lot 2) : l'étiquette « Équipe TVNI » / « Confiées
   par TVNI », et l'avis qui dit ce que l'équipe voit. */
.rc-cp-equipe {
  display: inline-flex; align-items: center; margin-left: 10px; padding: 2px 8px;
  border: 1px solid var(--accent-ring-strong); border-radius: 999px;
  color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: 0;
  text-transform: none; vertical-align: middle; white-space: nowrap;
}
.rc-cp-avis-equipe { margin-bottom: 14px; }

/* Le suivi d'une campagne d'équipe (lot 3) : par membre, puis les prospects. */
.eq-bloc { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.eq-titre { font-size: 15px; font-weight: 600; margin: 0; }
.eq-titre span { color: var(--muted-foreground); font-weight: 400; font-size: 13px; }
.eq-lien { color: var(--foreground); text-decoration: none; }
.eq-lien:hover span:last-child { color: var(--accent); }
.eq-rouge { color: var(--error); }
.eq-vert { color: var(--success); }
.eq-gris { color: var(--muted-foreground); }
.eq-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eq-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--border-strong); border-radius: 8px; color: var(--muted-foreground);
  font-size: var(--text-sm); text-decoration: none; }
.eq-chip b { color: var(--foreground); font-weight: 500; }
.eq-chip--on { background: var(--muted); color: var(--foreground); }
.eq-membre { margin: 0; }
.eq-membre select { height: 36px; min-width: 170px; }
.eq-etape { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; border-radius: 6px;
  background: var(--muted); font-size: var(--text-sm); }
.eq-etape i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted-foreground)); }
/* Le départ (lot 4) : le lien discret pour quitter, les deux colonnes de ce que chacun garde. */
.en-quitter { margin-top: 28px; font-size: var(--text-sm); }
.en-quitter a { color: var(--muted-foreground); }
.en-quitter a:hover { color: var(--error); }
.en-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.en-col { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.en-col h2 { margin: 0 0 8px; font-size: 13px; color: var(--accent); font-weight: 600; }
.en-col ul { margin: 0; padding-left: 18px; color: var(--muted-foreground); line-height: 1.65; font-size: 14px; }
.en-col b { color: var(--foreground); font-weight: 500; }
.en-pied { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.en-confier { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.en-confier .btn { height: 40px; }
.en-confier select { min-width: 200px; height: 40px; }
@media (max-width: 767px) { .en-deux { grid-template-columns: 1fr; } }
.en-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.en-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px;
  border-bottom: 1px solid var(--border); font-size: 14px; }
.en-liste b { font-weight: 500; }
.en-liste span { color: var(--muted-foreground); }

/* ══ La boîte de réception (4 octobre 2026) ══════════════════════════════════ */
.rc-rail-item { position: relative; }
.rc-rail-compte { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; text-align: center; }
:root.rc-rail-replie .rc-rail-compte { position: absolute; top: 2px; right: 2px; margin: 0; padding: 0 5px; }
.rc-nav-pastille { position: absolute; margin: -4px 0 0 18px; min-width: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; line-height: 16px; }
.rc-nav-pastille--ligne { position: static; margin-left: 6px; }
.rc-boite-rappel { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--accent-ring-strong); background: var(--accent-wash); color: var(--foreground);
  text-decoration: none; font-size: 14px; }
.rc-boite-rappel svg { color: var(--accent); flex: none; }
.rc-boite-rappel-ouvrir { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-size: 13px; white-space: nowrap; }
.rc-boite-rappel:hover { border-color: var(--accent); }

.bx-page { display: flex; flex-direction: column; gap: 18px; }
.bx-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.bx-tete form { margin: 0; }
.bx-barre { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bx-onglet, .bx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border-radius: 8px; border: 1px solid var(--border-strong); color: var(--muted-foreground); font-size: 14px;
  text-decoration: none; }
.bx-onglet b, .bx-chip b { color: var(--foreground); font-weight: 600; }
.bx-onglet[aria-current], .bx-chip[aria-current] { background: var(--muted); color: var(--foreground); }
.bx-chip { font-size: 13px; border-color: var(--border); }
.bx-sep { width: 1px; height: 24px; background: var(--border-strong); margin: 0 4px; }
.bx-point { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); flex: none; }
.bx-c-whatsapp { background: #25D366; } .bx-c-instagram { background: #E1306C; }
.bx-c-discord { background: #5865F2; } .bx-c-mail { background: #7DD3FC; }
.bx-c-linkedin { background: #0A66C2; } .bx-c-telegram { background: #2AABEE; }
.bx-c-facebook { background: #1877F2; } .bx-c-sms { background: #A3E635; }
.bx-cadre { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; min-height: 560px; background: var(--card); }
.bx-liste { border-right: 1px solid var(--border); overflow: auto; max-height: calc(100vh - 230px); }
.bx-jour { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--disabled-foreground);
  padding: 14px 16px 6px; }
.bx-ligne { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); position: relative;
  color: var(--foreground); text-decoration: none; }
.bx-ligne:hover { background: var(--accent-wash); }
.bx-ligne[aria-current] { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent); }
.bx-ligne[aria-current]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.bx-av { width: 36px; height: 36px; border-radius: 50%; background: var(--muted); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; position: relative; }
.bx-av .bx-point { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid var(--card); }
.bx-corps { flex: 1; min-width: 0; display: block; }
.bx-corps > span { display: block; }
.bx-corps > .bx-l1, .bx-corps > .bx-tags { display: flex; }
.bx-l1 { display: flex; gap: 8px; align-items: baseline; }
.bx-nom { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-lu .bx-nom { font-weight: 400; color: var(--muted-foreground); }
.bx-n { font-size: 11px; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 6px; font-weight: 600; }
.bx-heure { margin-left: auto; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.bx-apercu { font-size: 13.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-top: 2px; }
.bx-pas-lu .bx-apercu { color: var(--foreground); }
.bx-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.bx-tag { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--muted); color: var(--muted-foreground); }
.bx-vide { padding: 40px 24px; text-align: center; color: var(--muted-foreground); margin: auto; }
.bx-vide b { display: block; color: var(--foreground); font-size: 16px; margin-bottom: 6px; }
.bx-lecture { display: flex; flex-direction: column; min-width: 0; }
.bx-lect-tete { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.bx-lect-qui { flex: 1; min-width: 0; }
.bx-lect-tete h2 { margin: 0; font-size: 17px; }
.bx-lect-tete p { margin: 2px 0 0; font-size: 13px; color: var(--muted-foreground); }
.bx-gestes { margin-left: auto; display: flex; gap: 8px; flex: none; }
.bx-gestes form { margin: 0; }
.bx-fil { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; overflow: auto; max-height: calc(100vh - 380px); }
.bx-date { text-align: center; font-size: 12px; color: var(--disabled-foreground); }
.bx-bulle { max-width: 72%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere; }
.bx-bulle > small { display: block; font-size: 11.5px; color: var(--muted-foreground); margin-bottom: 4px; }
.bx-bulle > small b { color: var(--accent); }
.bx-bulle p { margin: 0 0 6px; }
.bx-recu { background: var(--muted); align-self: flex-start; border-top-left-radius: 4px; }
.bx-recu.bx-nouveau { box-shadow: inset 0 0 0 1px var(--accent-ring-strong); }
.bx-envoye { background: color-mix(in srgb, var(--mmb-rouge) 18%, transparent); align-self: flex-end; border-top-right-radius: 4px; }
.bx-mail { max-width: 86%; }
.bx-mail .bx-objet { display: block; font-weight: 600; margin-bottom: 2px; }
.bx-prochaine { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px dashed var(--warning);
  border-radius: 10px; font-size: 13px; color: var(--warning-text); margin: 0 20px 14px; text-decoration: none; }
.bx-prochaine.bx-aucune { border-color: var(--border-strong); color: var(--muted-foreground); }
.bx-pied { border-top: 1px solid var(--border); padding: 14px 20px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bx-pied form { margin: 0; }
.bx-pied > .btn { height: 38px; font-size: 13.5px; padding: 0 16px; }
.bx-pied select { height: 32px; font-size: 13px; }
.bx-retour { display: none; }
@media (max-width: 767px) {
  .bx-cadre { grid-template-columns: 1fr; min-height: 0; }
  .bx-liste { border-right: 0; max-height: none; }
  .bx-cadre--lecture .bx-liste { display: none; }
  .bx-cadre:not(.bx-cadre--lecture) .bx-lecture { display: none; }
  .bx-fil { max-height: none; }
  .bx-retour { display: inline-flex; }
  .bx-lect-tete { flex-wrap: wrap; }
  .bx-retour { flex-basis: 100%; justify-content: flex-start; }
  .bx-retour.btn { width: auto; flex-basis: auto; margin-right: 100%; }
  .bx-ouvert .bx-tete, .bx-ouvert .bx-barre { display: none; }
  .bx-pied > .btn { flex: 1 1 auto; height: 44px; }
  .bx-gestes { width: 100%; }
  .bx-bulle { max-width: 88%; }
  .bx-chip { display: none; }
}

/* ── La boîte façon Spark (5 octobre 2026, maquette validée par Tevini) ──────
   Deux colonnes à la hauteur de l'écran : la liste (recherche, onglets) et la
   conversation (mails dans leur vrai format, réponse en bas). */
.bx-spark { gap: 0; position: relative; }
.bx-spark .bx-cadre { grid-template-columns: minmax(320px, 420px) 1fr; height: calc(100vh - 150px);
  min-height: 520px; background: var(--background); }
/* La barre d'action, fixée en bas (5 octobre 2026) : la boîte lui laisse sa
   place, sinon elle cacherait « Répondre » et les boutons d'envoi. */
:root:not(.rc-ba-masquee) body:has(.rc-ba) .bx-spark .bx-cadre { height: calc(100vh - 236px); }
.bx-colonne { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.bx-spark .bx-liste { border-right: 0; flex: 1; max-height: none; overflow: auto; }
.bx-recherche { padding: 14px 14px 10px; margin: 0; }
.bx-champ { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--card); color: var(--muted-foreground); }
.bx-champ:focus-within, .bx-champ--actif { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.bx-champ input { flex: 1; min-width: 0; border: 0; background: none; color: var(--foreground); font: inherit; font-size: 14px; outline: none; }
.bx-champ kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 6px; color: var(--disabled-foreground); }
.bx-effacer { font-size: 12.5px; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.bx-onglets { display: flex; gap: 2px; padding: 0 14px 10px; align-items: center; }
.bx-spark .bx-onglet { min-height: 32px; padding: 5px 8px; border: 0; border-radius: 7px; font-size: 13px; white-space: nowrap; }
.bx-spark .bx-onglet b { color: var(--accent); margin-left: 2px; }
.bx-spark .bx-onglet[aria-current] { background: var(--muted); color: var(--foreground); font-weight: 600; }
.bx-canaux { margin-left: auto; display: flex; gap: 0; flex: none; }
.bx-canal { width: 22px; height: 26px; display: grid; place-items: center; border-radius: 6px; }
.bx-canal:hover, .bx-canal--pris { background: var(--muted); }
.bx-canal--pris { box-shadow: inset 0 0 0 1px var(--accent-ring-strong); }
.bx-filtres { display: flex; gap: 6px; padding: 0 14px 8px; flex-wrap: wrap; }
.bx-filtres a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 4px 9px; color: var(--muted-foreground); text-decoration: none; }
.bx-filtres a[aria-current] { background: var(--muted); color: var(--foreground); border-color: transparent; }
.bx-res-entete { margin: 0; padding: 2px 16px 8px; font-size: 12.5px; color: var(--muted-foreground); }
.bx-res-entete b { color: var(--foreground); }
.bx-spark mark { background: rgba(251,191,36,.25); color: #fde68a; border-radius: 3px; padding: 0 2px; }

.bx-spark .bx-ligne { display: block; padding: 0; position: relative; }
.bx-spark .bx-ligne:hover { background: var(--muted); }
.bx-spark .bx-ligne--ici { background: var(--accent-wash); }
.bx-spark .bx-ligne--ici::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.bx-ligne-lien { display: flex; gap: 12px; padding: 12px 14px 12px 18px; color: var(--foreground); text-decoration: none; }
.bx-spark .bx-pas-lu::after { content: ""; position: absolute; left: 7px; top: 27px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bx-spark .bx-pas-lu .bx-nom, .bx-spark .bx-pas-lu .bx-objet { font-weight: 700; }
.bx-spark .bx-pas-lu .bx-heure { color: var(--accent); }
.bx-spark .bx-lu .bx-nom { font-weight: 500; color: var(--foreground); }
.bx-objet { display: block; font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-spark .bx-apercu { margin-top: 1px; font-size: 13px; color: var(--muted-foreground); }
.bx-archive { font-size: 10.5px; color: var(--disabled-foreground); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; }
.bx-tag--tache { background: rgba(251,191,36,.12); color: var(--warning-text); }
.bx-tag--ia { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent); }
.bx-tag--pj { background: none; padding: 0; color: var(--disabled-foreground); }
.bx-tags .bx-tag, .bx-tag--ia { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bx-survol { position: absolute; right: 10px; top: 9px; display: none; gap: 2px; padding: 3px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border-strong); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.bx-survol form { margin: 0; }
.bx-survol button, .bx-survol a { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: none; color: var(--muted-foreground); cursor: pointer; }
.bx-survol button:hover, .bx-survol a:hover { background: var(--muted); color: var(--foreground); }
.bx-ligne:hover .bx-survol, .bx-ligne:focus-within .bx-survol { display: flex; }
.bx-raccourcis { margin: 0; padding: 8px 14px 10px; border-top: 1px solid var(--border); display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--disabled-foreground); }
.bx-raccourcis kbd { font-family: inherit; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 4px; margin-right: 3px; color: var(--muted-foreground); }
.bx-vide--fete { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bx-coche { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--success);
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.35); margin-bottom: 8px; }
.bx-vide a { color: var(--accent); }

.bx-spark .bx-lecture { min-height: 0; background: var(--background); }
.bx-spark .bx-lect-tete { padding: 12px 20px; }
.bx-av--grand { width: 40px; height: 40px; font-size: 13px; }
.bx-etape { margin: 3px 0 0; }
.bx-etape label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.bx-etape select { height: 28px; font-size: 12.5px; padding: 0 30px 0 8px; width: auto; min-width: 150px; }
.bx-spark .bx-gestes { gap: 6px; align-items: center; }
.bx-ico { width: 34px; padding: 0; justify-content: center; }
.bx-spark .bx-fil { max-height: none; flex: 1; min-height: 0; padding: 16px 20px; gap: 10px; }
.bx-brouillons { display: flex; flex-direction: column; gap: 8px; }
.bx-brouillon { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 11px 14px;
  border: 1px dashed rgba(251,191,36,.45); border-radius: 10px; background: rgba(251,191,36,.05); }
.bx-brouillon-tete { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bx-brouillon-tete time { color: var(--disabled-foreground); font-size: 12px; }
.bx-brouillon-texte { grid-column: 1; font-size: 13px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-brouillon .btn { grid-column: 2; grid-row: 1 / span 2; }
.bx-mail-replie { border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.bx-mail-replie summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.bx-mail-replie summary::-webkit-details-marker { display: none; }
.bx-mail-replie summary b { font-size: 13.5px; }
.bx-mail-replie summary time { font-size: 12px; color: var(--disabled-foreground); grid-row: 1; grid-column: 2; }
.bx-mail-replie summary span { font-size: 13px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-mail-replie[open] summary span { white-space: normal; }
.bx-envoye-replie { background: #12141c; }
.bx-mail-replie .bx-mail-corps { margin: 0 14px 14px; width: calc(100% - 28px); }
.bx-mail-carte { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card); overflow: hidden; flex: none; }
.bx-mail-carte.bx-nouveau { box-shadow: inset 0 0 0 1px var(--accent-ring-strong); }
.bx-mail-tete { display: flex; align-items: center; gap: 12px; padding: 12px 14px 6px; }
.bx-mail-tete form { margin: 0; }
.bx-mail-tete .bx-av { width: 32px; height: 32px; font-size: 11px; }
.bx-mail-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bx-mail-qui b { font-size: 14px; }
.bx-mail-qui small { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-nouveau-mot { color: var(--accent); font-weight: 600; }
.bx-mail-tete time { font-size: 12px; color: var(--disabled-foreground); white-space: nowrap; }
.bx-mail-objet { margin: 0; padding: 4px 14px 10px; font-size: 16px; font-weight: 600; }
/* ⚠️ Le VRAI mail : fond blanc, comme Gmail le montre — c'est son format d'origine. */
.bx-mail-corps { display: block; width: calc(100% - 28px); margin: 0 14px 14px; height: 160px; border: 0; border-radius: 8px; background: #fff; }
.bx-pjs { list-style: none; margin: 0; padding: 0 14px 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.bx-pjs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--foreground); text-decoration: none; font-size: 13px; }
.bx-pjs small { color: var(--disabled-foreground); }
.bx-spark .bx-prochaine { margin: 10px 20px 0; }
.bx-spark .bx-pied { padding: 12px 20px 14px; }
.bx-repondre { flex: 1; margin: 0; display: flex; }
.bx-repondre-barre { flex: 1; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--card); color: var(--muted-foreground); font: inherit; font-size: 14px; text-align: left;
  cursor: text; text-decoration: none; }
.bx-repondre-barre:hover { border-color: var(--accent); color: var(--foreground); }
.bx-bandeau { margin: 0 14px 10px; padding: 10px 12px; border-radius: 9px; background: rgba(125,211,252,.08);
  border: 1px solid rgba(125,211,252,.25); font-size: 12.5px; color: var(--muted-foreground); display: flex; gap: 10px; align-items: center; }
.bx-bandeau b { color: var(--info); margin-right: 4px; }
.bx-bandeau .btn { flex: none; }
.bx-transfert { width: min(560px, calc(100vw - 32px)); padding: 18px 22px; display: none; flex-direction: column; gap: 12px; }
.bx-transfert[open] { display: flex; }
.bx-transfert-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-transfert-tete h2 { margin: 0; font-size: 17px; }
.bx-mail-tete .btn-sm { white-space: nowrap; }
.bx-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 16px; border-radius: 10px; background: #23263a; border: 1px solid var(--border-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 13.5px; transition: opacity .4s; }
.bx-toast form { margin: 0; }
.bx-toast-geste { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.bx-toast--part { opacity: 0; pointer-events: none; }
/* L'éditeur de mail, sous la conversation (`_fenetre_mail.html`, `en_ligne`). */
/* L'éditeur garde sa taille entière ; c'est le fil, au-dessus, qui défile. */
.rc-mail--en-ligne { flex: none; margin: 0 20px 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--card);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.rc-mail--en-ligne .rc-mail-tete { padding: 8px 14px; }
.rc-mail--en-ligne .rc-mail-ligne { min-height: 0; padding-top: 2px; padding-bottom: 2px; }
.rc-mail--en-ligne .rc-mail-ligne .rc-saisie { height: 32px; }
/* ⚠️ Comme Gmail : le volet de droite défile d'un bloc — la conversation, puis
   la réponse. L'en-tête reste en haut, les boutons d'envoi en bas. */
.bx-spark .bx-lecture { overflow-y: auto; }
.bx-spark .bx-lecture .bx-lect-tete { position: sticky; top: 0; z-index: 3; background: var(--background); }
.bx-spark .bx-lecture .bx-fil { flex: none; overflow: visible; min-height: 0; }
.bx-spark .bx-lecture .bx-pied { position: sticky; bottom: 0; background: var(--background); margin-top: auto; z-index: 2; }
.rc-mail-pied--en-ligne { position: sticky; bottom: 0; background: var(--card); padding-bottom: 12px; z-index: 2; }
.rc-mail--en-ligne .rc-mail-signature select { height: 32px; }
.rc-mail--en-ligne .rc-mail-pieces .btn { height: 32px; }
.rc-mail-pied--en-ligne { padding: 10px 0 0; border-top: 1px solid var(--border); margin-top: 10px; }
.rc-mail--en-ligne .rc-mail-tete { padding: 10px 14px; }
.rc-mail--en-ligne .rc-mail-corps { display: block; padding: 0 14px 12px; }
.rc-mail--en-ligne .rc-mail-ligne:has([data-mail="apercu"]) { display: none; }
.rc-mail-pied--en-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc-mail-tache { margin-right: auto; font-size: 12.5px; color: var(--warning-text); }
.rc-mail-decompte { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent); }
.rc-mail-panneau-repli { margin-top: 8px; }
.rc-mail-panneau-repli > summary { cursor: pointer; font-size: 13px; color: var(--muted-foreground); padding: 6px 0; }
.rc-mail-panneau-repli .rc-pm { position: static; width: auto; max-height: 320px; overflow: auto; border-left: 0; }
.bx-colonne, .bx-ligne-lien { min-width: 0; }
@media (max-width: 767px) {
  .bx-spark .bx-cadre { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .bx-colonne { border-right: 0; }
  .bx-cadre--lecture .bx-colonne { display: none; }
  .bx-onglets { overflow-x: auto; scrollbar-width: none; }
  .bx-spark .bx-lecture { overflow: visible; }
  .bx-etape label { flex-wrap: wrap; gap: 4px; }
  .bx-etape select { min-width: 0; max-width: 100%; }
  /* Glisser une ligne vers la gauche : « Archiver » apparaît dessous. */
  .bx-spark .bx-ligne { overflow: hidden; }
  .bx-spark .bx-ligne::before { content: "Archiver"; position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: flex-end; padding-right: 22px; background: #1f7a4d; color: #d1fae5; font-weight: 600; font-size: 13px; }
  .bx-spark .bx-ligne--glisse::before { background: #22995e; }
  .bx-spark .bx-ligne-lien { position: relative; z-index: 1; background: var(--background); transition: transform .18s; }
  .bx-spark .bx-ligne--ici .bx-ligne-lien { background: var(--background); }
  .bx-raccourcis, .bx-survol { display: none !important; }
  .bx-spark .bx-gestes { width: 100%; flex-wrap: wrap; }
  .bx-mail-corps { width: calc(100% - 16px); margin: 0 8px 10px; }
  .rc-mail--en-ligne { margin: 0 8px 10px; max-height: none; }
}

/* ══ La barre d'action (5 octobre 2026, `_barre_action.html`) ═══════════════
   En bas, au milieu de la colonne centrale ; dans une fenêtre ouverte, au
   milieu de l'écran. Masquée, un bouton rond « Contacter » en bas à droite. */
.rc-ba { position: fixed; z-index: 75; bottom: 18px; left: calc(var(--rail) + (100vw - var(--rail)) / 2);
  transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content;
  max-width: calc(100vw - var(--rail) - 32px); padding: 8px 8px 8px 8px; border-radius: 16px;
  background: rgba(20,22,31,.97); border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent); }
dialog .rc-ba { left: 50%; max-width: calc(100vw - 32px); z-index: 5; }
.rc-ba-qui { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 12px;
  background: var(--muted); white-space: nowrap; font-size: 13px; flex: none; max-width: 220px; }
.rc-ba-qui-texte { display: flex; flex-direction: column; min-width: 0; }
.rc-ba-qui-texte small { color: var(--muted-foreground); font-size: 11px; line-height: 1.15; }
.rc-ba-qui-texte b { font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.rc-ba-qui--vide { padding: 7px 12px; background: transparent; border: 1px dashed var(--border-strong);
  color: var(--muted-foreground); }
.rc-ba-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-ba .rc-entete-canaux { margin: 0; flex-wrap: nowrap; flex: none; }
/* ⚠️ Rien ne se tasse dans la barre : un groupe plus étroit que son contenu
   laissait « Autre canal » glisser sous « Planifier un rendez-vous ». */
.rc-ba .rc-entete-canaux > *, .rc-ba .rc-w-rdv-haut { flex: none; }
/* Le rendez-vous toujours au bout, quelle que soit la largeur (un ancien réglage
   de la fiche le passait en tête sur tablette). */
.rc-ba .rc-w-rdv-haut { order: 5; }
.rc-ba .rc-w-rdv-haut { margin: 0; white-space: nowrap; }
.rc-ba button.rc-j-plus { font: inherit; cursor: pointer; }
/* Le menu « Autre canal » s'ouvre VERS LE HAUT : la barre est en bas. */
.rc-ba .rc-manque-pop { top: auto; bottom: calc(100% + 10px); }
.rc-ba .rc-manque--lien { font: inherit; cursor: pointer; }
.rc-ba-replier { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--muted-foreground); display: grid; place-items: center; cursor: pointer; }
.rc-ba-replier svg { transform: rotate(90deg); }
.rc-ba-replier:hover { color: var(--foreground); border-color: var(--accent); }
.rc-ba-rond { display: none; position: fixed; z-index: 75; right: 22px; bottom: 20px; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 0; background: var(--primary); color: var(--on-primary);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px color-mix(in srgb, var(--mmb-rouge) 40%, transparent); }
.rc-ba-masquee .rc-ba { display: none; }
.rc-ba-masquee .rc-ba-rond { display: flex; }
/* La barre « Reprendre » d'une série se range au-dessus de la barre d'action. */
:root:not(.rc-ba-masquee) .rc-j-reprendre { bottom: 86px; }
/* Une fenêtre ouverte qui porte SA barre (tâche, réunion) : celle de la page,
   derrière le voile, s'efface pour ne pas dépasser sur les côtés. */
body:has(dialog[open] .rc-ba) > .rc-ba, body:has(dialog[open] .rc-ba) > .rc-ba-rond { display: none; }

.rc-ba-palette { width: min(520px, calc(100vw - 32px)); padding: 0; }
.rc-ba-palette-tete { padding: 14px 16px; border-bottom: 1px solid var(--border); margin: 0; }
.rc-ba-palette-tete p { margin: 0 0 8px; font-size: 13px; color: var(--muted-foreground); }
.rc-ba-palette-tete b { color: var(--foreground); }
.rc-ba-palette-tete input { width: 100%; box-sizing: border-box; }
.rc-ba-palette-liste { max-height: 50vh; overflow: auto; padding: 6px 0; }
.rc-ba-palette-liste .rc-aide { padding: 10px 16px; margin: 0; }
.rc-ba-personne { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--foreground);
  text-decoration: none; font-size: 14px; }
.rc-ba-personne small { margin-left: auto; color: var(--muted-foreground); font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.rc-ba-personne:hover, .rc-ba-personne--actif { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 8%, transparent); }
/* « Créer « … » » : la dernière ligne, séparée des personnes trouvées (16 octobre 2026). */
.rc-ba-personne--creer { border-top: 1px solid var(--border); font-weight: 600; }
.rc-ba-personne--creer:first-child, .rc-aide + .rc-ba-personne--creer { border-top: 0; }
.rc-ba-plus { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 14%, transparent); color: var(--accent-hi, var(--mmb-rouge-lumineux));
  font-size: 16px; font-weight: 600; }

/* Un écran étroit d'ordinateur : le rendez-vous passe en icône, la barre tient
   sans rien couper (le menu « Autre canal » ne supporte pas une barre qui défile). */
@media (min-width: 768px) and (max-width: 1240px) {
  .rc-ba .rc-w-rdv-haut { font-size: 0; gap: 0; padding: 0 12px; }
  .rc-ba .rc-w-rdv-haut svg { width: 17px; height: 17px; }
  .rc-ba-qui-texte small { display: none; }
}
/* Une tablette : les canaux passent aussi en icônes, comme au téléphone. */
@media (min-width: 768px) and (max-width: 1023px) {
  .rc-ba .rc-j-echange, .rc-ba button.rc-j-echange, .rc-ba .rc-manque-bouton { font-size: 0; gap: 0; min-width: 40px;
    min-height: 38px; justify-content: center; padding: 0 10px; }
  .rc-ba .rc-j-echange svg, .rc-ba .rc-manque-bouton svg:first-child { width: 17px; height: 17px; }
  .rc-ba .rc-manque-bouton svg:last-child { display: none; }
  .rc-ba .rc-j-echange:not(:has(svg)) { font-size: 12px; }
}
@media (max-width: 767px) {
  .rc-ba { left: 50%; max-width: calc(100vw - 16px); bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto; scrollbar-width: none; }
  dialog .rc-ba { bottom: 12px; }
  /* Au téléphone, la barre se resserre : la pastille de la personne, les
     icônes des canaux, l'icône du rendez-vous. Un canal sans icône garde son nom. */
  .rc-ba-qui-texte { display: none; }
  .rc-ba-qui { padding: 3px; }
  .rc-ba .rc-j-echange, .rc-ba .rc-w-rdv-haut, .rc-ba .rc-manque-bouton { font-size: 0; gap: 0; min-width: 40px;
    min-height: 40px; justify-content: center; padding: 0 10px; flex: none; }
  .rc-ba .rc-j-echange svg, .rc-ba .rc-w-rdv-haut svg, .rc-ba .rc-manque-bouton svg:first-child { width: 18px; height: 18px; }
  .rc-ba .rc-manque-bouton svg:last-child { display: none; }
  .rc-ba .rc-j-echange:not(:has(svg)) { font-size: 12px; }
  .rc-ba button.rc-j-echange { font-size: 0; }
  .rc-ba button.rc-j-echange:not(:has(svg)) { font-size: 12px; }
  .rc-ba-qui--vide { display: none; }
  .rc-ba .rc-w-rdv-haut { order: 5; }
  /* La fiche a déjà ses grands boutons au téléphone (Appeler, SMS…) : pas de doublon. */
  body:has(.rc-m-fiche-tel) > .rc-ba, body:has(.rc-m-fiche-tel) > .rc-ba-rond { display: none; }
  .rc-ba-rond { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  :root:not(.rc-ba-masquee) .rc-j-reprendre { bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
  .rc-ba .rc-manque-pop { position: fixed; left: 8px; right: 8px; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); width: auto; }
}

/* ── L'import des échanges et leur suppression (5 octobre 2026) ───────── */
.rc-import-menu { position: relative; order: 3; }
.rc-import-menu .rc-manque-bouton { min-height: 32px; padding: 0 8px; }
.rc-import-menu .rc-manque-bouton svg:last-child { transform: none; opacity: 1; }
.rc-import-menu .rc-manque-pop { left: auto; right: 0; width: min(280px, 86vw); }
.rc-import-menu form { margin: 0; }
.rc-import-menu button.rc-manque { width: 100%; border: 0; background: none; font: inherit; font-size: var(--text-sm); text-align: left; }
.rc-manque--danger { color: var(--danger-text, #f87171); }
.rc-sans-import { margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-md); font-size: var(--text-2xs);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
  color: var(--warning-text); background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.3); }
/* ══ LA PAGE « ANNIVERSAIRES » (4 octobre 2026, `user_anniversaires.html`) ══
   À souhaiter, la frise des mois autour d'aujourd'hui, puis la liste mois par
   mois. Les couleurs de la barre du haut : rose = à souhaiter, vert =
   souhaité, gris = à venir. */
.an-rose { color: #F9A8D4 !important; }
.an-titre { margin: 0 0 10px; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-foreground); font-weight: 600; }
.an-titre span { margin-left: 6px; color: var(--disabled-foreground); }
.an-attente { margin: 22px 0 0; }
.an-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.an-carte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card);
  border: 1px solid rgba(244,114,182,.28); border-radius: var(--radius-lg); }
.an-carte form, .an-ligne form { margin: 0; flex: none; }
.an-qui { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.an-qui:hover b { color: var(--accent-hi); }
.an-tx { display: flex; flex-direction: column; min-width: 0; }
.an-tx b { font-weight: 500; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tx small { color: var(--muted-foreground); font-size: var(--text-xs); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-retard { color: var(--warning, #FBBF24); }

.an-frise-cadre { margin: 26px 0 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 14px 10px; }
.an-frise { display: grid; grid-template-columns: repeat(12, minmax(72px, 1fr)); gap: 4px; overflow-x: auto;
  scrollbar-width: thin; position: relative; }
.an-mois { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px 10px;
  border-radius: var(--radius-md); color: inherit; text-decoration: none; min-height: 168px;
  border-bottom: 2px solid var(--border); }
.an-mois:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent); }
.an-mois-nom { font-size: var(--text-xs); color: var(--muted-foreground); text-transform: capitalize; white-space: nowrap; }
.an-mois-nom em { font-style: normal; color: var(--disabled-foreground); margin-left: 2px; }
.an-mois-pile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.an-mois-n { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.an-mois--vide .an-mois-n { color: var(--disabled-foreground); font-weight: 400; }
.an-mois--passe { opacity: .62; }
.an-mois--courant { background: color-mix(in srgb, var(--mmb-rouge) 10%, transparent); border-bottom-color: var(--accent); }
.an-mois--courant .an-mois-nom { color: var(--accent-hi); font-weight: 600; }
.an-mois-auj { position: absolute; top: -2px; right: 4px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-hi); }
.an-pastille { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; font-style: normal; background: rgba(255,255,255,.07); color: var(--muted-foreground);
  border: 1px solid rgba(255,255,255,.08); }
.an-pastille--attente { background: rgba(244,114,182,.18); color: #F9A8D4; border-color: rgba(244,114,182,.45); }
.an-pastille--souhaite { background: rgba(74,222,128,.12); color: #86EFAC; border-color: rgba(74,222,128,.30); }
.an-pastille--avant { opacity: .7; }
.an-pastille--plus { background: none; border-style: dashed; }
.an-legende { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 2px 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.an-legende span { display: inline-flex; align-items: center; gap: 6px; }
.an-legende .an-pastille { width: 12px; height: 12px; }

.an-onglets { margin: 24px 0 18px; }
.an-liste { display: flex; flex-direction: column; gap: 22px; }
.an-groupe { scroll-margin-top: calc(var(--haut) + 16px); }
.an-lignes { padding: 0; overflow: hidden; }
.an-ligne { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-height: 56px; }
.an-ligne:last-child { border-bottom: 0; }
.an-ligne--proche { background: rgba(244,114,182,.04); }
.an-jour { width: 34px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.an-jour b { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.an-jour small { font-size: var(--text-2xs); color: var(--muted-foreground); }
.an-etat { flex: none; font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; }
.an-etat--proche { color: #F9A8D4; font-weight: 500; }
.an-etat--ok { color: #86EFAC; }
.an-pied { margin: 22px 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.an-pied a { color: var(--accent); }
@media (max-width: 767px) {
  .an-frise { grid-template-columns: repeat(12, 64px); scroll-snap-type: x proximity; }
  .an-mois { scroll-snap-align: center; min-height: 150px; }
  .an-cartes { grid-template-columns: 1fr; }
  .an-ligne { gap: 10px; padding: 10px 12px; }
  .an-etat { font-size: var(--text-xs); }
}

/* ── Les conversations (11 octobre 2026, maquette validée par Tevini) ─────
   Qui doit répondre à qui : la balle chez vous (violet), chez elle (ambre),
   l'heure passée (rouge). Les gestes en un clic au survol et en tête. */
.bx-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.bx-onglets::-webkit-scrollbar { display: none; }
.bx-spark .bx-onglet--attente b { color: var(--warning-text); }
.bx-aide-onglet { display: flex; align-items: center; gap: 8px; padding: 0 14px 8px; border-bottom: 1px solid var(--border); }
.bx-aide-onglet p { margin: 0; flex: 1; font-size: 12px; color: var(--muted-foreground); }
.bx-tag--a-vous { background: none; border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); color: var(--accent); }
.bx-tag--attente { background: none; border: 1px solid rgba(251,191,36,.45); color: var(--warning-text); }
.bx-tag--retard { background: none; border: 1px solid rgba(248,113,113,.5); color: var(--error); }
.bx-adresse { display: block; font-size: 12px; color: var(--disabled-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-survol { align-items: center; }
.bx-survol .bx-survol-mot { width: auto; height: 30px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--foreground); text-decoration: none; white-space: nowrap; }
.bx-survol .bx-survol-mot--p { background: var(--primary); color: var(--on-primary); }
.bx-survol .bx-survol-mot--p:hover { background: var(--accent); color: var(--on-primary); }
.bx-menu { position: relative; }
.bx-menu > summary { list-style: none; cursor: pointer; }
.bx-menu > summary::-webkit-details-marker { display: none; }
.bx-menu-bouton { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: var(--muted-foreground); }
.bx-menu-bouton:hover, .bx-menu[open] > .bx-menu-bouton { background: var(--muted); color: var(--foreground); }
.bx-menu--tete > summary { display: inline-flex; align-items: center; gap: 6px; }
.bx-menu-pop { position: fixed; z-index: 60; min-width: 230px; max-width: 300px; max-height: 60vh; overflow: auto; padding: 6px;
  background: #1c1f2b; border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.bx-menu-pop form { margin: 0; }
.bx-menu-pop button, .bx-menu-pop a { display: block; width: 100%; height: auto; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--foreground); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.bx-menu-pop button:hover, .bx-menu-pop a:hover { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); color: var(--foreground); }
.bx-menu-titre { margin: 0; padding: 6px 10px 4px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--disabled-foreground); }
.bx-menu-pop hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }
.bx-ligne:has(.bx-menu[open]) .bx-survol { display: flex; }
.bx-attente { display: flex; align-items: center; gap: 8px; margin: 0 20px; padding: 6px 12px; border-radius: 8px; font-size: 13px;
  color: var(--warning-text); background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.3); }
.bx-attente span { flex: 1; }
.bx-attente form { margin: 0; }
.bx-attente--passee { color: var(--error); background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.35); }
.bx-creer { margin: 0 20px 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mmb-rouge-lumineux) 30%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 5%, transparent); }
.bx-creer-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bx-creer-pied { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bx-creer-campagne { flex: 1; min-width: 200px; }
.bx-creer-campagne em { font-style: normal; color: var(--disabled-foreground); font-size: 11.5px; }
@media (max-width: 640px) { .bx-creer-champs { grid-template-columns: 1fr; } }
/* « Réponse attendue », dans les fenêtres d'envoi. */
.rc-attente-ligne { display: flex; justify-content: flex-end; padding: 8px 16px 0; }
.rc-attente-ligne[hidden] { display: none; }
.rc-attente { display: inline-flex; align-items: center; gap: 6px; }
.rc-attente-choix { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.rc-attente select { height: 32px; width: auto; padding: 0 28px 0 9px; font-size: 13px; color: var(--warning-text);
  border-color: rgba(251,191,36,.4); }
.rc-attente-date:not([hidden]) { display: inline-flex; gap: 4px; }
.rc-attente-date input { height: 32px; width: auto; font-size: 13px; }

/* ── Le bouton « Ressources » d'une fenêtre d'échange (11 octobre 2026) ──── */
/* Sa carte ne montre que les ressources ; les autres modes cachent déjà ce bloc. */
.rc-echange-carte-pm[data-mode="ressources"] .rc-pm-bloc:not(.rc-pm-bloc--ressources) { display: none; }
/* Un fichier dans un mail Gmail : « En pièce jointe » ou « En lien », sous lui. */
.rc-pm-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px;
  padding: 8px 10px; border-radius: var(--radius-md); background: var(--muted); border: 1px solid var(--border); }
.rc-pm-choix > span, .rc-pm-choix small { width: 100%; font-size: var(--text-xs); color: var(--muted-foreground); }
@media (max-width: 900px) { .rc-pm-choix .btn { min-height: 44px; } }

/* Le lien général d'un rendez-vous (12 octobre 2026). */
.lr-general h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--text-base); }
.lr-general-ligne { display: flex; gap: 8px; align-items: center; }
.lr-general-ligne .rc-saisie { flex: 1; min-width: 0; font-family: var(--font-mono, monospace); font-size: var(--text-sm); }
.lr-general .rc-aide { margin: 8px 0 0; }
.lr-premiere { position: relative; }
.lr-premiere .lr-copier { margin-top: 6px; }
/* La rémunération d'un athlète dans un casting (15 octobre 2026). */
.rc-sc-remu { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rc-sc-remu label { font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-sc-remu .rc-saisie { flex: 1; min-width: 160px; }
/* La proposition d'un casting à une marque (15 octobre 2026). */
.rc-casting { width: 100%; max-width: 1100px; align-self: stretch; display: flex; flex-direction: column; gap: 22px; }
.rc-casting-grille, .rc-casting-tete { width: 100%; }
.rc-casting-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rc-casting-sur { font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.rc-casting-titre { font-size: var(--text-xl); font-weight: 800; margin: 0 0 4px; }
.rc-casting-gestes { display: flex; gap: 10px; flex-wrap: wrap; }
.rc-casting-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rc-casting-carte { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.rc-casting-carte h2 { font-size: var(--text-md); margin: 0; }
.rc-casting-carte header { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rc-casting-etape { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-md); }
.rc-casting-carte dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: var(--text-sm); }
.rc-casting-carte dt { color: var(--muted-foreground); }
.rc-casting-carte dd { margin: 0; word-break: break-word; }
.rc-casting-remu { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); }
.rc-casting-remu b { color: var(--foreground); }
@media print {
  .rc-casting-gestes { display: none; }
  .rc-casting-carte { break-inside: avoid; }
}