/* Les écrans du quotidien de l'espace team (vague 3 E, 21/09/2026) :
   Ma journée (`mj-`), la fiche unique (`fc-`), Contacts (`ct-`), Agenda (`ag-`).
   Maquettes validées : docs/superpowers/specs/maquettes-espace-team/.
   ⚠️ Rien que des JETONS de `charte.css` : aucune couleur écrite en dur, sauf
   les voiles déjà employés par la charte (rgb(... / 0.08)).
   ⚠️ Jamais `100vh` ici (le facteur d'échelle `--echelle`) : `var(--fenetre)`. */

/* ── Commun : les icônes colorées d'un geste ─────────────────────────────── */
[data-c="success"] { color: var(--success); }
[data-c="info"]    { color: var(--info); }
[data-c="accent"]  { color: var(--accent); }
[data-c="error"]   { color: var(--error); }
[data-c="warning"] { color: var(--warning); }
.q-pastille { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
              flex: 0 0 auto; background: color-mix(in srgb, currentColor 14%, transparent); }
.q-pastille svg { display: block; }
.q-pastille--petite { width: 30px; height: 30px; }
.q-initiales { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
               flex: 0 0 auto; background: var(--muted); color: var(--accent);
               font-size: var(--text-body-sm); font-weight: 600; }
.q-carte { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); min-width: 0; }
.q-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                padding: 14px 18px; border-bottom: 1px solid var(--border); }
.q-carte-tete h2 { margin: 0; font-size: var(--text-lg); font-weight: 500; }
.q-carte-tete .n { color: var(--muted-foreground); font-size: var(--text-body-sm); }
.q-sur { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .09em;
         text-transform: uppercase; color: var(--muted-foreground); }
.q-bouton-icone svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.q-bouton-icone[data-b="appel"] svg { color: var(--success); }
.q-bouton-icone[data-b="rep"] svg   { color: var(--info); }
.q-plus { width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
          border-radius: var(--radius-md); border: 1px solid var(--border-strong);
          background: transparent; color: var(--muted-foreground); cursor: pointer; }
.q-plus:hover { color: var(--foreground); background: var(--muted); }
.q-menu .menu-panneau { min-width: 230px; }
.q-menu form { margin: 0; }
.q-menu .menu-item { font-size: var(--text-body-sm); }
.q-menu-saisie { display: flex; gap: 6px; padding: 4px 6px 8px 11px; }
.q-menu-saisie .saisie { flex: 1 1 auto; min-width: 0; height: 32px; }
.q-bandeau { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-md);
             font-size: var(--text-body-sm); }
.q-bandeau--ok { background: rgb(74 222 128 / 0.08); border: 1px solid rgb(74 222 128 / 0.25); }
.q-bandeau--erreur { background: rgb(248 113 113 / 0.08); border: 1px solid rgb(248 113 113 / 0.25); }

/* ── Ma journée ─────────────────────────────────────────────────────────── */
.mj { max-width: 1180px; }
.mj-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
           flex-wrap: wrap; margin: 4px 0 18px; }
.mj-tete h1 { margin: 0; font-size: var(--text-2xl); font-weight: 600; }
.mj-tete p { margin: 4px 0 0; color: var(--muted-foreground); font-size: var(--text-body-sm); }

/* Le nœud : la même pièce que « Votre équipe » de l'espace client. */
.mj-noeud { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
            padding: 16px 8px; display: grid; grid-template-columns: repeat(3, 1fr); }
.mj-noeud > div { padding: 0 18px; border-left: 1px solid var(--border); min-width: 0; }
.mj-noeud > div:first-child { border-left: 0; }
.mj-noeud .l { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .09em;
               text-transform: uppercase; color: var(--muted-foreground); }
