/* ══ LA FENÊTRE AU CENTRE, MA JOURNÉE, LA BULLE : À L'IMAGE DE RICH CIRCLES ═══
   (fondateur, 15/10 puis 28/10/2026). `team_journee.html`, `team_bulle.html`,
   `partials/barre_action.html`, `static/js/volet.js`, `static/js/bulle-personne.js`.
   Chargée sur tout l'espace équipe (la bulle et son rond y vivent).
   Carnet : `docs/notes/NOTES-reprise-rich-circles.md`. */

/* ── La barre du haut : la recherche s'élargit, « Créer » à droite ── */
.topbar-inner:has(.cr) .topbar-search { margin-left: 8px; width: 22em; }
/* « Choisir une personne » (le rond sans personne) : la recherche de l'ancienne
   barre d'action du 15/10, mesures relevées sur Rich Circles. */
.ba-qui-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
             background: var(--muted); color: var(--foreground); font-size: calc(11px * var(--echelle-texte)); font-weight: 600; }
.ba-palette { width: min(460px, calc(100vw - 32px)); padding: 0; border-radius: 12px; }
.ba-palette::backdrop { background: rgba(5,6,10,.55); }
.ba-palette-tete { padding: 14px 14px 10px; margin: 0; }
.ba-palette-tete p { margin: 0 0 8px; color: var(--muted-foreground); font-size: var(--text-sm); }
.ba-palette-tete b { color: var(--foreground); font-weight: 600; }
.ba-palette-tete .saisie { width: 100%; }
.ba-palette-liste { max-height: 340px; overflow: auto; padding: 0 6px 8px; }
.ba-palette-aide { padding: 10px 10px 14px; margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.ba-palette-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px;
                 background: none; color: var(--foreground); text-align: left; cursor: pointer; font: inherit; }
