/* ════════════════════════════════════════════════════════════════════════
   LES ACTIVITÉS, FAÇON LEVERAGE — demande de Tevini du 8 octobre 2026.
   Maquette validée : maquettes/activites-leverage/ ; captures de Leverage
   prises le même jour. Carnet : docs/notes/NOTES-activites.md.

   ⚠️ **LES VOLETS S'OUVRENT À DROITE, SOUS LA BARRE DU HAUT**, sur un tiers de
   la zone de travail (520 px au moins) ; la liste reste visible derrière. Ce
   qu'on ouvre depuis une activité s'y pose EN ONGLETS (14 octobre 2026) ;
   seul l'historique s'ouvre à sa gauche. Au téléphone (moins de 768 px), un
   volet prend tout l'écran.
   ⚠️ **UNE COULEUR PAR SORTE, PARTOUT** : appel vert, message bleu ciel,
   WhatsApp vert d'eau, mail indigo, rendez-vous violet, note ambre ; un appel
   sans réponse est ambre ; une activité prévue a sa pastille en pointillé.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --volet: max(520px, calc((100vw - var(--rail)) / 3));
  /* Trois colonnes de même largeur (Tevini, 14 octobre 2026) : historique,
     sous-activité, activité — un tiers chacune de la place à droite du rail. */
  --colonne3: calc((100vw - var(--rail)) / 3);
  --c-appel: #4ADE80; --c-nrp: #FBBF24; --c-message: #7DD3FC; --c-wa: #6EE7A8;
  --c-mail: #A5B4FC; --c-rdv: var(--mmb-rouge-lumineux); --c-note: #FCD34D; --c-tache: rgba(245,244,240,.62);
}

/* ── Le volet ─────────────────────────────────────────────────────────── */
dialog.rc-volet[open],
dialog.rc-echange[open],
dialog.rc-mail[open] {
  position: fixed; inset: var(--haut) 0 0 auto; margin: 0; z-index: 60;
  width: var(--volet); max-width: 100vw; height: auto; max-height: none;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--card); color: var(--foreground);
  border: 0; border-left: 1px solid var(--border-strong); border-radius: 0;
  box-shadow: -24px 0 48px rgba(0,0,0,.45);
}
dialog.rc-echange[open]::before, dialog.rc-mail[open]::before { display: none; }
/* ── Les onglets du volet (Tevini, 14 octobre 2026) ──────────────────────
   Un échange, une note, une tâche ou un RDV ouverts depuis l'activité se
   posent DANS le volet, sous sa barre d'onglets (`--onglets-bas`, mesuré par
   `_onglets.js`), et la recouvrent. Leur propre barre de titre s'efface :
   l'onglet porte le nom et la croix. */
.rc-volet-second dialog[open], .rc-gauche {
  top: var(--onglets-bas, calc(var(--haut) + 84px)); right: 0; width: var(--volet); z-index: 62;
  border-top: 0; box-shadow: none; }
.rc-volet-second[hidden], .rc-gauche[hidden] { display: none !important; }
.rc-volet-second .rc-echange-tete, .rc-volet-second .rc-mail-tete { display: none; }
.rc-v-onglets { flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 0;
  border-bottom: 1px solid var(--border); background: var(--card); overflow-x: auto; scrollbar-width: none; }
.rc-v-onglets::-webkit-scrollbar { display: none; }
.rc-v-onglet-case { display: inline-flex; align-items: center; flex: none; }
.rc-v-onglet { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; flex: none;
  border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; color: var(--muted-foreground);
  font-size: var(--text-xs); text-decoration: none; white-space: nowrap; }
.rc-v-onglet:hover { color: var(--foreground); background: var(--muted); }
.rc-v-onglet[aria-current="true"] { background: var(--background); color: var(--foreground); border-color: var(--border);
  margin-bottom: -1px; height: 35px; }
.rc-v-onglet em { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-ring); border-radius: 99px; padding: 1px 6px; }
.rc-v-onglet-case .rc-v-onglet { padding-right: 4px; }
.rc-v-onglet-case:has(.rc-v-onglet[aria-current="true"]) .rc-v-onglet-x { position: relative; z-index: 1; }
.rc-v-onglet-x { display: grid; place-items: center; width: 22px; height: 22px; margin: 0 4px 0 -2px; border-radius: 6px;
  color: var(--muted-foreground); font-size: 15px; line-height: 1; text-decoration: none; }
.rc-v-onglet-x:hover { background: var(--accent-wash); color: var(--foreground); }
.rc-v-onglet-point { width: 6px; height: 6px; border-radius: 99px; background: var(--c-nrp); }
.rc-v-onglet--appel svg { color: var(--c-appel); }
/* L'icône de l'activité, en tête : un clic change son type. */
.rc-v-sorte { position: relative; display: inline-flex; }
.rc-v-sorte > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
  height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; }
.rc-v-sorte > summary::-webkit-details-marker { display: none; }
.rc-v-sorte > summary > svg:last-child { opacity: .6; transform: rotate(90deg); }
.rc-v-sorte > summary:hover, .rc-v-sorte[open] > summary { background: var(--accent-wash); border-color: var(--accent-ring); }
.rc-v-sorte .rc-v-sorte-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 210px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.rc-v-sorte-dit { margin: 2px 8px 6px; font-size: var(--text-2xs); color: var(--muted-foreground); }
.rc-v-sorte .rc-v-sorte-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: 7px; background: none; color: var(--foreground); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: left; }
.rc-v-sorte .rc-v-sorte-pop button:hover { background: var(--muted); }
.rc-v-sorte .rc-v-sorte-pop button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }
dialog.rc-echange[open] .rc-echange-grille { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; }
dialog.rc-echange[open] .rc-echange-forme { min-width: 0; }
dialog.rc-mail[open] { overflow-y: auto; }

.rc-v-barre { flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--border); background: var(--muted); font-size: var(--text-sm); }
.rc-v-barre b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-v-barre-ico { display: inline-flex; color: var(--c-tache); }
.rc-v-ico--appel { color: var(--c-appel); }
.rc-v-serie { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--muted-foreground); font-size: var(--text-xs); }
.rc-v-serie a { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-strong);
  border-radius: 7px; color: var(--muted-foreground); }
.rc-v-serie a:first-of-type svg { transform: rotate(180deg); }
.rc-v-x { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  color: var(--muted-foreground); font-size: 20px; line-height: 1; text-decoration: none; }
.rc-v-x:hover { background: var(--accent-wash); color: var(--foreground); }
.rc-v-reduire + .rc-v-x { margin-left: 2px; }  /* « Réduire » puis la croix, côte à côte. */

.rc-v-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px;
  background: var(--background); }

/* La personne */
.rc-v-tete { display: flex; align-items: center; gap: 12px; }
.rc-v-tete .rc-pastille { width: 40px; height: 40px; flex: none; }
.rc-v-qui { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-v-nom { font-size: var(--text-md); font-weight: 600; color: var(--foreground); text-decoration: none; }
.rc-v-nom:hover { text-decoration: underline; text-underline-offset: 4px; }
.rc-v-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-v-rouge { color: var(--error); font-weight: 600; }
.rc-v-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px;
  background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border); }
.rc-v-badge--orange { background: rgba(251,191,36,.12); color: var(--warning-text); border-color: rgba(251,191,36,.25); }
.rc-v-badge--rose { background: rgba(248,113,113,.12); color: var(--error); border-color: rgba(248,113,113,.25); }
.rc-v-tete-d { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-v-camp { display: inline-flex; align-items: center; gap: 8px; height: 32px; max-width: 250px; padding: 0 10px 0 4px;
  border-radius: 8px; border: 1px solid var(--border-strong); color: var(--foreground); font-size: var(--text-xs);
  text-decoration: none; min-width: 0; }
.rc-v-camp i { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); }
.rc-v-camp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-v-camp em { flex: none; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 5px;
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-ring); }
.rc-v-camp:hover { border-color: var(--accent); }
.rc-v-plus { font-size: var(--text-xs); color: var(--muted-foreground); }