.mj-noeud .v { display: block; margin: 5px 0 3px; font-family: var(--font-mono); font-size: var(--text-2xl);
               font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mj-noeud .v.ok { color: var(--success); }
.mj-noeud .v.retard { color: var(--warning-text); }
.mj-noeud .v.urgent { color: var(--error); }
.mj-noeud .s { display: block; font-size: var(--text-caption); color: var(--muted-foreground); }

.mj-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 18px; align-items: start; }
.mj-cote { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.mj-filtres { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 12px;
              align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mj-filtres .seg { flex-wrap: wrap; }
.mj-filtres .seg > * { font-size: var(--text-body-sm); padding: 5px 12px; text-decoration: none; }
.mj-garde { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 18px 4px;
            padding: 9px 12px; border-radius: var(--radius-md); background: rgb(248 113 113 / 0.08);
            border: 1px solid rgb(248 113 113 / 0.25); font-size: var(--text-body-sm); }
.mj-garde a { color: var(--foreground); white-space: nowrap; }

.mj-groupe { padding: 12px 18px 4px; font-family: var(--font-mono); font-size: var(--text-2xs);
             letter-spacing: .09em; text-transform: uppercase; color: var(--muted-foreground);
             display: flex; gap: 8px; align-items: center; }
.mj-groupe b { color: var(--foreground); font-weight: 500; }

.mj-ligne { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
            padding: 12px 18px; border-top: 1px solid var(--border); }
.mj-groupe + .mj-ligne { border-top: 0; }
.mj-ligne:hover { background: var(--accent-wash); }
.mj-nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mj-nom a { color: var(--foreground); font-weight: 500; text-decoration: none; }
.mj-nom a:hover { color: var(--accent); }
.mj-pourquoi { margin-top: 2px; font-size: var(--text-body-sm); color: var(--muted-foreground);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-pourquoi q { color: var(--foreground); font-style: normal; quotes: "« " " »"; }
.mj-quand { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted-foreground); white-space: nowrap; }
.mj-quand.retard { color: var(--warning-text); }
.mj-quand.urgent { color: var(--error); }
.mj-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mj-gestes { display: flex; align-items: center; gap: 8px; }
.mj-suite { padding: 14px 18px; border-top: 1px solid var(--border); text-align: center;
            font-size: var(--text-body-sm); color: var(--muted-foreground); }
.mj-suite a { color: var(--accent); text-decoration: none; }
.mj-vide { padding: 28px 18px; text-align: center; color: var(--muted-foreground); font-size: var(--text-body-sm); }

.mj-rdv { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px 18px;
          border-top: 1px solid var(--border); }
.q-carte-tete + .mj-rdv { border-top: 0; }
.mj-rdv .h { font-family: var(--font-mono); font-size: var(--text-body-sm); font-weight: 600; }
.mj-rdv .h small { display: block; font-weight: 400; color: var(--muted-foreground); font-size: var(--text-2xs); }
.mj-rdv .qui a, .mj-rdv .qui span { color: var(--foreground); text-decoration: none; font-weight: 500; }
.mj-rdv .quoi { font-size: var(--text-body-sm); color: var(--muted-foreground); margin: 2px 0 8px; }
.mj-rdv.passe { opacity: .5; }
.mj-rdv.prochain { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
/* L'ÉTAT d'un rendez-vous (V2 de la tâche « Contacter », 25/09/2026) : ce qu'il
   attend (« à confirmer », « à compléter ») ressort ; ce qu'il a été se lit. */
.mj-rdv .qui .mj-etat { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--border);
          border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-2xs);
          font-weight: 400; letter-spacing: .04em; color: var(--muted-foreground); vertical-align: 1px; }
.mj-rdv .qui .mj-etat--a_confirmer, .mj-rdv .qui .mj-etat--a_completer { color: var(--warning-text); border-color: currentColor; }
.mj-rdv-gestes { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-rdv-gestes form { margin: 0; }
.mj-rdv-gestes:empty { display: none; }
.mj-sous { padding: 12px 18px 4px; border-top: 1px solid var(--border); font-family: var(--font-mono);
           font-size: var(--text-2xs); letter-spacing: .09em; text-transform: uppercase; color: var(--muted-foreground); }
.mj-sous b { color: var(--foreground); font-weight: 500; }
.mj-sous + .mj-rdv { border-top: 0; }
.mj-dispo { padding: 12px 18px; border-top: 1px solid var(--border); font-size: var(--text-body-sm); }
.mj-dispo a { color: var(--accent); text-decoration: none; }
.mj-argent-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
                   padding: 11px 18px; border-top: 1px solid var(--border); font-size: var(--text-body-sm); }
.mj-groupe + .mj-argent-ligne { border-top: 0; }
.mj-argent-ligne a { color: var(--foreground); text-decoration: none; font-weight: 500; }
.mj-argent-ligne .montant { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Reprise de Rich Circles (15/10/2026) ──────────────────────────────────
   L'avancement sous le bonjour, les MOMENTS de la liste, le report d'un clic,
   « Fait aujourd'hui » replié, et le planning heure par heure. */
.mj-avance { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mj-avance-texte { font-size: var(--text-body-sm); color: var(--muted-foreground); white-space: nowrap; }
.mj-avance-barre { flex: 0 1 220px; height: 6px; border-radius: var(--radius-pill); background: var(--muted); overflow: hidden; }
.mj-avance-barre > span { display: block; height: 100%; background: var(--success); border-radius: inherit; }

.mj-moment { border-top: 1px solid var(--border); padding-top: 14px; }
.q-carte-tete + .mj-moment, .mj-filtres + .mj-moment, .mj-filtrer + .mj-moment, .mj-garde + .mj-moment { border-top: 0; }
.mj-moment::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-foreground); }
.mj-moment--attendent::before { background: var(--info); }
.mj-moment--retard::before { background: var(--warning); }
.mj-moment--maintenant::before { background: var(--accent); }
.mj-moment--fait::before { background: var(--success); }

.mj-reporter-bouton { color: var(--warning-text); }
.mj-reporter .menu-panneau form { margin: 0; }
.mj-reporter .menu-panneau button.menu-item { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; }
.mj-reporter .menu-titre { padding: 6px 12px 4px; font-family: var(--font-mono); font-size: var(--text-2xs);
                           letter-spacing: .09em; text-transform: uppercase; color: var(--muted-foreground); }

.mj-faites { border-top: 1px solid var(--border); }
.mj-faites > summary { list-style: none; cursor: pointer; border-top: 0; padding-bottom: 12px; }
.mj-faites > summary::-webkit-details-marker { display: none; }
.mj-faites > summary svg { margin-left: auto; transition: transform .15s; }
.mj-faites[open] > summary svg { transform: rotate(180deg); }
.mj-faite { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
            padding: 8px 18px; font-size: var(--text-body-sm); color: var(--muted-foreground); }
.mj-faite a { color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.mj-faite a:hover { color: var(--foreground); }
.mj-faite-coche { color: var(--success); display: grid; place-items: center; }
.mj-faite-issue { font-size: var(--text-2xs); font-family: var(--font-mono); }

.mj-planning { position: relative; margin: 6px 18px 16px 52px; }
.mj-planning-heure { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.mj-planning-heure span { position: absolute; left: -44px; top: -8px; width: 36px; text-align: right;
                          font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-foreground); }
.mj-planning-maintenant { position: absolute; left: -6px; right: 0; border-top: 2px solid var(--error); z-index: 2; }
.mj-planning-maintenant::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px;
                                  border-radius: 50%; background: var(--error); }
.mj-planning-bloc { position: absolute; z-index: 1; min-height: 20px; overflow: hidden;
                    left: calc(100% / var(--colonnes) * var(--col) + 2px); width: calc(100% / var(--colonnes) - 4px);
                    padding: 2px 6px; border-radius: 6px; font-size: var(--text-2xs); line-height: 1.35;
                    color: var(--foreground); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.mj-planning-bloc--rdv { background: rgba(139,127,224,0.28); box-shadow: inset 3px 0 0 var(--accent); }
.mj-planning-bloc--tache { background: var(--muted); box-shadow: inset 3px 0 0 var(--success); }
.mj-planning-bloc.passe { opacity: .5; }
.mj-planning-bloc:hover { filter: brightness(1.25); }
.mj-planning-bloc b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mj-planning-plus { position: absolute; right: -14px; font-size: var(--text-2xs); color: var(--muted-foreground); }

@media (max-width: 900px) {
  .mj-grille { grid-template-columns: minmax(0, 1fr); }
  .mj-cote { order: -1; }
  /* Ma journée à la manière de Rich Circles (15/10/2026) : la liste d'abord,
     le planning et les rendez-vous DESSOUS (`journee-rc.css`). */
  .mj-grille--rc .mj-cote { order: 1; }
}
@media (max-width: 560px) {
  .mj-noeud { padding: 12px 0; }
  .mj-noeud > div { padding: 0 10px; }
  .mj-noeud .v { font-size: var(--text-xl); }
  .mj-ligne { grid-template-columns: 32px minmax(0, 1fr); padding: 12px 14px; }
  .mj-ligne .q-pastille { width: 32px; height: 32px; }
  .mj-droite { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; }
  .mj-pourquoi { white-space: normal; }
  .q-carte-tete, .mj-groupe, .mj-sous, .mj-rdv, .mj-dispo, .mj-argent-ligne { padding-left: 14px; padding-right: 14px; }
  .mj-tete .btn { display: none; }
  .mj-rdv.passe { display: none; }
  .mj-filtres { padding: 10px 14px; }
  .mj-filtres .seg { border-radius: var(--radius-lg); }
  .mj-filtres .btn { width: 100%; justify-content: center; }
  .mj-garde { margin: 10px 14px 4px; }
}
.q-sous > summary { list-style: none; }
.q-sous > summary::-webkit-details-marker { display: none; }
.q-sous > summary::marker { content: ""; }

/* ── Ma journée, tableau de bord « Contacter » (V3, 25/09/2026) ────────────
   Quatre compteurs (en retard, aujourd'hui, demain : des LIENS qui montrent
   ces tâches ; traitées), les vues enregistrées, les filtres de la tâche, le
   rappel d'une ligne, et la barre « Reprendre » d'une série en cours. */
.mj-noeud--quatre { grid-template-columns: repeat(4, 1fr); padding: 8px; gap: 0; }
.mj-noeud--quatre > a, .mj-noeud--quatre > div { padding: 8px 14px; border-left: 1px solid var(--border);
  min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.mj-noeud--quatre > :first-child { border-left: 0; }
.mj-noeud--quatre > a:hover { background: var(--accent-wash); }
.mj-noeud--quatre > a[aria-current="page"] { background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.mj-noeud--quatre > a[aria-current="page"] + * { border-left-color: transparent; }
.mj-quand-titre { color: var(--muted-foreground); font-weight: 400; }
.mj-vues > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.mj-vues > summary::-webkit-details-marker { display: none; }
.mj-vues > summary::marker { content: ""; }
.mj-vues .menu-panneau { right: 0; left: auto; min-width: 260px; }
.mj-vues .menu-item[aria-current="true"] { color: var(--accent); font-weight: 500; }
.mj-vue { display: flex; align-items: center; }
.mj-vue .menu-item { flex: 1 1 auto; min-width: 0; }
.mj-vue form { margin: 0; }
.mj-vue-retirer { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent;
  color: var(--muted-foreground); border-radius: var(--radius-md); cursor: pointer; margin-right: 4px; }
.mj-vue-retirer:hover { color: var(--error); background: var(--muted); }
.mj-barre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 18px;
  border-bottom: 1px solid var(--border); margin: 0; }
.mj-barre .liste { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.mj-effacer { font-size: var(--text-body-sm); color: var(--accent); text-decoration: none; margin-left: 4px; }
/* « Filtrer » (25/09/2026) : le bouton n'existe qu'au téléphone ; ailleurs,
   la barre des filtres reste affichée telle quelle. */
.mj-filtrer-bouton { display: none; }
.mj-rappel { display: inline-block; vertical-align: -1px; margin-right: 4px; color: var(--accent); }
.serie-reprendre { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--accent-wash); border: 1px solid var(--accent); font-size: var(--text-body-sm); }
.serie-reprendre-texte { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.serie-reprendre-texte svg { color: var(--success); flex: 0 0 auto; }
.serie-reprendre-gestes { display: inline-flex; align-items: center; gap: 12px; }
.serie-reprendre-arreter { color: var(--muted-foreground); text-decoration: none; }
.serie-reprendre-arreter:hover { color: var(--foreground); }
@media (max-width: 560px) {
  .mj-noeud--quatre { grid-template-columns: repeat(2, 1fr); padding: 6px; }
  .mj-noeud--quatre > a, .mj-noeud--quatre > div { padding: 8px 10px; }
  .mj-noeud--quatre > :nth-child(3) { border-left: 0; }
  .mj-noeud--quatre > :nth-child(n+3) { border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .mj-barre { padding: 10px 14px; }
  .mj-barre .liste { flex: 1 1 45%; }
  .mj-barre .liste > select.saisie { width: 100%; }
  /* Les cinq filtres repliés derrière « Filtrer » : une case cochée (CSS
     seul) ouvre la barre sous le bouton. */
  .mj-filtrer { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .mj-filtrer-bouton { display: inline-flex; width: 100%; justify-content: center; gap: 6px; cursor: pointer; }
  .mj-filtrer-bouton .n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-wash);
    color: var(--accent); font-size: var(--text-2xs); line-height: 18px; text-align: center; }
  .mj-filtrer-bascule:focus-visible + .mj-filtrer-bouton { outline: 2px solid var(--ring); outline-offset: 2px; }
  .mj-filtrer-bascule:checked + .mj-filtrer-bouton { border-color: var(--accent); color: var(--accent); }
  .mj-filtrer-bascule:not(:checked) ~ .mj-barre { display: none; }
  .mj-filtrer .mj-barre { padding: 10px 0 0; border-bottom: 0; }
  .serie-reprendre-gestes { width: 100%; justify-content: space-between; }
}

/* ── La fiche unique ─────────────────────────────────────────────────────── */
.fc { max-width: 1180px; }
.fc-fil { font-size: var(--text-caption); color: var(--muted-foreground); margin: 0 0 12px;
          display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fc-fil a { color: var(--muted-foreground); text-decoration: none; }
.fc-fil a:hover { color: var(--foreground); }
.fc-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fc-av { width: 56px; height: 56px; border-radius: 50%; background: var(--muted); display: grid; place-items: center;
         font-size: var(--text-lg); font-weight: 600; color: var(--accent); flex: none; }
.fc-qui { min-width: 0; }
.fc-tete h1 { margin: 0; font-size: var(--text-2xl); font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-sous { margin-top: 4px; color: var(--muted-foreground); font-size: var(--text-body-sm); }
.fc-sous b { color: var(--foreground); font-weight: 500; }
.fc-gestes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fc-geste { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md);
            text-decoration: none; font-size: var(--text-body-sm); color: var(--foreground); }
.fc-geste:hover { background: var(--muted); }
.fc-geste span { color: var(--foreground); }
.fc-menu .menu-panneau { right: 0; }

.fc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.fc-principal { display: flex; flex-direction: column; min-width: 0; }
.fc-principal > .q-carte + .q-carte { margin-top: 18px; }

.fc-action { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; }
.fc-action--retard { border-color: rgb(251 191 36 / 0.35);
                     background: linear-gradient(0deg, rgb(251 191 36 / 0.04), rgb(251 191 36 / 0.04)), var(--card); }
.fc-action .t { font-size: var(--text-lg); font-weight: 500; margin: 4px 0 2px; }
.fc-action .quand { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--muted-foreground); margin-left: 8px; }
.fc-action .quand.retard { color: var(--warning-text); }
.fc-action .p { font-size: var(--text-body-sm); color: var(--muted-foreground); }
.fc-action .g { display: flex; gap: 8px; align-items: center; }
.fc-action .g .saisie { height: 36px; }
.fc-action .menu-panneau { min-width: 240px; }

.fc-onglets { margin: 18px 0 12px; align-self: flex-start; }
.fc-onglets > * { font-size: var(--text-body-sm); padding: 6px 14px; text-decoration: none; }

.fc-saisie { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.fc-saisie .saisie { flex: 1; min-width: 0; }
.fc-hist { padding: 6px 18px 10px; }
.fc-ev { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.fc-ev:first-child { border-top: 0; }
.fc-ev .q-pastille { color: var(--muted-foreground); }
.fc-ev .q-pastille[data-c="success"] { color: var(--success); }
.fc-ev .q-pastille[data-c="info"] { color: var(--info); }
.fc-ev .q-pastille[data-c="accent"] { color: var(--accent); }
.fc-ev .q-pastille[data-c="error"] { color: var(--error); }
.fc-ev .q-pastille[data-c="warning"] { color: var(--warning); }
.fc-ev .q { font-weight: 500; }
.fc-ev .q small { font-weight: 400; color: var(--muted-foreground); margin-left: 6px; font-size: var(--text-body-sm); }
.fc-ev .d { font-size: var(--text-body-sm); color: var(--muted-foreground); margin-top: 2px; }
.fc-ev .d q { color: var(--foreground); quotes: "« " " »"; }
.fc-ev .w { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted-foreground); white-space: nowrap; }
.fc-ev.annule .q { color: var(--muted-foreground); }
/* Les liens d'une ligne : écouter un appel Onoff, le compte rendu Notion (29/10/2026). */
.fc-ev-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fc-ev-liens .btn { padding-left: 0; }

.fc-bloc { padding: 14px 18px; border-top: 1px solid var(--border); }
.fc-bloc:first-child { border-top: 0; }
.fc-bloc h3 { margin: 0 0 10px; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .09em;
              text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; }
.fc-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 7px 10px; font-size: var(--text-body-sm); margin: 0; }
.fc-kv--large { grid-template-columns: 160px minmax(0, 1fr); }
.fc-kv dt { color: var(--muted-foreground); }
.fc-kv dd { margin: 0; overflow-wrap: anywhere; }
.fc-kv a { color: var(--foreground); text-decoration: none; border-bottom: 1px dotted var(--border-strong); }
.fc-ok { color: var(--success); }
.fc-etapes { list-style: none; margin: 0; padding: 0; font-size: var(--text-body-sm); }
.fc-etapes li { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--muted-foreground); }
.fc-etapes li i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.fc-etapes li.fait { color: var(--foreground); }
.fc-etapes li.fait i { background: var(--success); border-color: var(--success); }
.fc-etapes li.ici { color: var(--foreground); font-weight: 500; }
.fc-etapes li.ici i { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring-strong); }
.fc-etiq { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fc-etiq .badge { display: inline-flex; align-items: center; gap: 4px; }
.fc-etiq-x { display: inline; margin: 0; }
.fc-etiq-x button { appearance: none; background: none; border: 0; padding: 0 0 0 2px; color: inherit; cursor: pointer; opacity: .6; }
.fc-etiq-x button:hover { opacity: 1; }
.fc-etiq-ajout > summary { list-style: none; cursor: pointer; }
.fc-etiq-ajout > summary::-webkit-details-marker { display: none; }
.fc-etiq-ajout .q-menu-saisie { padding: 8px 0 0; }

.fc-modifier { margin-top: 10px; }
.fc-modifier > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: var(--text-body-sm); display: inline-block; }
.fc-modifier > summary::-webkit-details-marker { display: none; }
.fc-modifier[open] > summary { margin-bottom: 12px; }
.fc-modifier .encadre { margin: 12px 0 0; }
/* Le rappel de la tâche, sous la prochaine action (25/09/2026). */
.fc-rappel { margin-top: 6px; }
.fc-rappel > summary { display: inline-flex; align-items: center; gap: 4px; }
.fc-rappel[open] > summary { margin-bottom: 8px; }
.fc-rappel-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.fc-rappel-form .liste { flex: 0 1 auto; min-width: 0; }
.fc-lien-form { margin: 8px 0 0; }
.fc-lien { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
           font-size: var(--text-body-sm); color: var(--accent); }
.fc-compte-gestes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.fc-compte-gestes form { margin: 0; }
.fc-danger { color: var(--error); }
.fc-bloc--compte .encadre { margin: 12px 0 0; }

/* Les DEMANDES de l'onglet Achats (vague 4 C, 22/09/2026), maquette
   `fiche-achats-ordinateur.png` : une rangee de boutons, la phrase dessous.
   /!\ Les boutons passent a la ligne plutot que de deborder : sur un telephone
   « Demander un remboursement » ne tient pas a cote de « Demander une
   resiliation », et une rangee coupee au bord droit cache un geste. */
.fc-dm-boutons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fc-dm-boutons form { margin: 0; }
/* Une demande DEJA en attente, a la place de son bouton : le meme gabarit
   qu'une puce, en attenue -- ce n'est plus un geste, c'est un etat. */
.fc-dm-attente {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}
.fc-dm-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fc-dm-pied form { margin: 0; }

.fc-achat { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 6px 0; }
.fc-achat-nom { font-weight: 500; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fc-achat-prix { text-align: right; font-size: var(--text-lg); }
.fc-achat-prix .t-caption { font-size: var(--text-caption); }
.fc-paiement { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
               font-size: var(--text-body-sm); padding: 6px 0; }
.fc-paiement .montant.ok { color: var(--success); }
.fc-paiement a { color: var(--accent); text-decoration: none; }

.fc-msg-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.fc-msgs { display: flex; flex-direction: column; gap: 10px; }
.fc-msg { max-width: 80%; padding: 8px 12px; border-radius: var(--radius-lg); background: var(--muted); font-size: var(--text-body-sm); }
.fc-msg--equipe { align-self: flex-end; background: var(--accent-wash); border: 1px solid var(--border); }
.fc-msg-corps { white-space: pre-wrap; overflow-wrap: anywhere; }
.fc-msg-qui { margin-top: 4px; font-size: var(--text-caption); color: var(--muted-foreground); }
/* Les e-mails dans l'onglet Messages (T5) : un objet, le texte replié, le canal
   dit en toutes lettres. Le texte reste du texte échappé. */
.fc-msg-gestes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fc-msg-gestes--debut { justify-content: flex-start; align-items: center; margin-top: 10px; }
.fc-msg-gestes form { margin: 0; }
.fc-msg-objet { font-weight: 600; margin-bottom: 4px; overflow-wrap: anywhere; }
.fc-msg-marques { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.fc-msg-plus > summary { cursor: pointer; list-style: none; }
.fc-msg-plus > summary::-webkit-details-marker { display: none; }
.fc-msg-plus[open] > summary { display: none; }
.fc-msg-qui a, .fc-msg-suite { color: var(--accent); text-decoration: none; }
.fc-msg-suite { font-size: var(--text-caption); white-space: nowrap; }
.fc-canal { font-weight: 600; color: var(--foreground); }
.fc-msg--email .em-pieces { margin-top: 8px; padding-top: 8px; }
@media (max-width: 600px) { .fc-msg { max-width: 92%; } }

/* En appel */
.fc-appel { border-color: var(--accent-ring-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.fc-appel form { margin: 0; }
.fc-appel-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px;
                 border-bottom: 1px solid var(--border); font-size: var(--text-body-sm); }
.fc-appel-tete b { font-weight: 500; }
.fc-appel-tete a { color: var(--foreground); }
.fc-appel-tete .pouls { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success);
                        margin-right: 8px; box-shadow: 0 0 0 4px rgb(74 222 128 / .15); }
.fc-appel-tete .chrono { font-family: var(--font-mono); color: var(--muted-foreground); }
.fc-appel-corps { padding: 14px 18px; }
.fc-appel-corps .l { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .09em;
                     text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 8px; }
.fc-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fc-choix label { position: relative; cursor: pointer; }
.fc-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-choix span { display: inline-block; font-size: var(--text-body-sm); padding: 7px 14px; border-radius: var(--radius-pill);
                 border: 1px solid var(--border-strong); color: var(--foreground); }
.fc-choix input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 500; }
.fc-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-appel textarea { display: block; width: 100%; min-height: 70px; box-sizing: border-box; background: var(--muted); border: 1px solid var(--border);
                     border-radius: var(--radius-md); padding: 10px 12px; color: var(--foreground); font: inherit;
                     font-size: var(--text-body-sm); resize: vertical; }
.fc-ensuite { display: grid; gap: 6px; }
.fc-ensuite label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--border);
                    border-radius: var(--radius-md); font-size: var(--text-body-sm); color: var(--muted-foreground); cursor: pointer; }
.fc-ensuite label.on { color: var(--foreground); border-color: var(--accent-ring-strong); background: var(--accent-wash); }
.fc-ensuite input[type="radio"] { accent-color: var(--accent); margin: 0; }
.fc-ensuite .saisie { height: 32px; width: auto; }
.fc-ensuite small { color: var(--muted-foreground); }
.fc-appel-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
                 padding: 12px 18px; border-top: 1px solid var(--border); font-size: var(--text-caption); color: var(--muted-foreground); }
