/* Complément propre à ReachCircles.
   ⚠️ `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. */

.rc-app { display: grid; grid-template-columns: 200px 1fr; min-height: 100dvh; }

.rc-side {
  background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 12px;
  position: sticky; top: 0; align-self: start; height: 100dvh; overflow: hidden;
}
.rc-side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.rc-side-marque { display: flex; align-items: center; gap: 8px; padding: 6px 10px 20px; }
.rc-side-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-md); color: var(--muted-foreground);
  font-size: 13px; text-decoration: none;
  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}
.rc-side-item:hover { background: var(--muted); color: var(--foreground); }
.rc-side-item[aria-current] {
  background: rgba(180,168,255,0.08); color: var(--accent); font-weight: 500;
  border-left: 2px solid var(--accent); padding-left: 10px;
}
.rc-side-item svg { flex: 0 0 auto; }

.rc-side-bottom {
  flex-shrink: 0; padding-top: 12px; margin-top: 12px;
  border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px;
}
/* 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;
  padding: 8px 12px; background: rgba(180,168,255,0.06);
  border: 1px solid rgba(180,168,255,0.20); border-radius: var(--radius-md);
  color: var(--accent); font-size: 12px; font-weight: 500; text-decoration: none;
}
.rc-space-toggle:hover { background: rgba(180,168,255,0.12); border-color: rgba(180,168,255,0.40); }
.rc-space-toggle svg { flex-shrink: 0; opacity: 0.7; }

.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;
}
.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: 13px; font-weight: 600; }
.rc-profile-email, .rc-profile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-profile-email { font-size: 11px; color: var(--muted-foreground); }

.rc-side-logout {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; width: 100%;
  font-family: inherit; font-size: 12.5px; text-align: left;
  color: var(--muted-foreground); background: transparent; border: 0;
  border-radius: var(--radius-md); cursor: pointer;
}
.rc-side-logout:hover { color: var(--error); background: rgba(248,113,113,0.06); }

/* 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: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(180,168,255,0.18); color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.rc-pastille--sm { width: 26px; height: 26px; font-size: 10px; }
.rc-pastille--lg { width: 44px; height: 44px; font-size: 14px; }
.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; }

.rc-main { display: flex; flex-direction: column; min-width: 0; }
.rc-topbar {
  display: flex; align-items: center; gap: 12px; padding: 0 28px; height: 64px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
  background: var(--background);
}
.rc-fil { display: flex; align-items: center; gap: 8px; font-size: 13px; 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: 28px; display: flex; flex-direction: column; gap: 28px;
  /* Au-delà, une ligne de tableau devient illisible d'un bout à l'autre. */
  max-width: var(--cadre); width: 100%;
}
.rc-titre-page { font-size: 26px; font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.rc-sous-titre { color: var(--muted-foreground); font-size: 13px; 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: 12px; 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: 13px; margin-bottom: 5px; }

.rc-avis {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-md); font-size: 13px;
}
.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: 38px; padding: 0 12px;
  font-size: 13.5px; 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: 11px; 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;
}
.rc-tableau td {
  font-size: 14px; 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: 12px; 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: 32px; padding: 0 8px; margin: 0 -8px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--foreground); font-family: inherit; font-size: 14px;
}
.rc-tableau tr:hover .rc-cellule { border-color: var(--border); background: var(--background); }
.rc-cellule:focus { border-color: var(--accent); background: 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: rgba(180,168,255,0.03); }
.rc-rangee-neuve .rc-cellule { border-color: var(--border); background: 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: 12.5px; }
.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: 13px; font-weight: 500; }
.rc-champ em { font-style: normal; color: var(--muted-foreground); font-weight: 400; }
.rc-aide { font-size: 12.5px; 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: 14px;
}
.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: 12.5px; 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: rgba(180,168,255,0.30); background: rgba(180,168,255,0.06); }
.rc-choix input { margin-top: 3px; }
.rc-choix-titre { font-size: 13.5px; font-weight: 500; }
.rc-choix-aide { font-size: 12px; 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: 13px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
}
.rc-jeton--retenu { background: rgba(180,168,255,0.16); 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; }

/* ── 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) {
  .rc-app { grid-template-columns: 1fr; }
  .rc-side { display: none; }

  /* ⚠️ 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-topbar, .rc-onglets {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .rc-topbar::-webkit-scrollbar, .rc-onglets::-webkit-scrollbar { display: none; }
  .rc-topbar > *, .rc-onglets > * { flex: 0 0 auto; }
  .rc-topbar { padding: 0 16px; height: 56px; }
  .rc-fil { flex: 0 1 auto; }
  .rc-content { padding: 16px; gap: 22px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .rc-titre-page { font-size: 22px; }

  .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: 10px; 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: 16px; 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: 16px; }
  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; }
  .btn { height: auto; min-height: 44px; font-size: 14px; }
  /* 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: 12.5px; }
.rc-icone-bouton { width: 44px; height: 44px; }
  .rc-onglet { height: 44px; }

  .rc-nav-basse {
    display: grid; grid-template-columns: repeat(4, 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: 11px; 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: 16px; }
.rc-entree-cadre .btn { min-height: 48px; width: 100%; }

/* ══ 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 ReachCircles. */
.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:12.5px; 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:11px; color:var(--muted-foreground); font-weight:400;
  font-variant-numeric:tabular-nums; padding:1px 7px; background:var(--muted); border-radius:999px; }
.rc-vue[aria-current] .rc-vue-n { color:var(--accent); background:rgba(180,168,255,.14); }

.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:rgba(180,168,255,.10); 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:10px; 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:12.5px; 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:13px; 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:10.5px; 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:12.5px; 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:13px; 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:12px; 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:11px; 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:10px; }
.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:32px; min-height:32px; resize:none; overflow:hidden;
  padding:7px 8px; margin:0 -8px; background:transparent;
  border:1px solid transparent; border-radius:var(--radius-md);
  color:var(--muted-foreground); font-family:inherit; font-size:13px; line-height:1.35;
  transition:height .16s var(--ease-out), color .16s var(--ease-out); }
.rc-note::placeholder { color:var(--disabled-foreground); }
.rc-tableau tr:hover .rc-note { border-color:var(--border); background:var(--background); }
.rc-note:focus { height:116px; color:var(--foreground); position:relative; z-index:6;
  border-color:var(--accent); background:var(--card); overflow:auto; outline:none;
  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; }
tr:hover .rc-note-pleine::after, .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:13px; 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(rgba(180,168,255,0.03), rgba(180,168,255,0.03));
}
/* 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,
  rgba(180,168,255,.06) 0%, rgba(180,168,255,0) 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; }
  .rc-cherche input { font-size:16px; min-height:40px; }
  .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:16px; 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:11.5px; 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:13.5px; 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:13px; 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:13px; font-weight:500; }

/* ── Deux corrections sur ce que la charte pose déjà ──────────────────────── */
/* ⚠️ La barre de ratio d'un KPI se remplissait en `#4A3B7A → #6B5BA3` : 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: 11px; 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-topbar { height: 48px; padding: 0 20px; }
.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: 12.5px; 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: 16px; }
.rc-mesures-ligne .mesure-v em {
  font-style: normal; font-weight: 400; font-size: 12px; 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: 38px; }
.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(rgba(180,168,255,0.03), rgba(180,168,255,0.03));
}

/* ── 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: 16px; 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: 12px; }
  /* 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: 10.5px; }
}

/* ── 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;
  }
}