/* nbt-rendez-vous — see tasks/nbt-crm/plans/rendez-vous/build/03-DEPT-agenda.md (AGENDA-12)
   Copie de tasks/nbt-crm/mockups/rendez-vous-crm-v4.html (jetons v4:10-15, règles v4:94-330), valeur pour valeur.
   Chaque classe prend le préfixe nbt-rdv-, modificateurs compris : « ap site » devient « nbt-rdv-ap nbt-rdv-site ».
   Les jetons vivent sur la classe nbt-rdv : chaque vue des rendez-vous (page, tiroir, onglet 📅, aperçu d'e-mail)
   la pose sur sa racine ; un style="" en ligne de la maquette lit var(--nbt-rdv-<nom>) au lieu de var(--<nom>).
   Pas repris : la barre de maquette et l'habillage (shell, top, head → Filament), la puce d'agent « ag »
   (nbt-agents.css, PEOPLE-14), la pastille « pill p-high » (= nbt-pastille nbt-pastille-haute), la fenêtre et le
   toast (modale et notifications Filament), les écrans de People (ptabs, rule, sw, perm, tgl, bars).
   Les commentaires n'écrivent aucun nom de classe précédé d'un point : AucuneClasseFantomeTest lit la feuille brute. */

.nbt-rdv {
    --nbt-rdv-red: #C8102E; --nbt-rdv-red-d: #A50D26; --nbt-rdv-ink: #14121A; --nbt-rdv-muted: #6B6875; --nbt-rdv-line: #E7E5EA;
    --nbt-rdv-bg: #F7F7F8; --nbt-rdv-card: #fff; --nbt-rdv-pink: #FDEEF1;
    --nbt-rdv-blue: #1D4ED8; --nbt-rdv-blue-bg: #EFF4FF; --nbt-rdv-green: #15803D; --nbt-rdv-green-bg: #ECFDF3;
    --nbt-rdv-amber: #B45309; --nbt-rdv-amber-bg: #FFF7E6; --nbt-rdv-h: 72px;
    color: var(--nbt-rdv-ink); font-size: 14px; line-height: normal;
}
/* Mode sombre (Q12) : le panneau suit le thème du système (Filament, ThemeMode::System). La maquette n'a pas
   de jeu sombre : les écrans rendez-vous restent la maquette, sur leur fond clair. Poids d'une seule classe et
   placé ici : toute règle qui suit (tiroir, carte) garde son propre fond.
   ponytail: îlot clair, pas de palette sombre inventée ; un jeu --nbt-rdv-* sombre quand Karim en valide un. */