/* L'historique, derrière l'horloge */
.rc-v-histo { position: relative; }
.rc-v-histo > summary { list-style: none; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border-radius: 8px; color: var(--muted-foreground); }
.rc-v-histo > summary::-webkit-details-marker { display: none; }
.rc-v-histo > summary:hover, .rc-v-histo[open] > summary { background: var(--muted); color: var(--foreground); }
.rc-v-histo-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(420px, calc(var(--volet) - 40px));
  max-height: 60vh; overflow-y: auto; padding: 12px; border-radius: 12px; background: var(--muted);
  border: 1px solid var(--border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.rc-v-histo-titre { margin: 0 0 8px; font-weight: 600; font-size: var(--text-sm); }
/* Les filtres d’un historique (volet, colonne, fiche) : la forme des autres
   filtres de l’application — une bande grise, des boutons aux coins doux, le
   choisi en relief (`.mj-seg` de Ma journée). Plus de pilules (14 octobre 2026). */
.rc-v-filtres { display: flex; flex-wrap: nowrap; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 3px; border-radius: 10px; background: var(--muted); }
.rc-v-filtres a, .rc-v-filtres button { font: inherit; font-size: 12px; padding: 5px 6px; flex: none; border: 0; border-radius: 8px;
  background: none; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; cursor: pointer; }
.rc-v-filtres a:hover, .rc-v-filtres button:hover { color: var(--foreground); }
.rc-v-filtres a[aria-current], .rc-v-filtres button[aria-current] { background: var(--card); color: var(--foreground); font-weight: 600; }
.rc-v-filtres i { font-style: normal; font-weight: 400; opacity: .7; margin-left: 2px; }
.rc-v-filtres::-webkit-scrollbar { display: none; }
.rc-histo-filtres { margin-bottom: 10px; }
.rc-v-h { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 7px 0; align-items: start;
  border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.rc-v-h b { font-weight: 500; display: block; }
.rc-v-h small { display: block; color: var(--muted-foreground); font-size: var(--text-xs); margin-top: 2px; }
.rc-v-h time { color: var(--disabled-foreground); font-size: 11px; white-space: nowrap; }
.rc-v-h time small { display: block; text-align: right; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; }

/* Les pastilles de sorte */
.rc-v-pt { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; }
.rc-v-pt svg { width: 12px; height: 12px; }
.rc-v-pt--appel { background: rgba(74,222,128,.15); color: var(--c-appel); }
.rc-v-pt--nrp { background: rgba(251,191,36,.15); color: var(--c-nrp); }
.rc-v-pt--mail { background: rgba(165,180,252,.15); color: var(--c-mail); }
.rc-v-pt--message { background: rgba(125,211,252,.15); color: var(--c-message); }
.rc-v-pt--wa { background: rgba(110,231,168,.15); color: var(--c-wa); }
.rc-v-pt--rdv { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); color: var(--c-rdv); }
.rc-v-pt--note { background: rgba(252,211,77,.14); color: var(--c-note); }
.rc-v-pt--tache, .rc-v-pt--evenement { background: var(--muted); color: var(--c-tache); }
.rc-v-pt--prevue { background: transparent; border: 1.5px dashed currentColor; }

/* Les cartes */
.rc-v-carte { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
/* ⚠️ La zone de texte garde le fond sombre qu'elle a partout ailleurs (fiche,
   messages types) : sur le fond de la carte, Tevini la trouvait « bizarre »
   (10 octobre 2026). */
.rc-v-echange .rc-ed { border: 0; border-radius: 0 0 12px 12px; background: var(--background); }
.rc-v-ligne-coord { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: var(--text-sm); }
.rc-v-composer { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--success); color: #0A0B10; }
.rc-v-et { color: var(--muted-foreground); }
.rc-v-num { background: transparent; color: var(--foreground); border: 0; font: inherit; font-weight: 600; min-width: 0; }
.rc-v-sans { color: var(--disabled-foreground); }
.rc-v-ligne-coord .rc-enregistre { margin-left: auto; }

/* Le pied : « ⋯ Annuler » à gauche, le résultat à droite */
.rc-v-pied { display: flex; align-items: center; gap: 10px; padding: 12px 0 0; }
.rc-v-pied--colle { position: sticky; bottom: -16px; margin: auto -16px -16px; padding: 12px 16px; background: var(--card);
  border-top: 1px solid var(--border); }
.rc-v-pied-d { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Une colonne étroite (trois colonnes ouvertes, 14 octobre 2026) : les boutons
   du résultat passent sur leur propre ligne, en entier, au lieu de déborder. */
dialog.rc-volet[open], dialog.rc-echange[open], dialog.rc-mail[open], .rc-gauche { container-type: inline-size; }
@container (max-width: 480px) {
  .rc-v-pied:not(.rc-echange-pied) { flex-wrap: wrap; }
  .rc-v-pied:not(.rc-echange-pied) .rc-v-pied-d { width: 100%; margin-left: 0; }
  .rc-v-pied:not(.rc-echange-pied) .rc-v-pied-d > .btn, .rc-v-pied:not(.rc-echange-pied) .rc-v-pied-d > .rc-v-autre { flex: 1; }
  .rc-v-pied:not(.rc-echange-pied) .rc-v-pied-d .btn, .rc-v-autre > summary { width: 100%; justify-content: center; padding: 0 8px; }
}
.rc-v-points { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); color: var(--muted-foreground); background: transparent; list-style: none; }
.rc-v-points::-webkit-details-marker, .rc-v-autre > summary::-webkit-details-marker,
.rc-v-menu > summary::-webkit-details-marker { display: none; }
.rc-v-annuler { color: var(--muted-foreground); font-size: var(--text-sm); text-decoration: none; cursor: pointer; list-style: none; }
.rc-v-annuler:hover { color: var(--foreground); }
.rc-v-menu, .rc-v-autre { position: relative; }
.rc-v-autre > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.rc-v-autre > summary svg { transform: rotate(90deg); }
.rc-v-menu-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 6; min-width: 230px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 10px; background: var(--muted);
  border: 1px solid var(--border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.rc-v-menu-pop--haut { left: auto; right: 0; top: auto; bottom: calc(100% + 6px); }
.rc-v-menu-pop a, .rc-v-menu-pop button { display: block; text-align: left; padding: 8px 10px; border-radius: 6px;
  color: var(--foreground); background: transparent; border: 0; font: inherit; font-size: var(--text-sm);
  text-decoration: none; cursor: pointer; }
.rc-v-menu-pop a:hover, .rc-v-menu-pop button:hover { background: var(--accent-wash); }
.rc-v-menu-pop .rc-v-danger { color: var(--error); }
.rc-v-menu-pop .rc-saisie { margin: 4px; }
.rc-v-menu-pop .btn { margin: 4px; }
.btn.rc-v-pasrepondu { background: rgba(251,191,36,.08); color: var(--warning); border: 1px solid rgba(251,191,36,.5); }
.btn.rc-v-pasrepondu:hover { background: rgba(251,191,36,.16); }
.btn.rc-v-repondu { background: var(--success); color: #0A0B10; border: 0; font-weight: 600; }
.btn.rc-v-repondu:hover { filter: brightness(1.08); }
.rc-v-pasrepondu svg, .rc-v-repondu svg { margin-right: 6px; }

/* La tâche */
.rc-v-tache { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rc-v-tache-tete { margin: 0; display: flex; align-items: center; gap: 8px; }
.rc-v-tache-tete .rc-enregistre { margin-left: auto; }
.rc-v-tache-titre { margin: 2px 0 0; font-size: var(--text-md); font-weight: 600; }
.rc-v-description { min-height: 80px; resize: vertical; }
.rc-v-date { padding: 12px 16px; }
.rc-v-date-l { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.rc-v-raccourcis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.rc-v-raccourcis .rc-v-et { font-size: var(--text-xs); margin-right: 4px; }
.rc-v-raccourcis button { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.rc-v-raccourcis button:hover { border-color: var(--accent); background: var(--accent-wash); }

/* Le bilan : la suite proposée, la fin des relances */
.rc-v-bilan { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.05); }
.rc-v-bilan p { margin: 0; font-size: var(--text-sm); }
.rc-v-bilan-ok { display: flex; align-items: center; gap: 6px; color: var(--success); font-weight: 600;
  font-size: var(--text-2xs) !important; letter-spacing: .12em; text-transform: uppercase; }
.rc-v-bilan--arret { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.05); }
.rc-v-bilan-titre { font-weight: 600; color: var(--warning); }
.rc-v-suite { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 8px; }
.rc-v-suite input[name="titre"] { grid-column: 1 / -1; }
.rc-v-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-v-close { padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: var(--text-sm);
  color: var(--muted-foreground); }
.rc-v-close form { margin-left: auto; }
.rc-v-issue { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; }
.rc-v-issue::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rc-v-issue--faite { background: rgba(74,222,128,.13); color: var(--success); }
.rc-v-issue--pas_aboutie { background: rgba(251,191,36,.13); color: var(--warning); }
.rc-v-issue--annulee { background: rgba(248,113,113,.13); color: var(--error); }

/* ── La barre d'action, en haut (refaite le 10 octobre 2026, maquette validée) ──
   La personne — et l'activité ouverte, allumée —, Appeler · Message ▾ · Mail,
   puis Ajouter ▾ et RDV. Des boutons NOMMÉS : on n'a rien à deviner. */
.rc-haut-ba { margin-left: 12px; min-width: 0; display: flex; }
.rc-ba-en-haut .rc-ba:not(.rc-ba--haut), .rc-ba-en-haut .rc-ba-rond { display: none !important; }
/* La recherche se réduit à sa loupe et à « Ctrl K » quand la barre est là. */
.rc-ba-en-haut .rc-haut-chercher { width: auto; flex: none; }
.rc-ba-en-haut .rc-haut-chercher-t { display: none; }
.rc-ba.rc-ba--haut { position: static; transform: none; left: auto; bottom: auto; z-index: auto; max-width: none;
  display: flex; align-items: center; gap: 4px; height: 46px; padding: 3px; border-radius: 14px; box-shadow: none;
  background: rgba(255,255,255,.035); border: 1px solid var(--border-strong); backdrop-filter: none; }
.rc-ba--haut .rc-ba-replier { display: none; }
/* La personne */
.rc-ba--haut .rc-ba-qui { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 4px; border-radius: 10px;
  max-width: 250px; min-width: 0; background: transparent; border: 1px solid transparent; }
.rc-ba--haut .rc-ba-qui .rc-pastille { width: 30px; height: 30px; font-size: 11px; flex: none; }
.rc-ba--haut .rc-ba-qui-texte { min-width: 0; }
.rc-ba--haut .rc-ba-qui-texte b { font-size: var(--text-sm); font-weight: 600; max-width: none; white-space: nowrap; }
.rc-ba--haut .rc-ba-qui-texte small { font-size: 11px; color: var(--muted-foreground); letter-spacing: 0; text-transform: none;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
/* L'activité ouverte : la personne s'allume, un point vert dit « en cours ». */
.rc-ba--haut .rc-ba-qui--actif { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mmb-rouge) 25%, transparent); }
.rc-ba-activite { color: var(--accent-hi) !important; }
.rc-ba-activite em { font-style: normal; color: var(--error); flex: none; }
.rc-ba-activite span { overflow: hidden; text-overflow: ellipsis; }
.rc-ba-point { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
.rc-ba--haut .rc-ba-qui--vide { font: inherit; font-size: var(--text-sm); color: var(--muted-foreground); cursor: pointer; gap: 8px;
  padding: 0 14px; min-width: 210px; border: 1px dashed var(--border-strong); background: rgba(255,255,255,.02); }
.rc-ba--haut .rc-ba-qui--vide:hover { color: var(--foreground); border-color: var(--accent); }
/* Les boutons */
.rc-ba--haut .rc-ba-actions { display: flex; align-items: center; gap: 4px; }
.rc-ba--haut .rc-ba-actions::before { content: ""; width: 1px; height: 26px; background: var(--border-strong); margin: 0 4px; }
.rc-bab-groupe { display: flex; align-items: center; gap: 2px; }
.rc-bab-sep { width: 1px; height: 26px; background: var(--border-strong); margin: 0 4px; }
.rc-bab { position: relative; height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 10px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--foreground); background: transparent;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; }
.rc-bab::-webkit-details-marker { display: none; }
.rc-bab:hover { background: rgba(255,255,255,.06); }
.rc-bab > svg:last-child:not(:first-child) { width: 12px; height: 12px; color: var(--muted-foreground); transform: rotate(90deg); }
.rc-bab--appel > svg:first-child { color: var(--c-appel); }
.rc-bab--message > svg:first-child { color: var(--c-message); }
.rc-bab--mail > svg:first-child { color: var(--c-mail); }
.rc-bab--ajouter > svg:first-child { color: var(--accent); }
/* « Note » et « Tâche » (10 octobre 2026) : allumés quand leur volet est ouvert à gauche. */
.rc-bab--poser > svg:first-child { color: var(--accent); }
.rc-bab--poser[aria-pressed="true"] { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.rc-bab--absent { opacity: .38; cursor: not-allowed; }
.rc-bab--absent:hover { background: transparent; }
/* Le canal de l'activité ouverte : éclairé, souligné. */
.rc-bab--en-cours { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.45); color: #bbf7d0; }
.rc-bab--en-cours::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 18px; height: 3px; margin-left: -9px;
  border-radius: 3px; background: var(--success); }
.rc-bab--message.rc-bab--en-cours { background: rgba(125,211,252,.12); border-color: rgba(125,211,252,.45); color: #e0f2fe; }
.rc-bab--message.rc-bab--en-cours::after { background: var(--c-message); }
.rc-bab--mail.rc-bab--en-cours { background: rgba(165,180,252,.12); border-color: rgba(165,180,252,.45); color: #e0e7ff; }
.rc-bab--mail.rc-bab--en-cours::after { background: var(--c-mail); }
.rc-bab--rdv { background: var(--primary); color: #fff; font-weight: 600; padding: 0 14px; }
.rc-bab--rdv:hover { background: var(--accent); color: var(--on-accent); }
.rc-bab--rdv[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-ring-strong); }
/* Les menus : juste sous leur bouton, lisibles. */
.rc-bam { position: relative; }
.rc-bam[open] > .rc-bab { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.rc-bam[open] > .rc-bab > svg:last-child { transform: rotate(-90deg); }
.rc-bam-pop { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 90; width: 300px; max-height: min(70vh, 560px);
  overflow-y: auto; padding: 8px; background: #171925; border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.rc-bam--ajouter .rc-bam-pop { width: 250px; }
.rc-bam-titre { margin: 8px 10px 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--disabled-foreground); }
.rc-bam-titre:first-child { margin-top: 4px; }
.rc-bam-it { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 10px; border-radius: 9px;
  font: inherit; font-size: var(--text-base); color: var(--foreground); text-decoration: none; background: transparent; border: 0;
  cursor: pointer; text-align: left; }
.rc-bam-it:hover, .rc-bam-it:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.rc-bam-it small { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-xs); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 140px; }
.rc-bam-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: rgba(245,244,240,.07); color: var(--muted-foreground); }
.rc-bam-it.rc-j-echange--whatsapp .rc-bam-ico { background: rgba(110,231,168,.14); color: var(--c-wa); }
.rc-bam-it.rc-j-echange--sms .rc-bam-ico { background: rgba(125,211,252,.14); color: var(--c-message); }
.rc-bam-it.rc-j-echange--linkedin .rc-bam-ico, .rc-bam-it.rc-j-echange--facebook .rc-bam-ico { background: rgba(96,165,250,.14); color: #60A5FA; }
.rc-bam-it.rc-j-echange--instagram .rc-bam-ico, .rc-bam-it.rc-j-echange--tiktok .rc-bam-ico { background: rgba(244,114,182,.14); color: #F472B6; }
.rc-bam-it.rc-j-echange--telegram .rc-bam-ico { background: rgba(56,189,248,.14); color: #38BDF8; }
.rc-bam-it.rc-j-echange--discord .rc-bam-ico { background: rgba(129,140,248,.14); color: #818CF8; }
.rc-bam-it.rc-ba-note .rc-bam-ico { background: rgba(252,211,77,.14); color: var(--c-note); }
.rc-bam-it--en-cours { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); }
.rc-bam-it--en-cours::after { content: "en cours"; margin-left: 8px; font-size: 10px; color: var(--accent-hi); }
/* « À renseigner » : de petites puces grisées ; un clic ouvre le champ, dans le menu. */
.rc-bam-puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 4px; }
.rc-bam-puce { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  font-size: var(--text-xs); color: var(--muted-foreground); border: 1px dashed var(--border-strong); }
.rc-bam-puce:hover { color: var(--foreground); border-color: var(--accent); }
.rc-bam-puce input { position: absolute; opacity: 0; pointer-events: none; }
.rc-bam-puce:has(input:checked) { color: var(--accent-hi); border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); }
/* Un menu ouvert passe devant le volet. */
.rc-haut:has(.rc-bam[open]) { z-index: 85; }
/* La fiche enveloppe ses boutons : l'enveloppe ne compte pas dans la rangée. */
.rc-ba-contenu { display: contents; }
.rc-bam-saisie { display: none; gap: 6px; padding: 8px 4px 4px; }
.rc-bam-manque:has(input[type=radio]:checked) .rc-bam-saisie { display: flex; }
.rc-bam-saisie .rc-saisie { flex: 1; min-width: 0; min-height: 36px; }
.rc-eclair { flex: none; display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer;
  place-items: center; position: relative; background: transparent; color: var(--muted-foreground); }
.rc-eclair:hover { color: var(--foreground); background: rgba(255,255,255,.06); }
/* L'éclair ne sert plus qu'au téléphone (la barre reste affichée, 10 octobre 2026). */
.rc-eclair-z { display: inline-flex; }
.rc-eclair-x { display: none; }
@media (max-width: 767px) { .rc-ba-en-haut .rc-eclair { display: grid; } }
.rc-eclair-cpt { display: none !important; }
.rc-haut-chercher { margin-left: 24px; }
/* Calée à droite, au-dessus du volet de l'activité (choix de Tevini du 10
   octobre 2026) : la personne allumée est celle qu'on voit juste dessous. */
.rc-ba-en-haut .rc-haut-ba { margin-left: auto; }
.rc-ba-en-haut .rc-haut-droite { margin-left: 12px; }
.rc-bam--ajouter .rc-bam-pop { left: auto; right: -8px; }
/* Sur un écran étroit, Message et Mail gardent leur icône seule (le nom au survol). */
@media (min-width: 768px) and (max-width: 1239px) {
  .rc-bab--message > span, .rc-bab--mail > span, .rc-bab--ajouter > span, .rc-bab--poser > span { display: none; }
  .rc-ba--haut .rc-ba-qui { max-width: 200px; }
}
/* En tablette, la barre tient sur la largeur (12 octobre 2026 : elle débordait
   de 100 px, « Planifier » en plus) : icônes seules, le logo sans son nom. */
@media (min-width: 768px) and (max-width: 1023px) {
  .rc-ba-en-haut .rc-bab--appel > span, .rc-ba-en-haut .rc-bab--planifier > span { display: none; }
  .rc-ba-en-haut .rc-ba--haut .rc-ba-qui { max-width: 140px; }
  .rc-ba-en-haut .rc-haut-marque > span { display: none; }
  .rc-ba-en-haut .rc-haut-ba { min-width: 0; flex: 0 1 auto; }
}

/* ── Au téléphone ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  dialog.rc-volet[open], dialog.rc-echange[open], dialog.rc-mail[open] { inset: 0; width: 100vw; z-index: 80; }
  /* Un onglet, sous la barre d'onglets du volet plein écran. */
  .rc-volet-second dialog[open], .rc-gauche { inset: var(--onglets-bas, 84px) 0 0 0; width: 100vw; z-index: 90; }
  .rc-v-tete { flex-wrap: wrap; }
  .rc-v-tete-d { margin-left: 0; width: 100%; }
  .rc-v-pied { flex-wrap: wrap; }
  .rc-v-pied .btn, .rc-v-points { min-height: 44px; }
  .rc-haut-ba { position: absolute; top: 54px; right: 10px; margin: 0; padding: 10px; width: 300px; border-radius: 14px;
    background: var(--muted); border: 1px solid var(--border-strong); box-shadow: 0 20px 40px rgba(0,0,0,.6); z-index: 70; }
  /* Au téléphone : un menu sous l'éclair, la personne en tête, un bouton par ligne. */
  .rc-ba.rc-ba--haut { flex-direction: column; align-items: stretch; height: auto; gap: 6px; border-radius: 10px;
    background: transparent; border: 0; padding: 0; }
  .rc-ba--haut .rc-ba-qui { max-width: none; height: 48px; }
  .rc-ba--haut .rc-ba-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .rc-ba--haut .rc-ba-actions::before, .rc-bab-sep { display: none; }
  .rc-bab-groupe { flex-direction: column; align-items: stretch; gap: 4px; }
  .rc-bab { min-height: 46px; width: 100%; justify-content: flex-start; font-size: var(--text-base); }
  .rc-bab > svg:last-child:not(:first-child) { margin-left: auto; }
  .rc-bab--en-cours::after { display: none; }
  .rc-bab--rdv { justify-content: center; }
  .rc-bam-pop { position: static; width: auto; margin-top: 4px; box-shadow: none; }
}

/* ── Le petit mot après un résultat ───────────────────────────────────── */
.rc-mot { position: fixed; z-index: 90; left: calc(var(--rail) + 24px); bottom: 22px; max-width: 520px;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: #1D2030; border: 1px solid var(--border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.5);
  font-size: var(--text-sm); }
.rc-mot-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(251,191,36,.16); color: var(--warning); }
.rc-mot-texte small { display: block; color: var(--muted-foreground); font-size: var(--text-xs); margin-top: 2px; }
.rc-mot form { margin: 0; }
.rc-mot-defaire { background: transparent; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 4px 6px; }
.rc-mot-x { background: transparent; border: 0; color: var(--muted-foreground); font-size: 18px; cursor: pointer; }
@media (max-width: 767px) { .rc-mot { left: 12px; right: 12px; bottom: 12px; } }

/* ── Le Dashboard (Leverage : la liste, et « Réunions du jour » à 400 px) ── */
@media (min-width: 1200px) {
  .rc-accueil { grid-template-columns: minmax(0, 1fr) 400px; }
}
.rc-j-regrouper { margin: 0; flex: none; }
.rc-j-regrouper .rc-saisie { height: 36px; width: auto; padding-right: 30px; }
.rc-j-sous-titre-liste--premiers { color: var(--accent); }
.rc-j-maintenant { position: relative; height: 0; margin: 4px 0; border-top: 1.5px solid var(--error); }
.rc-j-maintenant span { position: absolute; left: -2px; top: -9px; padding: 1px 6px; border-radius: 999px;
  background: var(--error); color: #0A0B10; font-size: 10px; font-weight: 700; }
.rc-accueil-listes .rc-boite-rappel { margin: 0 0 4px; }

/* ── Le volet : l'état, les campagnes, « mettre à jour ? », les canaux manquants ── */
.rc-v-nom-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-v-etat { position: relative; }
.rc-v-etat > summary { list-style: none; cursor: pointer; }
.rc-v-etat > summary::-webkit-details-marker { display: none; }
.rc-v-etat .rc-w-etat-menu { z-index: 7; }
.rc-v-camps { display: flex; flex-direction: column; gap: 6px; }
.rc-v-camp-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-v-camp-ligne .rc-sc-choix { margin: 0; }
.rc-v-camp-ligne .rc-v-camp { max-width: 60%; }
.rc-v-prop { padding: 12px 14px; }
.rc-v-prop .rc-w-prop { margin: 0; border: 0; padding: 0; background: transparent; }
.rc-v-manquants { margin-top: 10px; }
.rc-v-bilan .rc-j-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--text-xs); }
.rc-v-bilan .rc-j-suggestions[hidden] { display: none; }
.rc-v-prep { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.rc-v-sous--qui { color: var(--muted-foreground); }
.rc-v-poser { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rc-v-badge--note { background: rgba(252,211,77,.12); color: var(--c-note); border-color: rgba(252,211,77,.25); }
.rc-v-dit { margin: 0; font-size: var(--text-sm); color: var(--success); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-v-dit--alerte { color: var(--warning); }
.rc-w-faux-phrase { color: var(--muted-foreground); }
.rc-ba--haut .rc-ba-note svg { color: var(--c-note); }
.rc-ba--haut .rc-ba-tache svg { color: var(--c-tache); }

.rc-v-tout > summary { cursor: pointer; color: var(--accent); font-size: var(--text-xs); padding: 8px 0; list-style: none; }
.rc-v-tout > summary::-webkit-details-marker { display: none; }
.rc-v-h a.rc-flux-ouvre { position: static; color: var(--foreground); text-decoration: none; }
.rc-v-h a.rc-flux-ouvre:hover { text-decoration: underline; }


/* ── La fiche contact : l'historique façon conversation, « Ce qui attend » à
   droite (Leverage, `echanges-fiche.tsx`) ───────────────────────────────── */
@media (min-width: 1680px) {
  .rc-fiche-vie { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 18px; align-items: start; }
  .rc-fiche-vie > * { grid-column: 1; }
  .rc-fiche-vie > .rc-j-a-venir { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: calc(var(--haut) + 12px); }
}
.rc-j-a-venir .rc-groupe-titre { margin: 0 0 2px; }
.rc-fiche-vie .rc-j-fil { gap: 10px; padding: 14px; border-radius: 14px; background: var(--sunk, #0E1016);
  border: 1px solid var(--border); }
.rc-fiche-vie .rc-j-jour { align-self: center; margin: 6px 0 0; font-size: var(--text-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--disabled-foreground); }
/* Les messages : reçus à gauche, envoyés à droite. */
.rc-fiche-vie .rc-j-bulle { max-width: 78%; }
.rc-fiche-vie .rc-j-bulle--recu { align-self: flex-start; }
.rc-fiche-vie .rc-j-bulle--envoye { align-self: flex-end; }
.rc-fiche-vie .rc-j-bulle .rc-j-evt { border-radius: 14px; }
.rc-fiche-vie .rc-j-bulle--recu .rc-j-evt { background: var(--card); border: 1px solid var(--border-strong);
  border-bottom-left-radius: 4px; }
.rc-fiche-vie .rc-j-bulle--envoye .rc-j-evt { background: color-mix(in srgb, var(--mmb-rouge) 18%, transparent); border: 1px solid color-mix(in srgb, var(--mmb-rouge) 25%, transparent);
  border-bottom-right-radius: 4px; }
/* Les notes : jaune hachuré. Les appels, tâches et réunions : au milieu, discrets. */
.rc-fiche-vie .rc-j-evt--note { background: repeating-linear-gradient(135deg, rgba(252,211,77,.07) 0 8px,
  rgba(252,211,77,.03) 8px 16px); border: 1px solid rgba(252,211,77,.22); }
.rc-fiche-vie .rc-j-fil > .rc-j-evt--appel, .rc-fiche-vie .rc-j-fil > .rc-j-evt--tache,
.rc-fiche-vie .rc-j-fil > .rc-j-evt--reunion { align-self: center; max-width: 88%; background: var(--muted);
  border-radius: 999px; padding: 6px 14px; }


/* ── Les rendez-vous : quatre onglets, « Préparé », « Compte rendu » ───── */
.rc-rdv-ambre { color: var(--warning); }
.rc-j-reunion-prep { display: block; font-size: var(--text-xs); margin-top: 2px; }
.rc-j-reunion-prep .rc-ok { color: var(--success); }
.rc-j-reunion-prep .rc-non { color: var(--disabled-foreground); }


/* ── La fiche d'une réunion, en volet elle aussi (façon Leverage) ───────── */
dialog.rc-volet.rc-modale-reunion[open],
dialog.rc-volet.rc-modale-reunion[open]:not(:modal) {
  position: fixed; inset: var(--haut) 0 0 auto; margin: 0; z-index: 60; width: var(--volet); max-width: 100vw;
  height: auto; max-height: none; overflow: hidden; border-radius: 0;
  box-shadow: -24px 0 48px rgba(0,0,0,.45); }
html:has(dialog.rc-volet.rc-modale-reunion[open]) { overflow: auto; }
@media (max-width: 767px) {
  dialog.rc-volet.rc-modale-reunion[open], dialog.rc-volet.rc-modale-reunion[open]:not(:modal) { inset: 0; width: 100vw; z-index: 80; }
}
dialog.rc-volet.rc-modale-reunion::before { display: none; }
dialog.rc-volet.rc-modale-reunion .rc-modale-corps { display: flex; flex-direction: column; gap: 18px;
  padding: 16px; overflow-y: auto; }
dialog.rc-volet.rc-modale-reunion .rc-modale-gauche,
dialog.rc-volet.rc-modale-reunion .rc-modale-droite { display: flex; flex-direction: column; gap: 16px;
  padding: 0; border: 0; background: none; overflow: visible; flex: none; min-height: auto; height: auto; }
dialog.rc-volet.rc-modale-reunion .rc-modale-droite { order: -1; }
dialog.rc-volet.rc-modale-reunion .rc-modale-corps > *, dialog.rc-volet.rc-modale-reunion .rc-modale-gauche > *,
dialog.rc-volet.rc-modale-reunion .rc-modale-droite > * { flex: none; }


/* ── Au téléphone : la barre reste repliée derrière l'éclair, le résultat
   d'un appel tient sur la largeur ─────────────────────────────────────── */
@media (max-width: 767px) {
  .rc-haut-ba { display: none; }
  .rc-ba-mobile-ouverte .rc-haut-ba { display: block; }
  .rc-ba-en-haut .rc-eclair { background: var(--primary); color: #fff; border-color: transparent; }
  .rc-ba-mobile-ouverte .rc-eclair { background: var(--muted); color: var(--foreground); }
  .rc-ba-mobile-ouverte .rc-eclair-z { display: none; }
  .rc-ba-mobile-ouverte .rc-eclair-x { display: inline; font-size: 22px; line-height: 1; }
  .rc-ba-en-haut .rc-haut-chercher-t { display: inline; }
  /* La recherche reprend la place qui reste : la règle « loupe seule » de
     l'ordinateur (`flex: none`) la faisait déborder de 200 px (12 octobre 2026). */
  .rc-ba-en-haut .rc-haut-chercher { flex: 1; min-width: 0; }
  .rc-v-pied-d { width: 100%; margin-left: 0; }
  .rc-v-pied-d > .btn, .rc-v-pied-d > .rc-v-autre { flex: 1; }
  .rc-v-pied-d .btn, .rc-v-autre > summary { width: 100%; justify-content: center; padding: 0 8px; min-height: 44px; }
}

/* ── La fenêtre d'un échange, façon Leverage ─────────────────────────────── */
dialog.rc-echange[open] .rc-echange-grille { overflow: hidden; }
dialog.rc-echange .rc-echange-forme { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0;
  padding: 0; }
dialog.rc-echange .rc-echange-tete { margin: 0; }
dialog.rc-echange .rc-echange-tete h2 { margin: 0; font-size: var(--text-sm); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.rc-echange .rc-echange-tete h2 span { color: var(--muted-foreground); font-weight: 500; }
.rc-echange-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column;
  gap: 12px; background: var(--background); }
.rc-echange-exception { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border-radius: 10px; background: var(--accent-wash); border: 1px solid var(--accent-ring); font-size: var(--text-sm); }
.rc-echange-exception[hidden] { display: none; }
.rc-v-lien { margin-left: auto; background: none; border: 0; color: var(--accent); font: inherit; font-size: var(--text-xs);
  cursor: pointer; padding: 0; }
.rc-echange-quand { display: flex; align-items: center; gap: 8px; }
.rc-echange-quand[hidden] { display: none; }
.rc-echange-quand-champs { display: inline-flex; align-items: center; gap: 8px; }
.rc-echange-carte { display: flex; flex-direction: column; }
.rc-echange-carte .rc-ed { border: 0; border-radius: 0; background: var(--background); }
.rc-echange-carte .rc-echange-zone { padding: 0; }
.rc-echange-aide { margin: 0; padding: 8px 14px 0; }
.rc-echange-outils { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 8px 14px;
  border-top: 1px solid var(--border); }
.rc-v-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px;
  border: 1px solid var(--border-strong); color: var(--muted-foreground); font-size: var(--text-xs); text-decoration: none;
  cursor: pointer; list-style: none; background: transparent; }
.rc-v-tag::-webkit-details-marker { display: none; }
.rc-v-tag:hover { color: var(--foreground); border-color: var(--accent); }
/* « Modèles » et « Variables » : deux boutons, une carte posée par-dessus le
   texte (10 octobre 2026). Le panneau garde ses blocs ; la carte n'en montre
   que ceux du bouton choisi. */
.rc-echange-listes { position: relative; display: flex; gap: 6px; flex-wrap: wrap; }
.rc-echange-liste-btn { height: 30px; padding: 0 11px; color: var(--foreground); }
.rc-echange-liste-btn svg { color: var(--accent); }
.rc-echange-accolades { color: var(--accent); font-weight: 600; letter-spacing: -.05em; }
.rc-echange-liste-btn[aria-expanded="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.rc-echange-carte-pm { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  width: min(380px, calc(var(--volet) - 56px)); max-height: min(440px, 62vh); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55); overflow: hidden; }
.rc-echange-carte-pm[hidden] { display: none; }
.rc-echange-carte-pm-tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.rc-echange-carte-pm-tete .rc-v-x { margin-left: auto; background: none; border: 0; cursor: pointer; }
.rc-echange-carte-pm .rc-pm { flex: 1; min-height: 0; overflow-y: auto; border: 0; border-radius: 0; max-height: none;
  padding: 12px 14px 16px; gap: 12px; position: static; width: auto; }
/* Un bouton, un bloc : modèles, liens de rendez-vous ou variables. */
.rc-echange-carte-pm[data-mode="modeles"] .rc-pm-bloc:not(.rc-pm-bloc--modeles),
.rc-echange-carte-pm[data-mode="liens"] .rc-pm-bloc:not(.rc-pm-bloc--liens),
.rc-echange-carte-pm[data-mode="variables"] .rc-pm-bloc:not(.rc-pm-bloc--variables) { display: none; }
.rc-echange-carte-pm .rc-pm-bloc > .rc-pm-titre { display: none; }
.rc-v-etat-brouillon { margin: 0; padding: 6px 14px 10px; font-size: 11px; color: var(--disabled-foreground); }
.rc-echange-pied.rc-v-pied { flex: none; margin: 0; padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--card); }
.rc-echange-pied .rc-v-annuler { background: none; border: 0; font: inherit; font-size: var(--text-sm); padding: 0; }
.rc-v-menu-pop--haut-g { top: auto; bottom: calc(100% + 6px); }
.rc-echange-resultats { display: inline-flex; gap: 8px; align-items: center; }
.rc-echange-resultats[hidden], .rc-echange-pied [hidden] { display: none !important; }
dialog.rc-echange .rc-essai > summary[hidden] { display: none; }
dialog.rc-echange .rc-essai:not([open]) { display: none; }
@media (max-width: 767px) {
  .rc-echange-pied.rc-v-pied { flex-wrap: wrap; }
  .rc-echange-resultats { width: 100%; }
  .rc-echange-resultats > * { flex: 1; }
}
dialog.rc-echange .rc-v-ligne-coord.rc-echange-action { flex-direction: row; align-items: center; flex-wrap: nowrap;
  gap: 10px; margin: 0; padding: 10px 14px; }
dialog.rc-echange .rc-v-ligne-coord .rc-v-composer.rc-pro-ouvrir { flex: none; width: 30px; height: 30px; min-height: 0;
  padding: 0; border-radius: 50%; border: 0; background: var(--success); color: #0A0B10; display: grid; place-items: center; }
dialog.rc-echange .rc-v-ligne-coord .rc-v-num { flex: 1; }
.rc-echange-pied.rc-v-pied { flex-wrap: wrap; row-gap: 8px; }
.rc-echange-pied .rc-v-pied-d { flex-wrap: wrap; justify-content: flex-end; }
.rc-echange-pied .rc-v-pied-d .btn { padding: 0 12px; }
.rc-echange-pied .btn svg { width: 14px; height: 14px; flex: none; }
dialog.rc-echange .rc-pro-ouvrir { flex: none; min-width: 0; }
.rc-echange-pied .btn { min-width: 0; }
@media (min-width: 768px) {
  .rc-echange-pied.rc-v-pied, .rc-echange-pied .rc-v-pied-d { flex-wrap: nowrap; }
}
dialog.rc-echange .rc-echange-pied .btn { min-width: 0; min-height: 38px; padding: 0 12px; }


/* ── La personne : ses coordonnées en clair ; l'historique en bas (10 oct.) ── */
.rc-v-coord { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-v-coord a, .rc-v-coord span, .rc-v-coord s { display: inline-flex; align-items: center; gap: 5px; color: inherit;
  text-decoration: none; }
.rc-v-coord a:hover { color: var(--foreground); }
.rc-v-coord s { text-decoration: line-through; opacity: .6; }
.rc-echange-entete { display: flex; flex-direction: column; gap: 12px; }

/* ── La colonne Historique (10 oct. 2026) : collée à gauche du volet ──────── */
.rc-v-horloge { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); font: inherit;
  font-size: var(--text-xs); cursor: pointer; white-space: nowrap; }
.rc-v-horloge:hover { background: var(--muted); color: var(--foreground); }
.rc-v-horloge[aria-expanded="true"] { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-ring); }
.rc-histo { position: fixed; top: var(--haut); bottom: 0; right: var(--volet); z-index: 59;
  width: min(var(--volet), calc(100vw - var(--rail) - var(--volet))); display: flex; flex-direction: column;
  background: var(--card); border-left: 1px solid var(--border-strong); box-shadow: -18px 0 36px rgba(0,0,0,.4);
  overflow-y: auto; }
.rc-histo[hidden] { display: none; }
/* ⚠️ **DEUX COLONNES AU PLUS** (Tevini, 14 octobre 2026, qui remplace les
   trois du matin) : l'historique à gauche, le volet à onglets à droite. La
   fiche d'une personne, sans activité ouverte, garde sa note ou sa tâche à
   gauche de la fiche : trois colonnes, de même largeur. */
@media (min-width: 768px) {
  html.rc-poser-ouvert:has(dialog .rc-poser-volet:not([hidden])) { --volet: var(--colonne3); }
  html.rc-poser-ouvert:has(dialog .rc-poser-volet:not([hidden])) .rc-histo {
    right: calc(var(--volet) * 2); width: var(--volet); }
}

/* ── Une note, une tâche ou un RDV demandés depuis l'activité : un onglet du
   volet (14 octobre 2026), posé sous la barre d'onglets (plus haut). */
.rc-gauche { position: fixed; bottom: 0; display: flex; flex-direction: column;
  background: var(--background); border-left: 1px solid var(--border-strong); overflow: hidden; }
.rc-gauche-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rc-gauche .rc-v-poser { display: flex; flex-direction: column; gap: 12px; }
.rc-gauche.rc-r-fenetre { padding: 0; }
.rc-histo-barre { position: sticky; top: 0; z-index: 1; }
.rc-histo-n { color: var(--muted-foreground); }
.rc-histo-barre .rc-v-x { margin-left: auto; background: none; border: 0; cursor: pointer; }
.rc-histo-liste { padding: 12px 16px 20px; }
.rc-histo-liste[hidden] { display: none; }
/* Chercher dans l’historique (14 octobre 2026) : un mot, un nom, un texte envoyé. */
.rc-histo-cherche { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 10px; height: 34px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--background); color: var(--muted-foreground); }
.rc-histo-cherche:focus-within { border-color: var(--accent); }
.rc-histo-cherche input { flex: 1; min-width: 0; border: 0; background: none; color: var(--foreground); font: inherit; font-size: 13px; outline: none; }
.rc-histo-ligne { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 0; padding: 9px 6px; }
.rc-histo-ligne[hidden] { display: none; }
/* « À venir » puis « Passé » (10 oct. 2026) : ce qui est prévu ouvre aussi son détail ici. */
.rc-histo-section { margin: 10px 6px 2px; font-size: var(--text-2xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-foreground); }
.rc-histo-section[hidden] { display: none; }
.rc-histo-ligne--prevue b { color: var(--accent-hi); }
.rc-histo-ligne:hover, .rc-histo-ligne:focus-visible { background: var(--muted); }
.rc-histo-ligne small { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc-histo-detail { padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.rc-histo-detail[hidden] { display: none; }
.rc-histo-nav { display: flex; align-items: center; gap: 6px; }
.rc-histo-nav button { font: inherit; background: none; border: 1px solid var(--border); color: var(--muted-foreground);
  border-radius: 8px; cursor: pointer; height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; }
.rc-histo-nav button:hover:not(:disabled) { background: var(--muted); color: var(--foreground); }
.rc-histo-nav button:disabled { opacity: .35; cursor: default; }
.rc-histo-retour svg { transform: rotate(180deg); }
.rc-histo-pos { margin-left: auto; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-histo-fl--haut svg { transform: rotate(-90deg); }
.rc-histo-fl--bas svg { transform: rotate(90deg); }
.rc-histo-tete { display: flex; gap: 10px; align-items: flex-start; }
.rc-histo-tete h3 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.rc-histo-tete p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.rc-histo-texte { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.55; padding: 12px 14px;
  border-radius: 10px; background: var(--muted); border: 1px solid var(--border); overflow-wrap: anywhere; }
.rc-histo-ouvrir { align-self: flex-start; }
@media (max-width: 767px) {
  .rc-histo { right: 0; left: 0; width: 100vw; top: 0; z-index: 90; }
  .rc-v-horloge span { display: none; }
}
/* La recherche de la carte : un seul cadre, qui s'allume quand on y écrit
   (le champ gardait son propre fond, un second cadre dans le premier). */
.rc-echange-carte-pm .rc-pm-recherche { background: var(--muted); transition: border-color .15s; }
.rc-echange-carte-pm .rc-pm-recherche:focus-within { border-color: var(--accent); }
.rc-echange-carte-pm .rc-pm-recherche input,
.rc-echange-carte-pm .rc-pm-recherche input:focus { background: transparent; box-shadow: none; outline: none; border: 0; }

/* Un canal sans sa valeur se clique quand même (10 octobre 2026) : en
   pointillé, il demande la valeur sur place, puis ouvre sa fenêtre. */
.rc-bab--manque { border: 1px dashed var(--border-strong); color: var(--muted-foreground); }
.rc-bab--manque:hover { color: var(--foreground); border-color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 6%, transparent); }
.rc-bam-it--manque { list-style: none; color: var(--muted-foreground); }
.rc-bam-it--manque::-webkit-details-marker { display: none; }
.rc-bam-it--manque .rc-bam-ico { opacity: .6; }
.rc-bam-it--manque small { font-style: italic; }
.rc-bam--completer[open] > .rc-bam-it--manque { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 10%, transparent); color: var(--foreground); }
.rc-bam-completer { display: flex; flex-direction: column; gap: 8px; width: 290px; padding: 14px; }
.rc-bam-completer-q { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.rc-bam-completer .rc-saisie { min-height: 38px; font-weight: 400; }
.rc-bam-completer .btn { align-self: flex-start; }
/* Dans le menu « Message », le champ s'ouvre sous sa ligne. */
.rc-bam-pop .rc-bam--completer .rc-bam-completer { position: static; width: auto; margin: 2px 0 8px; box-shadow: none;
  background: var(--card); }

/* La fenêtre d'un échange défile d'un seul tenant (10 octobre 2026) : la barre
   du titre en haut, l'en-tête de la personne, le message, et le pied collé en
   bas. Le formulaire ne fait plus de boîte : l'en-tête vit hors de lui. */
dialog.rc-echange[open] .rc-echange-grille { overflow-y: auto; overflow-x: hidden; }
dialog.rc-echange[open] .rc-echange-grille > .rc-echange-forme { display: contents; }
dialog.rc-echange[open] .rc-echange-grille > .rc-echange-tete { position: sticky; top: 0; z-index: 3; flex: none; }
dialog.rc-echange[open] .rc-echange-grille .rc-echange-corps { flex: 1 0 auto; min-height: auto; overflow: visible; }
dialog.rc-echange[open] .rc-echange-grille .rc-echange-pied { position: sticky; bottom: 0; z-index: 3; }
dialog.rc-echange .rc-echange-entete { flex: none; padding: 16px 16px 0; }

/* Cc et Cci d'un mail : deux pastilles sur la ligne « À », allumées quand
   leur ligne l'est. */
.rc-echange-copies-bascules { margin-left: auto; display: inline-flex; gap: 4px; }
.rc-echange-copie-bascule { font: inherit; font-size: var(--text-xs); font-weight: 600; height: 26px; padding: 0 10px; border-radius: 7px;
  cursor: pointer; color: var(--muted-foreground); background: transparent; border: 1px solid var(--border-strong); }
.rc-echange-copie-bascule:hover { color: var(--foreground); border-color: var(--accent); }
.rc-echange-copie-bascule[aria-pressed="true"] { color: var(--accent-hi); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); border-color: var(--accent); }
.rc-echange-copie { border-top: 1px solid var(--border); }
.rc-echange-copie[hidden] { display: none; }
.rc-echange-copie input { flex: 1; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 30px; }
.rc-echange-copie input:focus { outline: none; box-shadow: none; }
.rc-echange-copie .rc-v-x { background: none; border: 0; cursor: pointer; }
.rc-echange-copie { align-items: center; }
.rc-echange-copie input { color: var(--foreground); font-size: var(--text-sm); }

/* ── La fiche d'une réunion, mise en forme comme le volet d'une activité
   (demande de Tevini du 10 octobre 2026) ─────────────────────────────── */
dialog.rc-r-volet .rc-r-barre { position: sticky; top: 0; z-index: 4; }
dialog.rc-r-volet .rc-r-barre #rc-r-titre { min-width: 0; flex: 1; font-weight: 600; white-space: normal; line-height: 1.3; }
dialog.rc-r-volet .rc-r-barre .rc-j-etat { flex: none; }
dialog.rc-r-volet .rc-r-barre .rc-v-x { flex: none; }
dialog.rc-r-volet .rc-r-corps.rc-v-corps { padding: 16px; gap: 14px; }
.rc-r-carte { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rc-r-carte .rc-r-infos { margin: 0; }
.rc-r-carte .rc-r-faits { margin: 0; padding-top: 8px; border-top: 1px solid var(--border); }
/* L'enregistrement */
.rc-r-enr-actions { display: inline-flex; align-items: center; gap: 6px; }
.rc-r-enr-changer { position: relative; }
.rc-r-enr-changer > summary { list-style: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
  cursor: pointer; color: var(--muted-foreground); border: 1px solid var(--border); }
.rc-r-enr-changer > summary::-webkit-details-marker, .rc-r-enr-ajouter > summary::-webkit-details-marker { display: none; }
.rc-r-enr-changer > summary:hover { color: var(--foreground); border-color: var(--accent); }
.rc-r-enr-changer[open] .rc-r-enr-forme { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; width: 320px;
  padding: 10px; border-radius: 10px; background: #171925; border: 1px solid var(--border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.rc-r-enr-ajouter { grid-column: 2 / span 2; }
.rc-r-enr-ajouter > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: var(--text-sm); }
.rc-r-enr-ajouter > summary:hover { text-decoration: underline; }
.rc-r-enr-forme { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rc-r-enr-forme .rc-saisie { flex: 1 1 200px; min-width: 0; min-height: 36px; }
/* La fiche d'une réunion garde l'ordre de son code, au téléphone aussi (les
   règles d'ordre de l'ancienne fenêtre à deux colonnes n'y valent plus). */
dialog.rc-r-volet .rc-r-corps > * { order: 0 !important; }
@media (max-width: 767px) { .rc-v-tete .rc-v-tete-d { width: auto; margin-left: auto; } }

/* ── L'historique de la fiche, comme celui du volet (10 oct. 2026) ──────── */
.rc-histo-fiche { border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.rc-histo-fiche .rc-histo-liste, .rc-histo-fiche .rc-histo-detail { padding: 12px 14px 16px; }
.rc-hf-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc-hf-gestes form { margin: 0; }
.rc-hf-riche .rc-j-evt { border: 0; padding: 0; background: none; }
/* Fermé tant que la barre d'action ne l'ouvre pas (« Note », « Tâche »). */
.rc-compose[hidden] { display: none; }
@media (max-width: 900px) {
  .rc-hf-gestes .btn, .rc-histo-fiche .rc-histo-ligne, .rc-histo-fiche .rc-histo-nav button,
  .rc-histo-fiche .rc-histo-filtres button { min-height: 44px; }
}

/* ── Note, Tâche, RDV : toujours un volet latéral (Tevini, 10 oct. 2026) ── */
/* Sur la fiche : l'encart de saisie devient un volet à droite quand la barre
   l'ouvre (sans script, il reste dans la page). */
.rc-poser-barre, .rc-poser-volet > .rc-poser-corps { display: none; }
html.rc-poser-ouvert .rc-poser-volet { position: fixed; inset: var(--haut) 0 0 auto; z-index: 60; margin: 0;
  width: var(--volet); max-width: 100vw; display: flex; flex-direction: column; gap: 0; overflow: hidden;
  background: var(--card); border-left: 1px solid var(--border-strong); box-shadow: -24px 0 48px rgba(0,0,0,.45); }
html.rc-poser-ouvert .rc-poser-barre { display: flex; }
html.rc-poser-ouvert .rc-poser-barre .rc-v-x { margin-left: auto; background: none; border: 0; cursor: pointer; color: inherit; font-size: 18px; }
.rc-poser-volet > .rc-poser-corps { display: contents; }
html.rc-poser-ouvert .rc-poser-volet > .rc-poser-corps { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0;
  overflow-y: auto; padding: 16px; }
.rc-poser-volet [data-poser-ico][hidden] { display: none; }
.rc-poser-volet .rc-w-note-pied { flex-wrap: wrap; }
.rc-poser-volet .rc-w-note-pied small { flex: 1 1 100%; order: -1; }
/* Depuis le volet d'une conversation (12 octobre 2026) : fermé, rien dans la
   page ; ouvert, à GAUCHE du volet, comme toute seconde fenêtre de Ma journée. */
html:not(.rc-poser-ouvert) .rc-conv-poser { display: none; }
html.rc-poser-ouvert .rc-conv-poser .rc-poser-volet { right: var(--volet); z-index: 61; }
@media (max-width: 899px) { html.rc-poser-ouvert .rc-conv-poser .rc-poser-volet { right: 0; inset: 0; width: 100vw; z-index: 80; } }
/* Depuis la fiche d'une réunion (un volet à droite) : la saisie se colle à sa
   gauche, comme une note posée depuis une activité ; l'historique s'efface. */
html.rc-poser-ouvert dialog .rc-poser-volet { right: var(--volet); width: var(--volet);
  box-shadow: -18px 0 36px rgba(0,0,0,.4); }
/* La fenêtre « Nouvelle réunion » / « Modifier la réunion » : un volet à droite
   plutôt qu'une fenêtre au centre, partout où elle s'ouvre. */
dialog#rc-fenetre-reunion[open] { position: fixed; inset: var(--haut) 0 0 auto; margin: 0; z-index: 60;
  width: var(--volet); max-width: 100vw; height: auto; max-height: none; border-radius: 0;
  border: 0; border-left: 1px solid var(--border-strong); box-shadow: -24px 0 48px rgba(0,0,0,.45);
  background: var(--card); overflow-y: auto; }
dialog#rc-fenetre-reunion[open]::before { display: none; }
.rc-r-fermer { margin-left: auto; color: var(--muted-foreground); text-decoration: none; font-size: 20px; line-height: 1; padding: 4px 8px; }
.rc-r-fermer:hover { color: var(--foreground); }
dialog#rc-fenetre-reunion::backdrop { background: rgba(5,6,10,.35); backdrop-filter: none; }
@media (max-width: 767px) {
  html.rc-poser-ouvert .rc-poser-volet, html.rc-poser-ouvert dialog .rc-poser-volet,
  dialog#rc-fenetre-reunion[open] { inset: 0; width: 100vw; z-index: 90; }
}
/* Un seul fond sous l'en-tête de la personne et le message (11 octobre 2026) :
   celui du volet d'une activité ; seules les cartes ressortent. */
dialog.rc-echange[open] .rc-echange-grille { background: var(--background); }
/* Le rail de gauche défile sans montrer de barres (Tevini, 11 octobre 2026) :
   la molette et le doigt marchent toujours, rien ne déborde en largeur. */
.rc-rail-nav { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.rc-rail-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ── « Ma journée » (11 octobre 2026, refaite le soir avec Tevini) ──────────
   Les chiffres par sorte en haut, les personnes et leurs filtres, le planning
   d'un jour à droite. Ce qu'on ouvre glisse dans le volet latéral à droite. */
.rc-content--journee { max-width: none; }
.mj-tete { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.mj-tete .rc-titre-page { margin: 0; }
.mj-tete-d { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mj-progres { display: inline-block; vertical-align: middle; width: 160px; height: 6px; margin-left: 8px; border-radius: 99px;
  background: var(--muted); overflow: hidden; }
.mj-progres i { display: block; height: 100%; background: var(--success); }
/* Les chiffres du haut, colorés par sorte d'activité : un clic filtre. */
.mj-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.mj-kpi { --teinte: var(--muted-foreground); display: block; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--foreground); text-decoration: none; box-shadow: inset 0 3px 0 -1px var(--teinte); }
.mj-kpi:hover { border-color: var(--border-strong); }
.mj-kpi b { display: block; font-size: 24px; font-weight: 600; line-height: 1.1; }
.mj-kpi span { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--muted-foreground); }
.mj-kpi i { width: 8px; height: 8px; border-radius: 50%; background: var(--teinte); }
.mj-kpi[aria-current] { border-color: var(--teinte); background: color-mix(in srgb, var(--teinte) 9%, var(--card)); }
.mj-kpi--appel { --teinte: #4ade80; }
.mj-kpi--message { --teinte: #7dd3fc; }
.mj-kpi--mail { --teinte: #fbbf24; }
.mj-kpi--rdv { --teinte: var(--mmb-rouge-lumineux); }
/* La période, des personnes, une campagne : au-dessus de la liste. */
.mj-filtres { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mj-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--muted); gap: 2px; }
.mj-seg a { padding: 6px 11px; border-radius: 8px; font-size: 13px; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.mj-seg a.on { background: var(--card); color: var(--foreground); font-weight: 600; }
.mj-seg .mj-seg-retard { color: var(--error); }
.mj-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-foreground); }
.mj-dates .rc-saisie, .mj-camp-choix { height: 34px; width: auto; font-size: 13px; }
.mj-camp-choix { max-width: 190px; text-overflow: ellipsis; }
/* ⚠️ LES SESSIONS, PUIS LES FILTRES (Tevini, 11 octobre 2026) : une seule
   carte au-dessus des chiffres, le cadre des vues des contacts. Les menus
   (« + Enregistrer », « ⋯ ») vivent HORS de la rangée qui défile : une rangée
   qui défile coupe ce qui en déborde. */
.mj-outils { display: flex; flex-direction: column; align-items: stretch; margin: 16px 0 0; position: relative; z-index: 5;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.mj-sessions-ligne { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid var(--border); }
.mj-sessions { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mj-sessions::-webkit-scrollbar { display: none; }
.mj-sessions .rc-vue { flex: none; }
.mj-session-modif { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; color: var(--warning-text); white-space: nowrap; }
.mj-lien { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.mj-session-pop { flex: none; }
.mj-session-plus { color: var(--accent); }
.mj-session-form { display: flex; flex-direction: column; gap: 10px; width: 290px; }
.mj-session-form form { display: flex; flex-direction: column; gap: 8px; }
.mj-outils .mj-filtres { border-bottom: 0; padding: 9px; }
.mj-outils .mj-drop { margin-left: 0; }
/* Un filtre posé se voit : liseré et voile violets. */
.mj-plein { border-color: var(--primary) !important; background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important; }
.mj-effacer { font-size: 12.5px; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
.mj-effacer:hover { color: var(--foreground); }
.mj-cherche { margin-left: auto; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; flex: 0 1 240px; min-width: 150px;
  border: 1px solid var(--border-strong); border-radius: 9px; color: var(--muted-foreground); }
.mj-cherche:focus-within { border-color: var(--accent); }
.mj-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--foreground); font: inherit; font-size: 13px; }
.mj-filtres-tel { display: none; }
/* ⚠️ REPORTER EN UN CLIC (Tevini, 11 octobre 2026) : l'horloge de la ligne,
   son menu, à côté du bouton principal. */
.mj-gestes { display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 2; }
.mj-rep { position: relative; }
/* Le menu ouvert passe AU-DESSUS des lignes suivantes, et de leur horloge. */
.mj-gestes:has(.mj-rep[open]) { z-index: 45; }
.mj-rep > summary { list-style: none; }
.mj-rep > summary::-webkit-details-marker { display: none; }
.mj-rep-bouton { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--muted-foreground); cursor: pointer; }
.mj-rep-bouton:hover, .mj-rep[open] .mj-rep-bouton { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.mj-rep-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 250px; padding: 6px; display: flex; flex-direction: column;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--popover, var(--card)); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.mj-rep--haut .mj-rep-menu { top: auto; bottom: calc(100% + 6px); }
.mj-rep-menu b { padding: 6px 9px 4px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--disabled-foreground); }
.mj-rep-menu button { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--foreground); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mj-rep-menu button:hover, .mj-rep-menu button:focus-visible { background: var(--muted); }
.mj-rep-menu small { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
.mj-rep-date { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--border); font-size: 13px; }
.mj-rep-date .rc-saisie { height: 34px; font-size: 13px; }
/* « Fait », « Reporter », « Annuler » en un clic (14 octobre 2026) : chaque
   raccourci porte sa couleur, pour se reconnaître d'un coup d'œil —
   vert fait, ambre reporter, rouge annuler. */
.mj-gestes > .mj-rep:not(.mj-vite) > .mj-rep-bouton { color: var(--warning); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.mj-gestes > .mj-rep:not(.mj-vite) > .mj-rep-bouton:hover, .mj-gestes > .mj-rep:not(.mj-vite)[open] > .mj-rep-bouton {
  color: var(--warning); border-color: var(--warning); background: rgba(251,191,36,.12); }
.mj-vite--fait > .mj-rep-bouton { color: var(--success); border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.mj-vite--fait > .mj-rep-bouton:hover, .mj-vite--fait[open] > .mj-rep-bouton { color: var(--success); border-color: var(--success); background: rgba(74,222,128,.12); }
.mj-vite--annule > .mj-rep-bouton { color: var(--error); border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.06); }
.mj-vite--annule > .mj-rep-bouton:hover, .mj-vite--annule[open] > .mj-rep-bouton { color: var(--error); border-color: var(--error); background: rgba(248,113,113,.12); }
.mj-vite-menu { width: 290px; }
.mj-vite-champ { display: flex; flex-direction: column; gap: 6px; padding: 4px 9px 0; font-size: 13px; }
.mj-vite-champ em { color: var(--disabled-foreground); font-style: normal; }
.mj-vite-champ .rc-saisie { font-size: 13px; resize: vertical; min-height: 60px; }
.mj-vite-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 9px 4px; }
.mj-rep-menu .mj-vite-pied .mj-vite-ok { display: inline-flex; justify-content: center; padding: 0 14px; color: var(--on-primary); font-weight: 500; }
.mj-rep-menu .mj-vite-pied .btn-secondary { border: 1px solid var(--border); display: inline-flex; justify-content: center; padding: 0 14px; font-weight: 500; }
.mj-vite--fait .mj-vite-ok, .mj-vite--fait .mj-vite-ok:hover { background: var(--success); }
.mj-vite--annule .mj-vite-ok, .mj-vite--annule .mj-vite-ok:hover { background: var(--error); }
.mj-rep-menu .mj-vite-pied .mj-vite-ok:hover { filter: brightness(1.08); }
/* Au téléphone, « Reporter » et « Annuler » montent du bas, sur toute la
   largeur : ancrés à leur bouton, ils sortaient de l’écran par la gauche. */
@media (max-width: 900px) {
  .mj-rep-menu, .mj-rep--haut .mj-rep-menu { position: fixed; left: 12px; right: 12px; width: auto; top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; }
  .mj-vite-champ .rc-saisie { font-size: 16px; }
}
/* Les personnes : une liste déroulante qui se cherche. */
.mj-drop { position: relative; margin-left: auto; }
.mj-drop-tete { display: inline-flex; align-items: center; height: 34px; min-width: 160px; max-width: 230px; padding: 0 30px 0 10px;
  font-size: 13px; cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.mj-drop-tete::after { content: ""; position: absolute; right: 13px; top: 12px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground); transform: rotate(45deg); }
.mj-drop-tete::-webkit-details-marker { display: none; }
.mj-drop[open] .mj-drop-tete { border-color: var(--accent); }
.mj-drop-panneau { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 300px; padding: 8px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--popover, var(--card)); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.mj-drop-cherche { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px; border: 1px solid var(--border-strong);
  border-radius: 9px; background: var(--background); color: var(--muted-foreground); }
.mj-drop-cherche:focus-within { border-color: var(--accent); }
.mj-drop-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--foreground); font: inherit; font-size: 13px; }
.mj-drop-liste { max-height: 260px; overflow-y: auto; margin: 6px 0; }
.mj-drop-choix { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.mj-drop-choix:hover { background: var(--muted); }
.mj-drop-choix input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.mj-drop-liste p { margin: 0; padding: 8px; font-size: 12.5px; color: var(--muted-foreground); }
.mj-drop-pied { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
/* Le planning d'un jour, à droite : il se feuillette seul. */
.mj-plan { margin: 0; position: sticky; top: calc(var(--haut) + 12px); display: flex; flex-direction: column;
  max-height: calc(100vh - var(--haut) - 24px); }
.mj-plan-tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mj-plan-tete b { flex: 1; text-align: center; font-size: 13.5px; }
.mj-plan-fl { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); display: grid; place-items: center;
  color: var(--foreground); text-decoration: none; font-size: 15px; }
.mj-plan-fl:hover { border-color: var(--accent); }
.mj-plan-auj { font-size: 12px; color: var(--accent); text-decoration: none; }
.mj-plan-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 10px 44px; }
.mj-plan-heures { position: relative; }
.mj-plan-h { position: absolute; left: -40px; right: 0; border-top: 1px dashed rgba(255,255,255,.06); }
.mj-plan-h i { position: absolute; left: 0; top: -7px; font-size: 10.5px; font-style: normal; color: var(--disabled-foreground); }
.mj-plan-bloc { position: absolute; padding: 3px 8px; border-radius: 8px; font-size: 12px; line-height: 1.3; overflow: hidden;
  text-decoration: none; color: var(--muted-foreground); background: rgba(125,211,252,.12); border: 1px solid rgba(125,211,252,.4); }
.mj-plan-bloc:hover { filter: brightness(1.25); }
.mj-plan-bloc b, .mj-plan-bloc small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-plan-bloc b { color: var(--foreground); font-size: 12px; font-weight: 600; }
.mj-plan-bloc small { font-size: 11.5px; }
.mj-plan-bloc--appel { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.4); }
.mj-plan-bloc--mail { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.35); }
.mj-plan-bloc--rdv { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 16%, transparent); border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 45%, transparent); }
.mj-plan-bloc--compl { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.5); border-style: dashed; }
.mj-plan-bloc--fait { opacity: .5; }
/* En retard, il a suivi jusqu'à aujourd'hui : un liseré rouge le dit. */
.mj-plan-bloc--retard { border-left: 3px solid var(--error); }
.mj-plan-bloc--retard small { color: var(--error); }
/* Ses agendas Google, en FOND, sous les activités (11 octobre 2026) : occupé =
   hachures grises sans titre ; titré = liseré de la couleur de l'agenda. */
.mj-plan-fond { position: absolute; left: 0; right: 4px; z-index: 0; overflow: hidden; padding: 3px 8px; border-radius: 7px;
  font-size: 11.5px; line-height: 1.3; color: var(--muted-foreground); pointer-events: auto;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, rgba(255,255,255,.075) 6px 12px);
  border: 1px solid rgba(255,255,255,.09); }
/* ⚠️ Taille ÉCRITE ici (15 octobre 2026, Tevini) : le `font: inherit` du bouton
   rendait aux titres la taille de la page. Alignés sur le bandeau « Toute la journée ». */
.mj-plan-fond b { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-plan-fond small { display: block; font-size: 10.5px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-plan-fond--titre { --teinte: var(--info); background: color-mix(in srgb, var(--teinte) 12%, transparent);
  border-color: color-mix(in srgb, var(--teinte) 40%, transparent); border-left: 3px solid var(--teinte); color: var(--foreground); }
.mj-plan-bloc { z-index: 1; }
/* « Tout le détail » (14 octobre 2026) : un créneau Google qui s'ouvre au clic,
   et les événements à la journée en bandeau, au-dessus des heures. */
button.mj-plan-fond { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; }
button.mj-plan-fond:hover { filter: brightness(1.25); }
/* Un créneau court (moins d'une demi-heure) : titre et heures sur UNE ligne,
   sinon la seconde passe sous le bord et se mêle au créneau suivant. */
.mj-plan-fond--court, button.mj-plan-fond--court { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.mj-plan-fond--court b { flex: 0 1 auto; min-width: 0; }
.mj-plan-fond--court small { flex: 1 1 0; min-width: 0; }
span.mj-plan-fond--court { display: flex; }
button.mj-plan-fond:focus-visible, .mj-plan-jour:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mj-plan-journee[hidden], .mj-conv-volet[hidden] { display: none; }
.mj-plan-journee { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.mj-plan-jour { --teinte: var(--info); display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 4px 8px; border-radius: 7px;
  font: inherit; font-size: 12px; text-align: left; cursor: pointer; color: var(--foreground);
  background: color-mix(in srgb, var(--teinte) 14%, transparent); border: 1px solid color-mix(in srgb, var(--teinte) 40%, transparent);
  border-left: 3px solid var(--teinte); }
.mj-plan-jour:hover { filter: brightness(1.25); }
.mj-plan-jour b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-plan-jour small { flex: none; font-size: 10.5px; color: var(--muted-foreground); }
/* Le volet d'un événement Google, en lecture seule (14 octobre 2026), a laissé
   la place au volet MODIFIABLE de l'emploi du temps (16 octobre 2026) : `emploi.css`. */
.mj-plan-autres { position: absolute; right: 0; z-index: 2; padding: 1px 7px; border-radius: 999px; font-size: 11.5px;
  background: var(--muted); border: 1px solid var(--border-strong); color: var(--foreground); text-decoration: none; }
.mj-plan-mnt { position: absolute; left: -6px; right: 0; height: 2px; background: var(--error); pointer-events: none; z-index: 3; }
.mj-plan-mnt::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
.mj-plan-sans { flex: none; display: block; margin: 0; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 12px;
  color: var(--muted-foreground); text-decoration: none; }
a.mj-plan-sans:hover { color: var(--foreground); }
/* Les personnes au milieu, le planning à droite. */
.mj { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mj-liste { margin: 0; }
.mj-ligne { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 170px) 84px auto; }
.mj-ligne .rc-j-rangee-titre { font-weight: 600; }
.mj-camp { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-camp b { display: block; color: var(--foreground); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mj-ici { background: var(--accent-wash); box-shadow: inset 3px 0 var(--accent); }
.mj-faite { opacity: .55; }
.mj-faite .rc-j-rangee-titre { text-decoration: line-through; }
.mj-coche { color: var(--success); font-weight: 700; padding: 0 10px; }
.mj-coche--annulee { color: var(--disabled-foreground); }
.mj-raison { font-size: 12.5px; color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-raison--a { color: var(--accent); }
.mj-raison--r { color: var(--error); }
/* ⚠️ LE VOLET LATÉRAL À DROITE, par-dessus la page : celui d'une activité
   (`_volet_activite.html`, tel quel) ou celui d'une conversation, au même
   endroit, à la même largeur. Toute autre fenêtre s'ouvre à sa gauche. */
.mj-conv-volet { position: fixed; inset: var(--haut) 0 0 auto; width: var(--volet); max-width: 100vw; z-index: 55;
  display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border-strong);
  box-shadow: -18px 0 40px rgba(0,0,0,.35); }
.mj-volet-barre { flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--border); background: var(--muted); }
.mj-volet-barre .rc-j-fermer { text-decoration: none; }
.mj-suivant { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.mj-conv-volet .bx-lecture { flex: 1; min-height: 0; overflow-y: auto; background: var(--card); }
.mj-conv-volet .bx-retour { display: none; }
.mj-conv-volet .bx-lect-tete { flex-wrap: wrap; row-gap: 10px; }
.mj-conv-volet .bx-lect-qui { flex: 1; min-width: 0; }
.mj-conv-volet .bx-gestes { width: 100%; flex-wrap: wrap; }
.bx-bulle-modifier { display: none; margin-top: 4px; font-size: 11.5px; color: var(--muted-foreground); }
.bx-bulle:hover .bx-bulle-modifier, .bx-bulle-modifier:focus { display: block; }
.rc-j-rangee-geste { position: relative; z-index: 1; align-self: center; white-space: nowrap; }
@media (max-width: 1199px) {
  .mj { grid-template-columns: minmax(0, 1fr); }
  .mj-plan { position: static; max-height: 520px; }
  .mj-ligne { grid-template-columns: 30px minmax(0, 1fr) 90px auto; }
  .mj-ligne .mj-camp { display: none; }
}
/* Au téléphone : les chiffres sur une ligne qui défile, la liste sans sa colonne campagne. */
@media (max-width: 899px) {
  .mj-kpis { display: flex; overflow-x: auto; }
  .mj-kpi { flex: 0 0 120px; }
  .mj-seg { overflow-x: auto; max-width: 100%; }
  .mj-ligne { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .mj-ligne .rc-j-rangee-quand, .mj-ligne .mj-camp { display: none; }
  .mj-conv-volet { inset: 0; width: 100vw; z-index: 70; }
  /* Les filtres se replient derrière un seul bouton, qui dit ce qui filtre :
     dépliés d'office, ils prenaient l'écran avant la première personne. */
  .mj-filtres-tel { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 9px;
    padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: none; color: var(--foreground); font: inherit; font-size: 14px; }
  .mj-filtres-tel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mj-outils .mj-filtres { display: none; padding-top: 0; }
  .mj-outils .mj-filtres.mj-filtres--ouverts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .mj-filtres--ouverts .mj-seg, .mj-filtres--ouverts .mj-cherche, .mj-filtres--ouverts .mj-dates { grid-column: 1 / -1; }
  .mj-filtres--ouverts .mj-drop-tete, .mj-filtres--ouverts .mj-camp-choix { width: 100%; max-width: none; min-width: 0; height: 44px; }
  .mj-filtres--ouverts .mj-cherche { height: 44px; margin-left: 0; }
  .mj-filtres--ouverts .mj-effacer { grid-column: 1 / -1; justify-self: end; }
  .mj-sessions .rc-vue { min-height: 44px; }
  .mj-ligne .mj-raison { flex: 1 1 100%; min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mj-rep-bouton { width: 44px; height: 44px; }
}
/* « Chercher partout » trouve tout (11 octobre 2026) : une puce par sorte. */
.rc-chercher-puces { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 4px 8px; }
.rc-chercher-puce { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: none; color: var(--muted-foreground); }
.rc-chercher-puce b { color: var(--accent); margin-left: 2px; }
.rc-chercher-puce--on { background: var(--muted); color: var(--foreground); border-color: transparent; }
.rc-chercher-item mark { background: rgba(251,191,36,.25); color: #fde68a; border-radius: 3px; padding: 0 1px; }

/* ── « Mes activités » (11 octobre 2026, maquette 4 validée par Tevini) ─────
   Six chiffres ; celui qu'on a cliqué montre sa liste en dessous. */
.ma-temps { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--muted); gap: 2px; }
.ma-temps a { padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--muted-foreground); text-decoration: none; }
.ma-temps a.on { background: var(--card); color: var(--foreground); font-weight: 600; }
.ma-filtres { margin: 0; }
.ma-filtres .rc-saisie { height: 34px; width: auto; font-size: 13px; padding: 0 30px 0 10px; }
.ma-periode { margin: 0 0 10px; font-size: 12.5px; color: var(--muted-foreground); }
.ma-tuiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ma-tuile { position: relative; display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--foreground); text-decoration: none; }
.ma-tuile:hover { border-color: var(--border-strong); }
.ma-tuile b { display: block; font-size: 24px; font-weight: 600; line-height: 1.1; }
.ma-tuile span { display: block; font-size: 12px; color: var(--muted-foreground); margin-top: 3px; }
.ma-tuile em { display: block; font-style: normal; font-size: 11.5px; margin-top: 6px; color: var(--muted-foreground); }
.ma-tuile em.haut { color: var(--success); }
.ma-tuile em.bas { color: var(--error); }
.ma-tuile.on { border-color: color-mix(in srgb, var(--mmb-rouge-lumineux) 60%, transparent); background: color-mix(in srgb, var(--mmb-rouge-lumineux) 7%, transparent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ma-corps { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.ma-liste { margin: 0; }
.ma-droite { display: flex; flex-direction: column; gap: 14px; }
.ma-droite .rc-j-carte { margin: 0; }
.ma-titre-liste { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ma-titre-liste b { font-size: 14px; }
.ma-titre-liste span { margin-left: auto; font-size: 12px; color: var(--muted-foreground); }
.ma-res { font-size: 11.5px; padding: 1px 7px; border-radius: 6px; margin-left: 6px; white-space: nowrap; }
.ma-res.ok { background: rgba(74,222,128,.12); color: var(--success); }
.ma-res.ko { background: rgba(251,191,36,.12); color: var(--warning-text); }
.ma-res.env { background: color-mix(in srgb, var(--mmb-rouge-lumineux) 12%, transparent); color: var(--accent); }
.ma-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ma-table th { text-align: right; font-weight: 500; font-size: 11.5px; color: var(--muted-foreground); padding: 8px 12px;
  border-bottom: 1px solid var(--border); }
.ma-table th:first-child, .ma-table td:first-child { text-align: left; }
.ma-table td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.ma-table td a { color: var(--foreground); text-decoration: none; }
.ma-table td small { color: var(--muted-foreground); font-size: 11px; margin-left: 3px; }
.ma-barres { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 12px 14px 4px; }
.ma-barre { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--muted-foreground); }
.ma-barre i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(var(--accent), color-mix(in srgb, var(--mmb-rouge-lumineux) 35%, transparent)); }
.ma-barre small { font-size: 11px; color: var(--foreground); }
.ma-note { padding: 8px 14px 12px; margin: 0; }
@media (max-width: 1100px) { .ma-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ma-corps { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ma-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ma-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-foreground); }
.ma-dates[hidden] { display: none; }
.ma-dates input { width: auto; }
/* Dans Mes activités, une ligne garde tout ce qu'elle dit : elle passe à la ligne. */
.ma-liste .rc-j-rangee-detail { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.ma-liste .mj-ligne { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
.ma-liste .mj-raison { white-space: normal; overflow: visible; }

/* ⚠️ « PLANIFIER » (Tevini, 12 octobre 2026) : à droite de « RDV », un rappel
   pour plus tard — quoi, quand, (pourquoi) — dans une petite fenêtre. */
.rc-plan { position: relative; }
.rc-bab--planifier { border-color: color-mix(in srgb, var(--mmb-rouge) 55%, transparent); color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge) 12%, transparent); font-weight: 600; }
.rc-bab--planifier > svg:first-child { color: var(--accent); }
.rc-bab--planifier:hover, .rc-plan[open] > .rc-bab--planifier { background: color-mix(in srgb, var(--mmb-rouge) 24%, transparent); }
.rc-plan-pop { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 95; width: 440px; max-width: calc(100vw - 24px);
  padding: 16px; display: flex; flex-direction: column; gap: 0; background: #171925; border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6); text-align: left; white-space: normal; }
.rc-ba--haut .rc-plan-pop { top: calc(100% + 12px); }
.rc-plan-tete b { display: block; font-size: 15px; }
.rc-plan-tete small { color: var(--muted-foreground); font-size: 12.5px; }
.rc-plan-etape { margin: 14px 0 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--disabled-foreground); }
.rc-plan-quoi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rc-plan-q { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); color: var(--muted-foreground); font-size: 12px; text-align: center; line-height: 1.2; }
.rc-plan-q input, .rc-plan-ch input, .rc-plan-pu input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.rc-plan-q:hover { color: var(--foreground); border-color: var(--accent-ring-strong); }
.rc-plan-q:has(input:checked) { color: var(--foreground); border-color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge) 16%, transparent); }
.rc-plan-q--appel svg { color: var(--c-appel); } .rc-plan-q--message svg { color: var(--c-message); }
.rc-plan-q--mail svg { color: var(--c-mail); } .rc-plan-q--tache svg, .rc-plan-q--rdv svg { color: var(--accent); }
.rc-plan-q:has(input:focus-visible), .rc-plan-pu:has(input:focus-visible), .rc-plan-ch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Le réseau d'un message : seulement quand « Message » est choisi. */
.rc-plan-canaux { display: none; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rc-plan-pop:has(input[name=quoi][value=message]:checked) .rc-plan-canaux { display: flex; }
.rc-plan-ch { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted-foreground); font-size: 12.5px; cursor: pointer; }
.rc-plan-ch:has(input:checked) { border-color: var(--c-message); color: var(--foreground); background: rgba(125,211,252,.12); }
.rc-plan-quand { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-plan-pu { position: relative; display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong); font-size: 13px; color: var(--foreground); }
.rc-plan-pu small { margin-left: 6px; color: var(--muted-foreground); font-size: 12px; }
.rc-plan-pu i { font-style: normal; }
.rc-plan-pu:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge) 16%, transparent); color: var(--accent-hi); }
.rc-plan-choisir { color: var(--muted-foreground); }
.rc-plan-choisir, .rc-tache-choisir { gap: 6px; }
.rc-plan-choisir .rc-date-puce, .rc-tache-choisir .rc-date-puce { border: 0; background: none; height: auto; min-height: 0; padding: 0; font-size: 13px;
  color: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rc-plan-pourquoi { margin-top: 12px; width: 100%; height: 40px; font-size: 13.5px; }
.rc-plan-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.rc-plan-pied small { color: var(--muted-foreground); font-size: 12px; min-width: 0; }
.rc-plan-pied small b { color: var(--foreground); font-weight: 600; }

/* ⚠️ LA FENÊTRE « TÂCHE » UNIQUE (Tevini, 12 octobre 2026) : un champ comme une
   note, la première ligne fait le titre, « Pour quand » en un clic. */
.rc-tache-form { display: flex; flex-direction: column; gap: 0; }
.rc-tache-aide { margin: 8px 2px 0; font-size: 12px; color: var(--muted-foreground); }
.rc-tache-aide--plein { color: var(--foreground); }
.rc-tache-etiquette { margin: 14px 0 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--disabled-foreground); }
.rc-tache-quand { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.rc-tache-jour { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong); font-size: 13px; color: var(--foreground); list-style: none; white-space: nowrap; }
.rc-tache-jour::-webkit-details-marker { display: none; }
.rc-tache-jour input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.rc-tache-jour:has(input:checked), .rc-tache-heure[open] > .rc-tache-jour { border-color: var(--accent); background: color-mix(in srgb, var(--mmb-rouge) 16%, transparent); color: var(--accent-hi); }
.rc-tache-jour:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-tache-choisir, .rc-tache-heure > .rc-tache-jour { color: var(--muted-foreground); }
.rc-tache-heure { display: inline-flex; align-items: center; gap: 6px; }
.rc-tache-heure[open] { flex-wrap: wrap; }
.rc-tache-heure .rc-saisie { width: 120px; height: 36px; }
.rc-tache-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rc-tache-pied small { color: var(--muted-foreground); font-size: 12px; }
.rc-tache-campagne { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); }
.rc-tache-campagne .rc-saisie { height: 36px; width: auto; max-width: 220px; font-size: 13px; }
.rc-tache-boutons { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
@media (max-width: 767px) {
  .rc-plan-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 76px; width: auto; max-height: 75vh; overflow-y: auto; }
  .rc-plan-q, .rc-plan-pu, .rc-plan-ch, .rc-tache-jour { min-height: 44px; }
  .rc-ba .rc-bab--planifier span { display: none; }
  .rc-m-planifier { margin-top: 8px; }
  .rc-m-planifier .rc-bab--planifier { width: 100%; justify-content: center; height: 46px; border-radius: 14px; }
}
/* « RDV » est poussé en bout de barre (`.rc-ba .rc-w-rdv-haut { order: 5 }`) :
   « Planifier » le suit, à sa droite (maquette validée). */
.rc-ba .rc-plan { order: 6; }
/* Un menu de la barre du haut ouvert (« Planifier », « Message ») passe devant
   les volets et fenêtres de droite (z 55–70) : sinon il s'ouvrait dessous. */
.rc-haut:has(.rc-plan[open]), .rc-haut:has(.rc-bam[open]) { z-index: 120; }

/* ═══ LA FLUIDITÉ (Tevini, 12 octobre 2026) ═══════════════════════════════
   « Quand je clique, ce n'est pas très fluide : ça n'ouvre pas direct, il y a
   un petit à-coup ; à gauche, des décalages. » ⚠️ **AUCUN EFFET DANS
   L'APPLICATION** : ni fondu entre les pages (`@view-transition` retiré), ni
   apparition animée, ni transition. Ce qui s'ouvre s'ouvre tout de suite. La
   page de présentation publique (sans `.rc-app`) garde les siens. */
body:has(.rc-app) *, body:has(.rc-app) *::before, body:has(.rc-app) *::after {
  animation: none !important; transition: none !important; }
/* Le menu de gauche garde la place de sa barre de défilement : elle ne pousse
   plus son contenu quand elle apparaît. */
.rc-rail-nav { scrollbar-gutter: stable; scrollbar-width: thin; }

/* ── Le mail Gmail, dans la forme du volet (12 octobre 2026) ──────────────
   Les mêmes lignes que « Au » de WhatsApp : un mot gris, puis le champ, sans
   cadre. La signature et les pièces jointes, chacune sur une ligne fine. */
.rc-mail--volet .rc-v-ligne-coord .rc-v-et { flex: none; width: 52px; }
.rc-mail--volet .rc-v-ligne-coord .rc-saisie,
.rc-mail--volet .rc-v-ligne-coord .rc-v-num { flex: 1; min-width: 0; height: 28px; padding: 0; background: transparent;
  border: 0; box-shadow: none; color: var(--foreground); font: inherit; }
.rc-mail--volet .rc-v-ligne-coord .rc-saisie:focus { outline: none; }
.rc-mail--volet .rc-v-ligne-coord:focus-within { background: var(--muted); }
.rc-mail--volet [data-mail-cc] { flex: none; white-space: nowrap; }
.rc-mail--volet .rc-mail-etat { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rc-mail--volet .rc-mail-signature,
.rc-mail--volet .rc-mail-pieces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0;
  padding: 8px 14px; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.rc-mail--volet .rc-mail-sig-choix { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.rc-mail--volet .rc-mail-sig-choix .rc-v-et { flex: none; width: 52px; }
.rc-mail--volet .rc-mail-sig-choix .rc-v-num { flex: 1; min-width: 0; max-width: 260px; }
.rc-mail--volet .rc-mail-sig-apercu { flex: 1 1 100%; margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--muted);
  font-size: var(--text-xs); max-height: 120px; overflow: auto; }
.rc-mail--volet .rc-mail-pieces-liste { display: contents; list-style: none; }
.rc-mail--volet .rc-mail-pieces-liste:empty { display: none; }
.rc-mail--volet .rc-mail-docs { position: relative; }
.rc-mail--volet .rc-mail-pied-aide { border-top: 1px solid var(--border); padding-top: 8px; text-align: left; }
.rc-mail--volet .rc-mail-erreur { margin: 0; }
.rc-mail--volet .rc-essai { margin: 0; }

/* ⚠️⚠️ **UNE APPLICATION QUI NE BOUGE PAS** (Tevini, 12 octobre 2026 : « quand
   je scrolle, toute l'application bouge » ; « quand je survole le nom, il y a
   un petit effet — tous ces petits effets, on peut les retirer ? »).
   · Le rebond élastique du défilement (Mac, iPhone) est coupé : la barre du
     haut et le menu de gauche restent en place, même en butée.
   · Rien ne se soulève ni ne glisse au survol : les cartes et les chiffres
     restent où ils sont, sans halo.
   · Le « + Campagne » qui surgissait sur une ligne de contact est retiré :
     cocher la personne fait la même chose, depuis la barre du bas. */
html, body { overscroll-behavior: none; }
body:has(.rc-app) :is(.chiffre, .carte, .panel--survol, .kpi-card, .strat-card, .filter-chip, .btn-add-filter, .rc-liste):hover,
body:has(.rc-app) .rc-action:hover .rc-action-fleche { transform: none !important; }
body:has(.rc-app) :is(.carte, .panel--survol, .verre.panel--survol, .kpi-card, .strat-card, .filter-chip, .icon-btn, .chiffre):hover {
  box-shadow: none !important; }
body:has(.rc-app) .carte:hover::before { opacity: 0 !important; }

/* ── La semaine en grand (Tevini, 15 octobre 2026) ─────────────────────────
   Sept colonnes du planning de droite, sur des heures communes. */
.sem { margin: 0; display: flex; flex-direction: column; height: calc(100vh - var(--haut) - 32px); min-height: 480px; }
.sem-tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sem-tete h1 { margin: 0 0 0 6px; font-size: 16px; font-weight: 600; }
.sem-fermer { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.sem-jours, .sem-journee, .sem-grille { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); }
.sem-jours, .sem-journee { flex: none; padding-right: var(--sem-barre, 0px); }
.sem-jours { border-bottom: 1px solid var(--border); }
.sem-jour { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 4px; text-decoration: none;
  color: var(--muted-foreground); border-left: 1px solid var(--border); }
.sem-jour:hover { color: var(--foreground); background: var(--muted); }
.sem-jour b { font-size: 16px; font-weight: 600; color: var(--foreground); }
.sem-jour small { font-size: 12px; }
.sem-jour--auj b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px;
  background: var(--accent); color: var(--accent-foreground, #fff); }
.sem-case { min-width: 0; border-left: 1px solid var(--border); }
.sem-journee .mj-plan-journee { padding: 6px; border-bottom: 0; }
.sem-journee:not(:has(.mj-plan-journee:not([hidden]))) { display: none; }
.sem-corps { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--border); }
.sem-grille { position: relative; margin: 10px 0; }
.sem-heures { position: relative; }
.sem-heures i { position: absolute; right: 8px; top: -7px; font-size: 10.5px; font-style: normal; color: var(--disabled-foreground); }
.sem-col { border-left: 1px solid var(--border); }
.sem-col .mj-plan-h { left: 0; }
.sem-col--auj { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.sem-col .mj-plan-bloc, .sem-col .mj-plan-fond { margin-left: 2px; }
.sem-col .mj-plan-mnt { left: 0; }
.sem-journee .mj-plan-jour small { display: none; }