.fc-appel-pied > div { display: flex; gap: 8px; }

/* Après un appel SANS réponse : message vocal, e-mail prérempli (V1, 25/09/2026).
   /!\ Montré par `:has`, sans script : seulement si « Pas de réponse » ou
   « Messagerie » est coché. */
.fc-sans-reponse { display: none; align-items: center; gap: 12px; flex-wrap: wrap; margin: -2px 0 12px; }
.fc-appel:has(input[name="result"][value="nrp"]:checked, input[name="result"][value="messagerie"]:checked) .fc-sans-reponse { display: flex; }
.fc-case { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); cursor: pointer; }
.fc-case input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

/* « Clore la tentative » (V1, 25/09/2026). Ce qui dépend d'un choix se montre
   par `:has` (l'issue « Annulé » ouvre son motif, « Modifier » ses champs,
   « Plus rien » son motif), sans script. */
.fc-clore { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.fc-clore-carte .fc-clore { margin-top: 0; padding-top: 0; border-top: 0; }
.fc-clore-tache { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fc-clore-tache .l { margin-bottom: 0; }
.fc-clore-quoi { font-size: var(--text-body-sm); color: var(--foreground); }
.fc-clore-ensuite { margin-top: 4px; }
.fc-proposee { margin: 0 0 10px; font-size: var(--text-body-sm); color: var(--muted-foreground); }
.fc-proposee b { color: var(--foreground); font-weight: 500; }
.fc-choix--motifs span { padding: 5px 12px; font-size: var(--text-caption); }
.fc-clore-si { display: none; margin: 0 0 12px; }
.fc-clore-libre { max-width: 420px; }
.fc-clore-champs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fc-clore-champs > .saisie { width: auto; flex: 1 1 220px; min-width: 0; }
.fc-clore-injoignable span { border-style: dashed; }
.fc-clore:has(input[name="issue"][value="annule"]:checked) .fc-clore-si--annule,
.fc-clore:has(input[name="suite_choix"][value="modifier"]:checked) .fc-clore-si--modifier,
.fc-clore:has(input[name="suite_choix"][value="plus_rien"]:checked) .fc-clore-si--plus-rien,
.fc-clore:has(input[name="suite_choix"][value="injoignable"]:checked) .fc-clore-si--injoignable { display: block; }
/* « Classer sans suite » n'a de sens qu'après « Pas abouti ». */
.fc-clore-injoignable { display: none; }
.fc-clore:has(input[name="issue"][value="pas_abouti"]:checked) .fc-clore-injoignable { display: inline-block; }
/* Une proposition VIDE (le script le sait) : « Valider » n'a rien à valider. */
.fc-clore[data-sans-proposition] [data-choix-valider] { display: none; }
/* Une tentative commencée (un geste noté) mais pas close (§ 12 bis J). */
.fc-en-cours { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill);
               background: var(--accent-wash); color: var(--accent); font-size: var(--text-2xs);
               letter-spacing: .04em; text-transform: none; font-family: var(--font-sans, inherit); }
/* « A répondu » (V4) : la personne s'est manifestée pendant la tentative. Le
   canal et l'heure, jamais le contenu. La même couleur que « Ils vous
   attendent » : quelqu'un a écrit. */
.fc-repondu { display: flex; align-items: center; gap: 6px; margin-top: 6px;
              font-size: var(--text-body-sm); color: var(--info); }
.fc-clore-repondu { margin: 0 0 10px; }
.mj-repondu { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
              border-radius: var(--radius-pill); background: rgb(125 211 252 / 0.14);
              color: var(--info); font-size: var(--text-2xs); white-space: nowrap; }

.fc-barre { display: none; }

@media (max-width: 900px) {
  .fc-grille { grid-template-columns: minmax(0, 1fr); }
  .fc-principal { display: contents; }
  .fc-appel { order: 1; }
  .fc-action { order: 2; }
  .fc-cote { order: 3; }
  .fc-onglets { order: 4; margin: 0; }
  .fc-panneau { order: 5; }
}
@media (max-width: 560px) {
  .fc-gestes { display: none; }
  .fc-av { width: 44px; height: 44px; font-size: var(--text-base); }
  .fc-tete h1 { font-size: var(--text-xl); }
  .fc-tete > .fc-qui { flex: 1; min-width: 0; }
  .fc-action { grid-template-columns: 1fr; padding: 14px; }
  .fc-action .g { flex-wrap: wrap; }
  .fc-action .g > * { flex: 1; }
  /* Sans tâche ouverte (25/09/2026) : le champ date et heure, puis le bouton,
     chacun sur sa ligne ; côte à côte, ils mesuraient 476 points pour 390. */
  .fc-action--vide .g > * { flex-basis: 100%; }
  .fc-action .g .btn, .fc-action .g summary { width: 100%; justify-content: center; }
  .fc-onglets { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .fc-hist, .fc-bloc, .fc-saisie, .fc-appel-corps, .fc-appel-tete, .fc-appel-pied { padding-left: 14px; padding-right: 14px; }
  .fc-cote .fc-detail { display: none; }
  .fc-kv--large { grid-template-columns: 1fr; gap: 2px 0; }
  .fc-kv--large dd { margin-bottom: 8px; }
  .fc-ev { grid-template-columns: 30px minmax(0, 1fr); }
  .fc-ev .w { grid-column: 2; margin-top: -6px; }
  .fc-paiement { grid-template-columns: 1fr auto; }
  .fc-appel-pied > div { width: 100%; flex-wrap: wrap; }
  .fc-appel-pied .btn { flex: 1; justify-content: center; }
  .fc-appel-pied .btn-primary { flex-basis: 100%; order: -1; }
  .fc-clore-champs > .saisie, .fc-clore-champs > .liste { flex-basis: 100%; }
  .fc { padding-bottom: 84px; }
  .fc-barre { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
              background: var(--card); border-top: 1px solid var(--border-strong);
              padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .fc-barre a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--text-2xs);
                text-decoration: none; padding: 4px 0; }
  .fc-barre a span { color: var(--muted-foreground); }
}
/* Les gestes de l'en-tête : l'icône porte la couleur, le mot reste neutre
   (la barre de gestes d'avant, reprise à l'identique). */
.fc-geste[data-c="success"] svg, .fc-barre a[data-c="success"] svg { color: var(--success); }
.fc-geste[data-c="info"] svg,    .fc-barre a[data-c="info"] svg    { color: var(--info); }
.fc-geste[data-c="accent"] svg,  .fc-barre a[data-c="accent"] svg  { color: var(--accent); }
.fc-geste[data-c="warning"] svg, .fc-barre a[data-c="warning"] svg { color: var(--warning); }
/* Les sections d'avant (compte, argent) posées DANS la fiche : sans leur
   cadre, sinon une carte s'emboîte dans une carte (le défaut que le mode
   maquette a déjà attrapé). */
.fc-panneau .encadre { background: none; border: 0; box-shadow: none; border-radius: 0;
                       padding: 14px 0 0; margin: 0; max-width: none; }
.fc-panneau .encadre + .encadre { border-top: 1px solid var(--border); margin-top: 14px; }
.fc-panneau .encadre-titre { font-size: var(--text-base); font-weight: 500; }
.fc-panneau .encadre-sous { font-size: var(--text-body-sm); }
.fc-panneau .encadre p { font-size: var(--text-body-sm); }

/* ── Contacts ───────────────────────────────────────────────────────────── */
.ct { max-width: 1180px; }
.ct-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.ct-tete h1 { margin: 0; font-size: var(--text-2xl); font-weight: 600; }
.ct-tete p { margin: 4px 0 0; color: var(--muted-foreground); font-size: var(--text-body-sm); }
.ct-tete p a { color: var(--accent); text-decoration: none; }
.ct-tete-gestes { display: flex; gap: 8px; }
.ct-panneau { min-width: 300px; padding: 12px; }
.ct-form-nouveau { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ct-form-nouveau .saisie { padding: 9px 12px; }
.ct-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct-barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.ct-recherche { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; background: var(--card);
                border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 12px; color: var(--muted-foreground); }
.ct-recherche input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--foreground);
                      font: inherit; font-size: var(--text-body-sm); padding: 10px 0; }