:where(.dark) .nbt-rdv { color-scheme: light; background: var(--nbt-rdv-bg); }
.dark .nbt-rdv-page .fi-header-subheading { color: #ACA5AF; }
/* La maquette s'appuie sur les valeurs du navigateur que la remise à zéro de Filament efface :
   on les rend, sans poids (:where), pour que toute règle ci-dessous l'emporte. Les titres h2-h5 reprennent
   leur gras dans leur propre règle. */
:where(.nbt-rdv) small { font-size: smaller; }
:where(.nbt-rdv) :where(input, select, textarea) { background-color: #fff; }

/* En-tête des pages Rendez-vous / Paiements RDV (getPageClasses → nbt-rdv-page) = head, h1 et sub de la maquette. */
.nbt-rdv-page .fi-header-heading { font-size: 28px; line-height: normal; letter-spacing: -.01em; margin: 0 0 4px; }
.nbt-rdv-page .fi-header-subheading { font-size: 14px; line-height: normal; color: #6B6875; margin: 0; }
.nbt-rdv-page .fi-page-header-main-ctn { row-gap: 14px; }

/* ---- socle commun ---- */
.nbt-rdv-hint { color: var(--nbt-rdv-muted); font-size: 12.5px; }
.nbt-rdv-k { font-size: 12px; color: var(--nbt-rdv-muted); margin-bottom: 5px; display: flex; gap: 6px; align-items: center; }
.nbt-rdv-s { display: block; color: var(--nbt-rdv-muted); font-size: 12px; margin-top: 2px; }
.nbt-rdv-nm { font-weight: 600; }
.nbt-rdv-dash { color: #B0ADB8; }
.nbt-rdv-lnk { color: var(--nbt-rdv-red); font-weight: 600; }
.nbt-rdv-lnk:hover { text-decoration: underline; }
.nbt-rdv-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.nbt-rdv-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.nbt-rdv-card { background: var(--nbt-rdv-card); border: 1px solid var(--nbt-rdv-line); border-radius: 14px; margin-bottom: 16px; min-width: 0; }
.nbt-rdv-card h3 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--nbt-rdv-line); font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nbt-rdv-card .nbt-rdv-body { padding: 14px 18px; }
.nbt-rdv-btn { border: 1px solid var(--nbt-rdv-line); background: #fff; border-radius: 9px; padding: 8px 12px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.nbt-rdv-btn:hover { border-color: #cfccd4; }
.nbt-rdv-btn.nbt-rdv-primary { background: var(--nbt-rdv-red); border-color: var(--nbt-rdv-red); color: #fff; }
.nbt-rdv-btn.nbt-rdv-primary:hover { background: var(--nbt-rdv-red-d); }
.nbt-rdv-btn.nbt-rdv-danger { color: var(--nbt-rdv-red); }
.nbt-rdv-btn.nbt-rdv-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.nbt-rdv-btn:disabled { opacity: .45; cursor: not-allowed; }
.nbt-rdv-new { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--nbt-rdv-red); color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.nbt-rdv-code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: #fff; border: 1px solid var(--nbt-rdv-line); border-radius: 6px; padding: 1px 6px; }
.nbt-rdv-quote { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 8px 11px; font-size: 13px; color: #713F12; }

/* ---- pastilles d'état et de source ---- */
.nbt-rdv-st { display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.nbt-rdv-st.nbt-rdv-unpaid { background: var(--nbt-rdv-amber-bg); color: var(--nbt-rdv-amber); }
.nbt-rdv-st.nbt-rdv-paid { background: var(--nbt-rdv-green-bg); color: var(--nbt-rdv-green); }
.nbt-rdv-st.nbt-rdv-offered { background: #fff; color: var(--nbt-rdv-ink); box-shadow: inset 0 0 0 1px #D0CDD6; }
.nbt-rdv-st.nbt-rdv-done { background: #F2F4F7; color: #344054; }
.nbt-rdv-st.nbt-rdv-noshow { background: #FEE4E2; color: #B42318; }
/* Journal d'audit : un rendez-vous saisi après coup, en rouge (fiche contact v2, B2). */
.fi-ta-row.nbt-ligne-rouge, .fi-ta-row.nbt-ligne-rouge > td { background: #FEF3F2; }
.fi-ta-row.nbt-ligne-rouge { box-shadow: inset 3px 0 0 #B42318; }
.nbt-rdv-st.nbt-rdv-cancel { background: #F2F4F7; color: #98A2B3; text-decoration: line-through; }
.nbt-rdv-st.nbt-rdv-counter { background: #F2F4F7; color: #344054; }
.nbt-rdv-st.nbt-rdv-proof { background: var(--nbt-rdv-blue-bg); color: var(--nbt-rdv-blue); }
.nbt-rdv-src { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.nbt-rdv-src.nbt-rdv-site { background: var(--nbt-rdv-blue-bg); color: var(--nbt-rdv-blue); }
.nbt-rdv-src.nbt-rdv-staff { background: var(--nbt-rdv-pink); color: var(--nbt-rdv-red-d); }

/* ---- vue semaine ---- */
.nbt-rdv-wtool { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--nbt-rdv-line); }
.nbt-rdv-wnav { display: flex; gap: 6px; align-items: center; }
.nbt-rdv-wnav .nbt-rdv-lbl { font-weight: 600; margin: 0 8px; white-space: nowrap; }
.nbt-rdv-sum { padding: 12px 18px; border-bottom: 1px solid var(--nbt-rdv-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.nbt-rdv-sum .nbt-rdv-big { font-weight: 600; font-size: 15px; }
.nbt-rdv-sum .nbt-rdv-big span { color: var(--nbt-rdv-muted); font-weight: 400; margin: 0 6px; }
.nbt-rdv-per { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--nbt-rdv-muted); }
.nbt-rdv-per b { color: var(--nbt-rdv-ink); font-variant-numeric: tabular-nums; }
.nbt-rdv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.nbt-rdv-wk { display: grid; grid-template-columns: 56px repeat(6, minmax(0, 1fr)); }
.nbt-rdv-wk .nbt-rdv-dh { padding: 9px 10px; border-bottom: 1px solid var(--nbt-rdv-line); border-left: 1px solid var(--nbt-rdv-line); font-size: 12px; color: var(--nbt-rdv-muted); min-width: 0; }
.nbt-rdv-wk .nbt-rdv-dh b { display: block; font-size: 14px; color: var(--nbt-rdv-ink); }
.nbt-rdv-wk .nbt-rdv-dh.nbt-rdv-today { background: var(--nbt-rdv-pink); }
.nbt-rdv-wk .nbt-rdv-dh.nbt-rdv-today b { color: var(--nbt-rdv-red); }
.nbt-rdv-wk .nbt-rdv-dh .nbt-rdv-n { float: right; font-weight: 600; color: var(--nbt-rdv-ink); font-size: 12px; }
/* La hauteur des colonnes (9 h par défaut) est reprise en ligne par la page : la plage affichée
   épouse la semaine (D-WA107a), cette valeur n'est que le plancher d'une semaine ordinaire. */
.nbt-rdv-tc { position: relative; height: calc(var(--nbt-rdv-h) * 9); }
.nbt-rdv-tc span { position: absolute; right: 8px; font-size: 11px; color: #8A8794; transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.nbt-rdv-dc { position: relative; border-left: 1px solid var(--nbt-rdv-line); height: calc(var(--nbt-rdv-h) * 9); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--nbt-rdv-h) - 1px), #F0EEF2 calc(var(--nbt-rdv-h) - 1px) var(--nbt-rdv-h)); min-width: 0; }
.nbt-rdv-closed { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #F7F7F8 0 8px, #EFEEF2 8px 16px); display: grid; place-items: center; color: #8A8794; font-size: 12px; font-weight: 500; text-align: center; padding: 6px; }
.nbt-rdv-ap { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 4px 7px; font-size: 11.5px; line-height: 1.3; cursor: pointer; overflow: hidden; border-left: 3px solid; transition: box-shadow .15s, opacity .15s; z-index: 2; }
.nbt-rdv-ap:hover { box-shadow: 0 4px 14px rgba(20, 18, 26, .14); }
.nbt-rdv-ap .nbt-rdv-l1 { display: flex; gap: 4px; align-items: center; font-weight: 600; white-space: nowrap; overflow: hidden; }
.nbt-rdv-ap .nbt-rdv-l1 .nbt-rdv-t { overflow: hidden; text-overflow: ellipsis; }
.nbt-rdv-ap .nbt-rdv-l2 { display: flex; gap: 5px; align-items: center; white-space: nowrap; overflow: hidden; margin-top: 2px; font-size: 11px; }
.nbt-rdv-ap .nbt-rdv-l2 .nbt-rdv-st { font-size: 10.5px; padding: 0 6px; }
.nbt-rdv-ap.nbt-rdv-site { background: var(--nbt-rdv-blue-bg); border-color: var(--nbt-rdv-blue); }
.nbt-rdv-ap.nbt-rdv-staff { background: var(--nbt-rdv-pink); border-color: var(--nbt-rdv-red); }
.nbt-rdv-ap.nbt-rdv-mask { background: #F2F4F7; border-color: #98A2B3; color: #475467; }
/* Un bloc masqué porte la couleur de qui a réservé (D-WA107a) : le client reste caché, le collègue se lit. */
.nbt-rdv-ap.nbt-rdv-mask.nbt-rdv-c { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, #F2F4F7); }
.nbt-rdv-ap.nbt-rdv-busy { background: repeating-linear-gradient(135deg, #F2F4F7 0 6px, #E9EAEE 6px 12px); border-color: #98A2B3; color: #475467; }
.nbt-rdv-ap.nbt-rdv-cancelled { opacity: .5; }
.nbt-rdv-ap.nbt-rdv-dim { opacity: .18; }
.nbt-rdv-ap.nbt-rdv-sel { box-shadow: 0 0 0 2px var(--nbt-rdv-ink); }
.nbt-rdv-ap .nbt-rdv-flag { position: absolute; top: 3px; right: 5px; font-size: 11px; }
.nbt-rdv-nowl { position: absolute; left: 0; right: 0; height: 2px; background: var(--nbt-rdv-red); z-index: 3; }
.nbt-rdv-nowl::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--nbt-rdv-red); }
.nbt-rdv-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 18px; color: var(--nbt-rdv-muted); font-size: 12.5px; border-top: 1px solid var(--nbt-rdv-line); }
.nbt-rdv-warn { background: var(--nbt-rdv-amber-bg); border: 1px solid #FCD9A5; color: #78350f; border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
select.nbt-rdv-cons { border: 1px solid var(--nbt-rdv-line); border-radius: 8px; padding: 7px 9px; background: #fff; }
select.nbt-rdv-cons:disabled { color: #8A8794; background: #F7F7F8; cursor: not-allowed; }

/* ---- formulaire de réservation + carte « réservé » (onglet 📅 de la fiche) ---- */
.nbt-rdv-fs { border-top: 1px solid var(--nbt-rdv-line); padding: 14px 0; }
.nbt-rdv-fs:first-of-type { border-top: 0; padding-top: 2px; }
.nbt-rdv-fs h4 { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.nbt-rdv-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--nbt-rdv-ink); color: #fff; font-size: 11px; flex: 0 0 20px; }
.nbt-rdv-ff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.nbt-rdv-ff2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 12px; align-items: end; }
.nbt-rdv-inp label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--nbt-rdv-muted); margin-bottom: 4px; }
.nbt-rdv-inp input, .nbt-rdv-inp select, .nbt-rdv-inp textarea { width: 100%; border: 1px solid var(--nbt-rdv-line); border-radius: 8px; padding: 8px 10px; background: #fff; }
.nbt-rdv-inp textarea { min-height: 64px; resize: vertical; }
.nbt-rdv-inp input:focus, .nbt-rdv-inp textarea:focus { outline: 2px solid #F4C5CE; border-color: var(--nbt-rdv-red); }
.nbt-rdv-inp.nbt-rdv-todo input { border-color: #FCD9A5; background: #FFFCF5; }
.nbt-rdv-inp.nbt-rdv-err input, .nbt-rdv-inp.nbt-rdv-err select, .nbt-rdv-inp.nbt-rdv-err textarea { border-color: var(--nbt-rdv-red); background: #FFF5F6; }
.nbt-rdv-todo-t { font-size: 10.5px; font-weight: 600; color: var(--nbt-rdv-amber); background: var(--nbt-rdv-amber-bg); border-radius: 999px; padding: 0 6px; }
.nbt-rdv-req { color: var(--nbt-rdv-red); }
.nbt-rdv-opts { display: grid; gap: 10px; }
.nbt-rdv-opts.nbt-rdv-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nbt-rdv-oc { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--nbt-rdv-line); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: #fff; min-width: 0; }
.nbt-rdv-oc:hover { border-color: #cfccd4; }
.nbt-rdv-oc.nbt-rdv-on { border-color: var(--nbt-rdv-red); background: var(--nbt-rdv-pink); }
.nbt-rdv-oc input { accent-color: var(--nbt-rdv-red); margin: 3px 0 0; }
.nbt-rdv-oc b { display: block; font-weight: 600; }
.nbt-rdv-oc small { color: var(--nbt-rdv-muted); font-size: 12px; display: block; margin-top: 1px; }
.nbt-rdv-ro { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px dashed var(--nbt-rdv-line); border-radius: 10px; padding: 9px 12px; background: #FCFCFD; }
.nbt-rdv-spnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.nbt-rdv-sp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.nbt-rdv-sd { border: 1px solid var(--nbt-rdv-line); border-radius: 10px; padding: 8px 7px; min-width: 0; }
.nbt-rdv-sd h5 { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; text-align: center; }
.nbt-rdv-sd h5 small { display: block; font-weight: 400; color: var(--nbt-rdv-muted); }
.nbt-rdv-sd.nbt-rdv-today { border-color: #F4C5CE; background: #FFFBFC; }
.nbt-rdv-sl { display: flex; width: 100%; justify-content: center; align-items: baseline; gap: 4px; margin: 3px 0; padding: 5px 0; border-radius: 8px; border: 1px solid var(--nbt-rdv-line); background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.nbt-rdv-sl:hover:not(:disabled) { border-color: var(--nbt-rdv-red); color: var(--nbt-rdv-red); }
.nbt-rdv-sl.nbt-rdv-sel, .nbt-rdv-sl.nbt-rdv-sel:hover { background: var(--nbt-rdv-red); border-color: var(--nbt-rdv-red); color: #fff; }
.nbt-rdv-sl:disabled { background: #F7F7F8; color: #B0ADB8; border-color: #F0EEF2; cursor: not-allowed; font-weight: 400; }
.nbt-rdv-sl small { font-size: 10.5px; }
.nbt-rdv-sl.nbt-rdv-cur:disabled { background: #fff; color: var(--nbt-rdv-red-d); border: 1px dashed var(--nbt-rdv-red); }
.nbt-rdv-sd .nbt-rdv-cl { padding: 18px 4px; text-align: center; color: #8A8794; font-size: 12px; background: repeating-linear-gradient(135deg, #F7F7F8 0 8px, #EFEEF2 8px 16px); border-radius: 8px; }
.nbt-rdv-errbox { background: #FFF5F6; border: 1px solid #F4C5CE; color: var(--nbt-rdv-red-d); border-radius: 10px; padding: 9px 12px; margin: 0 0 10px; font-size: 13px; }
.nbt-rdv-chosen { font-size: 13px; margin-bottom: 10px; }
.nbt-rdv-ok { border: 1px solid #ABEFC6; background: #F6FEF9; border-radius: 12px; padding: 14px 16px; }
.nbt-rdv-okh { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.nbt-rdv-okh > div { display: flex; gap: 12px; align-items: flex-start; }
.nbt-rdv-okic { width: 30px; height: 30px; border-radius: 50%; background: var(--nbt-rdv-green); color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 30px; }
.nbt-rdv-okh b { font-size: 15px; }
.nbt-rdv-okl { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.nbt-rdv-okl li { display: flex; gap: 8px; align-items: baseline; }
.nbt-rdv-okl .nbt-rdv-chk { color: var(--nbt-rdv-green); font-weight: 700; width: 16px; flex: 0 0 16px; text-align: center; }

/* ---- tiroir ----
   La maquette ouvre sous sa barre de 42 px (hors produit) : ici, depuis le haut de l'écran.
   Son ordre chrome < tiroir < fenêtre est gardé sur l'échelle de Filament : barre du haut 30,
   modale 40 — le tiroir passe donc sous 40, sinon l'aperçu d'un e-mail s'ouvrirait derrière lui. */
.nbt-rdv-ov { position: fixed; inset: 0; background: rgba(20, 18, 26, .28); z-index: 38; }
.nbt-rdv-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; background: #fff; z-index: 39; box-shadow: -20px 0 50px rgba(20, 18, 26, .15); display: flex; flex-direction: column; }
.nbt-rdv-dw-h { padding: 16px 20px; border-bottom: 1px solid var(--nbt-rdv-line); display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.nbt-rdv-dw-h h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.nbt-rdv-x { border: 1px solid var(--nbt-rdv-line); background: #fff; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; flex: 0 0 32px; }
.nbt-rdv-dw-b { padding: 4px 20px 24px; overflow: auto; flex: 1; }
.nbt-rdv-dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--nbt-rdv-line); font-size: 13.5px; }
.nbt-rdv-dl > .nbt-rdv-k { margin: 0; }
.nbt-rdv-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 0 4px; }
.nbt-rdv-subf { background: var(--nbt-rdv-bg); border: 1px solid var(--nbt-rdv-line); border-radius: 10px; padding: 12px; margin-top: 10px; }
.nbt-rdv-subf input[type=text], .nbt-rdv-subf select { width: 100%; border: 1px solid var(--nbt-rdv-line); border-radius: 8px; padding: 8px 10px; background: #fff; margin-top: 6px; }
.nbt-rdv-gtitle { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9A97A3; margin: 20px 0 8px; }
.nbt-rdv-gcal { border: 1px solid #DADCE0; border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; font-size: 13px; color: #3C4043; background: #fff; }
.nbt-rdv-gsq { width: 14px; height: 14px; border-radius: 4px; margin-top: 4px; }
.nbt-rdv-gcal .nbt-rdv-gt { font-size: 17px; color: #1F1F1F; margin-bottom: 2px; }
.nbt-rdv-gcal .nbt-rdv-gl { margin-top: 8px; display: flex; gap: 8px; }
.nbt-rdv-gmeet { display: inline-flex; margin: 10px 0 2px; background: #1A73E8; color: #fff; border-radius: 6px; padding: 6px 12px; font-weight: 500; cursor: pointer; }
.nbt-rdv-warnbox { background: var(--nbt-rdv-amber-bg); border: 1px solid #FCD9A5; color: #78350f; border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; font-size: 13px; }
.nbt-rdv-ml { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--nbt-rdv-line); font-size: 13.5px; }
/* Aperçu d'un e-mail : l'en-tête et le cadre ; le corps est dans un <iframe sandbox srcdoc> (DV14). */
.nbt-rdv-mailv { border: 1px solid var(--nbt-rdv-line); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.nbt-rdv-mailv .nbt-rdv-mh { background: var(--nbt-rdv-bg); padding: 10px 14px; font-size: 12.5px; color: var(--nbt-rdv-muted); line-height: 1.6; }
.nbt-rdv-mailv .nbt-rdv-mb { padding: 4px 16px 10px; font-size: 14px; line-height: 1.55; }

/* ---- Paiements RDV ---- */
.nbt-rdv-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nbt-rdv-fseg { display: inline-flex; gap: 2px; background: #fff; border: 1px solid var(--nbt-rdv-line); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.nbt-rdv-fseg button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; cursor: pointer; color: var(--nbt-rdv-muted); font-size: 13px; }
.nbt-rdv-fseg button.nbt-rdv-on { background: var(--nbt-rdv-pink); color: var(--nbt-rdv-red-d); font-weight: 600; }
.nbt-rdv-fseg button .nbt-rdv-dot { margin-right: 4px; }
.nbt-rdv-fseg button .nbt-rdv-n { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 3px; }
table.nbt-rdv-lt { width: 100%; border-collapse: collapse; font-size: 13px; }
.nbt-rdv-lt th { text-align: left; font-weight: 500; color: var(--nbt-rdv-muted); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--nbt-rdv-line); white-space: nowrap; }
.nbt-rdv-lt td { padding: 11px 12px; border-bottom: 1px solid var(--nbt-rdv-line); vertical-align: top; }
.nbt-rdv-lt tr:last-child td { border-bottom: 0; }
.nbt-rdv-lt tbody tr { cursor: pointer; }
.nbt-rdv-lt tbody tr:hover td { background: #FBFAFB; }
.nbt-rdv-lt th:first-child, .nbt-rdv-lt td:first-child { padding-left: 18px; }
.nbt-rdv-lt th:last-child, .nbt-rdv-lt td:last-child { padding-right: 18px; }

/* ---- Paramètres › Agenda Google et Services (AGENDA-30) ---- */
.nbt-rdv-gs { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.nbt-rdv-gs > div { display: flex; gap: 14px; align-items: center; }
.nbt-rdv-gdot { width: 10px; height: 10px; border-radius: 50%; background: var(--nbt-rdv-green); box-shadow: 0 0 0 4px var(--nbt-rdv-green-bg); flex: 0 0 10px; }
.nbt-rdv-kv { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; font-size: 13.5px; }
.nbt-rdv-kv > div { padding: 11px 0; border-top: 1px solid var(--nbt-rdv-line); }
table.nbt-rdv-st2 { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nbt-rdv-st2 th { text-align: right; font-weight: 500; color: var(--nbt-rdv-muted); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--nbt-rdv-line); white-space: nowrap; }
.nbt-rdv-st2 td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--nbt-rdv-line); font-variant-numeric: tabular-nums; }
.nbt-rdv-st2 th:first-child, .nbt-rdv-st2 td:first-child { text-align: left; padding-left: 18px; }

/* La dernière ligne du fil qui clignote après un geste (« it fresh », U5 → AGENDA-23). Le fil est hors
   de nbt-rdv : couleurs écrites en clair. */
/* La pastille rose des lignes de rendez-vous du fil (« ic cal », v4:121), à côté de ses sœurs de nbt-fiche-activite. */
.nbt-act-ic.cal { background: #FDEEF1; }
@keyframes nbt-rdv-flash { 0% { background: #FDEEF1; } 100% { background: #fff; } }
.nbt-rdv-fresh { animation: nbt-rdv-flash 2s ease-out; border-radius: 8px; }
/* Le fil, lui, passe au sombre : un éclair blanc effacerait son texte clair. */
@keyframes nbt-rdv-flash-sombre { 0% { background: color-mix(in oklab, #C8102E 25%, transparent); } 100% { background: transparent; } }
.dark .nbt-rdv-fresh { animation-name: nbt-rdv-flash-sombre; }

@media (prefers-reduced-motion: reduce) {
    .nbt-rdv *, .nbt-rdv-fresh { animation: none !important; transition: none !important; }
}

/* ── AGENDA-13 · en-tête de page et vue semaine (v4:57-61, v4:164, v4:180, v4:858-893) ──
   L'en-tête crumbs, head, h1, sub, btns de la maquette, puis ce qu'elle écrivait en style="" : la couleur
   d'un agent passe par --c (pastille, bloc), le coin sans bordure, le voile d'un jour fermé ou d'après la
   fermeture. Seules la géométrie (haut, hauteur) et --c restent en ligne. */
.nbt-rdv-crumbs { color: var(--nbt-rdv-muted); font-size: 13px; }
.nbt-rdv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 0 14px; flex-wrap: wrap; }
.nbt-rdv-head h1 { font-size: 28px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.nbt-rdv-sub { color: var(--nbt-rdv-muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nbt-rdv-btns { display: flex; gap: 10px; padding-top: 6px; flex-wrap: wrap; align-items: center; }
.nbt-rdv-dot.nbt-rdv-c { background: var(--c); }
.nbt-rdv-dot.nbt-rdv-dsite { background: var(--nbt-rdv-blue-bg); border: 1px solid var(--nbt-rdv-blue); }
.nbt-rdv-dot.nbt-rdv-doccupe { background: #E9EAEE; border: 1px solid #98A2B3; }
.nbt-rdv-ap.nbt-rdv-staff.nbt-rdv-c { background: color-mix(in srgb, var(--c) 11%, #fff); border-color: var(--c); }
.nbt-rdv-wk .nbt-rdv-dh.nbt-rdv-coin { border-left: 0; }
.nbt-rdv-closed.nbt-rdv-tout { top: 0; bottom: 0; }
.nbt-rdv-closed.nbt-rdv-apres { bottom: 0; }

/* ── AGENDA-15 · tiroir en lecture et fenêtre « Voir » d'un e-mail (v4:290-291, v4:328, v4:919-955, v4:1082-1084) ──
   Ce que la maquette écrivait en style="" : la rangée des pastilles de l'en-tête, la ligne grise « couleur … · privé »,
   l'écart de l'aide sous le bloc Google, l'objet en encre. La fenêtre est celle de la maquette (mov, modal, 600 px),
   au-dessus du tiroir ; le corps de l'e-mail est la page du site, dans un cadre isolé (DV14) dont la hauteur suit
   son contenu au chargement. */
.nbt-rdv-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.nbt-rdv-gcal .nbt-rdv-gl.nbt-rdv-gcol { color: #70757A; }
.nbt-rdv-hint.nbt-rdv-ghint { margin-top: 6px; }
.nbt-rdv-mov { position: fixed; inset: 0; background: rgba(20, 18, 26, .42); z-index: 41; }
.nbt-rdv-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 42; width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(20, 18, 26, .3); padding: 22px 22px 18px; }
.nbt-rdv-modal h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.nbt-rdv-mailv .nbt-rdv-mh b { color: var(--nbt-rdv-ink); }
.nbt-rdv-mframe { display: block; width: 100%; height: 360px; border: 0; background: #fff; }

/* ---- onglet 📅 de la fiche : les style="" de la maquette (v4:573, 797-840), devenus des règles (AGENDA-17) ---- */
.nbt-rdv-fiche .nbt-rdv-avert { margin: 0 0 12px; }
.nbt-rdv-fiche .nbt-rdv-ff > .nbt-rdv-hint { align-self: end; padding-bottom: 6px; }
.nbt-rdv-fiche .nbt-rdv-ro .nbt-rdv-k { margin: 0; }
.nbt-rdv-fiche .nbt-rdv-ff2 + .nbt-rdv-inp { margin-top: 10px; }
.nbt-rdv-fiche .nbt-rdv-sd .nbt-rdv-hint { text-align: center; margin-top: 4px; }
.nbt-rdv-fiche .nbt-rdv-sp + .nbt-rdv-hint, .nbt-rdv-fiche .nbt-rdv-avert + .nbt-rdv-hint { margin-top: 8px; }
.nbt-rdv-fiche .nbt-rdv-ro + .nbt-rdv-hint { margin-top: 6px; }
.nbt-rdv-fiche .nbt-rdv-ro-haut { margin-bottom: 8px; }
.nbt-rdv-fiche .nbt-rdv-esp { height: 8px; }
.nbt-rdv-fiche .nbt-rdv-subf label { display: flex; gap: 8px; align-items: center; }
.nbt-rdv-fiche .nbt-rdv-subf input[type=checkbox] { accent-color: var(--nbt-rdv-red); }
.nbt-rdv-fiche .nbt-rdv-chosen + .nbt-rdv-row { margin-top: 0; }
/* Meet sans Agenda Google (DV18) : visible, pas cliquable. */
.nbt-rdv-oc.nbt-rdv-off { cursor: not-allowed; opacity: .55; }

/* ---- onglet 📅 : la carte « Rendez-vous réservé » (v4:767-788, AGENDA-19) ---- */
.nbt-rdv-fiche .nbt-rdv-ok .nbt-rdv-row + .nbt-rdv-hint { margin-top: 10px; }
/* wa.me et l'agenda sont des liens (le bloqueur de fenêtres laisse passer un <a>) : même allure que les boutons. */
.nbt-rdv-fiche a.nbt-rdv-btn { color: inherit; text-decoration: none; }

/* ── AGENDA-20 · gestes du tiroir (v4:908-942) ──
   Ce que la maquette écrivait en style="" : la rangée des boutons sous « Paiement » (8 px) et sous
   « À l’avance » (6 px), la boîte rouge d'un sous-formulaire, l'écart de la ligne « plus d’action ».
   « Déplacer » est un lien vers la fiche : même allure que les boutons. */
.nbt-rdv-row.nbt-rdv-m8 { margin-top: 8px; }
.nbt-rdv-row.nbt-rdv-m6 { margin-top: 6px; }
.nbt-rdv-errbox.nbt-rdv-err-sub { margin: 10px 0 0; }
.nbt-rdv-hint.nbt-rdv-fini { padding-top: 12px; }
.nbt-rdv-drawer a.nbt-rdv-btn { color: inherit; text-decoration: none; }

/* ── AGENDA-21 · payer ou offrir depuis le tiroir (v4:908-916) : les style="" de la maquette ──
   les deux choix sous le titre (8 px), l'étiquette de la référence du virement, l'aide « ✉️ Ensuite… ». */
.nbt-rdv-opts.nbt-rdv-m8 { margin-top: 8px; }
.nbt-rdv-hint.nbt-rdv-lref { display: block; margin-top: 10px; }
.nbt-rdv-hint.nbt-rdv-m10 { margin-top: 10px; }

/* ── AGENDA-22 · Paiements RDV (v4:976-996) : la recherche et la ligne « Rien ici. », écrites en style="" dans la maquette ── */
.nbt-rdv-pq { border: 1px solid var(--nbt-rdv-line); border-radius: 9px; padding: 8px 12px; width: 320px; max-width: 100%; }
.nbt-rdv-lt td.nbt-rdv-vide { padding: 26px; text-align: center; }

/* ── AGENDA-30 · Paramètres › Agenda Google et Services : ce que la maquette écrit en style="" (v4:1012, v4:1019,
   v4:1029-1031, v4:993) et les états de la connexion qu'elle ne dessine pas (DA4 : gris non connecté, rouge
   interrompue ou test en échec). La carte « À traiter » passe à l'orange dès qu'il y a une ligne. */
.nbt-rdv-gdot.nbt-rdv-off { background: #98A2B3; box-shadow: 0 0 0 4px #F2F4F7; }
.nbt-rdv-gdot.nbt-rdv-ko { background: var(--nbt-rdv-red); box-shadow: 0 0 0 4px var(--nbt-rdv-pink); }
.nbt-rdv-kv.nbt-rdv-kv-haut { margin-top: 16px; }
.nbt-rdv-card.nbt-rdv-atraiter { background: #FFF4ED; border-color: #FDD8C0; }
.nbt-rdv-atraiter h3 { color: #B93815; }
.nbt-rdv-atraiter-l { margin: 4px 0 10px; }
.nbt-rdv-card.nbt-rdv-760 { max-width: 760px; }
.nbt-rdv-st2 td.nbt-rdv-vide { padding: 26px; text-align: center; }

/* Téléphone (Karim 5 oct) : une colonne ; le libellé au-dessus de sa valeur ; la semaine défile de côté. */
@media (max-width: 767px) {
    .nbt-rdv-grid, .nbt-rdv-ff, .nbt-rdv-ff2, .nbt-rdv-opts.nbt-rdv-c3, .nbt-rdv-kv { grid-template-columns: minmax(0, 1fr); }
    .nbt-rdv-kv > div:nth-child(even) { border-top: 0; padding-top: 0; }
    .nbt-rdv-sp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nbt-rdv-wk { overflow-x: auto; grid-template-columns: 44px repeat(6, minmax(104px, 1fr)); }
}

/* ---- Fiche modifiable (maquette fiche-modifiable, écran A, Karim 7 oct) : la carte « Contact » de la fiche en
   modification — « Modifier » dans son en-tête, le numéro verrouillé, la ligne d'erreur, le pied. Les cases
   reprennent celles du bloc « Client » ci-dessus (nbt-rdv-inp, nbt-rdv-todo, nbt-rdv-err). Le verrou sert aussi
   au Téléphone du formulaire de réservation (règle 2). ---- */
/* Le bouton de l'en-tête garde la hauteur de ligne du navigateur, comme dans la maquette (Filament la fait hériter). */
.fi-section-header-after-ctn .nbt-rdv-btn { line-height: normal; }
.nbt-fiche-prends { color: #6B6875; font-size: 12.5px; text-align: right; }
.nbt-fiche-verrou { position: relative; }
.nbt-fiche-verrou input { background: #F7F7F8 !important; color: #6B6875; cursor: not-allowed; padding-right: 34px !important; }
.nbt-fiche-verrou svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #8A8794; pointer-events: none; }
.nbt-fiche-aide { font-size: 12px; color: #6B6875; margin-top: 4px; line-height: 1.35; }
.nbt-fiche-err { font-size: 12px; color: #A50D26; margin-top: 4px; font-weight: 500; }
/* Le pied est une case de la grille de la carte (24 px d'écart) : 24 − 8 = les 16 px de la maquette sous « État ». */
.nbt-fiche-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: -8px; padding-top: 14px; border-top: 1px solid #E7E5EA; }
.nbt-fiche-btns { display: flex; gap: 8px; margin-left: auto; }