.ba-palette-it:hover, .ba-palette-it:focus-visible { background: var(--accent-wash); }
.ba-palette-it > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ba-palette-it small { color: var(--muted-foreground); font-size: var(--text-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* « Une page DANS le volet : sans coquille » vit dans `charte.css` (§ LE VOLET),
   commune aux deux espaces depuis le volet de la communauté (30/10/2026). */

/* ── La FENÊTRE AU CENTRE (28/10/2026, comme Rich Circles le 27/10) ──
   Une ligne de Ma journée ouvre son activité au milieu de l'écran, sur un
   voile : la page reste derrière, à sa place. Les mesures de Rich Circles :
   l'activité 520 px, l'historique 520 px à sa gauche ; historique replié, la
   fenêtre ne garde que l'activité. Le voile ou Échap la referment. */
body.volet-ouvert::before { content: ""; position: fixed; inset: 0; z-index: 54; background: rgba(5,6,10,.62); }
.volet { position: fixed; top: 40px; bottom: 40px; left: 50%; z-index: 55; width: min(1040px, calc(100vw - 48px));
         transform: translateX(-50%); display: flex; flex-direction: column; overflow: hidden;
         background: var(--background); border: 1px solid var(--border-strong); border-radius: 16px;
         box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: volet-entre .16s ease-out; }
.volet.volet--seul { width: min(560px, calc(100vw - 32px)); }
.volet[hidden] { display: none; }
@keyframes volet-entre { from { opacity: 0; margin-top: 12px; } to { opacity: 1; margin-top: 0; } }
.volet-tete { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 6px 10px;
              border-bottom: 1px solid var(--border); background: var(--card); }
.volet-plein { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px;
               font-size: var(--text-xs); color: var(--muted-foreground); text-decoration: none; }
.volet-plein:hover { color: var(--foreground); background: var(--muted); }
.volet-fermer { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px;
                background: none; color: var(--muted-foreground); cursor: pointer; }
.volet-fermer:hover { color: var(--foreground); background: var(--muted); }
.volet-cadre { flex: 1; width: 100%; border: 0; background: var(--background); }
@media (max-width: 900px) { .volet { top: 0; bottom: 0; left: 0; right: 0; width: auto; transform: none; border-radius: 0; border: 0; z-index: 60; } }


/* ══ MA JOURNÉE, À L'IMAGE DE RICH CIRCLES (28/10/2026) ═══════════════════════
   Mesures RELEVÉES sur `reachcircles-app/src/reachcircles/static/css/activites.css`
   (la refonte du 22/10 : `.mj2-*`). Un bonjour et l'avancée en anneau ; les
   périodes en raccourcis, une recherche, « Filtrer » ; les familles en onglets
   fins ; une carte par famille, les gestes au survol ; le planning à droite. */
.mj3 { --c-info: #7DD3FC; --c-success: #4ADE80; --c-accent: #B4A8FF; --c-error: #F87171; --c-warning: #FBBF24; }
.mj3 [data-c="info"] { --teinte: var(--c-info); }
.mj3 [data-c="success"] { --teinte: var(--c-success); }
.mj3 [data-c="accent"] { --teinte: var(--c-accent); }
.mj3 [data-c="error"] { --teinte: var(--c-error); }
.mj3 [data-c="warning"] { --teinte: var(--c-warning); }

/* L'en-tête. */
.mj3-tete { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.mj3-jour { margin: 0 0 6px; font-size: calc(11px * var(--echelle-texte)); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mj3-tete h1 { margin: 0; font-size: calc(28px * var(--echelle-texte)); font-weight: 600; letter-spacing: -.01em; }
.mj3-resume { margin: 6px 0 0; color: var(--muted-foreground); font-size: calc(14px * var(--echelle-texte)); }
.mj3-resume b { color: var(--foreground); font-weight: 500; }
.mj3-r { color: var(--error); }
.mj3-avance { margin-left: auto; flex: none; display: flex; align-items: center; gap: 12px; font-size: calc(12.5px * var(--echelle-texte)); color: var(--muted-foreground); text-align: right; }
.mj3-anneau { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--success) 0 var(--p), rgba(255,255,255,.07) var(--p) 100%); }
.mj3-anneau i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--background);
  font-style: normal; font-weight: 600; font-size: calc(12.5px * var(--echelle-texte)); color: var(--foreground); }

/* La barre : pas de carte, des raccourcis, une recherche, « Filtrer ». */
.mj3-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.mj3-periodes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.mj3-periodes a { height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 9px; font-size: calc(13px * var(--echelle-texte));
  color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.mj3-periodes a:hover { color: var(--foreground); background: var(--muted); }
.mj3-periodes a.on { background: var(--muted); color: var(--foreground); font-weight: 500; box-shadow: inset 0 0 0 1px var(--border-strong); }
.mj3-periodes .mj3-retard { color: var(--error); }
.mj3-periodes .mj3-retard em { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: rgba(248,113,113,.14); font-size: calc(11.5px * var(--echelle-texte)); }
.mj3-cherche { margin-left: auto; height: 42px; flex: 0 1 300px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-radius: 11px; background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); }
.mj3-cherche:focus-within { border-color: var(--border-strong); }
.mj3-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--foreground); font: inherit; font-size: calc(13px * var(--echelle-texte)); }
.mj3-filtrer { position: relative; }
.mj3-filtrer-b { list-style: none; height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 11px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); font-size: calc(13px * var(--echelle-texte)); }
.mj3-filtrer-b::-webkit-details-marker { display: none; }
.mj3-filtrer-b:hover, .mj3-filtrer[open] .mj3-filtrer-b { color: var(--foreground); border-color: var(--border-strong); }
.mj3-filtrer-b em { font-style: normal; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 99px;
  background: var(--primary); color: #0A0B10; font-size: calc(11px * var(--echelle-texte)); font-weight: 600; }
.mj3-filtrer-pan { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 320px; max-height: calc(100vh - 160px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--border-strong);
  background: var(--card); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.mj3-filtrer-t { margin: 4px 0 0; font-size: calc(10.5px * var(--echelle-texte)); letter-spacing: .12em; text-transform: uppercase; color: var(--disabled-foreground); }
.mj3-filtres { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.mj3-filtre { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--echelle-texte)); color: var(--muted-foreground); }
.mj3-filtre .liste { display: flex; width: 100%; }
.mj3-filtre select.saisie { flex: 1; width: 100%; }
.mj3-effacer { align-self: flex-start; font-size: calc(12.5px * var(--echelle-texte)); }
.mj3-vues { display: flex; flex-direction: column; gap: 2px; }
.mj3-vue { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: calc(13px * var(--echelle-texte)); color: var(--muted-foreground); text-decoration: none; }
.mj3-vue a { flex: 1; color: inherit; text-decoration: none; }
.mj3-vue:hover, .mj3-vue.on { background: var(--muted); color: var(--foreground); }
.mj3-vue form { margin: 0; }
.mj3-vue-x { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--disabled-foreground); cursor: pointer; }
.mj3-vue-x:hover { color: var(--error); }
.mj3-vue-nouvelle { display: flex; gap: 6px; margin: 0; }
.mj3-vue-nouvelle .saisie { flex: 1; min-width: 0; }
.mj3-enchainer { flex: none; margin: 0 0 8px auto; height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--accent-ring-strong); background: var(--accent-wash); color: var(--accent-hi); font-size: calc(12.5px * var(--echelle-texte)); text-decoration: none; white-space: nowrap; }
.mj3-enchainer:hover { background: var(--primary); border-color: var(--primary); color: #0A0B10; }

/* Les familles en onglets fins. */
.mj3-familles { display: flex; align-items: flex-end; gap: 24px; margin: 0 0 22px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.mj3-fam { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--muted-foreground); font-size: calc(14px * var(--echelle-texte)); text-decoration: none; white-space: nowrap; }
.mj3-fam:hover { color: var(--foreground); }
.mj3-fam[aria-current] { color: var(--foreground); border-bottom-color: var(--accent); }
.mj3-fam b { font-size: calc(12px * var(--echelle-texte)); font-weight: 400; color: var(--disabled-foreground); }
.mj3-fam i, .mj3-fam-t i { width: 7px; height: 7px; border-radius: 50%; background: var(--teinte, var(--muted-foreground)); }

/* La liste au milieu, le planning à droite. */
.mj3-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.mj3-liste { min-width: 0; }
.mj3-sec { margin-bottom: 30px; }
.mj3-sec[hidden] { display: none; }
.mj3-fam-t { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.mj3-fam-t h2 { margin: 0; font-size: calc(15px * var(--echelle-texte)); font-weight: 600; }
.mj3-fam-t em { font-style: normal; font-size: calc(12.5px * var(--echelle-texte)); color: var(--disabled-foreground); }
.mj3-fam-t em.mj3-r { color: var(--error); }

/* Une carte par famille, des lignes qui respirent. */
.mj3-groupe { border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.mj3-ligne { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 110px auto; gap: 14px; align-items: center;
  padding: 12px 16px; cursor: pointer; border-top: 1px solid var(--border); }
.mj3-groupe > .mj3-ligne:first-child { border-top: 0; border-top-left-radius: 14px; border-top-right-radius: 14px; }
.mj3-groupe > .mj3-ligne:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.mj3-ligne[hidden] { display: none; }
.mj3-ligne:hover { background: #191B25; }
.mj3-ligne:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.mj3-ligne.est-ouverte { background: var(--accent-wash); box-shadow: inset 3px 0 var(--accent); }
.mj3-ligne--retard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--error); opacity: .8; }
.mj3-qui { min-width: 0; }
.mj3-nom { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: calc(14px * var(--echelle-texte)); font-weight: 500; color: var(--foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj3-detail { display: flex; align-items: center; min-width: 0; margin-top: 1px; }
.mj3-raison { flex: 0 1 auto; min-width: 40px; font-size: calc(13px * var(--echelle-texte)); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj3-etat { flex: 0 100 auto; min-width: 0; font-size: calc(13px * var(--echelle-texte)); color: var(--disabled-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj3-detail .mj3-etat::before { content: "·"; margin: 0 6px; }
.mj3-puce { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: calc(11.5px * var(--echelle-texte)); font-weight: 400; padding: 2px 8px; border-radius: 99px;
  background: var(--muted); color: var(--muted-foreground); }
.mj3-puce--i { background: rgba(125,211,252,.1); color: var(--c-info); }
.mj3-quand { text-align: right; font-size: calc(12.5px * var(--echelle-texte)); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj3-quand.mj3-r { color: var(--error); }
.mj3-gestes { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 112px; }
.mj3-g { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--border-strong);
  color: var(--muted-foreground); background: none; cursor: pointer; text-decoration: none; list-style: none; }
.mj3-g::-webkit-details-marker { display: none; }
.mj3-g:hover, details[open] > .mj3-g { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.mj3-g--x:hover { border-color: var(--error); color: var(--error); background: rgba(248,113,113,.08); }
.mj3-gestes .menu-panneau { right: 0; left: auto; width: 236px; border-radius: 12px; background: var(--card); border: 1px solid var(--border-strong); }
.mj3-gestes .menu-panneau .menu-item { padding: 8px 10px; border-radius: 7px; font-size: calc(13px * var(--echelle-texte)); }
/* Les gestes secondaires paraissent au survol (et restent quand leur menu est ouvert). */
@media (hover: hover) and (min-width: 900px) {
  .mj3 .mj3-survol { opacity: 0; transition: opacity .12s; }
  .mj3 .mj3-ligne:hover .mj3-survol, .mj3 .mj3-survol[open], .mj3 .mj3-survol:focus-within, .mj3 .mj3-survol:focus-visible { opacity: 1; }
}
/* Le rond à cocher : le geste le plus agréable. */
.mj3-coche-f { position: relative; z-index: 2; display: grid; place-items: center; margin: 0; }
.mj3-coche { position: relative; z-index: 2; justify-self: center; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--disabled-foreground); background: none; display: grid; place-items: center; color: transparent; cursor: pointer; transition: all .12s; }
.mj3-coche:hover { border-color: var(--success); color: var(--success); background: rgba(74,222,128,.1); }
.mj3-coche--faite { border-color: var(--success); background: rgba(74,222,128,.14); color: var(--success); cursor: default; }
.mj3-av { justify-self: center; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--muted); color: var(--foreground); font-size: calc(11.5px * var(--echelle-texte)); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* Les rendez-vous : l'heure d'abord, comme un agenda. */
.mj3-rdvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mj3-rdv { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); }
.mj3-rdv[data-volet-href] { cursor: pointer; }
.mj3-rdv:hover { border-color: var(--border-strong); }
.mj3-rdv[hidden] { display: none; }
.mj3-rdv-h { flex: none; min-width: 58px; max-width: 76px; padding: 9px 6px; border-radius: 10px; text-align: center;
  background: rgba(180,168,255,.1); color: var(--accent-hi); font-size: calc(13px * var(--echelle-texte)); line-height: 1.2; }
.mj3-rdv-h b { display: block; font-weight: 600; }
.mj3-rdv-h small { display: block; font-size: calc(11px * var(--echelle-texte)); opacity: .8; }
.mj3-rdv--w .mj3-rdv-h { background: rgba(251,191,36,.1); color: var(--warning); }
.mj3-rdv--passe { opacity: .6; }
.mj3-rdv-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mj3-rdv-titre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj3-rdv-qui { font-size: calc(12px * var(--echelle-texte)); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj3-rdv-gestes { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mj3-rdv-gestes:empty { display: none; }
.mj3-rdv-gestes form { margin: 0; }
.mj3-rdv-gestes .btn { height: 30px; gap: 5px; }

/* Ce qui est fait se replie en bas. */
.mj3-fait { margin-bottom: 30px; }
.mj3-fait > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; cursor: pointer;
  border: 1px dashed var(--border-strong); color: var(--muted-foreground); font-size: calc(13px * var(--echelle-texte)); }
.mj3-fait > summary::-webkit-details-marker { display: none; }
.mj3-fait > summary b { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 500; white-space: nowrap; }
.mj3-fait > summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj3-fait[open] > summary { margin-bottom: 10px; }
.mj3-ligne--faite .mj3-nom { color: var(--muted-foreground); text-decoration: line-through; }

/* Le planning, en forme de bulle, qui reste en vue. */
.mj3-cote { position: sticky; top: 72px; }
.mj3-plan { display: flex; flex-direction: column; max-height: calc(100vh - 96px); border-radius: 14px; background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.mj3-plan-tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mj3-plan-tete b { flex: 1; text-align: center; font-size: calc(13.5px * var(--echelle-texte)); }
.mj3-plan-fl { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--foreground); }
.mj3-plan-fl:hover { border-color: var(--accent); }
.mj3-plan-auj { font-size: calc(12px * var(--echelle-texte)); color: var(--accent); text-decoration: none; }
.mj3-plan-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 10px 4px; }
.mj3-plan-sans { flex: none; display: block; margin: 0; padding: 9px 12px; border-top: 1px solid var(--border); font-size: calc(12px * var(--echelle-texte)); color: var(--muted-foreground); text-decoration: none; }
a.mj3-plan-sans:hover { color: var(--foreground); }

@media (max-width: 1199px) {
  .mj3-grille { grid-template-columns: minmax(0, 1fr); }
  .mj3-cote { position: static; }
  .mj3-plan { max-height: 520px; }
}
/* Au téléphone : une ligne sur une hauteur, le nom, le motif dessous, et les
   gestes à droite, à portée de pouce. */
@media (max-width: 899px) {
  .mj3-tete { gap: 12px; margin-bottom: 14px; }
  .mj3-tete h1 { font-size: calc(26px * var(--echelle-texte)); }
  .mj3-avance > span:first-child { display: none; }
  .mj3-anneau { width: 48px; height: 48px; } .mj3-anneau i { width: 39px; height: 39px; font-size: calc(11.5px * var(--echelle-texte)); }
  .mj3-periodes { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mj3-cherche { margin-left: 0; flex: 1 1 100%; }
  .mj3-familles { gap: 18px; margin-bottom: 16px; }
  .mj3-ligne { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; }
  .mj3-quand { display: none; }
  .mj3-gestes { min-width: 0; }
  .mj3-gestes > details.q-menu:last-child { display: none; }
}

/* ══ « CRÉER », LA BULLE ET SON ROND (28/10/2026, à l'image de Rich Circles) ══
   Mesures RELEVÉES sur Rich Circles (`activites.css`, `.rc-bp`, `.rc-rond`) :
   la bulle 420 px à droite, sous la barre du haut ; le rond 46 px en bas à
   droite. Au téléphone, ni l'une ni l'autre (un nom mène à la fiche). */
.cr { position: relative; margin-left: auto; margin-right: 10px; }
.cr-b { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 14px; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: #0A0B10; font-size: calc(13px * var(--echelle-texte)); font-weight: 600; }
.cr-b::-webkit-details-marker { display: none; }
.cr-b:hover, .cr[open] .cr-b { background: var(--accent); }
.cr-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 270px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 12px; border: 1px solid var(--border-strong); background: var(--card); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.cr-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--foreground); text-decoration: none; }
.cr-menu a:hover { background: var(--muted); }
.cr-menu a > svg { flex: none; color: var(--accent); }
.cr-menu span { display: flex; flex-direction: column; min-width: 0; }
.cr-menu b { font-weight: 500; font-size: calc(13.5px * var(--echelle-texte)); }
.cr-menu small { font-size: calc(12px * var(--echelle-texte)); color: var(--muted-foreground); }

.bp-cadre { position: fixed; right: 20px; bottom: 80px; top: 70px; width: 420px; z-index: 52; display: flex; flex-direction: column;
  border-radius: 16px; border: 1px solid var(--border-strong); background: var(--card); box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden;
  animation: bp-entre .16s ease-out; }
.bp-cadre[hidden] { display: none; }
@keyframes bp-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bp-cadre iframe { flex: 1; width: 100%; border: 0; background: var(--card); }
.bp-rond-zone { position: fixed; right: 20px; bottom: 20px; z-index: 53; }

.bp-rond { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-strong); background: #1E2030; color: var(--foreground); box-shadow: 0 10px 28px rgba(0,0,0,.5);
  font-size: calc(13px * var(--echelle-texte)); font-weight: 600; transition: transform .12s, border-color .12s; }
.bp-rond:hover { transform: scale(1.05); border-color: var(--accent); }
.bp-rond.est-ouvert { background: var(--primary); color: #0A0B10; border-color: var(--primary); }
.bp-rond [hidden] { display: none; }
.bp-rond-x { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--muted-foreground); cursor: pointer; opacity: 0; transition: opacity .12s; }
.bp-rond-zone:hover .bp-rond-x, .bp-rond-x:focus-visible { opacity: 1; }
.bp-rond-x[hidden] { display: none; }
/* Quand la bulle est ouverte, le rond se cache derrière (il la range). */
body:has(.bp-cadre:not([hidden])) .bp-rond { box-shadow: none; }
@media (max-width: 899px) { .bp-cadre, .bp-rond-zone { display: none !important; } .cr-b span { display: none; } }

/* ── L'intérieur de la bulle (`team_bulle.html`, dans son cadre) ── */
body.en-volet:has(.bp) .main { padding: 0; }
body.en-volet:has(.bp) { background: var(--card); }
.bp { height: 100vh; display: flex; flex-direction: column; background: var(--card); }
.bp-tete { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--border); }
.bp-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--muted);
  font-size: calc(12px * var(--echelle-texte)); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.bp-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-nom { font-weight: 600; font-size: calc(14.5px * var(--echelle-texte)); color: var(--foreground); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-nom:hover { color: var(--accent-hi); }
.bp-sous { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: calc(12px * var(--echelle-texte)); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; }
.bp-sous a { color: inherit; }
.bp-sous > * { overflow: hidden; text-overflow: ellipsis; }
.bp-etat { flex: none; padding: 1px 8px; border-radius: 99px; background: var(--muted); color: var(--muted-foreground); }
.bp-etat--client { background: rgba(74,222,128,.12); color: var(--success); }
.bp-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted-foreground); cursor: pointer; }
.bp-x:hover { background: var(--muted); color: var(--foreground); }
.bp-relance { flex: none; display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 8px 8px 8px 12px; border-radius: 10px;
  background: var(--accent-wash); border: 1px solid var(--accent-ring); }
.bp-relance--retard { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.3); }
.bp-relance-ic { flex: none; color: var(--accent); display: grid; }
.bp-relance--retard .bp-relance-ic, .bp-relance--retard .bp-relance-t b { color: var(--error); }
.bp-relance-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bp-relance-t b { font-size: calc(12.5px * var(--echelle-texte)); font-weight: 600; color: var(--accent-hi); }
.bp-relance-t small { font-size: calc(12px * var(--echelle-texte)); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-g { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--muted-foreground); text-decoration: none; }
.bp-g:hover { border-color: var(--accent); color: var(--accent); }
.bp-g--ok:hover { border-color: var(--success); color: var(--success); background: rgba(74,222,128,.08); }
.bp-prevoir { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--echelle-texte)); color: var(--accent); text-decoration: none; }
.bp-fil { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bp-fil .av-histo { flex: 1; min-height: 0; width: auto; border: 0; background: none; padding: 10px 12px 0; }
/* La bulle est ÉTROITE (420 px) : la règle du téléphone d'`activite.css`, qui
   borne l'historique à la moitié de l'écran, ne la concerne pas. */
.bp-fil .av-histo { max-height: none; order: 0; border-top: 0; }
.bp-fil .av-histo-liste { flex: 1; min-height: 0; overflow-y: auto; }
.bp-bas { flex: none; margin: 8px 12px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--background); }
.bp-canaux { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0; }
.bp-canal { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 8px; border: 0; background: none;
  color: var(--muted-foreground); font: inherit; font-size: calc(12.5px * var(--echelle-texte)); text-decoration: none; cursor: pointer; list-style: none; }