.ct-choix { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 0 12px; border: 1px solid var(--border-strong);
            border-radius: var(--radius-md); background: var(--card); font-size: var(--text-body-sm); white-space: nowrap; }
.ct-choix > span:first-child { color: var(--muted-foreground); }
.ct-choix .liste > select.saisie, .ct-choix .liste-bouton { border: 0 !important; background-color: transparent !important;
            font-family: inherit; font-size: var(--text-body-sm); padding: 8px 30px 8px 0; box-shadow: none !important; }
.ct-etats { margin-bottom: 14px; flex-wrap: wrap; }
.ct-etats > * { font-size: var(--text-body-sm); padding: 5px 12px; text-decoration: none; }
.ct-carte { overflow: hidden; }
.ct-carte form { margin: 0; }
.ct-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.ct-table th { text-align: left; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .09em; text-transform: uppercase;
               color: var(--muted-foreground); font-weight: 500; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ct-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ct-table tr:hover td { background: var(--accent-wash); }
.ct-table input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; }
.ct-col-case { width: 1%; }
.ct-qui { display: flex; align-items: center; gap: 10px; }
.ct-av { width: 32px; height: 32px; border-radius: 50%; background: var(--muted); display: grid; place-items: center;
         font-size: var(--text-caption); font-weight: 600; color: var(--accent); flex: none; }