.bp-canal::-webkit-details-marker { display: none; }
.bp-canal:hover { background: var(--muted); color: var(--foreground); }
.bp-canal[aria-pressed="true"] { background: var(--muted); color: var(--foreground); }
.bp-canal--note svg { color: var(--accent); }
.bp-canal--appel svg { color: #4ADE80; }
.bp-canal--message svg { color: #7DD3FC; }
.bp-canal--mail svg { color: #A5B4FC; }
.bp-plus { position: relative; margin-left: auto; }
.bp-plus-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; width: 250px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 12px; border: 1px solid var(--border-strong); background: var(--card); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.bp-plus-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: calc(13px * var(--echelle-texte)); color: var(--foreground); text-decoration: none; }
.bp-plus-menu a:hover { background: var(--muted); }
.bp-note { margin: 0; padding: 0 10px 10px; }
.bp-note .editeur-note, .bp-note textarea { border: 0; background: none; }
.bp-note-pied { display: flex; justify-content: flex-end; margin-top: 6px; }

/* La sélection de plusieurs lignes (Ctrl+clic) et sa barre, en bas au centre. */
.mj3-ligne.est-choisie { background: var(--accent-wash); box-shadow: inset 3px 0 var(--accent); }
.mj3-ligne.est-choisie .mj3-coche { border-color: var(--accent); background: var(--primary); color: #0A0B10; }
.mj3-masse { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 51; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--card); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.mj3-masse[hidden], .mj3-masse [hidden] { display: none; }
.mj3-masse b { font-size: calc(13px * var(--echelle-texte)); font-weight: 600; margin-right: 6px; white-space: nowrap; }
.mj3-masse-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted-foreground); cursor: pointer; }
.mj3-masse-x:hover { background: var(--muted); color: var(--foreground); }
/* Reporter depuis la bulle : le menu s'ouvre sous l'horloge. */
.bp-reporter { position: relative; }
.bp-reporter > summary { list-style: none; cursor: pointer; }
.bp-reporter > summary::-webkit-details-marker { display: none; }
.bp-reporter-menu { top: calc(100% + 6px); bottom: auto; width: 190px; }
.bp-reporter-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--foreground);
  font: inherit; font-size: calc(13px * var(--echelle-texte)); text-align: left; cursor: pointer; }