.ct-qui a { color: var(--foreground); text-decoration: none; font-weight: 500; }
.ct-qui a:hover { color: var(--accent); }
.ct-qui small { display: block; color: var(--muted-foreground); font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; max-width: 220px; white-space: nowrap; }
.ct-action { display: flex; align-items: center; gap: 8px; }
.ct-action .i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
                background: color-mix(in srgb, currentColor 14%, transparent); }
.ct-action small { display: block; font-size: var(--text-caption); color: var(--muted-foreground); font-family: var(--font-mono); }
.ct-action small.retard { color: var(--warning-text); }
.ct-action small.urgent { color: var(--error); }
.ct-gris { color: var(--muted-foreground); }
.ct-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
           font-size: var(--text-body-sm); color: var(--muted-foreground); }
.ct-pied a { color: var(--accent); text-decoration: none; }
.ct-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--accent-wash);
          border-bottom: 1px solid var(--accent-ring-strong); font-size: var(--text-body-sm); }
.ct-sel[hidden] { display: none; }
.ct-sel .sp { flex: 1; }
@media (max-width: 900px) { .ct-cache-moyen { display: none; } }
@media (max-width: 560px) {
  .ct-table thead { display: none; }
  .ct-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .ct-table td { padding: 0; border: 0; }
  .ct-table td.ct-cache-tel, .ct-table td.ct-col-case { display: none; }
  .ct-table tr:hover td { background: none; }
  .ct-table td.ct-col-action { padding-left: 42px; }
  .ct-barre .ct-choix { flex: 1 1 auto; }
  .ct-sel { display: none !important; }
  .ct-etats { border-radius: var(--radius-lg); }
  .ct-tete-gestes { width: 100%; }
  .ct-tete-gestes > * { flex: 1; }
  .ct-tete-gestes summary { width: 100%; justify-content: center; }
  .ct-panneau { min-width: 0; width: 300px; }
}