.bp-reporter-menu button:hover { background: var(--muted); }
/* « Choisir… » : ses deux dates, sous les périodes. */
.mj3-periodes .mj3-choisir { color: var(--disabled-foreground); }
.mj3-periodes .mj3-choisir.on { color: var(--foreground); }
.mj3-periode-perso { display: flex; align-items: center; gap: 10px; margin: 0; font-size: calc(13px * var(--echelle-texte)); color: var(--muted-foreground); }
.mj3-periode-perso[hidden] { display: none; }
.mj3-periode-perso label { display: inline-flex; align-items: center; gap: 6px; }
.mj3-periode-perso .saisie { height: 34px; }
/* Les gestes toujours là, en gris ; ils prennent leur couleur au survol de la ligne. */
.mj3-g { opacity: .55; }
.mj3-ligne:hover .mj3-g, details[open] > .mj3-g, .mj3-g:focus-visible { opacity: 1; }
/* La bulle en grand (⤢), comme Rich Circles ; Échap la rend. */
.bp-cadre.bp-cadre--grand { left: 50%; right: auto; width: min(980px, calc(100vw - 48px)); transform: translateX(-50%); bottom: 24px; top: 72px; }
/* Page Contacts : la ligne ouvre la bulle. */
tr[data-bulle-personne] { cursor: pointer; }
tr[data-bulle-personne]:hover { background: rgba(255,255,255,.025); }
/* Le fil de la bulle se lit comme une conversation : le plus récent EN BAS.
   Depuis le lot 2 (28/10/2026), c'est le gabarit qui range (`fil_personne.html`,
   par jour) et le script qui ouvre en bas : plus d'ordre inversé ici. */