/* ── L'en-tête d'une entrée de l'espace team ────────────────────────────────
   `partials/entree_tete.html` (22/09/2026, TVNI-213/214) : le titre de
   l'ENTRÉE, une phrase, puis la pilule des onglets.

   /!\ UN SEUL habillage, ici. Il en existait quatre qui disaient la meme chose
   a quelques pixels pres (`.ag-tete`, `.ar-tete`, `.pl-tete`, `.fa-tete`), plus
   un fil d'Ariane sur les quatre ecrans d'argent. C'est ce qui faisait sauter le
   titre d'une taille a l'autre en changeant d'onglet DANS la meme rubrique.

   /!\ La taille du titre est celle des maquettes (`--text-2xl`), pas celle des
   anciennes pages d'argent (`--text-xl`). */
.et-tete, .ag-tete { display: flex; align-items: flex-end; justify-content: space-between;
                     gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.et-titre { min-width: 0; }
.et-tete h1, .ag-tete h1 { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.01em; }
.et-tete p, .ag-tete p { margin: 4px 0 0; color: var(--muted-foreground); font-size: var(--text-body-sm); }
/* La rangee de la pilule : les onglets a gauche, ce que la page pose a droite
   (le temoin Stripe, « mis a jour il y a 2 min », un filtre d'equipe). */
/* /!\ **LA RANGEE NE PASSE PAS A LA LIGNE** (22/09/2026). C'est la PILULE qui
   defile quand elle deborde, pas la rangee qui se coupe en deux : avec
   `flex-wrap: wrap`, une barre plus large que la place disponible poussait les
   outils SEULS sur une deuxieme ligne — vu sur Reglages et ses vingt onglets,
   ou « + Nouveau tag » se retrouvait a droite d'une ligne vide. Toutes les
   maquettes montrent les onglets et les outils sur la MEME ligne.
   Au telephone (<= 560px), la regle s'inverse : la pilule passe a la ligne et
   les outils descendent sous elle (plus bas dans ce fichier). */
.et-rangee, .ag-rangee { display: flex; justify-content: space-between; align-items: center;
                         gap: 12px; flex-wrap: nowrap; margin: 0 0 16px; }
/* Les outils gardent leur taille ; c'est la pilule qui cede et qui defile. */
.et-rangee .et-outils, .ag-rangee .et-outils, .ag-rangee .ag-semaine { flex: 0 0 auto; }
/* /!\ `min-width: 0` : sans lui, la pilule refuse de retrecir sous la largeur de
   ses onglets, prend toute la rangee, et les outils tombent SEULS sur une
   deuxieme ligne. Vu sur Reglages et ses vingt onglets (22/09/2026) : le bouton
   « + Nouveau tag » se retrouvait a droite d'une ligne vide. */
.et-rangee .seg--onglets, .ag-rangee .seg--onglets { margin-bottom: 0; min-width: 0; }
/* /!\ **UNE BARRE COUPEE DOIT DIRE QU'ELLE CONTINUE.** Une barre soulignee
   pleine largeur coupee au bord se lit comme « ca continue » ; une PILULE, avec
   son fond et ses coins arrondis, se lit comme un objet casse. Le degrade est
   pose par `admin_base.html` (`data-bord`), qui sait seul si la barre deborde et
   de quel cote : en CSS pur il aurait mange le dernier onglet des barres qui
   tiennent, c'est-a-dire presque toutes. */
.et-rangee .seg--onglets[data-bord="droite"], .ag-rangee .seg--onglets[data-bord="droite"] {
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}
.et-rangee .seg--onglets[data-bord="gauche"], .ag-rangee .seg--onglets[data-bord="gauche"] {
  mask-image: linear-gradient(to right, transparent 0, #000 36px);
}
.et-rangee .seg--onglets[data-bord="deux"], .ag-rangee .seg--onglets[data-bord="deux"] {
  mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.et-rangee .seg > *, .ag-rangee .seg > * { font-size: var(--text-body-sm); padding: 6px 14px; text-decoration: none; }
.et-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             margin-left: auto; font-size: var(--text-body-sm); }
/* Le temoin de fraicheur (« Stripe · synchronise il y a 1 min ») : une pastille
   verte, orange quand la photo a vieilli. Il ne se lit pas, il se remarque. */
.et-temoin { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
             font-size: var(--text-xs); color: var(--muted-foreground); }
.et-temoin i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; }
.et-temoin--vieux i { background: var(--warning); }
@media (max-width: 560px) {
  /* /!\ La pilule PASSE A LA LIGNE au telephone au lieu de defiler : c'est ce
     que montrent les maquettes « …-telephone.png », et c'est le seul moyen de
     voir les six onglets d'Argent sans deviner qu'on peut faire glisser. */
  .et-rangee, .ag-rangee { flex-wrap: wrap; }
  .et-rangee .seg--onglets, .ag-rangee .seg--onglets { flex-wrap: wrap; border-radius: var(--radius-lg); overflow-x: visible; }
  /* /!\ Elle ne deborde plus, donc elle ne dit plus qu'elle continue. */
  .et-rangee .seg--onglets[data-bord], .ag-rangee .seg--onglets[data-bord] { mask-image: none; }
  .et-outils { margin-left: 0; }
  /* /!\ Le PRINCIPAL seulement (« + Poser un rendez-vous »). Elargir aussi les
     secondaires faisait d'« Exporter » le plus gros objet de l'ecran Analyses
     au telephone, au-dessus des chiffres qu'on vient lire. */
  .et-tete .btn-primary, .ag-tete .btn-primary { width: 100%; justify-content: center; }
  /* /!\ PLUSIEURS gestes au titre (Marketing : « + Evenement » et « + Campagne ») :
     le principal seul etire faisait deux boutons de tailles differentes l'un sous
     l'autre (vu le 23/09/2026). Ils se partagent la ligne a parts egales. */
  .et-tete .et-outils:has(> .btn ~ .btn) { width: 100%; flex-wrap: nowrap; }
  .et-tete .et-outils:has(> .btn ~ .btn) > .btn { flex: 1 1 0; width: auto; justify-content: center; }
}

/* ── UNE LISTE QUI DEVIENT DES CARTES AU TELEPHONE ──────────────────────────
   `.table-defile` enveloppe un `.data-table` (les quatre listes d'Argent :
   Paiements, Achats, Commissions, Retraits).

   /!\ **LE DEFAUT QU'ELLE CORRIGE** (releve le 22/09/2026) : huit colonnes
   dans 390 points, ce sont trois colonnes visibles et cinq hors de l'ecran,
   derriere un defilement horizontal que rien n'annonce. Le MONTANT et le STATUT
   -- les deux seules choses qu'un comptable vient lire -- etaient les deux
   dernieres. On ne defile plus : chaque ligne devient une carte, et chaque
   valeur porte le nom de sa colonne.

   /!\ **Le libelle vient de `data-libelle`, pose par le gabarit depuis
   l'en-tete de la colonne.** Il n'est pas recopie a la main : une colonne
   renommee dans le `<thead>` et oubliee ici aurait donne deux noms a la meme
   chose selon la taille de l'ecran.

   /!\ L'en-tete du tableau DISPARAIT : il ne dit plus rien que les cartes ne
   disent, et il prendrait une ligne par colonne. */
.table-defile { overflow-x: auto; }
/* /!\ 720 points, et pas 560 : c'est la borne des tableaux de l'application
   (`.fa-table` des Factures, le bloc `.data-table` de `charte.css`). Huit
   colonnes dans 700 points ne se lisent pas mieux que dans 390. */
@media (max-width: 720px) {
  .table-defile { overflow-x: visible; }
  .table-defile .data-table { width: 100%; min-width: 0; }
  .table-defile .data-table thead { display: none; }
  .table-defile .data-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr);
                                       gap: 7px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
  .table-defile .data-table tbody tr:last-child { border-bottom: 0; }
  .table-defile .data-table tbody td { display: grid; grid-template-columns: 104px minmax(0, 1fr);
                                       gap: 10px; align-items: baseline; padding: 0; border: 0;
                                       min-width: 0; text-align: left; }
  .table-defile .data-table tbody td::before {
    content: attr(data-libelle); color: var(--muted-foreground);
    font-family: var(--font-mono); font-size: var(--text-2xs);
    letter-spacing: .09em; text-transform: uppercase;
  }
  /* Une valeur alignee a droite n'a plus de colonne a droite : elle se range
     avec les autres. */
  .table-defile .data-table tbody td.num { text-align: left; }
  /* /!\ **UNE PASTILLE NE S'ETIRE PAS SUR TOUTE LA CARTE** (releve le
     23/09/2026, en habillant les codes promo). La cellule est une GRILLE, et
     un element de grille s'etire par defaut a la largeur de sa colonne : un
     badge « actif » de six lettres devenait une barre verte de 250 points,
     large comme la carte entiere. Le defaut nait avec le motif lui-meme
     (22/09) et vaut donc aussi pour la colonne Statut des quatre listes
     d'Argent, qui portent `.status-dot`. */
  .table-defile .data-table tbody td > .badge,
  .table-defile .data-table tbody td > .status-dot { justify-self: start; }
  /* /!\ **LA BARRE D'ACCENT DE LA PREMIERE COLONNE N'A PLUS DE SENS EN CARTE**
     (releve le 23/09/2026, mesure au navigateur). `admin_base.html` pose
     `border-left:3px` et `padding-left:13px` sur `td:first-child` : c'est le
     liseré qui s'allume au survol d'une LIGNE. Devenue carte, la ligne n'a plus
     de debut a gauche, et ces 16 points decalaient le PREMIER champ de chaque
     carte par rapport aux autres -- mesure : 162 points contre 146. Vaut aussi
     pour les quatre listes d'Argent, nees avec le motif le 22/09. */
  .table-defile .data-table tbody td:first-child { border-left: 0; padding-left: 0; }
}

/* ── Agenda ─────────────────────────────────────────────────────────────── */
.ag { max-width: 1180px; }
/* /!\ `.ag-tete` et `.ag-rangee` sont habilles PLUS HAUT, avec `.et-*` :
   l'Agenda a le meme en-tete que les huit autres entrees, il garde
   seulement ses deux emplacements a droite (le bouton, la semaine). */
.ag-semaine { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); }
.ag-semaine .btn { min-width: 32px; justify-content: center; }
.ag-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ag-bandeau { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); border-bottom: 1px solid var(--border); }
.ag-bandeau a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px;
                border-left: 1px solid var(--border); text-decoration: none; color: var(--muted-foreground);
                font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .04em; }
.ag-bandeau a:first-child { border-left: 0; }
.ag-bandeau a b { font-size: var(--text-lg); color: var(--foreground); font-weight: 500; letter-spacing: 0; }
.ag-bandeau a .n { text-transform: none; letter-spacing: 0; }
.ag-bandeau a.on { box-shadow: inset 0 -2px 0 var(--accent); }
.ag-bandeau a.on b { color: var(--accent); }
.ag-jour { padding-top: 16px; }
.ag-rdv { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
          padding: 12px 18px; border-top: 1px solid var(--border); }
.ag-jour + .ag-rdv { border-top: 0; }
.ag-rdv .h { font-family: var(--font-mono); font-size: var(--text-body-sm); font-weight: 600; }
.ag-rdv .h small { display: block; font-weight: 400; color: var(--muted-foreground); font-size: var(--text-2xs); }
.ag-rdv .qui { font-weight: 500; }
.ag-rdv .qui a { color: var(--foreground); text-decoration: none; }
.ag-rdv .quoi { font-size: var(--text-body-sm); color: var(--muted-foreground); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.ag-rdv .quoi svg { color: var(--accent); flex: none; }
.ag-rdv.passe { opacity: .5; }
.ag-rdv.prochain { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.ag-rdv.annule .qui, .ag-rdv.annule .qui a { text-decoration: line-through; color: var(--muted-foreground); }
.ag-rdv.annule .quoi, .ag-rdv.annule .quoi svg { color: var(--error); }
.ag-google { margin: 0; font-size: var(--text-body-sm); display: flex; gap: 8px; align-items: baseline; }
.ag-point { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-foreground); flex: none; transform: translateY(-1px); }
.ag-point.ok { background: var(--success); }
.ag-point.ko { background: var(--warning); }
.ag-lien { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px;
           border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-body-sm);
           font-family: var(--font-mono); }