/* « Filtrer » refermé ne montre rien, sur tout navigateur. */
.mj3-filtrer:not([open]) > .mj3-filtrer-pan { display: none; }

/* ══ LES BOUTONS DE CONTACT, L'INTITULÉ SUR PLACE, LES RENDEZ-VOUS EN LIGNES ══
   (cadrage du 28/10/2026). Les trois ronds colorés de l'option A de la maquette
   Rich Circles « Boutons d'action » (30 px, fond et filet de leur couleur),
   AU SURVOL de la ligne seulement (choix du fondateur). */
.mj3-canaux { display: inline-flex; align-items: center; gap: 6px; }
.mj3-canal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid transparent;
  text-decoration: none; transition: transform .12s, background .12s; }
.mj3-canal:hover { transform: translateY(-1px); }
.mj3-canal--appel { background: rgba(74,222,128,.10); color: #6EE7A0; border-color: rgba(74,222,128,.22); }
.mj3-canal--message { background: rgba(125,211,252,.10); color: #93D8FB; border-color: rgba(125,211,252,.22); }
.mj3-canal--mail { background: rgba(251,191,36,.10); color: #FCD34D; border-color: rgba(251,191,36,.22); }
.mj3-canal--off { opacity: .28; cursor: default; transform: none; }
.mj3-canaux-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 2px; }
@media (hover: hover) and (min-width: 900px) {
  .mj3 .mj3-canaux { opacity: 0; max-width: 0; overflow: hidden; pointer-events: none; transition: opacity .15s, max-width .2s; }
  .mj3 .mj3-ligne:hover .mj3-canaux, .mj3 .mj3-canaux:focus-within { opacity: 1; max-width: 160px; pointer-events: auto; }
}
@media (max-width: 899px) { .mj3 .mj3-canaux { display: none; } }

/* L'intitulé d'une relance se retouche d'un clic, comme le motif de Rich Circles. */
.mj3-edit { position: relative; z-index: 2; cursor: text; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.mj3-edit:hover { color: var(--foreground); background: var(--muted); }
.mj3-edit-champ { position: relative; z-index: 2; width: min(320px, 100%); height: 24px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--background); color: var(--foreground); font: inherit;
  font-size: calc(13px * var(--echelle-texte)); }

/* Les rendez-vous, en lignes comme le reste. */
.mj3-av--rdv { background: rgba(180,168,255,.12); color: var(--c-accent); box-shadow: inset 0 0 0 1px rgba(180,168,255,.22); }
.mj3-ligne--passe .mj3-nom, .mj3-ligne--passe .mj3-raison { color: var(--disabled-foreground); }
.mj3-gestes form { margin: 0; display: contents; }
.mj3-g--rdv:hover { border-color: var(--c-accent); color: var(--c-accent); background: rgba(180,168,255,.08); }

/* ══ LE FIL DE LA BULLE (cadrage du 28/10/2026, lot 2), à l'image de Rich Circles ══
   Mesures relevées sur Rich Circles (`_volet_commun.html`, `activites.css`) : les
   messages en bulles (84 % au plus, rayon 13 ; les nôtres à droite sur un violet
   léger, les siens à gauche sur `--muted`), les e-mails en cartes compactes (deux
   lignes d'extrait), le reste en petites lignes ; les jours en séparateurs. */
.fp-filtres { flex-wrap: wrap; }
.fp-filtres em { font-style: normal; margin-left: 5px; color: var(--disabled-foreground); font-size: calc(11px * var(--echelle-texte)); }
.fp-liste { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.fp-jour { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; font-size: calc(11px * var(--echelle-texte));
  letter-spacing: .06em; text-transform: uppercase; color: var(--disabled-foreground); }
.fp-jour::before, .fp-jour::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.fp-jour[hidden] { display: none; }
.fp .fp-ev { display: block; padding: 0; border-radius: 0; cursor: default; }
.fp .fp-ev:hover { background: none; }
.fp .fp-ev[hidden] { display: none; }
/* Un fil court se pose EN BAS, comme une conversation. */
.fp-liste > :first-child { margin-top: auto; }
.fp-ev[data-fil-deplie] { cursor: pointer; }
.fp-ev:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 10px; }
.fp-heure { flex: none; font-size: calc(11px * var(--echelle-texte)); color: var(--disabled-foreground); white-space: nowrap; }
.fp-texte { font-size: calc(13px * var(--echelle-texte)); color: var(--foreground); line-height: 1.45; white-space: pre-line;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.fp-extrait { -webkit-line-clamp: 2; color: var(--muted-foreground); }
.est-deplie .fp-texte { -webkit-line-clamp: unset; display: block; }
.fp-ic { --t: var(--muted-foreground); flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); }
.fp-ic[data-c="success"] { --t: var(--success); } .fp-ic[data-c="info"] { --t: var(--info); }
.fp-ic[data-c="accent"] { --t: var(--accent); } .fp-ic[data-c="error"] { --t: var(--error); }
.fp-ic[data-c="warning"] { --t: var(--warning-text); }
/* Les messages : des bulles. */
.fp .fp-msg { display: flex; }
.fp .fp-msg--nous { justify-content: flex-end; }
.fp-bulle { max-width: 84%; padding: 7px 11px 6px; border-radius: 13px; background: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.fp-msg--nous .fp-bulle { background: rgba(139,127,224,.18); }
.fp-qui { font-size: calc(11px * var(--echelle-texte)); color: var(--muted-foreground); }
.fp-bulle .fp-heure { align-self: flex-end; }
/* Les e-mails et les notes : des cartes. */
.fp-carte { padding: 9px 11px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.015); display: flex; flex-direction: column; gap: 5px; }
.fp-mail--nous .fp-carte { margin-left: 24px; }
.fp-mail:not(.fp-mail--nous) .fp-carte { margin-right: 24px; }
.fp-carte-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-carte-t b { flex: 1; min-width: 0; font-size: calc(13px * var(--echelle-texte)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-carte--note { background: rgba(252,211,77,.06); border-color: rgba(252,211,77,.22); }
.fp-detail { font-size: calc(11.5px * var(--echelle-texte)); color: var(--disabled-foreground); }
.fp-lien { align-self: flex-start; font-size: calc(12px * var(--echelle-texte)); color: var(--accent); text-decoration: none; }
.fp-lien:hover { text-decoration: underline; }
/* Le reste : de petites lignes. */
.fp .fp-ligne, .fp .fp-avenir { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.fp .fp-ligne:hover, .fp .fp-avenir:hover { background: var(--accent-wash); }
.fp-ligne.annule { opacity: .55; }
.fp-ligne-t { flex: 1; min-width: 0; font-size: calc(12.5px * var(--echelle-texte)); color: var(--muted-foreground); line-height: 1.4; padding-top: 2px; }
.fp-ligne-t b { font-weight: 500; color: var(--foreground); }
.fp-ligne-t a { color: inherit; text-decoration: none; }
.fp-ligne-t a:hover b { color: var(--accent-hi); }
.fp-ligne-t small { font-size: inherit; color: var(--muted-foreground); }
.fp-ligne-t .fp-texte { display: -webkit-box; margin-top: 3px; color: var(--muted-foreground); font-size: calc(12.5px * var(--echelle-texte)); }
.fp-ligne .fp-heure { padding-top: 4px; }
/* « À venir » : des cartes pointillées. */
.fp .fp-avenir { border: 1px dashed var(--border-strong); padding: 8px 10px; text-decoration: none; }
.fp-avenir--retard { border-color: rgba(248,113,113,.4); }
/* Le « + » de la tête. */
.bp-plus--tete { position: relative; }
.bp-plus--tete > summary { list-style: none; }
.bp-plus--tete > summary::-webkit-details-marker { display: none; }
.bp-plus--tete .bp-plus-menu { top: 34px; bottom: auto; right: 0; left: auto; }
.bp-plus--tete { margin-left: 0; }
.mj3 [data-c="neutre"] { --teinte: rgba(245,244,240,.62); }