.ag-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-copier { appearance: none; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit;
             font-family: var(--font-sans, inherit); }
@media (max-width: 900px) {
  .ag-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ag-semaine { width: 100%; justify-content: space-between; }
  .ag-rdv { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 14px; }
  .ag-rdv > .btn { grid-column: 2; justify-self: start; }
}
.fc-ev .w { display: flex; align-items: flex-start; gap: 6px; }
.fc-ev-menu { position: relative; }
.fc-ev-menu > summary { list-style: none; cursor: pointer; }
.fc-ev-menu > summary::-webkit-details-marker { display: none; }
.fc-ev-plus { padding: 0 4px; color: var(--muted-foreground); border-radius: var(--radius-sm); }
.fc-ev-plus:hover { color: var(--foreground); background: var(--muted); }
.fc-ev-menu .menu-panneau { min-width: 280px; }
.fc-ev-edition { display: flex; flex-direction: column; gap: 8px; padding: 6px; margin: 0; }
.fc-ev-edition .saisie { padding: 8px 10px; font-family: inherit; font-size: var(--text-body-sm); min-height: 60px; }
.fc-reunion { padding: 0 18px 12px; margin: 0; border-bottom: 1px solid var(--border); }
.fc-reunion > summary { padding-top: 2px; }
.fc-reunion-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.fc-reunion-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-caption); color: var(--muted-foreground); }
.fc-reunion-form .saisie { padding: 8px 10px; font-size: var(--text-body-sm); }
.fc-reunion-form textarea, .fc-reunion-form button, .fc-reunion-form .fc-reunion-quand,
.fc-reunion-form input[type="url"] { grid-column: 1 / -1; }
.fc-reunion-form button { justify-self: start; }
@media (max-width: 560px) {
  .fc-reunion { padding-left: 14px; padding-right: 14px; }
  .fc-reunion-form { grid-template-columns: minmax(0, 1fr); }
}
.q-menu-saisie .liste { flex: 1 1 auto; min-width: 0; }
.q-menu-saisie .liste > select.saisie, .q-menu-saisie .liste .liste-bouton { width: 100%; height: 32px; padding-top: 4px; padding-bottom: 4px; }
.ag-cote { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mj-que-tel { display: none; }
@media (max-width: 560px) { .mj-que-tel { display: block; padding: 14px; } }

/* Un tableau d'Agenda (L'équipe, Liens publics) défile dans son cadre ; la
   page, elle, ne défile jamais de côté (mesuré à 390 points le 22/09/2026). */
.rdv-tableau { overflow-x: auto; }

/* Annuler un rendez-vous (22/09/2026) : le menu « ⋯ » de l'Agenda et de la fiche. */
.ag-gestes { display: flex; align-items: center; gap: 8px; }
.rdv-annuler { display: grid; gap: 8px; min-width: 260px; margin: 0; padding: 4px; }
.rdv-annuler-l { display: grid; gap: 4px; font-size: var(--text-caption); color: var(--muted-foreground); }
.rdv-annuler .saisie { padding: 7px 10px; font-size: var(--text-body-sm); }

/* Changer le parrain, dans le bloc « Parrainage » de la fiche (15/10/2026). */
.fc-parrain { margin-top: 10px; }
.fc-parrain > summary { cursor: pointer; color: var(--accent); width: fit-content; }
.fc-parrain-form { display: grid; gap: 10px; margin-top: 10px; max-width: 420px; }
.fc-parrain-boutons { display: flex; gap: 8px; flex-wrap: wrap; }

/* « Relancer dans… » à l'envoi d'un e-mail ou d'un message (lot 3 du cadrage
   « Ma journée et la bulle », 29/10/2026) : un petit menu à côté d'« Envoyer ». */
.relancer-dans { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.relancer-dans > label { font-size: calc(12px * var(--echelle-texte)); color: var(--muted-foreground); white-space: nowrap; }
.relancer-dans .saisie { height: 30px; font-size: calc(12.5px * var(--echelle-texte)); }
.relancer-dans .relancer-le { width: 150px; }