/* ============================================================
   DentalSuite - Design System Boutique Editoriale
   Palette partagee avec DentalStock, DentalAgenda,
   DentalDevis et DentalAvis.
   ============================================================ */

:root {
  /* Surfaces ivoire */
  --paper: #FFFCF5;
  --ivory: #FAF6EE;
  --ivory-soft: #F2EBDB;
  --ivory-deep: #E9DFC8;
  --rule: #D9CDB2;
  --rule-soft: #E8DDC4;

  /* Terracotta - couleur signature DentalSuite */
  --terra: #B85940;
  --terra-deep: #8C3D2A;
  --terra-light: #D88466;
  --terra-bg: #F4DFD3;
  --terra-mist: #FBEEE5;

  /* Alias pour compatibilité avec le CSS prod copié verbatim */
  --terracotta:      var(--terra);
  --terracotta-deep: var(--terra-deep);
  --terracotta-bg:   var(--terra-bg);

  /* Sage - vert botanique secondaire */
  --sage: #6B7A5A;
  --sage-deep: #4F5C42;
  --sage-bg: #E4E8DD;

  /* Encre - textes */
  --ink: #2A1F18;
  --ink-soft: #4A3D33;
  --ink-mute: #8B7B6A;
  --ink-faint: #B5A89A;

  /* Etats */
  --warn: #C68A2E;
  --warn-bg: #F5E7C9;
  --danger: #A6321F;
  --danger-bg: #F7DDD5;
  --success: #6B7A5A;
  --success-bg: #E4E8DD;

  /* Accents par application (portail). Ortho & Patient alignés sur la couleur
     de charte du favicon (source de vérité) : ortho #8A5A78, patient #4A7C6F. */
  --accent-stock: #3F5E72;
  --accent-agenda: #6B7A5A;
  --accent-ortho: #8A5A78;
  --accent-devis: #8C3D2A;
  --accent-avis: #C9923A;
  --accent-patient: #4A7C6F;
  --accent-admin: #B85940;

  /* Polices */
  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(60, 40, 25, 0.05);
  --shadow-md: 0 4px 12px rgba(60, 40, 25, 0.08);
  --shadow-lg: 0 12px 32px rgba(60, 40, 25, 0.12);

  /* Rayons */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* ============================================================
     Design System v1 — Phase B.1 (extension additive)
     Échelles ajoutées sans casser l'existant : les composants
     migrent progressivement vers ces tokens (B.2 = Stock, B.3 = Agenda).
     ============================================================ */

  /* Échelle typographique — base 16px, conversion ÷16 → rem (accessibilité zoom) */
  --text-xs:   0.6875rem;  /* 11px — eyebrow uppercase, badges, meta */
  --text-sm:   0.8125rem;  /* 13px — UI dense : boutons, inputs, cells */
  --text-base: 0.9375rem;  /* 15px — body, alignée sur body { font-size: 15px } */
  --text-md:   1.0625rem;  /* 17px — sous-titres de section */
  --text-lg:   1.25rem;    /* 20px — H3, titres modal sm */
  --text-xl:   1.5rem;     /* 24px — H2, titres modal */
  --text-2xl:  2rem;       /* 32px — stat-values, H1 page-header */
  --text-3xl:  2.75rem;    /* 44px — hero portail "Bonjour" */

  /* Line-heights associés (utilisés avec les --text-* ci-dessus) */
  --leading-tight:    1.1;
  --leading-snug:     1.2;
  --leading-normal:   1.4;
  --leading-relaxed:  1.55;

  /* Échelle d'espacement — base-4 stricte (Apple/Linear/Notion) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Rayons étendus — 7 valeurs, plus aucun radius libre dans le code cible */
  --radius-xs:   2px;
  --radius-md:  12px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Couleurs additionnelles (ex-hex hardcodés promus en tokens) */
  --terra-warm: #C8694C;  /* gradient cta-add, fab-add hover */
  --warn-deep:  #7A5715;  /* stock-alert-pill.warning text */
  --sage-mist:  #EEF1E7;  /* symétrie avec terra-mist (famille botanique) */

  /* Easings — anims subtils Apple-like */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset minimal */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184, 89, 64, 0.025), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(107, 122, 90, 0.03), transparent 40%);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 24px 16px;
}

main {
  max-width: 900px;
  margin: 0 auto;
}

/* Vues métier larges (Stock, Agenda, Devis, Ortho, Avis, Patients) : on relâche
   la contrainte 900px → 1680px = la largeur de contenu COMMUNE à ces 6 apps
   (.container / #patients-view sont tous à 1680px). En-tête (.app-header) ET
   contenu étant tous deux enfants de <main>, ce cap partagé les aligne
   AUTOMATIQUEMENT (plus de débordement latéral de la barre sur grand écran).
   Admin (main base 900px) et Portail (main.portal-wide, cadre) non concernés.
   Set FULLWIDTH_VIEWS toggle la classe via showView() dans app.js. */
main.main-wide {
  max-width: 1680px;
  /* Cadre éditorial — UNE carte englobant en-tête + contenu, comme main.portal-wide.
     ⚠️ PAS d'overflow:hidden : les onglets / en-têtes de table des apps utilisent
     position:sticky top:0 (stock.css/devis.css/avis.css) — overflow:hidden les
     casserait. Les coins arrondis sont assurés par le radius de l'en-tête (haut)
     et du contenu (bas), pas par un clip. Gouttières mobiles via body padding. */
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* En-tête : arrondi en haut de la carte (rôle des coins sans clipper). */
main.main-wide .app-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* Contenu des 6 apps : neutralise le cadre INTERNE (plus de double carte) et
   arrondit le bas de la carte globale. (#patients-view n'a pas de cadre propre :
   seul l'arrondi bas s'applique.) */
main.main-wide #stock-view,
main.main-wide #agenda-view,
main.main-wide #devis-view,
main.main-wide #ortho-view,
main.main-wide #avis-view,
main.main-wide #patients-view {
  border: none;
  box-shadow: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Administration (vue étroite 900px, hors main-wide) : même carte unifiée.
   Scopé via :has() à la vue Admin VISIBLE → NE touche PAS l'écran de login
   (qui partage `main` base mais a #admin-view masqué). */
main:has(#admin-view:not(.hidden)) {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
main:has(#admin-view:not(.hidden)) .app-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
main:has(#admin-view:not(.hidden)) #admin-view {
  border: none;
  box-shadow: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; }

.hidden {
  display: none !important;
}

/* ============================================================
   Message global
   ============================================================ */

#message {
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--sans);
}

#message.success {
  background: var(--success-bg);
  color: var(--sage-deep);
  border: 1px solid var(--sage);
}

#message.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}

#message.info {
  background: var(--ivory-soft);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}

/* ============================================================
   Login
   ============================================================ */

.login-card {
  max-width: 420px;
  margin: 60px auto 0;
  background: var(--paper);
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule-soft);
  text-align: center;
}

.login-mark {
  display: block;
  width: 80px;
  height: auto;
  margin: 0 auto 24px;
}

.login-card h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  color: var(--ink);
  margin-bottom: 10px;
}

.subtitle {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 28px;
}

.login-card form {
  text-align: left;
}

/* ============================================================
   Formulaires
   ============================================================ */

form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 8px;
  color: var(--ink-soft);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder {
  color: var(--ink-faint);
}

input:focus,
select:focus {
  outline: 2px solid var(--terra-mist);
  outline-offset: 0;
  border-color: var(--terra);
}

/* ============================================================
   Boutons
   ============================================================ */

button {
  font-family: var(--sans);
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

button:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--terra);
  color: var(--paper);
  margin-top: 16px;
}

.btn-primary:hover {
  background: var(--terra-deep);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
}

.btn-secondary:hover {
  background: var(--ivory-soft);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--rule);
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* ============================================================
   HEADER GLOBAL (portail + vue admin) — design éditorial light
   ============================================================ */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}

.app-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.app-header-brand:hover { opacity: 0.75; }

.app-header-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--terracotta);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  font-style: normal;
  line-height: 1;
}
.app-header-brand-mark i {
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  margin-left: 1px;
}

.app-header-brand-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .app-header { padding: 12px 16px; }
  .app-header-brand-text { font-size: 17px; }
}

/* Phase B.1 : .user-info SUPPRIMÉ (doublon entre .app-header et .header Stock).
   Les enfants directs (.sync-indicator, #user-email, #logout-btn) sont désormais
   posés directement dans .app-header-right qui porte le flex layout. */

/* Bouton retour au portail */
.btn-back {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--sans);
  transition: all 0.2s ease;
}

.btn-back:hover {
  background: var(--ivory-deep);
  border-color: var(--ink-mute);
  color: var(--ink);
}

/* ============================================================
   Portail (cartes apps style iCloud)
   ============================================================ */

.portal-greeting {
  text-align: center;
  margin: 32px 0 36px;
}

.portal-hello {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 10px;
}

.portal-hello-email {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all 0.2s ease;
}

.app-card:hover:not(.is-disabled) {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--app-accent, var(--rule));
}

.app-card:focus-visible {
  outline: 2px solid var(--app-accent, var(--terra));
  outline-offset: 2px;
}

.app-card.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.app-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  padding: 4px 9px;
  border-radius: 999px;
}

.app-monogram {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background: var(--app-accent, var(--terra));
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Quand le monogramme contient un favicon SVG, neutraliser le fond
   (le SVG a déjà son fond intégré) */
.app-monogram:has(.app-monogram-icon) {
  background: transparent;
  box-shadow: none;
}

.app-monogram-icon {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  display: block;
}

.app-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.app-title-suffix {
  color: var(--app-accent, var(--terra));
}

.app-tagline {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* Placeholder app (DentalStock en attendant) */
.app-placeholder {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 80px 40px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.app-placeholder-monogram {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: var(--app-accent, var(--terra));
  color: var(--paper);
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 54px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

.app-placeholder h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  color: var(--ink);
  margin-bottom: 10px;
}

.app-placeholder p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   CSS prod copie verbatim (Patch V2 corrige)
   Sections : .container / .page-header* / .version-badge /
   #user-email / .sync-* / .content / .tab-badge / .lock-indicator /
   .stock-alert-banner / .stock-alert-pill*
   (Phase B.1 : ex .header → .page-header, ex #userEmail → #user-email,
   .user-info doublon supprimé)
   ============================================================ */

/* =============================================================
   CONTENEUR PRINCIPAL — iso-prod
   ============================================================= */
.container {
  max-width: 1680px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* overflow: hidden retiré — empêchait la nav `position: sticky`.
     Les enfants ont leurs propres backgrounds, les coins arrondis tiennent. */
}

/* =============================================================
   PAGE HEADER ÉDITORIAL — bandeau eyebrow + H1 italique INTERNE
   à chaque vue d'app (ex .header Stock). Phase B.1 : user-info /
   sync / portal-back / logout MIGRÉS vers .app-header global.
   ============================================================= */
.page-header {
  background: var(--ivory-soft);
  border-bottom: 1px solid var(--rule);
  padding: 20px 48px 18px;
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 48px; right: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--terracotta), transparent);
  opacity: 0.4;
}

.page-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.page-header-left { flex: 1; min-width: 280px; }

/* « Eyebrow » au-dessus du titre */
.version-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  background: transparent;
  padding: 0;
  margin-bottom: 6px;
}

/* B.3.1 adj — Modifier "natural" pour casse mixte (CamelCase préservée).
   Différence ASSUMÉE avec Stock : Stock garde l'eyebrow en majuscules (« DENTALSTOCK… »),
   Agenda l'affiche en casse mixte (« DentalAgenda … »). Arbitrage explicite David.
   Pattern : Stripe / Linear / Notion utilisent sentence-case dans les sub-titles
   modernes (vs ALL-CAPS Bauhaus old-school). Reset letter-spacing à 0.02em pour
   éviter l'effet "espacé trop large" qui sert à absorber les capitales. */
.version-badge.version-badge--natural {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Titre principal en italique léger */
.page-header h1 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.page-header h1 .amp { color: var(--terracotta); font-weight: 400; }

/* Email pill global (#user-email dans .app-header-right) — Phase B.1 :
   ex-#userEmail (Stock), désormais l'unique chip email à l'écran. */
#user-email {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Bouton « Synchronisé » (sync-indicator/sync-dot) RETIRÉ couche 2 :
   il était décoratif (vestige Firebase non chargé). HTML + CSS supprimés. */

/* =============================================================
   CONTENT WRAPPER — iso-prod
   ============================================================= */
.content {
  padding: 28px 48px 40px;
  min-height: 500px;
  background: var(--paper);
}

/* =============================================================
   TAB-BADGE + LOCK-INDICATOR — iso-prod
   (compléments aux .tab existants)
   ============================================================= */
.tab-badge {
  /* Format s2 (harmonisation 10/06) : compteur compact dans la pill */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 99px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-family: var(--sans);
  font-style: normal;
}
.tab.active .tab-badge {
  background: var(--paper);
  color: var(--terracotta);
}

/* F1 — Variant URGENT du tab-badge (pattern prod index2 l.377 .badge-inline.urgent-inline).
   Appliqué dynamiquement par updateAgendaTabBadges() quand : RDV urgences EN ATTENTE > 0
   (toujours urgent), Tâches non-done overdue > 0, ou cat-tab Urgences niveau 2 > 0.
   Couleur var(--danger) (pas hex hardcodé prod #c0392b). Animation 1.5s pulse. */
.tab-badge.tab-badge--urgent {
  background: var(--danger);
  color: var(--paper);
  animation: tabBadgePulseUrgent 1.5s infinite;
}
.tab.active .tab-badge.tab-badge--urgent {
  background: var(--paper);
  color: var(--danger);
}
@keyframes tabBadgePulseUrgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Variant urgent niveau 2 (chips 10/06) : pill danger pleine + pulse
   CONSERVÉ (comportement métier — urgences en attente). */
.agenda-rdv-cat-badge.tab-badge--urgent {
  background: var(--danger);
  color: var(--paper);
  animation: tabBadgePulseUrgent 1.5s infinite;
}
.agenda-rdv-cat-tab.active .agenda-rdv-cat-badge.tab-badge--urgent {
  background: var(--danger);
  color: var(--paper);
}

.lock-indicator {
  display: inline-block;
  font-size: 11px;
  margin-left: 2px;
  opacity: 0.85;
  vertical-align: middle;
  font-style: normal;
}

/* =============================================================
   BANDEAU SLIM D'ALERTES — iso-prod
   ============================================================= */
/* Phase B.2 #2 — Legacy alertes SUPPRIMÉES (.stock-alert-banner + .stock-alert-pill
   + variants .urgent / .warning). Atom unifié .ds-alert (variants --danger / --warn
   / --info) défini plus loin, callsites Prothèses retard + Implants/Ortho à commander. */

/* ============================================================
   Onglets (pills serif — harmonisation 10/06, iso Stock/Ortho/
   Devis/Avis). Classe PARTAGÉE : Agenda + Administration +
   DentalPatient migrent ensemble (option B validée).
   ============================================================ */

.tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border-bottom: 0;
  margin-bottom: 20px;
  padding: 0;
  flex-wrap: wrap;
}

.tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  color: var(--ink-soft);
  padding: 10px 20px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14.5px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s var(--ease-out);
}

/* display:inline-flex écraserait l'UA [hidden]{display:none} — onglets
   conditionnels (ex. « Patients en pause ») : on restaure le masquage. */
.tab[hidden] {
  display: none;
}

.tab:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--ink-mute);
}

.tab.active {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
  box-shadow: var(--shadow-md);
}

/* Placement des onglets Administration — SCOPÉ #admin-view (harmonisation 11/06).
   La base .tabs a padding:0 → les pills collaient au bord du conteneur (inset 0)
   alors que header (.page-header) et contenu (.content) sont à 48px. On aligne le
   bandeau d'onglets sur cet inset + respiration verticale (même esprit que
   #agenda-view .tabs). On NE touche PAS la classe partagée .tab/.tabs : Agenda et
   DentalPatient (qui la consomment aussi) restent à leur placement de base. */
#admin-view .tabs {
  padding: 20px 48px 4px;
  margin-bottom: 0;
  gap: 10px;
  background: var(--paper);
}
@media (max-width: 640px) {
  #admin-view .tabs { padding: 14px 16px 4px; gap: 8px; }
}

/* Header + onglets DentalPatient — SCOPÉ #patients-view (harmonisation, inset 48px
   comme les autres modules — Ortho/Agenda/Admin). Header, bandeau d'onglets ET
   carte de contenu .tab-content alignés à 48px (voir règle .tab-content plus bas).
   Classe partagée .tab/.tabs NON touchée → Admin (48px) et Agenda (48px) intacts. */
#patients-view .page-header { padding: 20px 48px 18px; }
#patients-view .page-header::after { left: 48px; right: 48px; }
#patients-view .tabs {
  padding: 16px 48px 14px;
  margin-bottom: 0;
  gap: 10px;
  background: var(--paper);
}
/* Contenu : la carte-conteneur .tab-content (qui enveloppe les panneaux Patient)
   porte un padding global de 24px → on l'aligne sur l'inset 48px du header et du
   bandeau d'onglets. Scopé #patients-view → .tab-content global (Admin/Stock) intact. */
#patients-view .tab-content { padding: 24px 48px; }
@media (max-width: 640px) {
  #patients-view .page-header { padding: 16px 16px 14px; }
  #patients-view .page-header::after { left: 16px; right: 16px; }
  #patients-view .tabs { padding: 12px 16px 4px; gap: 8px; }
  #patients-view .tab-content { padding: 16px; }
}

/* ============================================================
   Panneaux
   ============================================================ */

.tab-content {
  background: var(--paper);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-sm);
}

/* Bascule entre panneaux d'onglets du module Stock (iso-prod) :
   un seul .tab-content visible a la fois, celui qui porte .active.
   Scope #stock-view pour ne PAS impacter le module Administration
   (qui utilise aussi .tab-content mais bascule via .hidden cote app.js).
   Le padding/border de la regle generique ci-dessus est neutralise
   pour le module Stock car .content fournit deja son propre cadrage. */



.placeholder {
  color: var(--ink-mute);
  font-style: italic;
  text-align: center;
  padding: 32px 0;
}

/* Formulaire inline (ajout praticien / prothesiste / teinte) */
.inline-form {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.inline-form input {
  flex: 1 1 160px;
  min-width: 0;
}

.inline-form button {
  margin-top: 0;
  white-space: nowrap;
}

/* ============================================================
   Listes
   ============================================================ */

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ivory);
  gap: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.list-item:hover {
  border-color: var(--rule);
  background: var(--ivory-soft);
}

.list-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.list-item-name {
  font-weight: 500;
  color: var(--ink);
}

.list-item-meta {
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.list-empty {
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  padding: 24px 0;
  font-family: var(--serif);
}

/* ---- Couleur praticien (Admin) : pastille inline + réinitialisation ---- */
.list-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.praticien-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.praticien-color-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

/* couleur_hex NULL : pastille neutre (bordure pointillée + atténuée) */
.praticien-color-swatch.swatch-undefined {
  border-style: dashed;
  opacity: 0.6;
}

.btn-reset-color {
  border: 1px solid var(--rule-soft);
  background: var(--ivory);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 4px 8px;
  color: var(--ink-soft);
}
.btn-reset-color:hover {
  border-color: var(--rule);
  background: var(--ivory-soft);
}

.color-opt-in {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.color-opt-in input[type="color"] {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
}
.color-opt-in input[type="color"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   Carte info (Mon cabinet)
   ============================================================ */

.info-card {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ivory);
  padding: 24px 24px 12px;
}

.info-card-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
}

.info-row:first-of-type {
  border-top: none;
}

.info-label {
  font-family: var(--sans);
  color: var(--ink-mute);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.info-value {
  color: var(--ink);
  font-size: 0.95rem;
  text-align: right;
  word-break: break-word;
}

/* ============================================================
   Badges
   ============================================================ */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge.badge-success {
  background: var(--success-bg);
  color: var(--sage-deep);
  border-color: var(--sage);
}

.badge.badge-warning {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn);
}

.badge.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .app-grid {
    grid-template-columns: 1fr;
  }

  .portal-hello {
    font-size: 36px;
  }

  .app-placeholder {
    padding: 56px 24px;
  }

  .app-header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px;
    gap: 12px;
  }

  .user-info {
    justify-content: space-between;
  }

  /* Harmonisation 10/06 — pills : simple retour à la ligne sur mobile */
  .tabs {
    gap: 8px;
  }

  .tab {
    font-size: 13px;
    padding: 8px 15px;
  }

  .inline-form {
    flex-direction: column;
  }

  .list-item {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   MODULE STOCK PROTHESES
   ============================================================ */

.stock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stock-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.stock-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.stock-header-actions .btn-primary,
.stock-header-actions .btn-secondary {
  margin-top: 0;
}

/* V1 finalisation (point 6/7) — Mini-toolbar Prothèses : pousse les actions
   (Exporter/Calendrier/Historique) à droite + retire la bordure visible des
   boutons .btn dans ce contexte (scopé à l'ID, ne touche PAS le .btn global). */
#stock-toolbar {
  justify-content: flex-end;
}

#stock-toolbar .btn {
  border-color: transparent;
}

#stock-toolbar .btn:hover {
  border-color: transparent;
  background: var(--ivory-deep);
}

/* V1 finalisation (point 3) — Wrapper flex commun pour la ligne d'outils Prothèses :
   #stock-filters (gauche, flex:1) + #stock-toolbar (droite, flex:0). flex-wrap en
   garde-fou pour écran étroit (le toolbar passe sous les filtres). */
.stock-tools-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.stock-tools-row #stock-filters {
  flex: 1 1 auto;
  /* Override le padding/margin du bloc #stock-view .stock-filters (l.3408) — la
     ligne d'outils gère son propre espacement vertical. */
  padding: 0;
  margin: 0;
}

.stock-tools-row #stock-toolbar {
  flex: 0 0 auto;
}

/* --- Boutons d'en-tete iso-prod (texte + icone) --- */
.header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  margin-top: 0;
  white-space: nowrap;
}
.header-btn:hover {
  background: var(--ivory-soft);
  border-color: var(--ink-mute);
}
.header-btn:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}
.header-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Rafraichir : style plus discret (a droite des actions principales) */
.header-btn-refresh {
  color: var(--ink-mute);
  border-style: dashed;
  margin-left: auto;
}
.header-btn-refresh:hover {
  color: var(--ink);
  border-style: solid;
}

/* ---------- Filtres ---------- */
.stock-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 16px;
  align-items: center;
}

.stock-filters select,
.stock-filters input[type="text"] {
  width: auto;
  min-width: 140px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.stock-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0;
  white-space: nowrap;
  cursor: pointer;
}

.stock-filter-reset {
  font-size: 0.8rem;
  padding: 7px 12px;
  margin-left: auto;
}

/* ---------- Tableau ---------- */
.stock-table-wrap {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.stock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.stock-table thead th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  padding: 12px 14px;
  background: var(--ivory-soft);
  border-bottom: 1px solid var(--rule);
}

.stock-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  vertical-align: middle;
}

.stock-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.stock-row:hover {
  background: var(--ivory);
}

.stock-th-actions {
  width: 1%;
  white-space: nowrap;
}

/* ---------- Cellule actions (5 boutons inline) ---------- */
.action-cell {
  text-align: right;
  white-space: nowrap;
}

.row-clickable {
  cursor: pointer;
}

/* Actions invisibles par defaut, revelees au survol — uniquement sur
   appareils avec hover reel (souris). Sur ecran tactile (tablette en
   cabinet), les actions restent toujours visibles. */
@media (hover: hover) and (pointer: fine) {
  tbody tr.row-clickable td.action-cell .action-btns {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  tbody tr.row-clickable:hover td.action-cell .action-btns,
  tbody tr.row-clickable:focus-within td.action-cell .action-btns {
    opacity: 1;
  }
}

.action-btns {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Phase B.2 hotfix — :not(.ds-btn) neutralise cet override sur les .ds-btn enfants.
   Sans ça, border-radius var(--radius-sm) (4px) écrasait le pill .ds-btn et rendait
   les actions de ligne Prothèses CARRÉES (bug remonté par David). */
.action-btns button:not(.ds-btn) {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1;
  margin-top: 0;
}

.action-btns button:not(.ds-btn):hover {
  background: var(--paper);
  border-color: var(--rule);
  color: var(--ink);
}

.edit-btn:hover       { color: var(--warn) !important; border-color: var(--warn) !important; }
.delete-btn:hover     { color: var(--danger) !important; border-color: var(--danger) !important; }
.reception-btn        { color: var(--sage-deep) !important; }
.reception-btn:hover  { color: var(--paper) !important; background: var(--sage) !important; border-color: var(--sage) !important; }
.etape-btn:hover      { color: var(--paper) !important; background: var(--terra) !important; border-color: var(--terra) !important; }
.sav-btn              { color: var(--warn) !important; }
.sav-btn:hover        { color: var(--paper) !important; background: var(--warn) !important; border-color: var(--warn) !important; }

.sav-count {
  font-size: 10px;
  opacity: 0.85;
  margin-left: 2px;
}

@media (max-width: 768px) {
  .action-btns { flex-direction: column; }
}

/* ---------- Badges statut / type ---------- */
.stock-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.stock-badge-en_cours {
  background: var(--ivory-soft);
  color: var(--ink-soft);
  border-color: var(--rule);
}

.stock-badge-en_retard {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

.stock-badge-recue {
  background: var(--success-bg);
  color: var(--sage-deep);
  border-color: var(--sage);
}

.stock-badge-sav {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn);
}

.stock-badge-archivee {
  background: var(--ivory-deep);
  color: var(--ink-mute);
  border-color: var(--rule);
}

/* Badges par type (couleurs distinctes mais douces) */
.stock-badge-type {
  background: var(--paper);
  color: var(--ink-soft);
  border-color: var(--rule);
}

.stock-type-fixe { color: var(--accent-stock); border-color: var(--accent-stock); }
.stock-type-amovible { color: var(--sage-deep); border-color: var(--sage); }
.stock-type-wax-up { color: var(--warn); border-color: var(--warn); }
.stock-type-gouttiere { color: var(--terra-deep); border-color: var(--terra-light); }
.stock-type-orthodontie { color: #6B5B95; border-color: #C2B5DA; }
.stock-type-autres { color: var(--ink-mute); border-color: var(--rule); }

/* ---------- Modales ---------- */
/* B.3.5 fix — Bloc .stock-modal-* RÉDUIT au strict Stock-specific.
   L'enveloppe (bg overlay, header padding/bg/H2, close subtle) et les
   styles communs du card (border/radius/shadow/animation) sont désormais
   définis dans le bloc DS unifié l.~2656 via selector grouping étendu :
     .modal, .agenda-modal                       (overlay Agenda/DS)
     + .stock-modal-overlay                       (overlay Stock — VALEURS uniquement,
                                                    structure flex Stock conservée ici)
     .modal-content, .agenda-modal-content,
     + .stock-modal-card                          (card commun)
     .modal-header, .agenda-modal-header,
     + .stock-modal-header                        (header commun)
     .modal-header h2, .agenda-modal-header h2,
     + .stock-modal-title                         (titre H2 commun)
     .close-btn, .agenda-modal-close,
     + .stock-modal-close                         (close commun)
     .modal-actions, .agenda-modal-actions,
     + .stock-form-actions, .stock-confirm-actions  (footer commun)

   Ce bloc ne garde QUE :
     • Le mécanisme open Stock (display: flex + appendChild/remove, ≠ Agenda .show)
     • Les max-widths spécifiques Stock (720 default, 1200 wide, 420 confirm)
     • Les hooks ad-hoc Stock (.stock-modal-card .tarif-grid etc., inchangés). */

/* Overlay Stock : valeurs visuelles convergées avec DS, structure flex préservée
   (Stock utilise appendChild/remove sans classe .show — c'est pourquoi on ne peut
   pas grouper avec .modal/.agenda-modal qui ont display: none par défaut). */
.stock-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 31, 24, 0.45);        /* DS unifié (vs 0.42 ancien) */
  backdrop-filter: blur(4px);                /* DS unifié (ajouté) */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px 20px;                        /* DS unifié (vs 20 ancien) */
  overflow-y: auto;
}

body.stock-modal-open {
  overflow: hidden;
}

/* Card max-widths préservées (gros modaux Stock ne doivent PAS rétrécir à 640) */
.stock-modal-card                                 { max-width: 720px; }   /* défaut Stock */
.stock-modal-card.stock-modal-card-wide           { max-width: min(1200px, 95vw); }  /* grille tarifaire */

/* Header Stock : seul le border-top-radius reste spécifique (cohérence visuel
   avec le card border-radius). Les autres props (padding, bg, align, etc.)
   héritent du bloc DS unifié. */
.stock-modal-header {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* V1 finalisation (point 17) — Modale de confirmation autonome (confirmModal).
   Réutilise .stock-modal-overlay + .stock-modal-card + .stock-modal-header,
   surcharge la largeur (420px compact) et ajoute la zone message + actions.
   Le bouton danger réutilise .btn-danger existant (styles.css l.2480-2488). */
.stock-confirm-card {
  max-width: 420px;
}

.stock-confirm-message {
  padding: 20px 24px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.stock-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px 20px;
}

/* V1 finalisation (point 4 lot 4b-2) — Recherche globale ⌘K.
   Composant autonome (cf. confirmModal pattern). Style thème DentalSuite :
   paper/rule/terra. Overlay centré-haut (style Slack/Notion, pas Spotlight). */
.global-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 40, 25, 0.42);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 1100;
}

.global-search-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  overflow: hidden;
}

.global-search-input {
  width: 100%;
  padding: 18px 22px;
  border: none;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  background: var(--paper);
}
.global-search-input:focus {
  border-bottom-color: var(--terra);
}

.global-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px 22px;
}

.gs-placeholder {
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  padding: 30px 0;
  margin: 0;
}

.gs-total {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

.gs-group {
  margin-bottom: 18px;
}

.gs-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 8px;
}

.gs-group-count {
  background: var(--ivory-deep);
  color: var(--ink-mute);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
}

.gs-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.12s ease;
}
.gs-result:hover {
  background: var(--ivory-soft);
}

.gs-result-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.gs-result-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.gs-date {
  font-size: 12px;
  color: var(--ink-mute);
}

.gs-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--ivory-deep);
  color: var(--ink-soft);
}

.gs-more {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
  margin: 4px 12px 0;
}

/* V1 finalisation (point 4 lot 4c-2) — Modale Corbeille.
   Composant autonome (pattern cohérent global-search/confirm). Thème DentalSuite.
   Bouton Restaurer en sage (action positive, cohérent btn-success utilisé ailleurs). */
.corbeille-overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 40, 25, 0.42);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 1100;
}

.corbeille-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  overflow: hidden;
}

.corbeille-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--ivory-soft);
}

.corbeille-title {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.corbeille-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--ink-mute);
  cursor: pointer;
  line-height: 1;
}
.corbeille-close:hover {
  color: var(--ink);
}

.corbeille-banner {
  margin: 0;
  padding: 12px 24px;
  background: var(--terra-mist);
  color: var(--ink-soft);
  font-size: 13px;
  font-style: italic;
  border-bottom: 1px solid var(--rule-soft);
}

.corbeille-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 22px;
}

.corbeille-empty {
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  padding: 30px 0;
  margin: 0;
}

.corbeille-total {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

.corbeille-group {
  margin-bottom: 18px;
}

.corbeille-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.corbeille-group-count {
  background: var(--ivory-deep);
  color: var(--ink-mute);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
}

.corbeille-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  transition: background 0.12s ease;
}
.corbeille-item:hover {
  background: var(--ivory-soft);
}

.corbeille-item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.corbeille-item-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}
.corbeille-date-metier { color: var(--ink-mute); }
.corbeille-date-suppr { color: var(--ink-mute); font-style: italic; }

.corbeille-restore-btn {
  background: var(--sage);
  color: var(--paper);
  border: 1px solid var(--sage);
  padding: 6px 14px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.corbeille-restore-btn:hover {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
}

/* V9.5 — Grille tarifaire (modale Coût Prothésistes). Toutes les classes sont
   scopées .stock-modal-card car la modale est injectée dans <body> (hors
   #stock-view) : les styles d'onglet (.data-table, .num, .table-wrap, etc.)
   ne s'y appliquent pas. Famille autonome. */
.stock-modal-card .tarif-grid-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule-soft);
}

.stock-modal-card .tarif-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stock-modal-card .tarif-grid th,
.stock-modal-card .tarif-grid td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}

.stock-modal-card .tarif-grid th {
  background: var(--ivory-soft);
  color: var(--ink-mute);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}

.stock-modal-card .tarif-grid th.tarif-prot-col,
.stock-modal-card .tarif-grid td.tarif-cell {
  text-align: center;
}

.stock-modal-card .tarif-grid th.tarif-mode-col,
.stock-modal-card .tarif-grid td.tarif-mode-col {
  font-size: 10px;
  color: var(--ink-mute);
  font-style: italic;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.stock-modal-card .tarif-grid .tarif-group-row td {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--terracotta);
  background: var(--ivory-soft);
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

.stock-modal-card .tarif-grid tr:last-child td {
  border-bottom: none;
}

.stock-modal-card .tarif-cell {
  padding: 4px;
}

.stock-modal-card .tarif-input {
  width: 72px;
  padding: 5px 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  background: var(--paper);
}

.stock-modal-card .tarif-input:focus {
  outline: none;
  border-color: var(--terracotta);
}

/* ---------- Autocomplete patient ---------- */
.patient-autocomplete-dropdown {
  position: fixed;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(60, 40, 25, 0.18);
  z-index: 1200; /* au-dessus des modales (1000) */
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--sans);
}

.pa-option {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.12s ease;
}

.pa-option:last-child { border-bottom: none; }

.pa-option:hover,
.pa-option.active {
  background: var(--ivory-soft);
}

.pa-name {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.pa-desc {
  color: var(--ink-mute);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.3;
}

/* ---------- Sections wizard du formulaire ---------- */
.form-section-wizard {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.form-section-wizard + .form-section-wizard {
  margin-top: 0; /* le gap du form gere l'espacement */
}

.form-section-wizard > summary.form-section-title {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--ivory-soft);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.form-section-wizard > summary.form-section-title::-webkit-details-marker {
  display: none;
}

.form-section-wizard > summary.form-section-title::before {
  content: '▾';
  font-size: 11px;
  color: var(--ink-mute);
  transition: transform 0.15s ease;
}

.form-section-wizard:not([open]) > summary.form-section-title::before {
  transform: rotate(-90deg);
}

.form-section-wizard:not([open]) > summary.form-section-title {
  border-bottom-color: transparent;
}

.form-section-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Formulaire ---------- */
.stock-form {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stock-form-mini {
  padding: 22px 24px;
}

/* ---------- Mini-modale Reception ---------- */
.stock-reception-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.stock-reception-question {
  font-size: 14px;
  color: var(--ink);
}

.stock-reception-question strong {
  font-weight: 600;
  color: var(--ink);
}

.stock-reception-subtitle {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
}

.stock-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stock-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stock-form-field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0;
}

.stock-form-field input,
.stock-form-field select,
.stock-form-field textarea {
  padding: 9px 11px;
  font-size: 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.stock-form-field textarea {
  resize: vertical;
  min-height: 60px;
}

.stock-form-type-section {
  border-top: 1px dashed var(--rule-soft);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stock-form-note {
  font-style: italic;
  color: var(--ink-mute);
  font-size: 0.88rem;
  padding: 6px 0;
}

.stock-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--rule-soft);
  margin-top: 4px;
}

.stock-form-actions .btn-primary,
.stock-form-actions .btn-secondary {
  margin-top: 12px;
}

/* V1 finalisation (point 13) — Boutons modales métier : Enregistrer (terracotta)
   + Planifié (sage) doivent avoir la MÊME taille pour cohérence visuelle.
   Annuler garde sa taille naturelle (action de retrait, hiérarchie visuelle moindre). */
.stock-form-actions .btn-primary,
.stock-form-actions .btn-success {
  min-width: 140px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
}

/* Désactive le translateY(-1px) hover du btn-success dans ce contexte —
   sinon le bouton "dépasse" visuellement vs ses voisins (effet "criard" signalé). */
.stock-form-actions .btn-success:hover {
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .stock-form-row {
    grid-template-columns: 1fr;
  }

  .stock-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .stock-filters select,
  .stock-filters input[type="text"] {
    width: 100%;
  }

  .stock-filter-reset {
    margin-left: 0;
  }

  .stock-table {
    font-size: 0.82rem;
  }

  .stock-table thead th,
  .stock-table tbody td {
    padding: 10px 8px;
  }

  .hide-mobile { display: none !important; }
}

/* ============================================================
   MODULE STOCK - elements iso-prod
   ============================================================ */

/* --- CTA "Nouvelle prothèse" bannière --- */
.cta-add-protheses {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--terra), var(--terra-deep));
  color: var(--paper);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  font-family: var(--sans);
}
.cta-add-protheses:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.cta-add-icon {
  font-size: 22px;
  background: rgba(255, 255, 255, 0.18);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cta-add-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cta-add-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
}
.cta-add-sub {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 252, 245, 0.85); /* paper @ 85% pour rester sur fond terracotta */
  margin-top: 2px;
}

/* --- Bandeau Ma journée --- */
.ma-journee {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.ma-journee-empty .ma-journee-header { text-align: center; }
.ma-journee-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ma-journee-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--ink);
  margin-top: 4px;
}
.ma-journee-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.ma-journee-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.ma-journee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
}
.ma-journee-item.urgent {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 500;
}
.ma-journee-icon { font-size: 16px; }
.ma-journee-count { font-weight: 600; font-family: var(--serif); }

/* --- Titres de section --- */
.section-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin: 24px 0 10px;
}
.section-title-orange {
  color: var(--warn);
}
.section-subtitle {
  color: var(--ink-mute);
  font-size: 13px;
  margin-bottom: 12px;
}

/* V1 finalisation (point 3-1, Lot D) — Compteur "X sur Y" à côté du titre de
   section. Discret, non-italique pour distinguer du titre, taille réduite. */
.section-count {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mute);
  margin-left: 6px;
}

/* --- Couleur de ligne par praticien (iso-prod) ---
   Gradient de fond + bande verticale en ::before. La couleur est
   injectee via la variable CSS --prat-color sur le <tr>. */
tbody tr.row-praticien-color {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--prat-color, transparent) 12%, transparent) 0%,
    transparent 70%
  );
}
tbody tr.row-praticien-color td:first-child {
  position: relative;
  padding-left: 18px;
}
tbody tr.row-praticien-color td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 5px;
  border-radius: 3px;
  background: var(--prat-color, var(--ink-mute));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--prat-color, transparent) 35%, transparent);
}
tbody tr.row-praticien-color:hover {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--prat-color, transparent) 18%, transparent) 0%,
    transparent 75%
  );
}
/* Phase B.2 #3 — SUPPRIMÉ : tbody tr.row-planifiee { background: var(--ivory); }
   Le shorthand `background:` ré-initialisait background-image et annulait le
   gradient praticien (12% color-mix) sur les lignes "Prothèses à planifier".
   Référence : tableaux "historique d'envoi" Implants/Ortho/Aligneurs gardent
   le gradient praticien sans override. On s'aligne dessus.
   Seul .row-planifiee { opacity: 0.92; } (l.3265) reste comme signal "planifié".
   Pattern : Linear/Notion/Stripe utilisent l'opacité pour "draft/inactif",
   jamais un fond différent qui casserait l'identité couleur sémantique. */

/* --- Pastille étape amovible --- */
.etape-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.etape-badge.etape-active {
  background: var(--terra-mist);
  color: var(--terra-deep);
  border-color: var(--terra-light);
}
.etape-badge.etape-done {
  background: var(--success-bg);
  color: var(--sage-deep);
  border-color: var(--sage);
}

/* --- Bouton "Valider planification" --- */
.action-btns .valider-btn {
  color: var(--sage-deep) !important;
}
.action-btns .valider-btn:hover {
  color: var(--paper) !important;
  background: var(--sage) !important;
  border-color: var(--sage) !important;
}

/* --- Empty state --- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  color: var(--ink-mute);
}
.empty-state-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.6;
}
.empty-state-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 18px;
  background: var(--terra);
  color: var(--paper);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--sans);
}
.empty-state-cta:hover { background: var(--terra-deep); }

/* --- Wrapper de table (scroll horizontal propre) --- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 18px;
  /* Scrollbar discrete (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-mute) transparent;
}
.table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-mute) 50%, transparent);
  border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--ink-mute);
}
.table-wrapper .stock-table {
  border: none;
  margin: 0;
  /* Largeur min pour rester lisible avec les 13 colonnes — en-dessous,
     le wrapper active le scroll horizontal. */
  min-width: 1100px;
}

/* --- En-têtes triables --- */
.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sortable:hover { color: var(--terra); }
.sortable .sort-arrow {
  font-size: 9px;
  opacity: 0.5;
  margin-left: 2px;
}
.sortable.sort-active .sort-arrow {
  color: var(--terra);
  opacity: 1;
}

/* --- Pagination --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule-soft);
  background: var(--ivory-soft);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
}
.pagination-info { font-size: 12px; color: var(--ink-mute); }
.pagination-controls { display: flex; gap: 4px; align-items: center; }
.page-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  min-width: 28px;
  text-align: center;
  font-family: var(--sans);
  margin-top: 0;
}
.page-btn:hover:not(:disabled) {
  background: var(--ivory-deep);
  border-color: var(--ink-mute);
  color: var(--ink);
}
.page-btn.active {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-btn-ellipsis {
  border: none !important;
  background: none !important;
  cursor: default !important;
}
.page-size-select {
  padding: 4px 8px;
  font-size: 12px;
  width: auto;
}

/* --- Sub-form titre + remove row --- */
.subform-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  margin-top: 0 !important;
}
.remove-row-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  margin-top: 0;
}
.remove-row-btn:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}
.pr-row {
  position: relative;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  background: var(--ivory);
}


/* --- Footer global "Dr David Zerbib" (toutes les apps, Phase B.1)
   Statique en bas de #app-section, sorti du scope Stock (ex .stock-footer). --- */
.app-footer {
  margin: 40px 16px 8px;
  padding: 16px 0;
  text-align: center;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.app-footer strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 13px;
}

/* ===== MODALES (prod lignes 1432-1556) ===== */
/* ============================================================
   MODAUX DS UNIFIÉ — Phase B.3.5
   ------------------------------------------------------------
   Stock .modal-* et Agenda .agenda-modal-* CONVERGENT vers la même
   spec via selector grouping (virgule). Aucun touche HTML/JS — les
   classes legacy restent toutes deux fonctionnelles, partageant la
   même définition. Migration future (B.5+) : tout sur .modal une fois
   Agenda HTML aligné.

   ARBITRAGE DAVID :
     • Enveloppe (overlay, content, header, body) = pattern Agenda
       (plus moderne : compact 22px, eyebrow, blur 4px, anim rise du bas,
       padding 40×20 respiration, body teinté ivory, close subtle 24px).
     • Footer (zone boutons Annuler/Enregistrer) = pattern STOCK
       (padding 18×32×24 généreux, gap 10px, flex-end, pas sticky).
   ============================================================ */

.modal,
.agenda-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 31, 24, 0.45);      /* opacité Agenda (moins sombre que 0.55) */
  backdrop-filter: blur(4px);              /* blur Agenda */
  z-index: 1000;
  overflow-y: auto;
  padding: 40px 20px;                      /* respiration Agenda */
}
.modal.show,
.agenda-modal.show {
  display: block;
}

/* Modals système (confirm/alert/prompt) : toujours par-dessus les autres modals. */
#confirmModal,
#alertModal,
#promptModal {
  z-index: 1100;
}

/* Bloque le scroll de l'arrière-plan tant qu'une modal est ouverte.
   B.3.5 — Inclut aussi .agenda-modal.show (sinon body scrollait derrière modaux Agenda). */
html:has(.modal.show),
body:has(.modal.show),
html:has(.agenda-modal.show),
body:has(.agenda-modal.show) {
  overflow: hidden;
}

@keyframes dsModalRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card : props communes (sans max-width — chaque système a la sienne).
   B.3.5 fix : .stock-modal-card inclus pour adopter border-radius/shadow/animation DS. */
.modal-content,
.agenda-modal-content,
.stock-modal-card {
  background: var(--paper);
  margin: 20px auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: dsModalRise 0.3s ease;        /* rise du bas, plus doux que slide */
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Max-widths séparées par système (préservation des spécificités).
   .stock-modal-card et .stock-confirm-card ont leurs propres déclarations
   dans le bloc Stock plus haut (l.~1510) — non-réécrites ici pour respecter
   l'ordre cascade et garder les gros modaux Stock à leur taille. */
.modal-content,
.agenda-modal-content                                  { max-width: 640px; }   /* défaut Agenda/DS */
.modal-content.modal-sm                                { max-width: 480px; }
.modal-content.modal-md,
.agenda-modal-content.medium                           { max-width: 640px; }
.modal-content.modal-lg,
.agenda-modal-content.large                            { max-width: 900px; }
.agenda-modal-content.wide,
.modal-content.modal-xl                                { max-width: 1100px; }

/* Header — convergence Stock + Agenda + DS. */
.modal-header,
.agenda-modal-header,
.stock-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 24px 12px;                 /* compact Agenda */
  border-bottom: 1px solid var(--rule-soft);
  background: var(--ivory);                /* continuité fluide */
  margin-bottom: 0;
}
.modal-header h2,
.agenda-modal-header h2,
.stock-modal-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Eyebrow uppercase au-dessus du titre */
.modal-eyebrow,
.agenda-modal-eyebrow {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 4px;
  font-weight: 600;
  font-family: var(--sans);
}

/* Close btn — Stock + Agenda + legacy DS, subtle radius-sm 24px. */
.close-btn,
.agenda-modal-close,
.stock-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink-mute);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  transition: all 0.15s ease;
}
.close-btn:hover,
.agenda-modal-close:hover,
.stock-modal-close:hover {
  background: var(--ivory-soft);
  color: var(--ink);
}

/* Body — padding ad-hoc Stock (#editForm etc.) + classe Agenda + classe DS. */
#editForm, #manageContent, #calendarContent, #historyContent,
.modal-body,
.agenda-modal-body {
  padding: 14px 22px 10px;
  background: var(--ivory);
}

/* FOOTER — convergence : pattern Stock généreux (padding 18×32×24, bg ivory-soft,
   gap 10, flex-end). Couvre Stock .stock-form-actions + .stock-confirm-actions
   + Agenda .agenda-modal-actions + .agenda-modal-footer + legacy DS .modal-actions. */
.modal-actions,
.agenda-modal-actions,
.agenda-modal-footer,
.stock-form-actions,
.stock-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 18px 32px 24px;
  border-top: 1px solid var(--rule-soft);
  background: var(--ivory-soft);
  flex-wrap: wrap;
  margin-top: 0;
}

.cancel-btn {
  padding: 9px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  font-family: var(--sans);
}
.cancel-btn:hover { background: var(--ivory-deep); color: var(--ink); border-color: var(--ink-mute); }

.save-btn {
  padding: 9px 18px;
  border: 1px solid var(--terracotta);
  background: var(--terracotta);
  color: var(--paper);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  font-family: var(--sans);
}
.save-btn:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); transform: translateY(-1px); }

/* =============================================================
   FORMS

/* ===== FORMS - groups et rows (prod lignes 1558-1620) ===== */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  color: var(--ink-mute);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--sans);
  transition: all 0.2s ease;
  background: var(--paper);
  color: var(--ink);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-mist);
}
.form-group textarea { min-height: 76px; resize: vertical; }

.form-row {
  display: flex;
  gap: 18px;
}
.form-row .form-group { flex: 1; }

.form-section {
  padding: 16px 18px;
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 16px;
  position: relative;
}

.subform-title {
  font-family: var(--serif);
  margin: 22px 0 14px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 12px;
}
.subform-title::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--terracotta);
}

/* ===== FORM SECTIONS (collapsibles details) (prod lignes 552-580) ===== */
.form-section {
  margin-bottom: 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.form-section[open] {
  border-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
.form-section-title {
  cursor: pointer;
  padding: 12px 18px;
  background: var(--ivory-soft);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.form-section-title:hover { background: var(--ivory-deep); }
.form-section-title::-webkit-details-marker { display: none; }

/* ===== BOUTONS .btn et variantes (prod lignes 852-970) ===== */
.btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--ink-mute);
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-success {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper);
}
.btn-success:hover {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: var(--paper);
  transform: translateY(-1px);
}

.btn-info {
  background: var(--paper);
  border-color: var(--sage);
  color: var(--sage-deep);
}
.btn-info:hover {
  background: var(--sage);
  color: var(--paper);
  border-color: var(--sage);
}

.btn-warning, .btn-orange {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--paper);
}
.btn-warning:hover, .btn-orange:hover {
  background: #a87520;
  border-color: #a87520;
  color: var(--paper);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--paper);
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger);
  color: var(--paper);
}

.btn-gray {
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.btn-gray:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--ink-mute);
}

.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn-ghost {
  background: transparent;
  color: var(--terracotta);
  border: 1px solid var(--terracotta);
}
.btn-ghost:hover {
  background: var(--terracotta);
  color: var(--paper);
}

/* Bouton primary (terracotta plein) — utilisé pour "Ajouter" */
.btn.primary, .btn.btn-primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
}
.btn.primary:hover, .btn.btn-primary:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  color: var(--paper);
  transform: translateY(-1px);
}

/* Selects en bouton */
select.btn {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238B7B6A' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
select.btn.btn-gray {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238B7B6A' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
}

/* Dropdown menus */

/* ===== BTN-TAB-ACTION (boutons d'action sur ligne table) (prod lignes 303-340) ===== */
.btn-tab-action {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.btn-tab-action:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--ink-mute);
  transform: translateY(-1px);
}
.btn-tab-action.active {
  background: var(--terracotta);
  color: var(--paper);
  border-color: var(--terracotta);
  box-shadow: 0 4px 10px rgba(184, 89, 64, 0.22);
  font-weight: 600;
}

/* =============================================================
   CTA "Nouvelle prothèse" — grosse bannière en haut du tableau
   ============================================================= */
.cta-add-protheses {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0 0 22px;
  padding: 18px 26px;
  background: linear-gradient(135deg, var(--terracotta) 0%, #C8694C 100%);
}

/* ===== BTN-GHOST-MINI (prod lignes 1194-1230) ===== */
.btn-ghost-mini {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 13px;
  color: var(--ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-ghost-mini:hover {
  background: var(--ivory-deep);
  color: var(--ink);
}

/* V1 finalisation (point 15) — Blocs autocomplete dupliqués supprimés ici.
   Source de vérité unique : styles.css l.1554-1597 (.patient-autocomplete-dropdown
   + .pa-option + .pa-name + .pa-desc). */

/* ===== FAB ADD - Bouton flottant Nouvelle prothèse (prod lignes 392-440) ===== */
.fab-add {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(184, 89, 64, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 80;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fab-add:hover {
  transform: translateY(-3px) scale(1.04);
  background: #C8694C;
  box-shadow: 0 14px 32px rgba(184, 89, 64, 0.45), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.fab-add:active {
  transform: translateY(0) scale(0.98);
}

/* V1 finalisation (point 8) — Masquage du FAB pendant qu'une modale est
   ouverte (sinon le "+" déborde en transparence sous l'overlay rgba 0.42).
   body.stock-modal-open est togglée par openModal/closeModal (stock.js l.1081/1094). */
body.stock-modal-open .fab-add {
  display: none;
}

/* =============================================================
   COLONNE COURONNE (tableau Implants) — case cliquable
   ============================================================= */
.couronne-cell {
  text-align: center;
  cursor: pointer;
  font-size: 18px;
  user-select: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.couronne-cell:hover {
  background: var(--ivory-deep);
  transform: scale(1.15);
}
.couronne-cell.couronne-checked {
  color: var(--sage-deep);
}
.couronne-cell.couronne-empty {
  color: var(--ink-faint);
}

/* =============================================================
   "MA JOURNÉE" — bloc en haut du Dashboard (premier truc qu'on voit)
   ============================================================= */

/* ===== CONTROLS (barre filtres + recherche) (prod lignes 804-851) ===== */
.controls {
  padding: 18px 48px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.search-box {
  flex: 1;
  min-width: 280px;
  position: relative;
}
.search-box input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  transition: all 0.2s;
}
.search-box input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.search-box input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-mist);
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
  font-size: 14px;
  opacity: 0.7;
}

/* =============================================================
   BUTTONS
   ============================================================= */

/* =============================================================
   LOADING SPINNER

/* ===== PILLS + STATUS BADGES (prod lignes 1323-1370) ===== */
.pill {
  display: inline-block;
  background: var(--ivory-deep);
  border: 1px solid var(--rule);
  padding: 2px 10px;
  border-radius: 99px;
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-soft);
}

/* =============================================================
   ACTION BUTTONS (dans tables)
   ============================================================= */
.action-btns {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
}
/* Phase B.2 hotfix — :not(.ds-btn) (doublon de l.1400, conservé en attendant la
   dédup .form-section/.empty-state des prochaines phases du DS). */
.action-btns button:not(.ds-btn) {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-family: var(--sans);
  transition: all 0.15s ease;
  line-height: 1;
}
.action-btns button:not(.ds-btn):hover {
  background: var(--paper);
  border-color: var(--rule);
  color: var(--ink);
}
.edit-btn:hover       { color: var(--warn) !important; border-color: var(--warn) !important; }
.delete-btn:hover     { color: var(--danger) !important; border-color: var(--danger) !important; }
.add-stock-btn:hover  { color: var(--sage-deep) !important; border-color: var(--sage) !important; }
.archive-btn:hover    { color: var(--terracotta) !important; border-color: var(--terracotta) !important; }
.restore-btn:hover    { color: var(--sage-deep) !important; border-color: var(--sage) !important; }
.valider-btn          { color: var(--sage-deep) !important; font-weight: 600; }
.valider-btn:hover    { color: var(--paper) !important; background: var(--sage) !important; border-color: var(--sage) !important; }

/* ===== STAT CARDS & STATS BAR (prod lignes 699-760) ===== */
.stats-bar {
  padding: 0;
  background-color: var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
}
/* Phase B.2 #2 — règle obsolète supprimée (`.stats-bar:has(.stock-alert-banner)`).
   La classe .stock-alert-banner n'existe plus (atom .ds-alert l'a remplacée). */
.stat-card {
  background: var(--ivory-soft);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  border-left: none;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 18px; left: 0;
  width: 3px; height: 24px;
  background: var(--ink-mute);
  opacity: 0.4;
}
.stat-card.warning::before { background: var(--warn); opacity: 1; }
.stat-card.success::before { background: var(--sage); opacity: 1; }
.stat-card.urgent::before  { background: var(--danger); opacity: 1; }

.stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0;
}
.stat-value {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-card.urgent  .stat-value { color: var(--danger); }
.stat-card.warning .stat-value { color: var(--warn); }
.stat-card.success .stat-value { color: var(--sage-deep); }

/* Phase B.2 #2 — doublon .stock-alert-banner aussi supprimé.
   Cf. atom .ds-alert + groupement .ds-alerts-row plus bas dans le fichier. */

/* ===== ROW-PLANIFIEE (prod lignes 1256-1295) ===== */
.row-planifiee { opacity: 0.92; }

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 300;
}
.empty-state-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 22px;
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  border-radius: 99px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(184, 89, 64, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.empty-state-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(184, 89, 64, 0.35);
}
.empty-state-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.35;
  font-style: normal;
  display: block;
}

/* =============================================================

/* ===== STATUS BADGE détaillé (prod lignes 1298-1325) ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-ok        { color: var(--sage);       background: var(--sage-bg); }
.status-commander { color: var(--warn);       background: var(--warn-bg); }
.status-rupture   { color: var(--danger);     background: var(--danger-bg); }

.stock-value-ok   { color: var(--sage-deep); font-weight: 600; }
.stock-value-warn { color: var(--warn);      font-weight: 600; }
.stock-value-rupt { color: var(--danger);    font-weight: 700; }

.pill {
  display: inline-block;
  background: var(--ivory-deep);
}

/* ===== ROW ALERTE & ROW RUPTURE (prod lignes 1128-1135) ===== */
tbody tr:hover { background: var(--ivory-soft); }

.row-alerte  { background: var(--warn-bg) !important; }
.row-rupture { background: linear-gradient(90deg, var(--terracotta-mist) 0%, transparent 80%) !important; }
.row-rupture:hover { background: var(--terracotta-mist) !important; }
/* === IDENTIFICATION VISUELLE PAR PRATICIEN ===
   Chaque <tr> reçoit `class="row-praticien-color"` + `style="--prat-color: #..."`.
   La couleur vient de data.praticien_colors (modifiable dans Gérer) ou d'une palette par défaut.

/* ===== MA-JOURNEE complet (prod lignes 441-548) ===== */
.ma-journee {
  margin-bottom: 28px;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--ivory-soft) 0%, var(--ivory-deep) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.ma-journee::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--terracotta);
}
.ma-journee-header {
  margin-bottom: 16px;
}
.ma-journee-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-bottom: 6px;
}
.ma-journee-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ma-journee-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
  font-family: var(--serif);
  font-style: italic;
}
.ma-journee-empty .ma-journee-title {
  font-size: 18px;
  color: var(--ink-mute);
}
.ma-journee-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ma-journee-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ma-journee-item:hover {
  background: var(--terracotta-mist);
  border-color: var(--terracotta);
  transform: translateX(3px);
}
.ma-journee-item.urgent {
  background: var(--danger-bg);
  border-color: var(--danger);
}
.ma-journee-item.urgent:hover {
  background: var(--danger-bg);
  filter: brightness(0.97);
}

/* B.3.7 point 2 — Reset styles button par défaut quand .ma-journee-item est un
   <button> cliquable (transformé pour porter le filtre + scroll, à la place
   de la pastille .ds-alert--danger supprimée). Le visuel reste identique au
   <div> précédent, seul l'accessibilité s'ajoute (focus visible, Enter/Espace). */
button.ma-journee-item--clickable {
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}
button.ma-journee-item--clickable:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.ma-journee-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.ma-journee-count {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--terracotta);
  min-width: 32px;
  text-align: center;
}
.ma-journee-item.urgent .ma-journee-count {
  color: var(--danger);
}
.ma-journee-label {
  flex: 1;
  font-size: 14.5px;
  color: var(--ink);
}
.ma-journee-arrow {
  color: var(--ink-mute);
  font-size: 18px;
  transition: transform 0.15s ease;
}
.ma-journee-item:hover .ma-journee-arrow {
  transform: translateX(3px);
  color: var(--terracotta);
}


/* ===== SECTION-TITLE (prod lignes 1009-1020) ===== */
.section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin: 36px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 14px;
}

/* ===== DROPDOWN (prod lignes 971-1005) ===== */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-width: 240px;
  margin-top: 4px;
  display: none;
  z-index: 100;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  border-bottom: 1px solid var(--rule-soft);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--ivory-soft); color: var(--terracotta); }


/* ===== ERROR-MESSAGE + SPINNER + INLINE-LOADER (prod lignes 1817-1920) ===== */
.error-message {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 11px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  margin-bottom: 18px;
  text-align: center;
  font-size: 13px;
}

/* =============================================================
   TOASTS
   ============================================================= */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10001;
  display: flex;
  flex-direction: column-reverse; /* dernier toast en bas, push les anciens vers le haut */
  gap: 10px;
  max-width: 380px;
  pointer-events: none; /* clic au travers, sauf sur les toasts eux-mêmes */
}

.toast-container .toast {
  pointer-events: auto;
}

.toast {
  background: var(--paper);
  padding: 13px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--terracotta);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  opacity: 0;
  transform: translateX(400px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  color: var(--ink);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-msg { flex: 1; }
.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 18px;
  height: 18px;
  font-family: var(--sans);
}
.toast-close:hover { color: var(--ink); }
.toast-success { border-left-color: var(--sage); }
.toast-error   { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warn); }
.toast-info    { border-left-color: var(--terracotta); }

/* V7 — Responsive toasts : full-width en bas sur mobile */
@media (max-width: 640px) {
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
  .toast {
    min-width: 0;
    width: 100%;
  }
}

/* =============================================================
   LOADING SPINNER
   ============================================================= */
.spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 252, 245, 0.85);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.spinner-overlay.show { display: flex; }
.spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--rule);
  border-top-color: var(--terracotta);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.inline-loader {
  text-align: center;
  padding: 40px;
  color: var(--ink-mute);
  font-style: italic;
}

/* =============================================================
   ALERTS BANNER
   ============================================================= */
.alerts-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-left-width: 3px;
  padding: 12px 18px;
  margin: 0 48px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
}

/* ===== ALERTS-BANNER (prod lignes 1912-1945) ===== */
.alerts-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-left-width: 3px;
  padding: 12px 18px;
  margin: 0 48px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #7a5715;
}
.alerts-banner.danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.alerts-banner-actions { margin-left: auto; }

/* =============================================================
   CALENDAR
   ============================================================= */
.calendar {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

/* ===== FOOTER (prod lignes 2516-2535) ===== */
.footer {
  background: var(--ivory-soft);
  padding: 20px 48px;
  text-align: center;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
}
.footer strong {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  color: var(--ink);
}

/* V1 finalisation (point 15) — Bloc autocomplete dupliqué supprimé ici.
   Source de vérité unique : styles.css l.1554-1597. */

/* ============================================================
   V6 — Onglets DentalStock en vraies pills iso-prod
   Scope #stock-view pour ne PAS toucher à #admin-view (qui reste underline)
   Override la régression V5 .tab underline editorial (styles.css l.785-820)
   ============================================================ */















/* Responsive — pills plus petites <=640px */


/* ============================================================
   AGENDA — Onglets niveau 1 CALQUE Stock (B.3.3 RÉVISÉ)
   ------------------------------------------------------------
   #agenda-view .tabs et #agenda-view .tab : duplication parallèle
   STRICTE de #stock-view (l.3666-3754). Même structure, mêmes valeurs.
   Agenda et Stock auront ainsi un rendu IDENTIQUE pour leur niveau 1.
   À unifier en B.4 (suppression des 2 scopes au profit d'un sélecteur
   commun) une fois qu'Admin sera aussi migré au pattern.
   ============================================================ */
/* REFONTE A — Onglets niveau 1 SOULIGNÉS (maquette .tabnav, pixel près).
   Remplace les pills : nav soulignée, actif = texte terra + bordure-bas 2px. */
/* Harmonisation 10/06 : le style pill vient de la base .tab (partagée).
   Ici ne restent que la gouttière de la nav et le traitement urgent renforcé. */
#agenda-view .tabs {
  gap: 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 16px 48px 14px;
  margin-bottom: 0;
}

/* variant urgent (JS : RDV toujours, Tâches si overdue) → DOUBLE pulse
   (opacity + anneau box-shadow) = bien plus visible qu'une pulse d'opacité
   seule (régression « pulse non visible » corrigée). Couleurs : base
   .tab-badge--urgent (danger plein ; inversé paper/danger sur pill active). */
@keyframes agendaBadgeRingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(166, 50, 31, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(166, 50, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(166, 50, 31, 0); }
}
#agenda-view .tab .tab-badge.tab-badge--urgent {
  animation: tabBadgePulseUrgent 1.5s infinite, agendaBadgeRingPulse 1.5s infinite;
}

@media (max-width: 640px) {
  #agenda-view .tabs { padding: 12px 16px 10px; gap: 8px; }
  #agenda-view .tab { font-size: 13px; }
}

/* Point 7 — rapprocher les 2 barres d'onglets (niveau 1 ↔ cat-tabs) : on
   neutralise la carte interne .tab-content (doublon avec le .container de la vue)
   → le contenu colle directement sous la nav, comme la maquette. Les en-têtes
   internes (agenda-tasks-header / cat-bar / controls) gardent leurs gouttières. */
#agenda-view .tab-content {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* B.3.3 ré-révisé Q1 — Actions globales RDV (archives + corbeille) à droite
   de la nav onglets niveau 1. Calque #stock-view .tabs-actions (l.3824). */
#agenda-view .tabs-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Harmonisation 10/06 — boutons monochromes SCOPÉS Agenda (méthode Ortho,
   atomes .ds-btn globaux intacts pour les autres apps) : primaire encre
   pleine, ghost → base neutre (archives/corbeille/archiver). */
#agenda-view .ds-btn.ds-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
#agenda-view .ds-btn.ds-btn--primary:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}
#agenda-view .ds-btn.ds-btn--ghost {
  background: var(--paper);
  color: var(--ink-soft);
  border-color: var(--rule);
}
#agenda-view .ds-btn.ds-btn--ghost:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--ink-mute);
}

/* V6 — Search trigger ⌘K et tabs-actions container (scope #stock-view) */








/* ============================================================
   V7 — Filtres en pills custom + champ recherche pill iso-prod
   Scope #stock-view .stock-filters
   ============================================================ */



/* --- Champ recherche : pill arrondie large avec loupe SVG à gauche --- */










/* --- Selects en pills custom avec flèche ▼ terracotta inline --- */






/* Différencier visuellement un select avec valeur active (≠ "Tous*" ou "Toutes") */


/* --- Bouton "Réinitialiser" en pill ghost --- */




/* Responsive : sur écran étroit, wrap propre */


/* ============================================================
   V8 / V8.6 / V8.7 — Implants + Orthodontie + Aligneurs : tableau, bandeau, statuts
   Scope partagé : #stock-view #implants-tab-content
                 + #stock-view #orthodontie-tab-content
                 + #stock-view #aligneurs-tab-content
   pour ne pas casser l'onglet Prothèses (qui garde son propre style).
   ============================================================ */









/* Tableau */
















/* Lignes en alerte */





/* Badges statut */





/* Pill planifiés */


/* Phase B.2 #2 — Legacy .alert-banner / .alert-banner-count SUPPRIMÉES.
   Remplacées par atom .ds-alert (variants --danger / --warn) défini en fin
   de fichier. callsites Implants/Ortho/Aligneurs migrés vers .ds-alert--warn. */

/* Badge alert onglet (implants + orthodontie) */









/* ============================================================
   V8 / V8.6 / V8.7 — Implants + Orthodontie + Aligneurs : tableaux Planifiés et Historique
   (actions hover, bouton + Planifier ; checkbox Couronne implants only)
   ============================================================ */













/* ============================================================
   V8 — Modale Nouvelle pose d'implant : grille multi-lignes
   Scope .stock-modal-card (vrai conteneur de modale dans cette
   codebase, pas .modal-content).
   ============================================================ */

.stock-modal-card .modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stock-modal-card .subform {
  margin: 16px 0;
}

.stock-modal-card .subform-help {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
  margin: -4px 0 10px;
}

.stock-modal-card .pose-row {
  background: var(--ivory);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
}

.stock-modal-card .pose-row-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr 1.5fr 1.5fr auto auto auto;
  gap: 10px;
  align-items: center;
}

.stock-modal-card .pose-row-grid select,
.stock-modal-card .pose-row-grid input[type="text"] {
  font-size: 13px;
  padding: 6px 10px;
}

.stock-modal-card .checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* V1 finalisation (point 19) — Case à cocher "Payé au fournisseur" dans la
   table Aligneurs. Accent sage pour cohérence avec les actions positives. */
.aligneur-paye-checkbox {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--sage);
  margin: 0;
}

.stock-modal-card .pose-row-grid .icon-btn,
.stock-modal-card .pose-row-grid .icon-btn-delete {
  opacity: 1;
  font-size: 16px;
}
.stock-modal-card .pose-row-grid .icon-btn-delete:hover {
  color: var(--danger);
}

@media (max-width: 640px) {
  .stock-modal-card .pose-row-grid {
    grid-template-columns: 1fr;
  }
  .stock-modal-card .modal-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GÉRER — modale de réglages (alignée sur le langage visuel ⌘K)
   ============================================================ */
.gerer-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* B.3.7 Lot 3 Sous-lot A phase 1 — Onglets Gérer en PASTILLES DS (était underline).
   Pattern calqué sur #stock-view .tab (radius 99px, bg paper → terracotta actif).
   Border-bottom du wrapper retiré (les pastilles n'en ont pas besoin). */
.gerer-tabs {
  display: flex;
  gap: 6px;
  padding: 2px 0 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.gerer-tab {
  flex: 0 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 8px 18px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.gerer-tab:hover {
  background: var(--ivory-soft);
  color: var(--ink);
  border-color: var(--ink-mute);
}
.gerer-tab.active {
  background: var(--terracotta);
  color: var(--paper);
  border-color: var(--terracotta);
  font-style: italic;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(184, 89, 64, 0.2);
}

.gerer-section { min-height: 120px; }

/* B.3.7 Lot 3 Sous-lot A phase 2 — En-tête de section : pastille .gerer-count
   legacy supprimée, remplacée par .ds-badge--neutral côté markup.
   Le titre passe sur la classe explicite .gerer-section-title. */
.gerer-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 8px;
  margin: 4px 0 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.gerer-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* B.3.7 Lot 3 Sous-lot A phase 3 — Ligne d'ajout (form Teintes) inputs en PILL
   (radius 99px) + focus terracotta avec ring discret. Affecte .list-input-row
   input uniquement dans le contexte modal Gérer (les autres callsites
   app-prod-reference.js sont du code legacy non rendu en SaaS). */
.list-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.list-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  font-family: var(--sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.list-input-row input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-mist);
}
/* Phase 6 — Sélecteur .list-input-row .btn-success SUPPRIMÉ (orphelin :
   le markup a migré vers .ds-btn .ds-btn--success depuis B.2). */

/* B.3.7 Lot 3 Sous-lot A phase 3 — Form ajout Références : GRID 2×2 + bouton
   aligné droite (au lieu du flex-wrap sautillant des 4 inputs en ligne).
   Stack en 1 colonne <600px. Inputs en pill, cohérents avec .list-input-row. */
.gerer-ref-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gerer-ref-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gerer-ref-form input {
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  font-family: var(--sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gerer-ref-form input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-mist);
}
.gerer-ref-form > .ds-btn { align-self: flex-end; }
@media (max-width: 600px) {
  .gerer-ref-form-grid { grid-template-columns: 1fr; }
  .gerer-ref-form > .ds-btn { align-self: stretch; }
}

/* Wrapper de liste (rangées = .gerer-list-item après B.3.7 Lot 3 Sous-lot B). */
.gerer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* B.3.7 Lot 3 Sous-lot B phase 4 — Item de liste scopé modal Gérer.
   Migration .list-item → .gerer-list-item pour découpler de DentalPatients
   (.list-item global app.js 23 callsites, intact). Style sobre dédié :
   - Fond ivoire-soft (plus discret que l'ivory de .list-item global)
   - Hover : border terracotta-mist + bg paper (subtle, pas agressif)
   - Padding compact 10×14 (vs 14×16 du global, modal = densité plus forte)
   - Actions à droite via justify-content: space-between conservé */
.gerer-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gerer-list-item:hover {
  background: var(--paper);
  border-color: var(--terracotta-mist);
}
.gerer-list-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gerer-list-item .action-btns {
  flex-shrink: 0;
}

/* Méta inline discrète des références (init/seuil/utilisations) */
.gerer-meta {
  color: var(--ink-mute);
  font-size: 12px;
  margin-left: 6px;
}

.gerer-empty {
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  padding: 24px 0;
  margin: 0;
}

/* B.3.7 Lot 3 Sous-lot A phase 5 — Mini-form édition raffiné : panneau ivoire-soft
   avec eyebrow uppercase + titre serif italique en header (cohérence modaux DS).
   Inputs en pill avec focus terracotta (calque .gerer-ref-form). */
.gerer-ref-editform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ivory-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.gerer-editform-header {
  margin-bottom: 4px;
}
.gerer-editform-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 4px;
  font-family: var(--sans);
}
.gerer-editform-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
}
.gerer-ref-field { display: flex; flex-direction: column; gap: 4px; }
.gerer-ref-field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.gerer-ref-field input {
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  font-family: var(--sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gerer-ref-field input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-mist);
}
.gerer-ref-hint { font-size: 11px; font-style: italic; color: var(--ink-mute); }
.gerer-ref-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   V8 — Modale + Stock : info-box en-tête
   ============================================================ */

.stock-modal-card .info-box {
  background: var(--ivory-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}
.stock-modal-card .info-box .cell-sub {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* ============================================================
   V9.0 — Dashboard (rétrospectif annuel)
   Scope : #stock-view #dashboard-tab-content
   ============================================================ */















/* V9.7 — Slider rétrocession aligneurs : compta uniquement (showRetro:true).
   Dans une pilule .dashboard-year-picker à côté des sélecteurs année/mois.
   accent-color terracotta iso-pattern .couronne-checkbox (l.3854). */




/* V9.7 — Bandeau d'actions Compta : intro grille prix patient + bouton. */




/* V1 finalisation (point 20 commit 2) — Champs Prix Implants dans réglages Compta.
   Layout : 2 inputs côte à côte, alignés à droite dans le bandeau actions (le <p>
   prend flex:1 à gauche, le .compta-prix-row vient à droite via justify-content
   space-between du .compta-actions-banner parent). */








/* V9.7 — Liste rétrocessions par praticien : 1 ligne = nom | slider | label %. */












/* V9.7 — Ticket .analyse-calcul (Commit 5). Iso-prod : conteneur + lignes
   label/montant + ligne result + détail. Couleurs marge inline (sage-deep /
   danger) gérées côté JS. Police monospace numérique pour aligner les chiffres. */














































































/* ============================================================
   V9.5 — Coût Prothésistes (KPI cards + bandeaux)
   Scope : #stock-view #coutProthesistes-tab-content
   ============================================================ */

























/* ============================================================
   DentalPatients — import CSV (commit 2 : drop-zone + preview)
   ============================================================ */
.patients-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  border: 2px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--ivory);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.patients-drop-zone:hover,
.patients-drop-zone.is-dragover {
  background: var(--ivory-soft);
  border-color: var(--terra);
}
.patients-drop-zone-icon { font-size: 36px; }
.patients-drop-zone-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.patients-drop-zone-hint  { font-size: 13px; color: var(--ink-mute); }

.patients-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Progression pendant l'import (commit 3) */
.patients-progress {
  padding: 32px 24px;
  text-align: center;
}
.patients-progress-label {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.patients-progress-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--ivory-deep);
  overflow: hidden;
}
.patients-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--terra);
  transition: width 0.2s ease;
}

/* Écran résultat (commit 3) */
.patients-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Liste patients — header recherche + compteur (commit A Liste/Fiche) */
.patients-list-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.patients-list-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.patients-list-search:focus {
  border-color: var(--terra);
  outline: 2px solid var(--terra-mist);
  outline-offset: 0;
}
.patients-list-count {
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* Fiche patient — bouton retour Liste (utilisé au commit B) */
.patients-fiche-back {
  margin-bottom: 12px;
}

/* Badges statut RDV (commit B Fiche) — palette existante uniquement.
   Mapping JS dans statutToBadgeClass() (app.js). */
.rdv-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.rdv-badge--vu       { background: var(--sage-bg);    color: var(--sage-deep); }
.rdv-badge--annule   { background: var(--ivory-deep); color: var(--ink-mute); }
.rdv-badge--excuse   { background: var(--warn-bg);    color: var(--warn); }
.rdv-badge--planifie { background: var(--terra-bg);   color: var(--terra-deep); }
.rdv-badge--retard   { background: var(--danger-bg);  color: var(--danger); }
.rdv-badge--default  { background: var(--ivory-deep); color: var(--ink-soft); }

/* ============================================================ */
/* DentalAgenda — étape 3 V1 partielle (Réglages + placeholders) */
/* ============================================================ */

/* Placeholders rassurants pour les sous-onglets en cours de portage */
.agenda-placeholder {
  text-align: center;
  padding: 60px 24px;
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink-soft, #4a3d33);
}
.agenda-placeholder-icon {
  font-size: 48px;
  margin-bottom: 18px;
  opacity: 0.85;
}
.agenda-placeholder h3 {
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--ink, #2a1f18);
  font-weight: 500;
}
.agenda-placeholder p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.agenda-placeholder p.muted {
  font-size: 13px;
  font-style: italic;
}

/* Grille à 2 colonnes des panneaux Réglages */
.agenda-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px 8px;
}
@media (max-width: 900px) {
  .agenda-settings-grid { grid-template-columns: 1fr; }
}

/* Panneau référentiel (Personnel / Motifs) */
.settings-section {
  background: var(--paper, #fffcf5);
  border: 1px solid var(--rule, #d9cdb2);
  border-radius: 10px;
  padding: 18px 20px;
}
.settings-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft, #e8ddc4);
}
.settings-section-title {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
}
.settings-section-count {
  font-size: 12px;
}

/* Form d'ajout */
.settings-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.settings-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--rule, #d9cdb2);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.settings-input:focus {
  outline: none;
  border-color: var(--terracotta, #b85940);
  box-shadow: 0 0 0 3px rgba(184, 89, 64, 0.15);
}
.settings-input-inline {
  padding: 4px 8px;
  font-size: 14px;
}

/* État vide */
.settings-empty {
  padding: 14px;
  border: 1px dashed var(--rule-soft, #e8ddc4);
  border-radius: 6px;
  font-style: italic;
  font-size: 13px;
  text-align: center;
}

/* Liste des items */
.settings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--ivory-soft, #f2ebdb);
  border: 1px solid var(--rule-soft, #e8ddc4);
  border-radius: 6px;
  transition: background 0.15s;
}
.settings-item:hover { background: var(--ivory-deep, #e9dfc8); }
.settings-item-label {
  flex: 1;
  font-size: 14px;
  cursor: text;
  padding: 2px 4px;
  user-select: none;
}
.settings-item-del {
  background: none;
  border: 1px solid transparent;
  color: var(--ink-mute, #8b7b6a);
  font-size: 18px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.settings-item-del:hover {
  background: var(--danger-bg, #f7ddd5);
  color: var(--danger, #a6321f);
  border-color: var(--danger, #a6321f);
}

/* ============================================================ */
/* DentalAgenda — classes spécifiques (étape 4+, Tâches/RDV/...)  */
/* ============================================================ */
/* Phase B.3.2 — Bloc `:root` Agenda SUPPRIMÉ (les 28 tokens     */
/* --agenda-* dupliquaient à l'identique les tokens du :root DS).*/
/* Désormais : Agenda consomme directement les tokens DS unifiés */
/* (--paper, --terra, --ink, etc.) hérités de body via :root.    */
/* La police var(--sans) (Manrope) est héritée de body { font-   */
/* family: var(--sans) } (cf. styles.css l.76).                  */
/* Toutes classes préfixées .agenda-* gardent leur scope local.   */

/* ─────── Header par onglet — COMPACT (B.3.3 RÉVISÉ option a) ──────────
   Padding et titre réduits pour gagner ~70px de vertical par tab. Sub-texte
   conservé en text-xs 11px (David garde le contexte descriptif). Le titre
   reste en Fraunces italic — l'identité éditoriale préservée à taille section. */
.agenda-tasks-header {
  padding: var(--space-3) var(--space-12) var(--space-2);   /* 12 × 48 × 8 */
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.agenda-tasks-title {
  font-family: var(--serif);
  font-size: var(--text-lg);             /* 20px (était 32) — taille section, pas hero */
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: var(--leading-snug);
}
.agenda-tasks-sub {
  font-size: var(--text-xs);             /* 11px (était 13) — subtitle subtle */
  color: var(--ink-mute);
  margin-top: 2px;
  line-height: var(--leading-normal);
}

/* ─────── Toolbar filtres COMPACTÉE, alignée sur Stock (B.3.3 RÉVISÉ #4) ───
   Calque de #stock-view .stock-filters : container transparent, pas de
   bandeau ivoire, pas de border-bottom prononcée — la barre de filtres
   devient une ligne d'outils légère. */
.agenda-tasks-controls {
  padding: var(--space-3) var(--space-12);     /* 12 × 48 (vs 16 × 48 avant) */
  background: transparent;                      /* était var(--ivory-soft) — supprimé */
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  gap: var(--space-2);                          /* 8px (vs 12px) — plus compact */
  align-items: center;
  flex-wrap: wrap;
}

/* ─────── Kanban ─────── */
.agenda-kanban {
  padding: 28px 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.agenda-kanban-col {
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  transition: all 0.2s ease;
}
.agenda-kanban-col.drag-over {
  background: var(--sage-bg);
  border-color: var(--sage);
  box-shadow: 0 0 0 2px var(--sage-bg);
}
.agenda-kanban-col-body {
  overflow-y: auto;
  /* F2 extension Tâches — overflow-x: hidden RETIRÉ pour laisser passer les
     tooltips [data-tooltip] qui dépassent horizontalement de la colonne
     (dans le gap entre 2 colonnes Kanban, ou hors viewport). Les cartes
     elles-mêmes restent contenues car elles font 100% de la largeur de la
     colonne (sans content horizontalement large). Si scroll-x apparaît un
     jour, ce sera signe d'un autre bug à corriger ailleurs. */
  flex: 1;
  padding-right: 4px;
}
.agenda-kanban-col-body::-webkit-scrollbar { width: 6px; }
.agenda-kanban-col-body::-webkit-scrollbar-track { background: transparent; }
.agenda-kanban-col-body::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 99px;
}
.agenda-kanban-col-body::-webkit-scrollbar-thumb:hover {
  background: var(--ink-mute);
}
.agenda-kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.agenda-kanban-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.agenda-kanban-col-title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
}
.agenda-kanban-col[data-status="todo"]  .agenda-kanban-col-title::before { background: var(--warn); }
.agenda-kanban-col[data-status="doing"] .agenda-kanban-col-title::before { background: var(--terra); }
.agenda-kanban-col[data-status="done"]  .agenda-kanban-col-title::before { background: var(--sage); }
.agenda-kanban-col-count {
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--paper);
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid var(--rule);
}

/* ─────── Cartes Tâche ─────── */
.agenda-task-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  cursor: grab;
  transition: all 0.2s;
  position: relative;
}
.agenda-task-card:active { cursor: grabbing; }
.agenda-task-card:hover {
  border-color: var(--terra-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.agenda-task-card.priority-haute { border-left: 3px solid var(--warn); }
.agenda-task-card.priority-urgente {
  border-left: 3px solid var(--danger);
  background: linear-gradient(90deg, var(--terra-mist) 0%, var(--paper) 60%);
}
.agenda-task-title {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}
.agenda-task-description-preview {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 8px;
  margin-top: 4px;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-mute);
}
.agenda-task-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ivory-soft);
  border-radius: 99px;
}
/* Auteur de la tâche — méta discrète sous la rangée de chips (ce n'est pas
   l'info principale : taille réduite, ink-faint, pas de chip). */
.agenda-task-card .agenda-task-createdby {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--ink-faint);
}

/* 033 — chip d'assignation GROUPE (maquette mockup-taches-groupes.html) :
   fond terra + 👥 + libellé Fraunces italique, distinguable au premier
   regard de la chip personne (neutre « → Prénom »). */
.agenda-task-meta-chip.grp {
  background: var(--terra-bg);
  border: 1px solid var(--terra-light);
  color: var(--terra-deep);
}
.agenda-task-meta-chip.grp .gn {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
}
.agenda-task-meta-chip.due-soon {
  background: var(--warn-bg);
  color: var(--ink-soft);
}
.agenda-task-meta-chip.overdue {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
}
/* ============================================================
   033 — Assignation exclusive + filtre confort par rôle
   (maquette mockup-taches-groupes.html validée 06/06)
   ============================================================ */

/* Sélecteur 2 niveaux du modal tâche — niveau 1 : segmented control */
#agendaTaskModal .agenda-assignee-seg {
  display: flex;
  background: var(--ivory-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  margin-bottom: 12px;
}
#agendaTaskModal .agenda-assignee-seg button {
  flex: 1;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 7px 4px;
  cursor: pointer;
}
#agendaTaskModal .agenda-assignee-seg button.on {
  background: var(--paper);
  color: var(--terra-deep);
  border-color: var(--terra-light);
  box-shadow: var(--shadow-sm);
}
/* Niveau 2 — radio-cards groupe (Assistantes / Secrétaires uniquement) */
#agendaTaskModal .agenda-assignee-gcards { display: flex; gap: 10px; }
#agendaTaskModal .agenda-assignee-gcard {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 13px 12px;
  cursor: pointer;
  text-align: center;
}
#agendaTaskModal .agenda-assignee-gcard.on {
  border-color: var(--terra);
  background: var(--terra-bg);
  box-shadow: 0 0 0 1px var(--terra-light);
}
#agendaTaskModal .agenda-assignee-gcard .gi { font-size: 19px; display: block; margin-bottom: 5px; }
#agendaTaskModal .agenda-assignee-gcard .gn {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  display: block;
}
#agendaTaskModal .agenda-assignee-gcard.on .gn { color: var(--terra-deep); }
#agendaTaskModal .agenda-assignee-gcard .gc { font-size: 10.5px; color: var(--ink-mute); display: block; margin-top: 2px; }
#agendaTaskModal .agenda-assignee-hint { font-size: 11px; color: var(--ink-faint); line-height: 1.5; margin-top: 9px; }
#agendaTaskModal .agenda-assignee-hint:empty { display: none; }

/* Bandeau filtre confort (tâches + RDV) — chip terra ✕ / état désactivé */
.agenda-rolefilter-band {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 9px 13px;
  margin-bottom: 14px;
}
.agenda-rolefilter-band.off { background: var(--paper); }
.agenda-rolefilter-band .rfb-ico { font-size: 14px; }
.agenda-rolefilter-band .rfb-lab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.agenda-rolefilter-band .rfb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--terra-bg);
  border: 1px solid var(--terra-light);
  border-radius: var(--radius-pill);
  padding: 4px 6px 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--terra-deep);
}
.agenda-rolefilter-band .rfb-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--terra-light);
  color: var(--terra-deep);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.agenda-rolefilter-band .rfb-state { font-size: 12px; color: var(--ink-mute); }
.agenda-rolefilter-band .rfb-count {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.agenda-rolefilter-band .rfb-relink {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--terra-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.agenda-task-comments-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--terra);
  font-weight: 600;
}

/* ─────── Pill praticien (couleur dynamique inline via JS) ─────── */
.agenda-praticien-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid;
}

/* ─────── Sous-tâches ─────── */
.agenda-subtasks-list {
  display: block;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}
.agenda-subtasks-list::-webkit-scrollbar { width: 6px; }
.agenda-subtasks-list::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 99px;
}
.agenda-subtask-item {
  display: grid;
  grid-template-columns: 24px 1fr 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--rule-soft);
  transition: all 0.15s;
  min-height: 42px;
  box-sizing: border-box;
  margin-bottom: 6px;
}
.agenda-subtask-item:hover {
  background: var(--ivory-soft);
  border-color: var(--rule);
}
.agenda-subtask-item.done {
  opacity: 0.6;
  background: var(--ivory-soft);
}
.agenda-subtask-item.done .agenda-subtask-text {
  text-decoration: line-through;
  color: var(--ink-mute);
}
.agenda-subtask-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--sage);
  margin: 0;
  justify-self: center;
}
.agenda-subtask-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}
.agenda-subtask-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border-radius: 99px;
  transition: all 0.15s;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agenda-subtask-remove:hover {
  color: var(--terra);
  background: var(--paper);
  border-color: var(--terra);
}
.agenda-subtask-progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sage-bg);
  border: 1px solid var(--sage);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}
.agenda-subtask-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.agenda-subtask-progress-label.done { color: var(--sage-deep); }
.agenda-progress-bar {
  position: relative;
  height: 8px;
  background: var(--ivory-deep);
  border-radius: 99px;
  overflow: hidden;
}
.agenda-progress-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--terra-light), var(--terra));
  border-radius: 99px;
  transition: width 0.4s ease;
}
.agenda-progress-bar.done .agenda-progress-bar-fill {
  background: linear-gradient(90deg, var(--sage), var(--sage-deep));
}

/* ─────── Templates (panneau dans Réglages) ─────── */
.agenda-template-item {
  padding: 12px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: all 0.15s;
  background: var(--paper);
}
.agenda-template-item:hover {
  background: var(--sage-bg);
  border-color: var(--sage);
}
.agenda-template-item-name {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.agenda-template-item-preview {
  font-size: 12px;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.agenda-template-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  gap: 8px;
}
.agenda-template-action-btn {
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 99px;
  transition: all 0.15s;
  font-family: 'Manrope', sans-serif;
}
.agenda-template-action-btn:hover {
  background: var(--paper);
  border-color: var(--ink);
}

/* ─────── Détail tâche (modale) ─────── */
.agenda-task-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--ivory-soft);
  border-radius: var(--radius);
  border: 1px solid var(--rule-soft);
}
.agenda-task-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
  min-width: 0;
}
.agenda-task-detail-meta-item.full { grid-column: 1 / -1; }
.agenda-task-detail-meta-item label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.agenda-task-detail-meta-item .value {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}
@media (max-width: 700px) {
  .agenda-task-detail-meta { grid-template-columns: 1fr; }
}
.agenda-task-description {
  background: var(--paper);
  padding: 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ─────── Commentaires ─────── */
.agenda-comments-section h3 {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 14px;
  color: var(--ink);
}
.agenda-comment {
  padding: 12px 14px;
  background: var(--ivory-soft);
  border-radius: var(--radius);
  margin-bottom: 8px;
  border-left: 2px solid var(--rule);
}
.agenda-comment.own {
  border-left-color: var(--terra);
  background: var(--terra-mist);
}
.agenda-comment-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.agenda-comment-author {
  font-weight: 600;
  color: var(--ink-soft);
}
.agenda-comment-text {
  font-size: 14px;
  color: var(--ink);
  white-space: pre-wrap;
  line-height: 1.5;
}
.agenda-comment-form {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.agenda-comment-form textarea {
  flex: 1;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: 'Manrope', sans-serif;
  resize: vertical;
}
.agenda-comment-form textarea:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px var(--terra-mist);
}

/* ─────── Modaux Agenda ─────── */
/* B.3.5 — Bloc Agenda redondant SUPPRIMÉ. Les classes .agenda-modal-*
   héritent désormais du bloc DS unifié l.2639+ (enveloppe Agenda + footer
   Stock, selector grouping virgule). Aucune perte fonctionnelle.
   Différences absorbées :
     • Tailles : medium 820 → 640 (= défaut DS), large 900 préservé, wide 1100
       préservé via aliases groupés (.agenda-modal-content.large/wide)
     • Footer : padding 12×22 + sticky → padding 18×32×24 + non-sticky (arbitrage
       David : pattern Stock plus généreux pour les boutons Annuler/Enregistrer)
     • Gap footer 8 → 10 (Stock) */

/* ─────── Form sections collapsibles dans modaux ─────── */
.agenda-form-section {
  margin-bottom: 8px;
  background: var(--ivory-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.agenda-form-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--ivory-soft);
  transition: background 0.15s;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.agenda-form-section-header:hover { background: var(--ivory-deep); }
.agenda-form-section-header .section-icon { font-size: 15px; line-height: 1; }
.agenda-form-section-header .section-title {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
  flex: 1;
}
.agenda-form-section-header .section-chevron {
  color: var(--ink-mute);
  font-size: 12px;
  transition: transform 0.2s;
}
.agenda-form-section.collapsed .section-chevron { transform: rotate(-90deg); }
.agenda-form-section.collapsed .agenda-form-section-body { display: none; }
.agenda-form-section.collapsed .agenda-form-section-header {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.agenda-form-section.emphasis {
  background: var(--terra-mist);
  border: 1px solid var(--terra);
  box-shadow: 0 0 0 2px var(--terra-bg);
}
.agenda-form-section.emphasis .agenda-form-section-header {
  background: var(--terra-mist);
}
.agenda-form-section.emphasis .agenda-form-section-header:hover {
  background: var(--terra-bg);
}
.agenda-form-section.emphasis .section-title {
  color: var(--terra-deep);
  font-weight: 500;
}
.agenda-form-section.emphasis .agenda-form-section-body {
  background: var(--paper);
  border-top: 1px solid var(--terra-bg);
}
.agenda-form-section-body {
  padding: 12px 16px 14px;
  background: var(--paper);
  border-top: 1px solid var(--rule-soft);
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

/* ─────── Form groups dans modaux ─────── */
.agenda-form-group { margin-bottom: 10px; }
.agenda-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.agenda-form-row .agenda-form-group { margin-bottom: 0; }
.agenda-form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.agenda-form-group input,
.agenda-form-group select,
.agenda-form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 13.5px;
  background: var(--paper);
  font-family: 'Manrope', sans-serif;
  transition: all 0.2s;
}
.agenda-form-group input:focus,
.agenda-form-group select:focus,
.agenda-form-group textarea:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px var(--terra-mist);
}
.agenda-form-group textarea {
  resize: vertical;
  min-height: 64px;
}

/* ─────── Filtres + boutons toolbar Tâches ─────── */
/* B.3.3 RÉVISÉ #4 — Filtres alignés sur Stock (pill capsule compacte, flèche
   terracotta inline). Spec calquée sur #stock-view .stock-filters .filter-pill
   (l.3866) : radius 99, padding 7×30×7×14, font 12px, min-width 120, paper bg.
   ⚠ B.3.3 RÉ-RÉVISÉ — fix critique : width auto + flex 0 0 auto pour neutraliser
   la règle globale select { width: 100% } (l.214) qui faisait wrapper les 3
   selects sur 3 lignes pleine largeur (illusion de "dézoom" remontée par David).
   Calque .stock-filters select { width: auto; min-width: 140px } (l.1268). */
.agenda-filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;                                   /* override global select { width: 100% } */
  flex: 0 0 auto;                                /* ne grandit pas dans flex container */
  padding: 7px 30px 7px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);             /* pill capsule (était --radius 8) */
  font-family: var(--sans);
  font-size: var(--text-xs);                     /* 11px (était 13) — compact toolbar */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B85940' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  color: var(--ink-soft);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  min-width: 140px;                              /* calque Stock (l.1271) */
  transition: all 0.2s ease;
}
.agenda-filter-select:hover {
  border-color: var(--terracotta);
  background-color: var(--ivory-soft);
  color: var(--ink);
}
.agenda-filter-select:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px var(--terra-mist);
}
/* B.3.3 RÉVISÉ #4 — Search box alignée sur Stock filter-search compacte
   (calque #stock-view .stock-filters .filter-search l.3826). */
.agenda-search-box {
  position: relative;
  flex: 0 0 auto;                            /* plus de flex:1 (qui faisait gonfler) */
  min-width: 220px;
  max-width: 280px;
}
.agenda-search-box input {
  width: 100%;
  padding: 8px 18px 8px 38px;                /* compact (était 13×16×13×44) */
  border: 1px solid var(--rule);             /* 1px (était 1.5px) */
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);                 /* 13px (était 15) */
  background: var(--paper);
  font-family: var(--sans);
  color: var(--ink);
  outline: none;
  transition: all 0.2s ease;
  /* box-shadow retirée — la barre de filtres doit rester light, pas surélevée */
}
.agenda-search-box input:hover {
  border-color: var(--terracotta);
  background-color: var(--ivory-soft);
}
.agenda-search-box input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--serif);                 /* italique Fraunces (calque Stock placeholder) */
  font-size: var(--text-sm);
}
.agenda-search-box input:focus {
  border-color: var(--terracotta);
  background-color: var(--paper);
  box-shadow: 0 0 0 3px rgba(184, 89, 64, 0.12);
}
.agenda-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
  font-size: 16px;
}

.agenda-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  transition: all 0.18s ease;
}
.agenda-btn:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--ink-mute);
}
.agenda-btn-primary {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--paper);
}
.agenda-btn-primary:hover {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
  color: var(--paper);
  transform: translateY(-1px);
}
.agenda-btn-ghost {
  background: transparent;
  border-color: transparent;
}
.agenda-btn-ghost:hover {
  background: var(--ivory-soft);
}
.agenda-btn-danger {
  background: var(--paper);
  border-color: var(--danger);
  color: var(--danger);
}
.agenda-btn-danger:hover {
  background: var(--danger);
  color: var(--paper);
}
.agenda-btn-add-cta {
  background: var(--terra);
  border: 1px solid var(--terra-deep);
  color: var(--ivory);
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
}
.agenda-btn-add-cta:hover {
  background: var(--terra-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ============================================================ */
/* DentalAgenda — retouche UI : nav onglets + add-cta-icon       */
/* (calque exact tab-bar prod, scope strict .agenda-*)           */
/* ============================================================ */

/* Phase B.3.3 — Bloc .agenda-tab* SUPPRIMÉ.
   Agenda niveau 1 (RDV / Tâches / Historique / Réglages) utilise désormais
   directement .tabs / .tab de Stock (cf. styles.css l.~830 : underline 2px
   terracotta sur l'actif, Manrope 0.95rem, transparent inactif).
   Le pill capsule Fraunces italic, l'animation pulse urgent et le triangle
   ::after sont abandonnés au profit de la cohérence Stock — l'identité
   éditoriale Fraunces est préservée dans le .page-header H1 (qui reste). */

/* Icône cercle "+" du bouton "Nouvelle tâche" (calque prod .add-cta-icon) */
.agenda-btn-add-cta .agenda-add-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 252, 245, 0.22);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

/* ============================================================ */
/* DentalAgenda — Historique (étape 5) — calque prod scopé      */
/* ============================================================ */

.agenda-history-entry {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: flex-start;
}
.agenda-history-entry:last-child { border-bottom: none; }

.agenda-history-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ivory-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid var(--rule-soft);
}
/* Couleur icône selon groupe (terracotta=rdv, sage=task, warn=settings) */
.agenda-history-entry.type-rdv .agenda-history-icon {
  background: var(--terra-mist);
  border-color: var(--terra-bg);
}
.agenda-history-entry.type-task .agenda-history-icon {
  background: var(--sage-bg);
  border-color: var(--sage-bg);
}
.agenda-history-entry.type-settings .agenda-history-icon {
  background: var(--warn-bg);
  border-color: var(--warn-bg);
}

.agenda-history-main {
  flex: 1;
  min-width: 0;
}
.agenda-history-text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  word-wrap: break-word;
}
.agenda-history-text strong { font-weight: 600; }
.agenda-history-text em {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.agenda-history-text .muted {
  color: var(--ink-mute);
  font-style: italic;
}
.agenda-history-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--ivory-soft);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-soft);
}

.agenda-history-meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 4px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* En-tête de jour (Fraunces italique calque prod) */
.agenda-history-day-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-soft);
}
.agenda-history-day-header > span:first-child {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
}
.agenda-history-day-header .muted {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============================================================ */
/* DentalAgenda — Onglet RDV — tableau composite (étape 6a.2)   */
/* ============================================================ */
/* Calque prod gestionrdvm v3.1 (index2.html l.988-1972).        */
/* Toutes les classes préfixées .agenda-* — scope #agenda-view.  */
/* Aucune redéfinition de .badge/.cell-stack/.praticien-tag/etc. */

/* ─── Sous-onglets RDV (niveau 2) — TEXTE + COMPTEUR + MINI-UNDERLINE LOCALISÉ
   B.3.3 RÉVISÉ — Pattern Linear inbox / Notion view-switchers : texte simple
   avec compteur parenthésé, séparateurs · légers entre items, l'actif en
   terra bold AVEC un trait 2px terracotta sous le mot actif uniquement.
   Plus de pastilles colorées (qui concurrenceraient le niveau 1 déjà en pills)
   — le poids visuel reste sur le niveau 1. Manrope partout pour lisibilité. */

.agenda-rdv-cat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;                        /* chips (variante B validée 10/06) */
  padding: var(--space-3) var(--space-12) var(--space-2);   /* 12 × 48 × 8 */
  background: transparent;
  border-bottom: 1px solid var(--rule-soft);
}

/* Niveau 2 — chips discrètes (variante B validée 10/06, harmonisation).
   Subordonné au niveau 1 (pills serif terracotta plein) via : sans-serif
   12.5px, fond ivoire doux, actif = terra-mist + contour fin (JAMAIS
   terracotta plein, réservé au N1). */
.agenda-rdv-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  background: var(--ivory-soft);
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms var(--ease-out);
}
.agenda-rdv-cat-tab:hover {
  background: var(--ivory-deep);
  color: var(--ink);
}
.agenda-rdv-cat-tab.active {
  background: var(--terra-mist);
  border-color: var(--terra);
  color: var(--terra-deep);
  font-weight: 600;
}

/* Compteur — mini-pill dans la chip (harmonisation 10/06, format s2 réduit) */
.agenda-rdv-cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--ivory-deep);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.agenda-rdv-cat-tab.active .agenda-rdv-cat-badge {
  background: var(--terra);
  color: var(--paper);
}

/* ─── Tableau RDV (calque prod table + tbody tr) ─── */
.agenda-rdv-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  /* F2 — overflow: hidden RETIRÉ pour laisser les tooltips [data-tooltip]
     déborder hors du cadre de la table. Le border-radius extérieur tient
     toujours via le border 1px ; seuls les coins du thead peuvent paraître
     un demi-pixel carrés (acceptable, équivalent Notion). */
}
.agenda-rdv-table thead th {
  background: var(--ivory-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.agenda-rdv-table .agenda-th-sortable {
  cursor: pointer;
  user-select: none;
}
.agenda-rdv-table .agenda-th-sortable:hover {
  background: var(--ivory-deep);
}
.agenda-rdv-table .agenda-sort-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.4;
  font-size: 9px;
}
.agenda-rdv-table th.sorted .agenda-sort-arrow {
  opacity: 1;
  color: var(--terra);
}
.agenda-rdv-table tbody tr {
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.12s;
}
.agenda-rdv-table tbody tr:hover {
  background: var(--ivory-soft);
}
.agenda-rdv-table tbody tr:last-child {
  border-bottom: none;
}
.agenda-rdv-table tbody td {
  padding: 13px 14px;
  vertical-align: top;
  font-size: 13px;
  color: var(--ink);
}

/* Ligne urgente (>7j en "En attente") */
.agenda-row-urgent {
  background: linear-gradient(90deg, var(--terra-mist) 0%, transparent 80%);
}
.agenda-row-urgent:hover {
  background: var(--terra-mist) !important;
}

/* Colonnes (min-widths calque prod, responsive si overflow) */
.agenda-col-patient { min-width: 130px; }
.agenda-col-contact { min-width: 140px; max-width: 200px; }
.agenda-col-text    { min-width: 130px; max-width: 240px; }
.agenda-col-suivi   { min-width: 130px; }
.agenda-col-statut  { min-width: 120px; }
.agenda-col-rdv     { min-width: 130px; }
.agenda-col-actions { width: 1%; text-align: right; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
   REFONTE DESIGN A — Demandes RDV en CARTES (remplace le tableau).
   Scopé #agenda-view. Réutilise les mêmes cell-renderers dans le corps.
   Identification praticien : bande gauche 4px (--prat-color) + teinte
   color-mix ~10% (lisibilité prioritaire) ; NULL → neutre.
   ════════════════════════════════════════════════════════════════ */
#agenda-view .agenda-card-sortbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
#agenda-view .agenda-card-sortlabel { font-size: 12px; font-weight: 600; color: var(--ink-mute); }
#agenda-view .agenda-card-sortbtn { appearance: none; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 5px 12px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .13s; }
#agenda-view .agenda-card-sortbtn:hover { border-color: var(--terra); background: var(--ivory-soft); }
#agenda-view .agenda-card-sortbtn.active { border-color: var(--terra); background: var(--terra-bg); color: var(--terra-deep); }
#agenda-view .agenda-card-sortbtn .agenda-sort-arrow { font-size: 10px; opacity: .7; }

#agenda-view .agenda-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
#agenda-view .rdv-card { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
#agenda-view .rdv-card:hover { box-shadow: var(--shadow-md); border-color: var(--ink-faint); }
#agenda-view .rdv-card.urgent { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger-bg); }
/* Pulsation urgences >7j — INTERSECTION .cat-urgence (catégorie, posé par
   renderAgendaRdvCards, vue active uniquement) ET .urgent (>7j + En attente,
   toutes cats). Décision 06/06 : ni les urgences récentes, ni les >7j des
   autres catégories ne pulsent. Pas de pulsation dans design-A-cartes.html
   (vérifié : seul .urgent statique) → proposition sobre : halo --danger lent
   3s sur box-shadow, amplitude 5px à 14% d'opacité. Alerte visuelle, pas un
   gyrophare. Le 0% reprend l'ombre statique de .urgent (continuité). */
@keyframes agendaUrgencePulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--danger-bg); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 14%, transparent); }
}
#agenda-view .rdv-card.cat-urgence.urgent { animation: agendaUrgencePulse 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #agenda-view .rdv-card.cat-urgence.urgent { animation: none; }
}
/* Bande praticien (gauche) : ses coins GAUCHES épousent le radius de la carte —
   sinon elle dépasse en haut/bas des coins arrondis (WebKit ne rogne pas un
   ::before absolu malgré overflow:hidden + border-radius ; Chrome partiellement). */
#agenda-view .rdv-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rule); z-index: 2; border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
#agenda-view .rdv-card.has-prat { background: color-mix(in srgb, var(--prat-color) 10%, var(--paper)); }
#agenda-view .rdv-card.has-prat::before { background: var(--prat-color); }
#agenda-view .rdv-card .rc-top { display: flex; align-items: flex-start; gap: 11px; padding: 14px 15px 11px; border-bottom: 1px solid var(--rule-soft); }
#agenda-view .rdv-card .rc-av { width: 36px; height: 36px; border-radius: 50%; background: var(--terra-bg); color: var(--terra-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; border: 1px solid var(--terra-light); flex-shrink: 0; }
#agenda-view .rdv-card .rc-id { flex: 1; min-width: 0; }
#agenda-view .rdv-card .rc-st { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
#agenda-view .rdv-card .rc-body { padding: 11px 15px 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
#agenda-view .rdv-card .kvline { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.35; }
#agenda-view .rdv-card .kvline .k { color: var(--ink-mute); font-weight: 600; flex-shrink: 0; width: 96px; }
#agenda-view .rdv-card .kvline .v { color: var(--ink-soft); min-width: 0; flex: 1; }
#agenda-view .rdv-card .rc-foot { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-top: 1px solid var(--rule-soft); background: var(--ivory-soft); flex-wrap: wrap; position: relative; z-index: 1; }
@media (max-width: 760px) { #agenda-view .agenda-card-grid { grid-template-columns: 1fr; } }

/* Boutons d'action LABELLISÉS en pied de carte (maquette .act) — remplace les
   icônes seules. [📞 Action rapide][Détail][✎ Modifier] … [📂 Archiver][🗑 Supprimer] */
#agenda-view .rdv-card .rc-foot { gap: 2px; }
#agenda-view .rdv-card .act { appearance: none; border: none; background: none; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-mute); padding: 6px 9px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 5px; transition: all .13s; white-space: nowrap; }
#agenda-view .rdv-card .act:hover { background: var(--ivory-deep); color: var(--ink); }
#agenda-view .rdv-card .act.primary { color: var(--terra-deep); }
#agenda-view .rdv-card .act.primary:hover { background: var(--terra-bg); }
#agenda-view .rdv-card .act.danger:hover { background: var(--danger-bg); color: var(--danger); }
#agenda-view .rdv-card .act.spacer { margin-left: auto; }

/* Alertes en RANGÉE dédiée (maquette .rc-alerts / .mini-alert). Le 💬 utilise un
   title natif (tooltip lisible, jamais coupé par l'overflow de la carte). */
#agenda-view .rdv-card .rc-alerts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 10px; position: relative; z-index: 1; }
#agenda-view .rdv-card .mini-alert { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid; cursor: default; }
#agenda-view .rdv-card .mini-alert.urg { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
#agenda-view .rdv-card .mini-alert.arch { background: var(--warn-bg); color: var(--warn-deep); border-color: var(--warn); }
#agenda-view .rdv-card .mini-alert.com { background: var(--blue-bg); color: var(--blue-deep); border-color: var(--blue); }

/* Nom patient en serif + sous-ligne (maquette .rc-id .nm) */
#agenda-view .rdv-card .rc-id .agenda-cell-primary { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.15; }
#agenda-view .rdv-card .rc-id .agenda-cell-secondary { font-size: 12.5px; color: var(--ink-mute); }

/* Modal-liste Archives / Corbeille (maquette .lrow) — scopé au modal dynamique. */
.agenda-modal .agenda-lm-note { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--ink-mute); background: var(--ivory-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 9px 13px; margin-bottom: 14px; }
.agenda-modal .agenda-lm-row { display: flex; align-items: center; gap: 13px; padding: 11px 4px; border-bottom: 1px solid var(--rule-soft); }
.agenda-modal .agenda-lm-row:last-child { border-bottom: none; }
.agenda-modal .agenda-lm-pt { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.agenda-modal .agenda-lm-av { width: 32px; height: 32px; border-radius: 50%; background: var(--terra-bg); color: var(--terra-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; border: 1px solid var(--terra-light); flex-shrink: 0; }
.agenda-modal .agenda-lm-pt b { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.agenda-modal .agenda-lm-pt small { display: block; color: var(--ink-faint); font-size: 11px; }
.agenda-modal .agenda-lm-meta { width: 200px; flex-shrink: 0; font-size: 11.5px; color: var(--ink-mute); }
.agenda-modal .agenda-lm-meta b { color: var(--ink-soft); font-weight: 600; }
.agenda-modal .agenda-lm-meta small { display: block; color: var(--ink-faint); font-size: 11px; }
.agenda-modal .agenda-lm-acts { display: flex; gap: 6px; flex-shrink: 0; }
.agenda-modal .agenda-lm-empty { text-align: center; padding: 36px 16px; color: var(--ink-mute); font-size: 13.5px; }
#agendaRdvListModal .agenda-modal-footer.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Point 2 — tooltip 💬 non coupé : carte en overflow VISIBLE ; le band ::before et
   les rangées reçoivent les rayons pour conserver les coins arrondis. */
#agenda-view .rdv-card { overflow: visible; }
#agenda-view .rdv-card::before { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
#agenda-view .rdv-card .rc-top { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
#agenda-view .rdv-card .rc-foot { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* Ancres du popover commentaires — badge RDV + chip Kanban tâches (source
   unique agendaCommentsPopoverHtml, extension par virgule, zéro duplication) */
#agenda-view .rdv-card .mini-alert.com,
#agenda-view .agenda-com-anchor { cursor: help; position: relative; }

/* Popover 💬 « papier » DS — maquette mockup-tooltip-commentaires.html validée
   06/06, remplace l'atom [data-tooltip] sur le badge commentaires (attr() ne
   permet pas de mise en forme riche). Markup : agendaRdvCommentsPopoverHtml.
   Carte --paper bordée --rule + caret losange, eyebrow + compteur Fraunces
   italique terra, auteur serif + date méta, filet terra par commentaire (écho
   bande praticien), clamp 3 lignes, pied italique. Révélé :hover/:focus-visible
   (badge tabindex=0), délai 120ms anti-flash + transition 150ms (calque atom).
   Ancré bord GAUCHE du badge (bas-gauche de carte, calque ancien ancrage),
   z-index 1000 ; la carte est déjà en overflow:visible (cf. ci-dessus). */
#agenda-view .agenda-comments-pop { position: absolute; bottom: calc(100% + 9px); left: -6px; width: 300px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; text-align: left; white-space: normal; font-family: var(--sans); cursor: default; z-index: 1000; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); transition-delay: 120ms; }
#agenda-view .mini-alert.com:hover .agenda-comments-pop,
#agenda-view .mini-alert.com:focus-visible .agenda-comments-pop,
#agenda-view .agenda-com-anchor:hover .agenda-comments-pop,
#agenda-view .agenda-com-anchor:focus-visible .agenda-comments-pop { opacity: 1; transform: translateY(0); }

/* Kanban tâches : les colonnes sont SCROLLABLES (.agenda-kanban-col-body
   overflow-y:auto + max-height 75vh) → un popover en absolute y serait
   tronqué (haut de colonne, bords). position:fixed SANS offsets = position
   statique en coordonnées VIEWPORT : échappe au clipping des ancêtres
   overflow (aucun transform/filter persistant sur les ancêtres qui
   recréerait un containing block). Le transform sert ici à l'ANCRAGE
   (remonte le popover au-dessus de la chip) — identique au repos et au
   reveal, l'apparition reste le fondu opacity 150ms + délai 120ms. */
#agenda-view .agenda-kanban .agenda-comments-pop {
  position: fixed;
  bottom: auto;
  left: auto;
  transform: translateY(calc(-100% - 8px));
}
#agenda-view .agenda-kanban .agenda-com-anchor:hover .agenda-comments-pop,
#agenda-view .agenda-kanban .agenda-com-anchor:focus-visible .agenda-comments-pop {
  transform: translateY(calc(-100% - 8px));
}
/* Colonne droite (Terminées) : popover décalé à GAUCHE de la chip pour ne
   jamais sortir du viewport à droite ; caret basculé côté droit. */
#agenda-view .agenda-kanban-col:last-child .agenda-comments-pop,
#agenda-view .agenda-kanban-col:last-child .agenda-com-anchor:hover .agenda-comments-pop,
#agenda-view .agenda-kanban-col:last-child .agenda-com-anchor:focus-visible .agenda-comments-pop {
  transform: translate(calc(-100% + 60px), calc(-100% - 8px));
}
#agenda-view .agenda-kanban-col:last-child .agenda-comments-pop::after {
  left: auto;
  right: 18px;
}
#agenda-view .agenda-comments-pop::after { content: ''; position: absolute; top: 100%; left: 18px; margin-top: -5px; width: 10px; height: 10px; background: var(--paper); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: rotate(45deg); }
#agenda-view .agenda-comments-pop .acp-head { display: flex; align-items: baseline; gap: 6px; padding: 10px 14px 8px; border-bottom: 1px solid var(--rule-soft); }
#agenda-view .agenda-comments-pop .acp-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
#agenda-view .agenda-comments-pop .acp-count { margin-left: auto; font-family: var(--serif); font-style: italic; font-size: 12px; font-weight: 400; color: var(--terra-deep); }
#agenda-view .agenda-comments-pop .acp-item { display: block; padding: 9px 14px 10px 12px; border-left: 2px solid var(--terra-light); margin: 8px 10px 8px 12px; }
#agenda-view .agenda-comments-pop .acp-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
#agenda-view .agenda-comments-pop .acp-author { font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--ink); }
#agenda-view .agenda-comments-pop .acp-date { font-size: 10.5px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.03em; }
#agenda-view .agenda-comments-pop .acp-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 450; line-height: 1.5; color: var(--ink-soft); }
#agenda-view .agenda-comments-pop .acp-sep { display: block; height: 1px; background: var(--rule-soft); margin: 0 14px; }
#agenda-view .agenda-comments-pop .acp-foot { display: block; padding: 7px 14px 9px; border-top: 1px solid var(--rule-soft); font-family: var(--serif); font-style: italic; font-size: 11.5px; font-weight: 400; color: var(--ink-mute); }

/* Point 4 → harmonisation 10/06 : sous-onglets en CHIPS DISCRÈTES (variante B
   validée). Subordonnées au N1 pills serif : sans-serif 12.5px, fond ivoire,
   actif = terra-mist + contour terracotta fin (JAMAIS terracotta plein). */
#agenda-view .agenda-rdv-cat-bar { gap: 8px; padding: 12px 48px 10px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 0; }
#agenda-view .agenda-rdv-cat-tab + .agenda-rdv-cat-tab::before { content: none; }   /* (sécurité héritage) */
#agenda-view .agenda-rdv-cat-tab { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); padding: 5px 13px; background: var(--ivory-soft); border: 1px solid transparent; border-radius: var(--radius-pill); margin-bottom: 0; gap: 6px; align-items: center; transition: all 150ms var(--ease-out); }
#agenda-view .agenda-rdv-cat-tab:hover { color: var(--ink); background: var(--ivory-deep); }
#agenda-view .agenda-rdv-cat-tab.active { color: var(--terra-deep); border-color: var(--terra); background: var(--terra-mist); }
#agenda-view .agenda-rdv-cat-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; background: var(--ivory-deep); color: var(--ink-soft); border: none; display: inline-flex; align-items: center; justify-content: center; }
#agenda-view .agenda-rdv-cat-badge::before, #agenda-view .agenda-rdv-cat-badge::after { content: none; }   /* (sécurité héritage) */
#agenda-view .agenda-rdv-cat-tab.active .agenda-rdv-cat-badge { background: var(--terra); color: var(--paper); }
/* cat Urgences urgent → pastille rouge PULSE conservée (comportement métier) */
#agenda-view .agenda-rdv-cat-tab .agenda-rdv-cat-badge.tab-badge--urgent { background: var(--danger); color: var(--paper); animation: tabBadgePulseUrgent 1.5s infinite; }

/* ════════ Points 5/7/8 — MODALS au style maquette ════════ */
/* Folds (.agenda-form-section) → maquette .fold : header ivory-soft léger, corps
   aéré, champs .field. Emphasis rose NEUTRALISÉE (la maquette = fold neutre). */
.agenda-modal .agenda-form-section { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: transparent; }
.agenda-modal .agenda-form-section.emphasis { background: transparent; border-color: var(--rule); }
.agenda-modal .agenda-form-section-header { background: var(--ivory-soft); padding: 11px 14px; gap: 8px; border: none; }
.agenda-modal .agenda-form-section.emphasis .agenda-form-section-header { background: var(--ivory-soft); }
.agenda-modal .agenda-form-section-header .section-title { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0; text-transform: none; font-style: normal; }
.agenda-modal .agenda-form-section-header .section-chevron { margin-left: auto; color: var(--ink-faint); font-size: 11px; }
.agenda-modal .agenda-form-section-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--rule-soft); }
.agenda-modal .agenda-form-group { margin-bottom: 0; }
.agenda-modal .agenda-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-mute); margin-bottom: 5px; }
.agenda-modal .agenda-form-group input, .agenda-modal .agenda-form-group select, .agenda-modal .agenda-form-group textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); font-family: var(--sans); font-size: 13px; color: var(--ink); }
.agenda-modal .agenda-form-group textarea { resize: vertical; min-height: 60px; }

/* Point 5 — sélecteur catégorie en PILLS (maquette .cat-picker / .cat-opt) */
.agenda-modal .agenda-cat-picker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.agenda-modal .agenda-cat-picker-label { font-size: 12px; font-weight: 600; color: var(--ink-mute); margin-right: 4px; }
.agenda-modal .agenda-cat-opt { padding: 7px 13px; border: 1px solid var(--rule); border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: var(--ink-mute); cursor: pointer; background: var(--paper); font-family: var(--sans); }
.agenda-modal .agenda-cat-opt:hover { border-color: var(--terra); color: var(--ink); }
.agenda-modal .agenda-cat-opt.sel { background: var(--terra-bg); color: var(--terra-deep); border-color: var(--terra); }
.agenda-modal .agenda-cat-picker-note { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 14px; }

/* Points 3/8 — Détail RDV + tâche : grille meta ALLÉGÉE (pas de boîte beige),
   lignes label/valeur en 1 colonne façon maquette. */
/* Détail RDV/tâche : grille kv ÉPURÉE (maquette .kvgrid) — pas de boîte, pas de
   séparateurs ; label gris à gauche, valeur à droite. */
.agenda-modal .agenda-task-detail-meta { grid-template-columns: 1fr; background: transparent; border: none; padding: 0; gap: 0; margin-bottom: 10px; }
.agenda-modal .agenda-task-detail-meta-item { flex-direction: row; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: none; }
.agenda-modal .agenda-task-detail-meta-item label { min-width: 130px; flex-shrink: 0; margin-bottom: 0; color: var(--ink-mute); font-weight: 600; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.agenda-modal .agenda-task-detail-meta-item .value { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; font-size: 13px; }
/* Rangée de badges sous le titre (statut + catégorie + praticien) */
.agenda-modal .agenda-detail-badges { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* Corps détail tâche/demande — classes de la maquette (valeurs copiées telles
   quelles depuis design-A-cartes.html), scopées .agenda-modal (anti-collision). */
.agenda-modal .agenda-detail-desc { font-size: 13px; color: var(--ink-soft); margin: 12px 0; }
.agenda-modal .agenda-detail-ttl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 0 8px; }
.agenda-modal .agenda-detail-empty { font-size: 12.5px; color: var(--ink-mute); font-style: italic; padding: 6px 0 10px; }
.agenda-modal .status-btns { display: flex; gap: 8px; margin: 14px 0; }
.agenda-modal .status-btns button { flex: 1; padding: 9px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-mute); cursor: pointer; }
.agenda-modal .status-btns button.on { background: var(--warn-bg); color: var(--warn-deep); border-color: var(--warn); }
.agenda-modal .subtask { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.agenda-modal .subtask .st-txt { flex: 1; }
.agenda-modal .subtask.done .st-txt { text-decoration: line-through; color: var(--ink-faint); }
.agenda-modal .cbox { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; background: var(--paper); font-size: 12px; flex-shrink: 0; cursor: pointer; }
.agenda-modal .cbox.on { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.agenda-modal .comments { margin-top: 16px; border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.agenda-modal .comments .ttl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 11px; }
.agenda-modal .comment { display: flex; gap: 10px; margin-bottom: 12px; }
.agenda-modal .comment .cav { width: 28px; height: 28px; border-radius: 50%; background: var(--sage-bg); color: var(--sage-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; border: 1px solid var(--sage); flex-shrink: 0; }
.agenda-modal .comment .cbody { flex: 1; background: var(--ivory-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 8px 11px; }
.agenda-modal .comment .cbody .ch { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-mute); margin-bottom: 3px; }
.agenda-modal .comment .cbody .ch b { color: var(--ink-soft); }
.agenda-modal .comment .cbody p { font-size: 12.5px; color: var(--ink-soft); }
.agenda-modal .add-comment { display: flex; gap: 8px; }
.agenda-modal .add-comment input { flex: 1; padding: 8px 11px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper); font-size: 12.5px; font-family: var(--sans); color: var(--ink); }
.agenda-modal .agenda-detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agenda-modal .agenda-detail-foot > div { display: flex; gap: 8px; }
/* Encart « Pas encore traitée » (détail demande) — valeur maquette .refus-callout */
.agenda-modal .refus-callout { display: flex; gap: 9px; align-items: flex-start; padding: 10px 13px; background: var(--terra-mist); border: 1px solid var(--terra-bg); border-radius: var(--radius); font-size: 12.5px; color: var(--terra-deep); margin-bottom: 14px; }
.agenda-modal .refus-callout b { font-weight: 700; }

/* ════════ Lot final — alignement maquette (Réglages / modaux / Historique) ════════ */
/* Point 1 — lignes Réglages : maquette .list-row / .lr-main / .lr-act / .icon-btn
   (onglet, pas un modal → scope #agenda-view). Valeurs copiées de la maquette. */
#agenda-view .settings-list .list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
#agenda-view .settings-list .list-row:last-of-type { border-bottom: none; }
#agenda-view .settings-list .lr-main { flex: 1; min-width: 0; }
#agenda-view .settings-list .lr-main b { color: var(--ink); font-weight: 600; }
#agenda-view .settings-list .lr-main small { display: block; color: var(--ink-mute); font-size: 11.5px; }
#agenda-view .settings-list .lr-act { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
#agenda-view .settings-list .icon-btn { appearance: none; border: 1px solid var(--rule); background: var(--paper); border-radius: var(--radius); width: 30px; height: 30px; cursor: pointer; font-size: 13px; color: var(--ink-mute); display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; flex-shrink: 0; }
#agenda-view .settings-list .icon-btn:hover { background: var(--ivory-deep); color: var(--ink); }
#agenda-view .settings-list .icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Point 2 — Modèles picker : maquette .tpl-pick (modal → scope .agenda-modal). */
.agenda-modal .tpl-pick { border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 9px; cursor: pointer; background: var(--paper); }
.agenda-modal .tpl-pick:hover { border-color: var(--terra); background: var(--terra-mist); }
.agenda-modal .tpl-pick b { color: var(--ink); font-size: 13.5px; }
.agenda-modal .tpl-pick small { display: block; color: var(--ink-mute); font-size: 12px; margin-top: 2px; }

/* Point 2 — Action rapide 📞 : valeurs maquette .qa-choice/.qa-pick/.qa-next
   appliquées à la structure prod (IDs/handlers inchangés). */
.agenda-modal .agenda-quick-action-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.agenda-modal .agenda-quick-choice-btn { display: flex; flex-direction: column; align-items: center; border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 20px 16px; text-align: center; cursor: pointer; background: var(--paper); font-family: var(--sans); }
.agenda-modal .agenda-quick-choice-btn:hover { border-color: var(--terra); background: var(--terra-mist); }
.agenda-modal .agenda-quick-choice-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.agenda-modal .agenda-quick-choice-label { display: block; color: var(--ink); font-size: 14px; font-weight: 700; }
.agenda-modal .agenda-quick-choice-sub { color: var(--ink-mute); font-size: 11.5px; margin-top: 4px; }
.agenda-modal #agendaQuickActionStep2Yes, .agenda-modal #agendaQuickActionStep2No { margin-top: 16px; padding: 14px; border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--ivory-soft); }

/* Point 3 — Historique : trait vertical de timeline (maquette .timeline). Le trait
   passe derrière les icônes opaques (perles sur fil) ; masqué par les day-headers. */
#agenda-view #agendaHistoryContent { position: relative; }
#agenda-view #agendaHistoryContent::before { content: ''; position: absolute; left: 59px; top: 4px; bottom: 4px; width: 2px; background: var(--rule-soft); z-index: 0; }
#agenda-view .agenda-history-entry { position: relative; z-index: 1; }
#agenda-view .agenda-history-icon { position: relative; z-index: 1; }
#agenda-view .agenda-history-day-header { position: relative; z-index: 1; background: var(--paper); }

/* Point 3 — Réglages : cartes paper DS (titres serif italique, bouton pastille). */
#agenda-view .settings-section { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
#agenda-view .settings-section-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--rule-soft); background: var(--ivory-soft); }
#agenda-view .settings-section-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--ink); }
#agenda-view .settings-section-count { font-size: 12px; color: var(--ink-mute); }
#agenda-view .settings-add-row { display: flex; gap: 8px; padding: 14px 20px 6px; }
#agenda-view .settings-input { flex: 1; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); font-family: var(--sans); font-size: 13px; color: var(--ink); }
#agenda-view .settings-section .btn.btn-primary { background: var(--terra); border: 1px solid var(--terra); color: var(--paper); border-radius: var(--radius-pill); padding: 8px 16px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--sans); white-space: nowrap; }
#agenda-view .settings-section .btn.btn-primary:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
#agenda-view .settings-list { list-style: none; margin: 0; padding: 6px 12px 14px; }
#agenda-view .settings-empty { padding: 0 20px 16px; }
#agenda-view .settings-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; color: var(--ink); }
#agenda-view .settings-item:last-child { border-bottom: none; }
#agenda-view .settings-item-label { font-weight: 600; }
#agenda-view .settings-item-del { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-mute); cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; }
#agenda-view .settings-item-del:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
/* templates section dans la grille → pas de margin-top décalant la colonne */
#agenda-view .agenda-settings-grid .settings-section { margin-top: 0 !important; }

/* Point 9 — Réglages : bandeau « Personnel → Administration » (maquette) */
#agenda-view .agenda-settings-note { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-mute); background: var(--ivory-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 10px 14px; margin: 0 48px 18px; }
#agenda-view .agenda-settings-note b { color: var(--ink-soft); }

/* Tâches Kanban : teinte légère praticien en plus de la bande gauche existante
   (cohérence stricte avec les cartes RDV). Le fond est posé inline par
   renderAgendaTaskCard (color-mix), NULL → bande neutre var(--rule). */

/* ─── Cellules empilées (calque prod l.1448-1487 .cell-stack) ─── */
.agenda-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
  min-width: 0;
}
.agenda-cell-primary {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.agenda-cell-secondary {
  font-size: 11px;
  color: var(--ink-mute);
}
.agenda-cell-mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.agenda-cell-meta-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-right: 3px;
  font-weight: 600;
}
.agenda-cell-empty {
  color: var(--ink-faint);
}
.agenda-cell-truncate-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.agenda-cell-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.agenda-cell-motif-refus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--terra-deep);
  background: var(--terra-mist);
  border: 1px solid var(--terra);
  border-radius: var(--radius-sm);
  line-height: 1.3;
}
.agenda-cell-extras {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.agenda-cell-extras .agenda-alert-pulse,
.agenda-cell-extras .agenda-archive-countdown,
.agenda-cell-extras .agenda-task-comments-count {
  margin-left: 0;
}

/* ─── Pill praticien colorée (couleur inline depuis JS) ─── */
.agenda-praticien-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  background: var(--ivory-deep);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}

/* ─── Pill durée RDV ─── */
.agenda-duree-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  background: var(--ivory-soft);
  color: var(--ink-soft);
  border: 1px solid var(--rule-soft);
  letter-spacing: 0.02em;
}

/* ─── Badges statut (calque prod l.1044-1066 .badge — préfixé) ─── */
.agenda-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.agenda-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.agenda-badge-attente  { color: var(--warn);       background: var(--warn-bg); }
.agenda-badge-contacte { color: var(--terra); background: var(--terra-bg); }
.agenda-badge-fixe     { color: var(--sage);       background: var(--sage-bg); }
.agenda-badge-neutral  { color: var(--ink-mute);   background: var(--ivory-deep); }

/* ============================================================
   ATOM TOOLTIP — Design System v1, F2 (générique réutilisable)
   ------------------------------------------------------------
   100% CSS, 0 JS. Attribut data-tooltip="texte" sur n'importe quel
   élément (badge, button, span, td...) → tooltip apparaît au hover.
   data-tooltip-pos="top|bottom|left|right" (défaut top).
   Multi-ligne via \n dans data-tooltip + white-space: pre-line.
   Délai 120ms avant affichage (anti-flash sur passage rapide souris).
   z-index 1000 au-dessus du contenu, box-shadow lg pour la profondeur.
   ⚠ Anti-clipping : si l'ancêtre proche a overflow: hidden/auto, le
   tooltip est coupé. Cf .agenda-rdv-table (overflow retiré l.6480).
   Réutilisable Stock/Agenda/Patient/Admin — généralisé à [data-tooltip]
   sans scope, remplace la règle scopée .agenda-badge[data-tooltip].
   ============================================================ */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0.01em;
  max-width: 320px;
  width: max-content;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  transition-delay: 120ms;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Variant — position bottom (utile près du bord supérieur du tableau) */
[data-tooltip][data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Variant — position left (utile en bordure droite du viewport) */
[data-tooltip][data-tooltip-pos="left"]::after {
  bottom: 50%;
  top: auto;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(50%) translateX(4px);
}
[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after {
  transform: translateY(50%) translateX(0);
}

/* Variant — position right (utile en bordure gauche) */
[data-tooltip][data-tooltip-pos="right"]::after {
  bottom: 50%;
  top: auto;
  left: calc(100% + 6px);
  right: auto;
  transform: translateY(50%) translateX(-4px);
}
[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after {
  transform: translateY(50%) translateX(0);
}

/* ─── Extras de cellule statut (urgent / countdown / comments) ─── */
.agenda-alert-pulse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--danger);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: agendaPulse 2s ease-in-out infinite;
}
@keyframes agendaPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.agenda-archive-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
}
.agenda-archive-countdown.soon {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn);
}
.agenda-archive-countdown.imminent {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.agenda-task-comments-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--terra);
  font-weight: 600;
}

/* ─── Boutons d'action ligne (calque prod l.993-1041 .action-btns) ─── */
.agenda-action-btns {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.agenda-action-btns button:not(.ds-btn) {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 7px 9px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  line-height: 1;
  transition: all 0.15s ease;
  cursor: pointer;
}
.agenda-action-btns button:not(.ds-btn):hover {
  background: var(--ivory-deep);
  border-color: var(--ink-mute);
  color: var(--ink);
  transform: translateY(-1px);
}
.agenda-action-btns button:not(.ds-btn).success {
  color: var(--sage-deep);
  border-color: var(--sage);
  background: var(--sage-bg);
}
.agenda-action-btns button:not(.ds-btn).success:hover {
  background: var(--sage);
  color: var(--ivory);
  border-color: var(--sage-deep);
}
.agenda-action-btns button:not(.ds-btn).archive {
  color: var(--terra);
}
.agenda-action-btns button:not(.ds-btn).archive:hover {
  background: var(--terra-bg);
  border-color: var(--terra);
  color: var(--terra-deep);
}
.agenda-action-btns button:not(.ds-btn).danger {
  color: var(--danger);
}
.agenda-action-btns button:not(.ds-btn).danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* ─── Empty state (calque prod l.1945-1972) ─── */
.agenda-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-mute);
}
.agenda-empty-state .agenda-empty-mark {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}
.agenda-empty-state h3 {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 8px;
}
.agenda-empty-state p {
  font-size: 14px;
  color: var(--ink-mute);
}

/* ============================================================ */
/* DentalAgenda — Modaux RDV édition/détail (étape 6a.3)        */
/* ============================================================ */
/* Réutilise massivement les classes Tâches étape 4 :            */
/*   .agenda-modal/.agenda-modal-content.large/-header/-body/    */
/*   -footer/-close/-eyebrow, .agenda-form-section + .emphasis + */
/*   .collapsed, .agenda-form-section-header/-body/.section-icon */
/*   /.section-title/.section-chevron, .agenda-form-group +.full */
/*   /.agenda-form-row, .agenda-comments-section, .agenda-comment*/
/*   /.agenda-comment.own/.agenda-comment-form, .agenda-task-    */
/*   detail-meta + -item + .full. Scope strict #agenda-view.     */
/* Bloc ci-dessous : ajouts spécifiques 6a.3 (callout refus,     */
/* pill catégorie immutable, header statique sans chevron).      */

/* Pill catégorie en édition (lecture seule) + couleurs par cat */
.agenda-rdv-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 16px;
  border-radius: 99px;
  font-size: 12px;
  border: 1px solid var(--rule);
  background: var(--ivory-soft);
  color: var(--ink-soft);
}
.agenda-rdv-cat-pill-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mute);
}
.agenda-rdv-cat-pill-value {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--terra-deep);
}
.agenda-rdv-cat-pill-note {
  font-size: 10px;
  font-style: italic;
  color: var(--ink-faint);
}
/* Eyebrow modal détail : pill catégorie + badge statut inline */
.agenda-modal-eyebrow .agenda-rdv-cat-pill {
  margin-bottom: 0;
  padding: 3px 10px;
  font-size: 11px;
}
.agenda-modal-eyebrow .agenda-rdv-cat-pill .agenda-rdv-cat-pill-label,
.agenda-modal-eyebrow .agenda-rdv-cat-pill .agenda-rdv-cat-pill-note {
  display: none;
}

/* Header de section non-cliquable (sélecteur catégorie en création) */
.agenda-form-section-header.agenda-form-section-header-static {
  cursor: default;
}
.agenda-form-section-header.agenda-form-section-header-static:hover {
  background: transparent;
}

/* Champs full-width (textarea motifs/disponibilites) — surchage agenda-form-group */
.agenda-form-group.full {
  grid-column: 1 / -1;
  width: 100%;
}

/* Callout motif refus en tête modal détail (calque prod l.1490-1535) */
.agenda-motif-refus-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--terra-mist);
  border: 1px solid var(--terra);
  border-left: 4px solid var(--terra);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.agenda-motif-refus-callout .agenda-callout-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--terra-deep);
  flex-shrink: 0;
}
.agenda-motif-refus-callout .agenda-callout-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ink);
  min-width: 0;
}
.agenda-motif-refus-callout .agenda-callout-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.agenda-motif-refus-callout .agenda-callout-reason {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.agenda-motif-refus-callout .agenda-callout-note {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ============================================================ */
/* DentalAgenda — Flag pills annulations (étape 6b.2)            */
/* ============================================================ */
/* Pills affichés dans la colonne 'Devis · Flags' du tableau     */
/* annulations (P✓/P~/P— prothèse décloisonnée + C✓/A✓/R✓ etc.).  */
/* Réutilisés en lecture dans le modal détail (cmu/acompte/      */
/* patient_repondu). Scope #agenda-view, classes préfixées.      */

.agenda-flag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  min-width: 24px;
  line-height: 1.3;
}
/* État positif : Oui / P✓ (reçue) — sage */
.agenda-flag-pill-yes {
  background: var(--sage-bg);
  color: var(--sage-deep);
  border-color: var(--sage);
}
/* État négatif : Non — terracotta (rouge doux, pas alarmant) */
.agenda-flag-pill-no {
  background: var(--terra-bg);
  color: var(--terra-deep);
  border-color: var(--terra);
}
/* État en cours : P~ (prothèse commandée non reçue) — warn jaune */
.agenda-flag-pill-progress {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn);
}
/* État inconnu : P— (pas de prothèse en Stock pour ce patient) — neutral muted */
/* ⚠ JAMAIS confondre avec P× (qui voudrait dire "Non explicite") :              */
/*    absence d'info ≠ réponse négative. Calque sémantique 6b.1 backend.         */
.agenda-flag-pill-unknown {
  background: var(--ivory-deep);
  color: var(--ink-mute);
  border-color: var(--rule);
}

/* Conteneur de la ligne de flags dans la cellule (gap entre pills) */
.agenda-cell-flags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Pill catégorie 4ᵉ option (annulation) — terracotta-mist atténué pour distinguer
   visuellement des 3 cats demandes (urgence/consultation/prothese). */
.agenda-rdv-cat-pill.agenda-rdv-cat-pill-annulation .agenda-rdv-cat-pill-value {
  color: var(--danger);
}

/* ============================================================ */
/* DentalAgenda — Modal action rapide 📞 (étape 6c.2)            */
/* ============================================================ */
/* Calque prod #quickActionModal (modal 2 étapes). Réutilise      */
/* .agenda-modal/.agenda-modal-content.medium/-header/-body/      */
/* -footer/.agenda-form-group/.agenda-btn-primary. Ajouts         */
/* spécifiques 6c.2 : choice-btn (large oui/non) + hint italic.   */

/* Sous-titre patient sous le header (Patient : NOM Prénom) */
.agenda-quick-action-patient {
  margin-bottom: 18px;
  color: var(--ink-soft);
  font-size: 15px;
}
.agenda-quick-action-patient strong {
  color: var(--ink);
  font-weight: 600;
}

/* Wrapper d'étape (display:none toggle entre 1 / 2A / 2B) */
.agenda-quick-action-step {
  margin-bottom: 4px;
}

/* Conteneur des 2 boutons de choix (côte à côte sur desktop, stack sur mobile) */
.agenda-quick-action-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .agenda-quick-action-choice {
    grid-template-columns: 1fr;
  }
}

/* Boutons larges de choix (icon + label + sub stack vertical) */
.agenda-quick-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  text-align: center;
}
.agenda-quick-choice-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.agenda-quick-choice-yes {
  border-color: var(--sage);
}
.agenda-quick-choice-yes:hover {
  background: var(--sage-bg);
  border-color: var(--sage-deep);
}
.agenda-quick-choice-no {
  border-color: var(--terra);
}
.agenda-quick-choice-no:hover {
  background: var(--terra-bg);
  border-color: var(--terra-deep);
}

/* Icône emoji ✓/✕ en cercle */
.agenda-quick-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.agenda-quick-choice-yes .agenda-quick-choice-icon {
  background: var(--sage-bg);
  color: var(--sage-deep);
}
.agenda-quick-choice-no .agenda-quick-choice-icon {
  background: var(--terra-bg);
  color: var(--terra-deep);
}

/* Label principal (Fraunces italic, calque modaux RDV) */
.agenda-quick-choice-label {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

/* Sous-libellé descriptif (gris muted, taille réduite) */
.agenda-quick-choice-sub {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  line-height: 1.35;
  margin-top: 2px;
}

/* Texte d'aide en bas des étapes 2A/2B (italic muted) */
.agenda-quick-action-hint {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* ============================================================ */
/* DentalAgenda — Snackbar undo + Auto-archive modal (étape 6c.3.1) */
/* ============================================================ */
/* Snackbar : positionné fixed bottom-right (~16px du bord), un seul */
/* à la fois, slide-in/out animé. Non bloquant.                      */

.agenda-snackbar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1100;            /* au-dessus des modaux (qui sont à 1000) */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  max-width: 480px;
  min-width: 280px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.agenda-snackbar.show {
  transform: translateY(0);
  opacity: 1;
}

.agenda-snackbar-text {
  flex: 1;
  line-height: 1.4;
  color: var(--paper);
}

.agenda-snackbar-action {
  background: transparent;
  border: none;
  color: var(--terra-light);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.agenda-snackbar-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ivory);
}

/* Responsive : sur mobile le snackbar prend toute la largeur en bas */
@media (max-width: 600px) {
  .agenda-snackbar {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* ─── Modal auto-archive — liste candidats checkboxes ──────── */

.agenda-auto-archive-hint {
  margin: 0 0 14px;
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
}

.agenda-archive-confirm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 4px;
  background: var(--ivory-soft);
}

/* Chaque candidat = label cliquable (toggle checkbox au clic n'importe où) */
.agenda-archive-confirm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.agenda-archive-confirm-item:hover {
  background: var(--ivory-deep);
}
.agenda-archive-confirm-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--terra);
  flex-shrink: 0;
}
/* Item décoché : opacity réduite pour visualiser */
.agenda-archive-confirm-item:has(input:not(:checked)) {
  opacity: 0.55;
}

.agenda-archive-confirm-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.agenda-archive-confirm-meta strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.agenda-archive-confirm-meta span {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* ============================================================ */
/* DentalAgenda — Vue archives + modal DÉFINITIF (étape 6c.3.2) */
/* ============================================================ */
/* Toggle bouton + colonnes archives + bouton danger primary +    */
/* eyebrow danger + callout warn pour le modal "irréversible".    */

/* Toggle bouton dans la barre filtres (ghost variant) */
.agenda-rdv-archives-toggle {
  font-size: 13px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.agenda-rdv-archives-toggle:hover {
  background: var(--ivory-soft);
  border-color: var(--ink-mute);
  color: var(--ink);
}
/* État actif (vue archives) — pill terracotta légère pour distinguer */
.agenda-rdv-archives-toggle-active {
  background: var(--terra-mist);
  border-color: var(--terra);
  color: var(--terra-deep);
}
.agenda-rdv-archives-toggle-active:hover {
  background: var(--terra-bg);
  border-color: var(--terra-deep);
}

/* Toggle bouton corbeille — étape 6c.4.2.
   Mêmes propriétés d'inactivité que le toggle archives (ghost) ;
   l'état actif utilise la palette danger (rouge) pour distinguer
   visuellement du mode archives (terracotta). */
.agenda-rdv-trash-toggle {
  font-size: 13px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.agenda-rdv-trash-toggle:hover {
  background: var(--ivory-soft);
  border-color: var(--ink-mute);
  color: var(--ink);
}
/* État actif (vue corbeille) — pill danger pour signaler le mode destructeur */
.agenda-rdv-trash-toggle-active {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.agenda-rdv-trash-toggle-active:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* Colonne "Archivé le" — min-width pour aligner le texte de date.
   Réutilisée par la colonne "Supprimé le" en vue corbeille (6c.4.2). */
.agenda-col-archived {
  min-width: 110px;
}

/* Eyebrow danger (rouge) pour modal suppression définitive */
.agenda-modal-eyebrow.agenda-eyebrow-danger {
  color: var(--danger);
  font-weight: 600;
}

/* Callout warn (encadré jaune-orange) avec icon ⚠ + content */
.agenda-warn-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 14px 0 4px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
}
.agenda-warn-callout-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--warn);
  flex-shrink: 0;
  margin-top: 1px;
}
.agenda-warn-callout-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  min-width: 0;
}
.agenda-warn-callout-content strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
}
.agenda-warn-callout-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--paper);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

/* Bouton "Supprimer définitivement" — danger primary (rouge plein) */
.agenda-btn-danger {
  background: var(--danger);
  color: var(--paper);
  border-color: var(--danger);
}
.agenda-btn-danger:hover {
  background: #8a2a1a;       /* danger-deep (pas de variable dédiée, calque main) */
  border-color: #8a2a1a;
  color: var(--paper);
}
.agenda-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============================================================
   ATOM BUTTON .ds-btn — Design System v1, Phase B.2 PILOTE
   ------------------------------------------------------------
   Convention BEM-modifiers : .ds-btn (base = secondary md rounded)
   + variants  : .ds-btn--primary / -secondary / -ghost / -subtle / -danger
   + sizes     : .ds-btn--sm / -md (défaut) / -lg
   + shapes    : .ds-btn--pill (défaut = rounded var(--radius))
   + modifier  : .ds-btn--icon (carré, icône seule, actions de ligne)

   Tokens DS v1 uniquement (--text-*, --space-*, --radius-*, --ease-*).
   Aucun hex hardcodé, aucune valeur off-scale.

   Pilote scoped vue Prothèses. À propager B.3 (Stock complet) puis B.4 (Agenda)
   et renommer .ds-btn → .btn une fois les classes legacy retirées.

   ⚠ Spécificité : .action-btns button ancien (l.~3164) reste actif pour les
   boutons legacy ; les .ds-btn passent par-dessus via double-class .ds-btn.ds-btn
   sur la base, et via :where()-exclusion ajoutée plus haut dans le fichier.
   ============================================================ */

/* --- BASE (secondary md PILL par défaut — itération B.2)
   Forme pilule choisie comme défaut : pattern Stripe Dashboard / Linear / Notion 2022+,
   cohérent avec l'identité éditoriale-boutique DentalSuite (Fraunces italique).
   Cas exceptionnel d'un radius 8 carré : .ds-btn--rounded (escape hatch, à justifier). --- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background 150ms var(--ease-out),
    color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    transform 80ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}
.ds-btn:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}
.ds-btn:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--ink-mute);
}
.ds-btn:active {
  transform: translateY(1px);
}
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- VARIANTS (double-class pour battre .action-btns button (0,1,1)) --- */
.ds-btn.ds-btn--primary {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--paper);
}
.ds-btn.ds-btn--primary:hover {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
  color: var(--paper);
}

.ds-btn.ds-btn--secondary {
  /* = base (paper + rule + ink-soft). Classe explicite pour la sémantique markup. */
}

.ds-btn.ds-btn--ghost {
  background: transparent;
  color: var(--terra);
  border-color: var(--terra);
}
.ds-btn.ds-btn--ghost:hover {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
}

.ds-btn.ds-btn--subtle {
  background: transparent;
  color: var(--ink-mute);
  border-color: transparent;
}
.ds-btn.ds-btn--subtle:hover {
  background: var(--ivory-deep);
  color: var(--ink);
  border-color: var(--rule);
}

.ds-btn.ds-btn--danger {
  background: var(--paper);
  color: var(--danger);
  border-color: var(--rule);
}
.ds-btn.ds-btn--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

/* Modal de confirmation Administration (suppression période de vacances, 11/06) :
   le « Supprimer » est en RETRAIT mais porte un contour d'alerte rouge dès le
   repos (la base .ds-btn--danger a un bord neutre). Scopé au modal pour ne pas
   reteindre les autres usages de --danger. Annuler reste primary (mis en avant). */
#adminConfirmModal .ds-btn.ds-btn--danger {
  border-color: var(--danger);
}

/* --- VARIANT --success (sage solide) — itération B.2 ----------------------
   Précédent : Stripe "Charge customer" vert solide, GitHub "Merge pull request"
   vert solide, Tailwind UI / Mantine / Chakra UI colorScheme="success/green" natif.
   Règle d'usage DS v1 : UNIQUEMENT pour actions de validation / confirmation
   positive irréversible (Planifier, Valider, Confirmer, Marquer reçu).
   JAMAIS pour "Enregistrer" générique → toujours --primary.
   --------------------------------------------------------------------------- */
.ds-btn.ds-btn--success {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper);
}
.ds-btn.ds-btn--success:hover {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: var(--paper);
}

/* --- SIZES --- */
.ds-btn.ds-btn--sm {
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
  gap: var(--space-1);
}
.ds-btn.ds-btn--md {
  /* = défaut explicite */
}
.ds-btn.ds-btn--lg {
  padding: 12px var(--space-5);
  font-size: var(--text-base);
  gap: var(--space-2);
}

/* --- SHAPES (itération B.2 : pill devenu défaut, voir .ds-btn base) ---
   .ds-btn--pill conservée comme no-op (rétrocompat markup, supprimable plus tard).
   .ds-btn--rounded = escape hatch radius 8 (cas exceptionnel, à justifier).
   ---------------------------------------------------------------------- */
.ds-btn.ds-btn--pill {
  /* = défaut (border-radius: var(--radius-pill)). Classe explicite OK. */
}
.ds-btn.ds-btn--rounded {
  border-radius: var(--radius);
}

/* --- ICON-ONLY (modifier — actions de ligne, header actions)
   width=height + radius-pill (hérité base) → CERCLE PARFAIT.
   Pattern Apple macOS toolbar (Mail, Safari), Stripe Dashboard row actions.
   --------------------------------------------------------------------------- */
.ds-btn.ds-btn--icon {
  padding: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  gap: 0;
  justify-content: center;
}
.ds-btn.ds-btn--icon.ds-btn--sm  { width: 24px; height: 24px; min-width: 24px; }
.ds-btn.ds-btn--icon.ds-btn--lg  { width: 36px; height: 36px; min-width: 36px; }

/* --- Overrides sémantiques d'action-cell : on COMPOSE .ds-btn--subtle.ds-btn--icon.ds-btn--sm
   AVEC les classes legacy (.edit-btn, .delete-btn, .archive-btn, .restore-btn, .valider-btn)
   pour garder la sémantique de couleur au hover. Spécificité augmentée à (0,3,0)
   par .ds-btn.ds-btn--{x}, qui surclasse .edit-btn:hover (0,1,1). On le rejoue ici. --- */
.ds-btn.ds-btn--subtle.edit-btn:hover    { color: var(--warn);      border-color: var(--warn); }
.ds-btn.ds-btn--subtle.delete-btn:hover  { color: var(--danger);    border-color: var(--danger); }
.ds-btn.ds-btn--subtle.archive-btn:hover { color: var(--terra);     border-color: var(--terra); }
.ds-btn.ds-btn--subtle.restore-btn:hover { color: var(--sage-deep); border-color: var(--sage); }
.ds-btn.ds-btn--subtle.valider-btn       { color: var(--sage-deep); font-weight: 600; }
.ds-btn.ds-btn--subtle.valider-btn:hover { color: var(--paper); background: var(--sage); border-color: var(--sage); }
.ds-btn.ds-btn--subtle.reception-btn:hover { color: var(--sage-deep); border-color: var(--sage); }
.ds-btn.ds-btn--subtle.etape-btn:hover     { color: var(--terra);     border-color: var(--terra); }
.ds-btn.ds-btn--subtle.sav-btn:hover       { color: var(--warn);      border-color: var(--warn); }

/* Phase B.2 propagation — galerie preview retirée (validation atom OK).
   Bloc CSS .ds-buttons-preview + .ds-preview-* supprimé. */

/* Ellipsis pagination (… entre les numéros de page) — pas un bouton,
   juste un spacer visuel. Style minimal aligné sur la pagination ds-btn--sm. */
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 var(--space-2);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  user-select: none;
}

/* ============================================================
   ATOM ALERT .ds-alert — Design System v1, Phase B.2 (correction #2)
   ------------------------------------------------------------
   Pill INLINE cliquable, count badge rond intégré (inversion couleur).
   Pattern Stripe Dashboard / Linear / Notion / GitHub : alerte
   compacte au-dessus du tableau, scroll vers la première occurrence.

   Variants :
     • --danger : bg plein danger + paper text → ALERTE FORTE (retard, rupture)
     • --warn   : bg pâle warn-bg + warn-deep text → ATTENTION (à commander)
     • --info   : bg pâle terra-bg + terra-deep text → INFORMATION (futur)

   ⚠ --danger inversion bg/text choisie pour MAXIMISER la visibilité malgré
   le format compact (ratio contraste paper/danger ≈ 6:1). Linear "X issues"
   et Stripe "X disputes pending" utilisent le même pattern d'inversion.

   Structure markup :
   <button class="ds-alert ds-alert--{variant}" onclick="...">
     <span class="ds-alert-count">3</span>
     <span class="ds-alert-icon">⚠️</span>
     <span class="ds-alert-label">prothèses en retard</span>
   </button>
   ============================================================ */

.ds-alert {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3) 4px 4px;
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background 150ms var(--ease-out),
    color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    transform 80ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}
.ds-alert:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.ds-alert:active {
  transform: translateY(0);
}
.ds-alert:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* --- COUNT BADGE intégré (rond, inversion couleur du variant) --- */
.ds-alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1;
}

.ds-alert-icon {
  font-size: var(--text-md);
  line-height: 1;
}

.ds-alert-label {
  font-weight: 500;
}

/* --- VARIANT --danger : ALERTE FORTE (retard, rupture critique) ---
   Inversion bg/text pour maximiser la visibilité malgré le format compact.
   ⚠ pattern Stripe disputes / Linear failed-CI / GitHub conflicts. */
.ds-alert.ds-alert--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--paper);
}
.ds-alert.ds-alert--danger .ds-alert-count {
  background: var(--paper);
  color: var(--danger);
}
.ds-alert.ds-alert--danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, black);
  border-color: color-mix(in srgb, var(--danger) 85%, black);
}

/* --- VARIANT --warn : ATTENTION (à commander, échéance proche) ---
   Bg pâle + text warn-deep + count badge en inversion (warn solide + paper). */
.ds-alert.ds-alert--warn {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--warn-deep);
}
.ds-alert.ds-alert--warn .ds-alert-count {
  background: var(--warn);
  color: var(--paper);
}
.ds-alert.ds-alert--warn:hover {
  background: color-mix(in srgb, var(--warn-bg) 75%, var(--warn));
}

/* --- VARIANT --info : INFORMATION NEUTRE (futur — terra mist) --- */
.ds-alert.ds-alert--info {
  background: var(--terra-bg);
  border-color: var(--terra);
  color: var(--terra-deep);
}
.ds-alert.ds-alert--info .ds-alert-count {
  background: var(--terra);
  color: var(--paper);
}
.ds-alert.ds-alert--info:hover {
  background: var(--terra-mist);
}

/* --- Groupement d'alertes côte à côte (gap + wrap si étroit) --- */
.ds-alerts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* ============================================================
   ATOM BADGE .ds-badge — Design System v1, Phase B.3.4
   ------------------------------------------------------------
   Pill compact pour status sémantique (success/danger/warn/neutral/terra).
   Réutilisable cross-app : flags C/A/R Agenda annulations (migre depuis
   .agenda-flag-pill-*), futurs counts Stock (.tab-badge migration), badges
   statut Patient/Admin. Atom autonome — ne nécessite pas .ds-btn.

   Variants sémantiques :
     • --success : sage (validation, ok, oui)
     • --danger  : danger-bg/danger (refus, non, erreur) — Note : pour 'Non' C/A/R
       on utilise --terra (pas --danger qui est trop alarmant pour un info statique)
     • --terra   : terra-bg/terra-deep (info terracotta, négation contextuelle douce)
     • --warn    : warn-bg/warn-deep (attention, en cours, attente)
     • --neutral : ivory-deep/ink-mute (inconnu, absent, par défaut)

   Spécificité double-class (.ds-badge.ds-badge--X) pour battre les overrides
   potentiels (calque le pattern .ds-btn de B.2).
   ============================================================ */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  user-select: none;
}

.ds-badge.ds-badge--success {
  background: var(--sage-bg);
  color: var(--sage-deep);
  border-color: var(--sage);
}

.ds-badge.ds-badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

.ds-badge.ds-badge--terra {
  background: var(--terra-bg);
  color: var(--terra-deep);
  border-color: var(--terra);
}

.ds-badge.ds-badge--warn {
  background: var(--warn-bg);
  color: var(--warn-deep);
  border-color: var(--warn);
}

.ds-badge.ds-badge--neutral {
  background: var(--ivory-deep);
  color: var(--ink-mute);
  border-color: var(--rule);
}

/* ============================================================
   MODAL PROTHÈSE — pattern éditorial (B.3.5 modal prothèse, Option A)
   ------------------------------------------------------------
   Scope STRICT : .stock-modal-card--editorial UNIQUEMENT (appliqué via
   opts.editorial sur openModal pour openAddModal / editItem / editProtPlanification).
   Les autres modaux Stock (réception, SAV, étape, implant, gérer, tarif, etc.)
   NE SONT PAS affectés.

   Objectif David : rapprocher le modal d'ajout/édition prothèse du modal
   d'ajout RDV/Tâches Agenda visuellement, en conservant le markup interne
   <details class="form-section-wizard"> (collapse-on-focus auto préservé).

   Différences appliquées par scope (calque .agenda-form-section) :
     • Sections en cards "tickets" : background ivory-soft, border 1px rule,
       border-radius var(--radius-lg), margin-bottom 8px entre sections
     • Header de section : padding aéré + respiration entre icône et label
     • Pas de section focus terracotta (#4 — David a tranché NON)
   ============================================================ */

/* Sections form-section-wizard à l'intérieur du modal prothèse :
   passent du look "paper neutre" au pattern "ticket ivory-soft chaleureux". */
.stock-modal-card--editorial .form-section-wizard {
  background: var(--ivory-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);                 /* gap entre sections */
}
.stock-modal-card--editorial .form-section-wizard:last-child {
  margin-bottom: 0;
}

/* Reset l'override .form-section-wizard + .form-section-wizard du legacy
   qui mettait margin-top: 10px (cumulatif avec mon nouveau margin-bottom 8).
   On veut un seul gap propre. */
.stock-modal-card--editorial .form-section-wizard + .form-section-wizard {
  margin-top: 0;
}

/* Header de section (summary) : respiration et typo plus chaleureuse.
   On garde la chevron ::before et le toggle-on-focus du legacy intact. */
.stock-modal-card--editorial .form-section-wizard > summary.form-section-title {
  padding: 12px 18px;
  background: var(--ivory-soft);                 /* identique au card pour fluidité */
  border-bottom: 1px solid var(--rule-soft);     /* séparation subtle avec body */
  gap: 12px;                                     /* respiration icône ↔ label */
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* Body de section (après summary, classe legacy .form-section-body si présente,
   sinon le contenu direct) : padding aéré + bg paper pour contraste lisible
   avec le header ivory-soft. */
.stock-modal-card--editorial .form-section-wizard[open] > *:not(summary) {
  padding: 14px 18px;
  background: var(--paper);
}

/* Header du modal — structure éventuelle avec eyebrow + h3 (cf. openModal opts.eyebrow).
   Le wrapper .stock-modal-header-text empile eyebrow et h3 verticalement. */
.stock-modal-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* Eyebrow uppercase au-dessus du H3 — calque .modal-eyebrow / .agenda-modal-eyebrow
   du selector grouping DS, mais scopé Stock pour ne pas dupliquer la règle
   exacte (déjà active via le selector grouping unifié l.~2735). Ici on assure
   juste la spec (héritée du DS mais explicite pour la classe Stock). */
.stock-modal-eyebrow {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 600;
  font-family: var(--sans);
}

/* ============================================================
   B.3.6 point 4 — Police Agenda +1px (David)
   ------------------------------------------------------------
   Bump léger de toutes les tailles typographiques sur les vues Agenda
   uniquement (#agenda-view) ET les modaux Agenda (.agenda-modal, qui sont
   en body hors #agenda-view). Stock + Patient + Admin INCHANGÉS.

   Override les tokens --text-* avec +1px par valeur. Les rules CSS Agenda
   qui utilisent var(--text-*) prennent automatiquement la nouvelle valeur
   (CSS custom properties cascadent au scope).

   Le corps de texte direct (sans token) sur #agenda-view passe à 16px
   (au lieu du 15 hérité du body global).

   Vigilance : +1px peut élargir les cellules de table — à vérifier
   visuellement. Si débordement, on revient en arrière sur ce point.
   ============================================================ */
#agenda-view,
.agenda-modal {
  --text-xs:   0.75rem;     /* 12px (était 11) */
  --text-sm:   0.875rem;    /* 14px (était 13) */
  --text-base: 1rem;        /* 16px (était 15) */
  --text-md:   1.125rem;    /* 18px (était 17) */
  --text-lg:   1.3125rem;   /* 21px (était 20) */
  --text-xl:   1.5625rem;   /* 25px (était 24) */
  --text-2xl:  2.0625rem;   /* 33px (était 32) */
  --text-3xl:  2.8125rem;   /* 45px (était 44) */
  font-size: 16px;          /* corps texte direct (était 15 hérité body) */
}

/* ============================================================
   B.3.6 point 3 — Modal liste Archives/Corbeille RDV
   ============================================================
   Modal autonome ouvert depuis #agendaRdvViewArchivesToggle / *TrashToggle.
   Pattern calqué sur openCorbeilleModal Stock : liste compacte de cards
   (1 par item) avec head (patient + contact), info (date + raison/état),
   contexte optionnel (motif/dispo), et actions (restaurer / OWNER purger).
   Card large (max-width 760px) pour respirer les actions par ligne.
*/

/* Card élargie pour la liste (au-dessus de la défaut 640px Agenda) */
.agenda-list-modal-card {
  max-width: 760px;
}

/* Body — scroll vertical interne, séparation visuelle des rows */
.agenda-list-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

/* État vide centré sobre */
.agenda-list-modal-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  font-family: var(--serif);
  font-size: var(--text-md);
}

/* Row item — encadré sobre, fond ivoire, hover discret */
.agenda-list-modal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  background: var(--ivory-soft);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.agenda-list-modal-row:hover {
  border-color: var(--rule);
  background: var(--ivory);
}

/* Head — patient (gros) + contact (petit), même ligne en desktop */
.agenda-list-modal-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.agenda-list-modal-row-title {
  font-family: var(--serif);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.agenda-list-modal-row-meta {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-mute);
}

/* Info ligne — date + raison/état (inline, séparées par gap) */
.agenda-list-modal-row-info {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.agenda-list-modal-row-info strong {
  color: var(--ink);
  font-weight: 600;
}

/* Contexte (motif/dispo/observations) — bloc texte secondaire */
.agenda-list-modal-row-context {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.4;
}
.agenda-list-modal-row-context strong {
  color: var(--ink);
  font-weight: 600;
}

/* Actions par ligne — alignées à droite, gap discret */
.agenda-list-modal-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ============================================================
   B.3.7 point 6a — Accordéon Compta (glissières rétrocession)
   ============================================================
   <details>/<summary> HTML natif. Le marker default browser est masqué pour
   un look uniforme cross-browser (chevron custom ▾ qui pivote en mode ouvert).
   Replié par défaut côté JS (pas d'attribut `open` à l'init du markup).
*/
.compta-accordion {
  margin: 24px 0;
}
.compta-accordion-summary {
  cursor: pointer;
  list-style: none;                /* Firefox : masque la flèche native */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ivory-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.compta-accordion-summary::-webkit-details-marker {
  display: none;                   /* WebKit/Blink : masque le ▶ natif */
}
.compta-accordion-summary:hover {
  background: var(--ivory-deep);
  border-color: var(--rule);
}
.compta-accordion-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
}
.compta-accordion-chevron {
  font-size: 14px;
  color: var(--terracotta);
  transition: transform 0.2s ease;
  display: inline-block;
}
.compta-accordion[open] .compta-accordion-chevron {
  transform: rotate(180deg);
}
.compta-accordion-body {
  padding: 16px 4px 8px;
}

/* B.3.7 point 6b — Tarifs Implants : bouton .ds-btn--secondary dans .compta-actions-banner
   (calque pattern Grille Prix Facturé Patients ligne du dessus). Pas de CSS dédié
   nécessaire — les styles .compta-actions-banner + .ds-btn--secondary gèrent tout.
   La modale d'édition openTarifsImplantsModal réutilise .stock-modal-card .tarif-grid. */

/* ============================================================
   DENTALPATIENT — RÉPERTOIRE (vue liste réelle, scopée #patients-view).
   Câblage de la maquette validée sur GET /me/patients. Réutilise
   stock-table / pagination / ds-badge ; n'ajoute que toolbar, avatars,
   signal temporel, colonne "Dernière information", chips, skeleton.
   Terracotta strict ; mauve réservé aux en-têtes (hors Répertoire).
   ============================================================ */

/* Largeur alignée sur DentalOrtho (#ortho-view = .container, cap 1680px centré)
   pour la cohérence inter-apps. VIEW_PATIENTS est déjà dans FULLWIDTH_VIEWS
   (main.main-wide relâche le cap 900px) → on borne ici la vue à la MÊME largeur
   et aux mêmes gouttières que les autres apps DS, au lieu de filer pleine page. */
#patients-view { max-width: 1680px; margin: 0 auto; }

#patients-view .patients-rep-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
#patients-view .patient-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#patients-view .patient-filters .search-wrap { position: relative; flex: 0 0 auto; }
#patients-view .patient-filters .filter-search {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 280px;
  flex: 0 0 auto;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%238B7B6A' stroke-width='1.4' fill='none'/%3E%3Cpath d='M11 11l3 3' stroke='%238B7B6A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 16px 16px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 9px 18px 9px 40px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: all 0.2s ease;
}
#patients-view .patient-filters .filter-search::placeholder {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 14px;
}
#patients-view .patient-filters .filter-search:hover { border-color: var(--terra); background-color: var(--ivory-soft); }
#patients-view .patient-filters .filter-search:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(184, 89, 64, 0.12); }
#patients-view .patient-filters .filter-pill {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;
  min-width: 130px;
  flex: 0 0 auto;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B85940' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 8px 30px 8px 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}
#patients-view .patient-filters .filter-pill:hover:not(:disabled) { border-color: var(--terra); background-color: var(--ivory-soft); color: var(--ink); }
#patients-view .patient-filters .filter-pill:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(184, 89, 64, 0.12); }
#patients-view .patient-filters .filter-pill:disabled { opacity: 0.5; cursor: not-allowed; }
#patients-view .patient-filters .btn-reset {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all 0.2s ease;
}
#patients-view .patient-filters .btn-reset:hover { border-color: var(--ink-mute); color: var(--ink); background: var(--ivory-soft); }

#patients-view .patient-active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 0; }
#patients-view .patient-active-filters:empty { display: none; }
#patients-view .patient-active-filters .af-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
#patients-view .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  background: var(--terra-bg);
  color: var(--terra-deep);
  border: 1px solid var(--terra-light);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
#patients-view .filter-chip button {
  border: none; background: transparent; color: var(--terra-deep);
  cursor: pointer; font-size: 13px; line-height: 1;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
#patients-view .filter-chip button:hover { background: var(--terra); color: var(--paper); }
#patients-view .patients-rep-count { font-size: 12px; color: var(--ink-mute); font-weight: 500; }

/* Cellule patient : avatar + identité */
#patients-view .patient-cell { display: flex; align-items: center; gap: 12px; }
#patients-view .patient-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
  flex: 0 0 auto;
}
#patients-view .patient-avatar[data-tone="terra"]   { background: var(--terra-bg);  color: var(--terra-deep); }
#patients-view .patient-avatar[data-tone="sage"]    { background: var(--sage-bg);   color: var(--sage-deep); }
#patients-view .patient-avatar[data-tone="warn"]    { background: var(--warn-bg);   color: var(--warn-deep); }
#patients-view .patient-avatar[data-tone="neutral"] { background: var(--ivory-deep); color: var(--ink-soft); }
#patients-view .patient-identity { display: flex; flex-direction: column; line-height: 1.3; }
#patients-view .patient-identity strong { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); }
#patients-view .patient-identity small { font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
#patients-view .patient-prat { font-size: 13px; color: var(--ink-soft); }
#patients-view .rep-empty { color: var(--ink-faint); }

/* Signal temporel relatif */
#patients-view .patient-signal { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
#patients-view .patient-signal::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#patients-view .patient-signal--past  { color: var(--ink-mute); }
#patients-view .patient-signal--soon  { color: var(--terra); font-weight: 600; }
#patients-view .patient-signal--stale { color: var(--warn-deep); }

/* Colonne "Dernière information" : pastille de source colorée par app */
#patients-view .last-info { display: flex; align-items: center; gap: 10px; }
#patients-view .src-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid; white-space: nowrap; flex: 0 0 auto;
}
#patients-view .src-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#patients-view .src-agenda { color: var(--sage-deep);  border-color: var(--sage);        background: var(--sage-bg); }
#patients-view .src-stock  { color: #2F4A5C;            border-color: #3F5E72;            background: #E1E8ED; }
#patients-view .src-devis  { color: var(--terra-deep);  border-color: var(--terra-light); background: var(--terra-bg); }
#patients-view .src-avis   { color: #8A6418;            border-color: #C9923A;            background: #F6E8CC; }
#patients-view .last-info-body { display: flex; flex-direction: column; line-height: 1.3; }
#patients-view .last-info-body strong { font-size: 13px; font-weight: 600; color: var(--ink); }
#patients-view .last-info-body small { font-size: 12px; color: var(--ink-mute); }

/* Actions de ligne : chevron persistant + édition au survol */
#patients-view .patient-table .action-cell { text-align: right; white-space: nowrap; }
#patients-view .patient-table .action-cell .row-actions { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
#patients-view .row-actions .row-action-btn {
  background: transparent; border: 1px solid transparent; padding: 5px 7px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink-mute);
  transition: all 0.15s ease;
}
#patients-view .row-actions .row-action-btn:hover { background: var(--paper); border-color: var(--rule); color: var(--ink); }
#patients-view .patient-chevron { color: var(--ink-faint); font-size: 17px; margin-left: 6px; vertical-align: middle; transition: color 0.15s ease, transform 0.15s ease; }
#patients-view .stock-row:hover .patient-chevron { color: var(--terra); transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  #patients-view .patient-table tbody tr.row-clickable .row-actions { opacity: 0; transition: opacity 0.15s ease; }
  #patients-view .patient-table tbody tr.row-clickable:hover .row-actions,
  #patients-view .patient-table tbody tr.row-clickable:focus-within .row-actions { opacity: 1; }
}

/* Skeleton de chargement */
#patients-view .skel {
  background: linear-gradient(90deg, var(--ivory-soft) 25%, var(--ivory-deep) 37%, var(--ivory-soft) 63%);
  background-size: 400% 100%;
  animation: skelShimmerPat 1.4s ease infinite;
  border-radius: 6px;
  display: inline-block;
}
@keyframes skelShimmerPat { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
#patients-view .skel-avatar { width: 38px; height: 38px; border-radius: 50%; }
#patients-view .skel-line { height: 11px; vertical-align: middle; }

/* ============================================================
   DENTALPATIENT — DOSSIER (vision "Le Dossier", scopé #patients-view).
   Câblage de la maquette mockup-patient-dossier.html sur données réelles.
   Réutilise page-header / stats-bar / stat-card / info-card / ds-btn / ds-badge ;
   ajoute breadcrumb, header dossier, timeline Parcours, rail. src-badge déjà
   défini (bloc Répertoire). Terracotta strict ; mauve = eyebrow d'en-tête seul.
   ============================================================ */
#patients-view .dossier-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 48px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--ivory);
  font-size: 13px;
}
#patients-view .dossier-back { color: var(--terra); font-weight: 600; cursor: pointer; }
#patients-view .dossier-back:hover { color: var(--terra-deep); }
#patients-view .crumb-sep { color: var(--ink-faint); }
#patients-view .crumb-current { color: var(--ink-soft); }
#patients-view .dossier-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#patients-view .dossier-nav .nav-count { font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* Header éditorial — mauve réservé à l'eyebrow + filet d'en-tête */
#patients-view .dossier-header .page-header-top { align-items: center; }
#patients-view .dossier-header .patient-eyebrow { color: #7A6A8A; }
#patients-view .dossier-header.page-header::after { background: linear-gradient(90deg, transparent, #7A6A8A, transparent); }
#patients-view .dossier-id { display: flex; align-items: center; gap: 18px; }
#patients-view .dossier-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: 0.02em;
  flex: 0 0 auto;
}
#patients-view .dossier-avatar[data-tone="terra"]   { background: var(--terra-bg);  color: var(--terra-deep); }
#patients-view .dossier-avatar[data-tone="sage"]    { background: var(--sage-bg);   color: var(--sage-deep); }
#patients-view .dossier-avatar[data-tone="warn"]    { background: var(--warn-bg);   color: var(--warn-deep); }
#patients-view .dossier-avatar[data-tone="neutral"] { background: var(--ivory-deep); color: var(--ink-soft); }
#patients-view .dossier-sub { margin-top: 4px; font-size: 14px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
#patients-view .dossier-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
#patients-view .dossier-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* KPI : valeur textuelle (≠ chiffre) compacte */
#patients-view .stat-value.is-text { font-size: 19px; font-weight: 400; font-style: italic; }

/* Corps 2 colonnes : Parcours + rail propriétés */
#patients-view .dossier-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 1000px) { #patients-view .dossier-body { grid-template-columns: 1fr; } }
#patients-view .dossier-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
#patients-view .dossier-section-head h2 { font-family: var(--serif); font-size: 24px; font-weight: 300; font-style: italic; color: var(--ink); }

/* Pastilles de filtre du Parcours */
#patients-view .parcours-filters { display: flex; gap: 6px; flex-wrap: wrap; }
#patients-view .pf-tab {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--paper); font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease;
}
#patients-view .pf-tab:hover { border-color: var(--terra); color: var(--terra); }
#patients-view .pf-tab.active { background: var(--terra); border-color: var(--terra); color: var(--paper); }
#patients-view .pf-tab .pf-count { opacity: 0.65; margin-left: 4px; }

/* Timeline */
#patients-view .timeline { position: relative; padding-left: 28px; }
#patients-view .timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--rule-soft); }
#patients-view .tl-entry { position: relative; margin-bottom: 12px; }
#patients-view .tl-dot {
  position: absolute; left: -27px; top: 15px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-mute); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--rule);
}
#patients-view .tl-entry[data-src="agenda"] .tl-dot { background: var(--sage); }
#patients-view .tl-entry[data-src="stock"]  .tl-dot { background: #3F5E72; }
#patients-view .tl-entry[data-src="devis"]  .tl-dot { background: var(--terra); }
#patients-view .tl-entry[data-src="avis"]   .tl-dot { background: #C9923A; }
#patients-view .tl-card {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#patients-view .tl-card:hover { border-color: var(--terra-light); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
/* RDV (agenda) : affichés mais NON cliquables (Agenda = demandes, pas un objet ouvrable) */
#patients-view .tl-entry[data-src="agenda"] .tl-card { cursor: default; }
#patients-view .tl-entry[data-src="agenda"] .tl-card:hover { border-color: var(--rule-soft); box-shadow: none; transform: none; }
#patients-view .tl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#patients-view .tl-title { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); flex: 1; min-width: 180px; }
#patients-view .tl-open { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
#patients-view .tl-card:hover .tl-open { color: var(--terra); }
#patients-view .tl-meta { font-size: 12px; color: var(--ink-mute); margin-top: 5px; }

/* Rail propriétés */
#patients-view .dossier-rail { display: flex; flex-direction: column; gap: 16px; }
#patients-view .dossier-rail .info-card { padding: 18px 20px 8px; }
#patients-view .dossier-rail .info-card.pad { padding: 18px 20px; }
#patients-view .rail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
#patients-view .rail-notes { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; white-space: pre-wrap; margin: 0; }

/* ============================================================
   ADMINISTRATION — refonte DS (scopée #admin-view).
   Équipe (Praticiens + Personnel) · Prothésistes · Cabinet & Abonnement.
   Réutilise page-header / tabs / ds-btn / ds-badge / info-card / agenda-modal.
   Terracotta intra-app ; mauve = eyebrow d'en-tête seulement.
   ============================================================ */
#admin-view .admin-eyebrow { color: #7A6A8A; }
#admin-view .page-header::after { background: linear-gradient(90deg, transparent, #7A6A8A, transparent); }

/* Groupes (Praticiens / Personnel / Prothésistes / blocs Cabinet) */
#admin-view .adm-group { margin-bottom: 28px; }
#admin-view .adm-group:last-child { margin-bottom: 0; }
#admin-view .adm-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
#admin-view .adm-group-head h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 300; font-style: italic; color: var(--ink);
}

/* Roster de membres */
#admin-view .adm-roster { display: flex; flex-direction: column; gap: 8px; }
#admin-view .adm-member {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.15s ease, background 0.15s ease;
}
#admin-view .adm-member:hover { border-color: var(--rule); background: var(--ivory); }
#admin-view .adm-member-name {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; line-height: 1.3;
  font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink);
}
#admin-view .adm-member-meta { font-weight: 400; font-size: 12px; color: var(--ink-mute); }
#admin-view .adm-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--rule); flex: 0 0 auto;
}
#admin-view .adm-swatch--none {
  background: repeating-linear-gradient(45deg, var(--ivory-deep), var(--ivory-deep) 3px, var(--paper) 3px, var(--paper) 6px);
  border-style: dashed;
}
#admin-view .adm-member-actions { display: inline-flex; gap: 2px; flex: 0 0 auto; }
#admin-view .row-action-btn {
  background: transparent; border: 1px solid transparent; padding: 5px 7px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink-mute);
  transition: all 0.15s ease;
}
#admin-view .row-action-btn:hover { background: var(--ivory-soft); border-color: var(--rule); color: var(--ink); }
#admin-view .row-action-btn.adm-del:hover { color: var(--danger); border-color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  #admin-view .adm-member .adm-member-actions { opacity: 0; transition: opacity 0.15s ease; }
  #admin-view .adm-member:hover .adm-member-actions,
  #admin-view .adm-member:focus-within .adm-member-actions { opacity: 1; }
}

/* Avatars initiales (mêmes teintes déterministes que le Répertoire Patient) */
#admin-view .patient-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; flex: 0 0 auto;
}
#admin-view .patient-avatar[data-tone="terra"]   { background: var(--terra-bg);  color: var(--terra-deep); }
#admin-view .patient-avatar[data-tone="sage"]    { background: var(--sage-bg);   color: var(--sage-deep); }
#admin-view .patient-avatar[data-tone="warn"]    { background: var(--warn-bg);   color: var(--warn-deep); }
#admin-view .patient-avatar[data-tone="neutral"] { background: var(--ivory-deep); color: var(--ink-soft); }

/* Cabinet : carte info bornée en largeur */
#admin-view .adm-group .info-card { max-width: 560px; }

/* Bloc Abonnement (mocké) */
#admin-view .adm-sub-card {
  background: var(--ivory); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: 20px 22px; max-width: 560px;
}
#admin-view .adm-sub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#admin-view .adm-sub-plan { font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--ink); }
#admin-view .adm-sub-rows .info-row:first-of-type { border-top: none; }
#admin-view .adm-sub-note { margin: 12px 0 0; font-size: 12px; color: var(--ink-mute); font-style: italic; }

/* ============================================================
   DentalPatient — onglet « Patients en pause » (verrou anti-harcèlement)
   ============================================================ */
#patients-tab-pause .pause-info {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
  padding: 13px 16px; background: var(--sage-mist); border: 1px solid var(--sage-bg);
  border-left: 3px solid var(--sage); border-radius: var(--radius);
  font: 400 var(--text-sm)/1.5 var(--sans); color: var(--ink-soft);
}
#patients-tab-pause .pause-info b { color: var(--sage-deep); }
#patients-tab-pause .pause-banner-meta { color: var(--ink-mute); font-size: var(--text-xs); }
#patients-tab-pause .app-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 var(--text-xs)/1 var(--sans); padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}
#patients-tab-pause .app-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
#patients-tab-pause .app-badge--devis { background: #F3E2DC; color: var(--accent-devis); }
#patients-tab-pause .app-badge--devis::before { background: var(--accent-devis); }
#patients-tab-pause .app-badge--avis { background: #F6EAD2; color: #8A6313; }
#patients-tab-pause .app-badge--avis::before { background: var(--accent-avis); }
#patients-tab-pause .prat-cell { display: inline-flex; align-items: center; gap: 8px; }
#patients-tab-pause .prat-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
#patients-tab-pause .prat-cell--none { color: var(--ink-mute); }
#patients-tab-pause .prat-dot--none { background: transparent; border: 1px dashed var(--rule); box-shadow: none; }
#patients-tab-pause .reeli { display: flex; flex-direction: column; line-height: 1.25; }
#patients-tab-pause .reeli small { color: var(--ink-mute); font-size: var(--text-xs); }
#patients-tab-pause .reeli-soon { align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warn-bg); color: var(--warn-deep); font: 600 var(--text-xs)/1 var(--sans); }
#patients-tab-pause .masked { color: var(--ink-soft); }
#patients-tab-pause .pause-toast {
  display: none; align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px 15px;
  background: var(--sage-mist); border: 1px solid var(--sage-bg); border-left: 3px solid var(--sage);
  border-radius: var(--radius); font: 500 var(--text-sm)/1.4 var(--sans); color: var(--sage-deep);
}
#patients-tab-pause .pause-toast.show { display: flex; }
#patients-tab-pause .pause-toast small { font-weight: 400; color: var(--ink-soft); }
/* Modal d'avertissement déblocage */
#patient-pause-modal .pw-lead { font: 400 var(--text-base)/1.55 var(--sans); color: var(--ink-soft); margin: 0 0 14px; }
#patient-pause-modal .pw-lead b { color: var(--ink); }
#patient-pause-modal .pw-target {
  display: flex; flex-direction: column; gap: 2px; background: var(--ivory-soft);
  border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
#patient-pause-modal .pw-target .l { font: 600 var(--text-xs)/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
#patient-pause-modal .pw-target .nom { font-weight: 700; font-size: var(--text-base); color: var(--ink); }
#patient-pause-modal .pw-target .mail { font-size: var(--text-sm); color: var(--ink-soft); }
#patient-pause-modal .pw-q { font: 500 var(--text-base)/1.5 var(--sans); color: var(--ink); margin: 0; }
#patient-pause-modal .pw-force { background: transparent; color: var(--danger); border: 1px solid var(--danger); box-shadow: none; }
#patient-pause-modal .pw-force:hover { background: var(--danger-bg); }

/* ============================================================
   Communication — Mails du cabinet (email Reply-To, compteur partagé, packs)
   Additif scopé #admin-view. Voir maquette-admin-mails.html (langage DS).
   ============================================================ */
#admin-view .comm-card {
  background: var(--ivory); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: 20px 22px; max-width: 560px;
}
#admin-view .comm-card--accent { border-left: 3px solid var(--terra); }
/* Identité dans les mails : nom + logo communs */
#admin-view .comm-identity { display: flex; gap: 20px; align-items: flex-start; }
#admin-view .comm-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
#admin-view .comm-logo {
  width: 76px; height: 76px; border-radius: var(--radius-full); object-fit: cover;
  border: 1px solid var(--rule); background: var(--ivory-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--terra-deep); overflow: hidden;
}
#admin-view .comm-logo img { width: 100%; height: 100%; object-fit: cover; }
#admin-view .comm-logo-note { font-size: var(--text-xs); color: var(--ink-mute); }
#admin-view .comm-identity .comm-field { flex: 1 1 auto; }
#admin-view .comm-form { display: flex; flex-direction: column; gap: 14px; }
#admin-view .comm-field { display: flex; flex-direction: column; gap: 5px; }
#admin-view .comm-field label {
  font: 600 var(--text-xs)/1 var(--sans); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-mute);
}
#admin-view .comm-input {
  font: 400 var(--text-base)/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 9px 12px; width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#admin-view .comm-input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-bg); }
#admin-view .comm-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
#admin-view .comm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#admin-view .comm-hint {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 2px; padding: 10px 12px;
  background: var(--sage-mist); border: 1px solid var(--sage-bg);
  border-radius: var(--radius); color: var(--sage-deep);
  font: 400 var(--text-sm)/1.45 var(--sans);
}
#admin-view .comm-hint .ic { flex: 0 0 auto; opacity: 0.85; }
#admin-view .comm-err { font: 500 var(--text-xs)/1.3 var(--sans); color: var(--danger); min-height: 13px; }
#admin-view .comm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

#admin-view .qmeter { max-width: 560px; }
#admin-view .qmeter-num { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--text-2xl); color: var(--ink); line-height: 1.05; }
#admin-view .qmeter-num b { font-style: normal; font-weight: 600; }
#admin-view .qmeter-sub { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 2px; }
#admin-view .qbar {
  display: flex; height: 14px; margin: 14px 0 10px;
  background: var(--ivory-deep); border-radius: var(--radius-pill);
  overflow: hidden; border: 1px solid var(--rule-soft);
}
#admin-view .qbar-seg { height: 100%; }
#admin-view .qbar-seg--devis { background: var(--accent-devis); }
#admin-view .qbar-seg--avis { background: var(--accent-avis); }
#admin-view .qbar-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--text-sm); color: var(--ink-soft); }
#admin-view .legend-item { display: inline-flex; align-items: center; gap: 7px; }
#admin-view .legend-item b { font-weight: 600; color: var(--ink); }
#admin-view .legend-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex: 0 0 auto; }
#admin-view .legend-dot--devis { background: var(--accent-devis); }
#admin-view .legend-dot--avis { background: var(--accent-avis); }
#admin-view .legend-dot--free { background: var(--ivory-deep); border: 1px solid var(--rule); }
#admin-view .shared-banner {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 16px; padding: 13px 15px;
  background: var(--sage-mist); border: 1px solid var(--sage-bg);
  border-left: 3px solid var(--sage); border-radius: var(--radius);
}
#admin-view .shared-banner .ic { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
#admin-view .shared-banner h4 { font: 600 var(--text-base)/1.3 var(--sans); color: var(--sage-deep); margin: 0 0 2px; }
#admin-view .shared-banner p { font: 400 var(--text-sm)/1.45 var(--sans); color: var(--ink-soft); margin: 0; }

#admin-view .pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 720px; align-items: stretch; }
#admin-view .pack-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--ivory); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: 22px 18px 18px; text-align: center; opacity: 0.92;
}
#admin-view .pack-card--hot { border-color: var(--terra); box-shadow: var(--shadow-sm); opacity: 1; }
#admin-view .pack-pop {
  align-self: center; margin-bottom: 8px;
  background: var(--terra-bg); color: var(--terra-deep);
  font: 600 var(--text-xs)/1 var(--sans); letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
#admin-view .pack-ribbon {
  position: absolute; top: 12px; right: -34px; transform: rotate(45deg);
  background: var(--ink-mute); color: var(--paper);
  font: 600 var(--text-xs)/1 var(--sans); letter-spacing: 0.04em;
  padding: 4px 40px; text-transform: uppercase;
}
#admin-view .pack-amount { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--text-2xl); color: var(--ink); line-height: 1; }
#admin-view .pack-amount span { font-size: var(--text-md); font-style: normal; color: var(--ink-mute); }
#admin-view .pack-unit { font-size: var(--text-sm); color: var(--ink-mute); margin: 2px 0 12px; }
#admin-view .pack-price { font: 600 var(--text-lg)/1 var(--sans); color: var(--ink); margin-bottom: 2px; }
#admin-view .pack-price small { font-weight: 400; font-size: var(--text-sm); color: var(--ink-mute); }
#admin-view .pack-tease { font-size: var(--text-xs); color: var(--ink-faint); margin: 0 0 14px; flex: 1 1 auto; }
#admin-view .pack-card .ds-btn[disabled] { width: 100%; cursor: not-allowed; opacity: 0.55; pointer-events: none; }
#admin-view .pack-foot-note { margin: 14px 0 0; font-size: var(--text-xs); color: var(--ink-mute); font-style: italic; }
@media (max-width: 680px) {
  #admin-view .pack-grid { grid-template-columns: 1fr; }
  #admin-view .comm-row2 { grid-template-columns: 1fr; }
}

/* Modale Admin : libellé couleur opt-in (réutilise .color-opt-in legacy si présent) */
#adminMemberModal .color-opt-in {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft); cursor: pointer;
}
#adminMemberModal .color-opt-in input[type="color"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  /* flex:0 0 auto : sans ça, l'input couleur se fait écraser à un trait par le
     label inline-flex (.color-opt-in) — bug remonté par David. */
  flex: 0 0 auto;
  width: 44px; height: 28px; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  cursor: pointer; background: var(--paper);
}
#adminMemberModal .color-opt-in input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
#adminMemberModal .color-opt-in input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }

/* ============================================================
   COUCHE PIN — bouton profil (nom en haut) + menu de bascule.
   ============================================================ */
.profile-switch { position: relative; display: inline-block; }
.profile-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 99px; font-size: 13px; color: var(--ink-soft);
  font-family: var(--sans); cursor: pointer; transition: all 0.15s ease;
}
.profile-btn:hover { border-color: var(--terra); color: var(--ink); }
.profile-switch #user-email { padding: 0; border: none; background: none; font-weight: 500; }
.profile-caret { color: var(--ink-mute); font-size: 11px; }

.profile-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 250px; max-width: 320px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 6px; z-index: 1200;
}
.profile-menu.hidden { display: none; }
.profile-head {
  padding: 10px 12px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px;
}
.profile-head small, .profile-item small { color: var(--ink-mute); font-weight: 400; }
.profile-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; background: none; border: none; cursor: pointer;
  border-radius: var(--radius); font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  transition: background 0.12s ease;
}
.profile-item:hover { background: var(--ivory-soft); }
.profile-sep {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); padding: 10px 12px 4px;
}
.profile-empty { padding: 4px 12px 8px; font-size: 13px; color: var(--ink-mute); }
.profile-logout { color: var(--danger); margin-top: 4px; border-top: 1px solid var(--rule-soft); border-radius: 0; }

/* Pavé PIN : 4 cases (UI seulement, toujours 4 chiffres en logique). */
.pin-pad { display: flex; gap: 10px; }
.pin-pad .pin-cell {
  width: 52px; height: 60px; padding: 0;
  text-align: center; font-family: var(--sans); font-size: 26px; font-weight: 600;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
.pin-pad .pin-cell:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(184, 89, 64, 0.12); }
.pin-pad .pin-cell:not(:placeholder-shown) { border-color: var(--terra-light); }

/* Postes de confiance : liste + révocation */
.device-group { margin-bottom: 18px; }
.device-group:last-child { margin-bottom: 0; }
.device-group h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); margin: 0 0 8px; font-weight: 700;
}
.device-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--rule-soft); border-radius: var(--radius);
  margin-bottom: 8px; background: var(--paper);
}
.device-row:last-child { margin-bottom: 0; }
.device-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.device-info .device-who { font-weight: 600; color: var(--ink); }
.device-info .device-label { color: var(--ink); font-size: 14px; }
.device-info small { color: var(--ink-mute); font-size: 12px; }
.device-revoke { flex-shrink: 0; color: var(--danger); }

/* ============================================================
   DentalOrtho — styles scopés #ortho-view (portés de la maquette
   validée). Réutilise les atomes globaux .ds-btn / .ds-badge.
   ============================================================ */
#ortho-view { padding-bottom: 60px; }
/* Refonte 10/06 — boutons monochromes : le primaire passe en encre pleine
   PARTOUT dans DentalOrtho (vue + modals ortho-*). Scopé : aucun impact
   sur les autres apps qui gardent le ds-btn--primary terracotta. */
#ortho-view .ds-btn.ds-btn--primary,
.agenda-modal[id^="ortho-"] .ds-btn.ds-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#ortho-view .ds-btn.ds-btn--primary:hover,
.agenda-modal[id^="ortho-"] .ds-btn.ds-btn--primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
/* Icônes SVG trait monochromes (langage DentalStock) */
svg.o-ico { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.o-locked .ico svg.o-ico { width: 26px; height: 26px; }
.o-empty .ico svg.o-ico, .tr-empty .ico svg.o-ico { width: 30px; height: 30px; }
/* Onglets pills style DentalStock (refonte 10/06, maquette variante B validée) */
#ortho-view .o-tabnav { display: flex; align-items: center; gap: 10px; padding: 16px 48px 14px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
#ortho-view .o-tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-pill); font-family: var(--serif); font-size: 14.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; border: 1px solid var(--rule); background: var(--paper); box-shadow: var(--shadow-sm); transition: all .15s var(--ease-out); }
#ortho-view .o-tab-btn:hover { background: var(--ivory-deep); color: var(--ink); border-color: var(--ink-mute); }
#ortho-view .o-tab-btn.active { background: var(--terra); color: var(--paper); border-color: var(--terra); box-shadow: var(--shadow-md); }
#ortho-view .o-tab-spacer { flex: 1; }
#ortho-view .o-eur { font-style: normal; font-weight: 600; opacity: .8; }
#ortho-view .o-body { padding: 26px 48px; }
#ortho-view .o-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
#ortho-view .o-stat { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 18px; position: relative; overflow: hidden; }
#ortho-view .o-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--terra); opacity: .5; }
#ortho-view .o-stat.sage::before { background: var(--sage); opacity: 1; }
#ortho-view .o-stat.warn::before { background: var(--warn); opacity: 1; }
#ortho-view .o-stat .v { font-family: var(--serif); font-size: 30px; color: var(--ink); line-height: 1; }
#ortho-view .o-stat .l { font-size: 12px; color: var(--ink-mute); margin-top: 5px; font-weight: 500; }
#ortho-view .o-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
#ortho-view .o-search { flex: 1; min-width: 220px; }
#ortho-view .o-search input { width: 100%; padding: 9px 14px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--sans); font-size: 13px; color: var(--ink); }
#ortho-view .o-sel { width: auto; flex: 0 0 auto; padding: 9px 32px 9px 14px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--sans); font-size: 13px; color: var(--ink-soft); cursor: pointer; }
#ortho-view .page-sub { color: var(--ink-mute); font-size: 14px; margin-top: 6px; }
#ortho-view .page-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#ortho-view .o-tab-panel { padding-bottom: 40px; }
/* historique des phases (fiche) */
#ortho-view .o-hist-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; color: var(--ink-soft); }
#ortho-view .o-hist-row:last-child { border-bottom: none; }
#ortho-view .o-hist-cur { font-weight: 700; color: var(--terra-deep); }
#ortho-view .o-hist-date { color: var(--ink-mute); font-size: 12px; }
#ortho-view .o-hist-advance { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); display: flex; justify-content: flex-end; }
/* pastille couleur praticien */
#ortho-view .o-prac { display: inline-flex; align-items: center; gap: 7px; }
#ortho-view .o-prac-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
#ortho-view .o-prac-dot.none { background: repeating-linear-gradient(45deg, var(--ivory-deep), var(--ivory-deep) 2px, var(--paper) 2px, var(--paper) 4px); border-color: var(--rule); }
#ortho-view .o-prac-nm { font-size: 13px; color: var(--ink-soft); }
#ortho-view .o-prac-nm.muted { color: var(--ink-faint); font-style: italic; }
/* RDV par phase (historique fiche) */
#ortho-view .o-hist-item { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
#ortho-view .o-hist-item:last-child { border-bottom: none; }
#ortho-view .o-hist-item .o-hist-row { border-bottom: none; padding: 0; }
#ortho-view .o-hist-rdvs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; padding-left: 4px; }
#ortho-view .o-hist-rdv { font-size: 11px; color: var(--sage-deep); background: var(--sage-mist); border: 1px solid var(--sage-bg); border-radius: var(--radius-pill); padding: 1px 8px; }
#ortho-view .o-hist-rdv.fut { color: var(--terra-deep); background: var(--terra-mist); border-color: var(--terra-bg); font-weight: 600; }
#ortho-view .o-hist-nordv { font-size: 11px; color: var(--ink-faint); font-style: italic; }
/* bandeau retard structurel (finance) — visuellement distinct de la stagnation */
#ortho-view .o-retard-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); }
#ortho-view .o-retard-banner b { font-weight: 700; }
/* colonne Paiements : mini barre de progression */
#ortho-view .o-paybar { min-width: 110px; max-width: 150px; }
#ortho-view .o-paybar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
#ortho-view .o-paybar-top .pct { font-weight: 700; font-size: 12.5px; color: var(--sage-deep); }
#ortho-view .o-paybar-top .pct .rtd { font-size: 11px; }
#ortho-view .o-paybar-top .amt { font-size: 10.5px; color: var(--ink-mute); }
#ortho-view .o-paybar-track { height: 7px; border-radius: var(--radius-pill); background: var(--ivory-deep); border: 1px solid var(--rule); overflow: hidden; }
#ortho-view .o-paybar-track > span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--sage), var(--sage-deep)); }
#ortho-view .o-paybar.retard .o-paybar-top .pct { color: var(--danger); }
#ortho-view .o-paybar.retard .o-paybar-track > span { background: linear-gradient(90deg, var(--terra-light), var(--danger)); }
#ortho-view .o-pay-absent { font-size: 12px; color: var(--ink-faint); font-style: italic; }

/* ===== Modal Historique des encaissements (hors #ortho-view) ===== */
#ortho-pay-history-modal .ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
#ortho-pay-history-modal .ph-stat { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 13px 15px; position: relative; overflow: hidden; }
#ortho-pay-history-modal .ph-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--sage); }
#ortho-pay-history-modal .ph-stat .v { font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1; }
#ortho-pay-history-modal .ph-stat.big .v { color: var(--sage-deep); }
#ortho-pay-history-modal .ph-stat .l { font-size: 11px; color: var(--ink-mute); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
#ortho-pay-history-modal .ph-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
#ortho-pay-history-modal .ph-search { flex: 1; min-width: 200px; }
#ortho-pay-history-modal .ph-search input { width: 100%; padding: 8px 13px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--sans); font-size: 13px; }
#ortho-pay-history-modal .ph-sel { width: auto; padding: 8px 30px 8px 13px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--sans); font-size: 13px; color: var(--ink-soft); cursor: pointer; }
#ortho-pay-history-modal .ph-month { margin-bottom: 14px; }
#ortho-pay-history-modal .ph-month-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--rule); margin-bottom: 2px; }
#ortho-pay-history-modal .ph-month-hd .nm { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
#ortho-pay-history-modal .ph-month-hd .tot { font-family: var(--serif); font-size: 15px; color: var(--sage-deep); }
#ortho-pay-history-modal .ph-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--rule-soft); }
#ortho-pay-history-modal .ph-row:last-child { border-bottom: none; }
#ortho-pay-history-modal .ph-row .date { width: 96px; font-weight: 600; color: var(--ink-soft); font-size: 13px; }
#ortho-pay-history-modal .ph-row .pt { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
#ortho-pay-history-modal .ph-row .pt .av { width: 30px; height: 30px; border-radius: 50%; background: var(--terra-bg); color: var(--terra-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; border: 1px solid var(--terra-light); flex-shrink: 0; }
#ortho-pay-history-modal .ph-row .pt b { color: var(--ink); font-weight: 600; font-size: 13.5px; }
#ortho-pay-history-modal .ph-row .pt small { display: block; color: var(--ink-faint); font-size: 11px; }
#ortho-pay-history-modal .ph-row .mode { display: inline-flex; align-items: center; gap: 6px; width: 124px; font-size: 12.5px; color: var(--ink-soft); }
#ortho-pay-history-modal .ph-row .mode .prac-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
#ortho-pay-history-modal .ph-row .amt { width: 96px; text-align: right; font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--sage-deep); }
#ortho-pay-history-modal .o-empty { text-align: center; color: var(--ink-mute); }
#ortho-pay-history-modal .o-empty .ico { font-size: 30px; opacity: .5; display: block; margin-bottom: 8px; }

/* ===== Modal Corbeille (hors #ortho-view) ===== */
#ortho-trash-modal .tr-note { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--ink-mute); background: var(--ivory-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 9px 13px; margin-bottom: 14px; }
#ortho-trash-modal .tr-note b { color: var(--ink-soft); }
#ortho-trash-modal .tr-row { display: flex; align-items: center; gap: 13px; padding: 11px 4px; border-bottom: 1px solid var(--rule-soft); }
#ortho-trash-modal .tr-row:last-child { border-bottom: none; }
#ortho-trash-modal .tr-row .pt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
#ortho-trash-modal .tr-row .pt .av { width: 34px; height: 34px; border-radius: 50%; background: var(--terra-bg); color: var(--terra-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; border: 1px solid var(--terra-light); flex-shrink: 0; }
#ortho-trash-modal .tr-row .pt b { color: var(--ink); font-weight: 600; font-size: 14px; }
#ortho-trash-modal .tr-row .pt small { display: block; color: var(--ink-faint); font-size: 11.5px; }
#ortho-trash-modal .tr-row .appa { display: inline-flex; align-items: center; gap: 7px; width: 150px; font-size: 13px; color: var(--ink-soft); }
#ortho-trash-modal .tr-row .appa .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
#ortho-trash-modal .tr-row .appa .dot.none { background: repeating-linear-gradient(45deg, var(--ivory-deep), var(--ivory-deep) 2px, var(--paper) 2px, var(--paper) 4px); border-color: var(--rule); }
#ortho-trash-modal .tr-row .del { width: 168px; font-size: 12px; color: var(--ink-mute); }
#ortho-trash-modal .tr-row .del b { color: var(--ink-soft); font-weight: 600; }
#ortho-trash-modal .tr-row .del small { display: block; color: var(--ink-faint); font-size: 11px; }
#ortho-trash-modal .tr-empty { text-align: center; padding: 42px 20px; color: var(--ink-mute); }
#ortho-trash-modal .tr-empty .ico { font-size: 34px; opacity: .5; display: block; margin-bottom: 10px; }
#ortho-trash-modal .tr-empty p { font-size: 13.5px; }

/* Corbeille DentalPatient — modal #patients-trash-modal (top-level body,
   donc scope par id, PAS #ortho-view). Famille visuelle de la corbeille ortho. */
#patients-trash-modal .pt-trash-list { display: flex; flex-direction: column; }
#patients-trash-modal .pt-trash-row { display: flex; align-items: center; gap: 13px; padding: 11px 4px; border-bottom: 1px solid var(--rule-soft); }
#patients-trash-modal .pt-trash-row:last-child { border-bottom: none; }
#patients-trash-modal .pt-trash-row .pt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
#patients-trash-modal .pt-trash-row .pt-meta { min-width: 0; }
#patients-trash-modal .pt-trash-row .pt-meta b { color: var(--ink); font-weight: 600; font-size: 14px; }
#patients-trash-modal .pt-trash-row .pt-meta small { display: block; color: var(--ink-faint); font-size: 11.5px; }
#patients-trash-modal .pt-trash-row .pt-when { width: 168px; font-size: 12px; color: var(--ink-mute); flex-shrink: 0; }
#patients-trash-modal .pt-trash-empty { text-align: center; padding: 42px 20px; color: var(--ink-mute); }
#patients-trash-modal .pt-trash-empty .ico { font-size: 34px; opacity: .5; display: block; margin-bottom: 10px; }
#patients-trash-modal .pt-trash-empty p { font-size: 13.5px; }

/* autocomplete patient (modal ajout) */
.o-pt-results { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); margin-top: 4px; max-height: 200px; overflow-y: auto; }
.o-pt-item { padding: 9px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--rule-soft); color: var(--ink); }
.o-pt-item:last-child { border-bottom: none; }
.o-pt-item:hover { background: var(--ivory); }
.o-pt-empty { color: var(--ink-mute); font-style: italic; cursor: default; }
.o-pt-empty:hover { background: none; }

/* ===== Modal Nouveau traitement (refonte, scopé #ortho-new-modal) ===== */
#ortho-new-modal .nt-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 2px 0 12px; display: flex; align-items: center; gap: 8px; }
#ortho-new-modal .nt-sec::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); }
#ortho-new-modal .nt-sec.s2 { margin-top: 22px; }
#ortho-new-modal .nt-fg { margin-bottom: 13px; }
#ortho-new-modal .nt-fg label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
#ortho-new-modal .nt-fg label .req { color: var(--terra); }
#ortho-new-modal .nt-fg input, #ortho-new-modal .nt-fg select, #ortho-new-modal .nt-fg textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--sans); font-size: 13.5px; background: var(--paper); color: var(--ink); }
#ortho-new-modal .nt-fg input:focus, #ortho-new-modal .nt-fg select:focus, #ortho-new-modal .nt-fg textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-mist); }
#ortho-new-modal .nt-hint { font-size: 11.5px; color: var(--ink-mute); margin-top: 5px; }
#ortho-new-modal .nt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 560px) { #ortho-new-modal .nt-row { grid-template-columns: 1fr; } }
#ortho-new-modal .nt-pt-wrap { position: relative; }
#ortho-new-modal .nt-pt-input { position: relative; }
#ortho-new-modal .nt-pt-input input { padding-left: 34px; }
#ortho-new-modal .nt-pt-input .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .5; }
#ortho-new-modal .nt-pt-results { margin-top: 6px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); max-height: 230px; overflow-y: auto; }
#ortho-new-modal .nt-pt-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
#ortho-new-modal .nt-pt-item:hover { background: var(--ivory); }
#ortho-new-modal .nt-pt-item .av { width: 28px; height: 28px; border-radius: 50%; background: var(--terra-bg); color: var(--terra-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; border: 1px solid var(--terra-light); flex-shrink: 0; }
#ortho-new-modal .nt-pt-item b { color: var(--ink); font-weight: 600; }
#ortho-new-modal .nt-pt-item small { color: var(--ink-faint); font-size: 11px; display: block; }
#ortho-new-modal .nt-pt-create { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--sage-mist); color: var(--sage-deep); font-size: 13px; cursor: pointer; }
#ortho-new-modal .nt-pt-create b { font-weight: 700; }
#ortho-new-modal .nt-pt-create:hover { background: var(--sage-bg); }
#ortho-new-modal .nt-prac { position: relative; }
#ortho-new-modal .nt-prac select { padding-left: 30px; }
#ortho-new-modal .nt-prac .dot { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; border: 1px dashed var(--rule); background: transparent; pointer-events: none; }
/* onglet fiche épinglé — variante B : pill pointillée, nom italique, fond rosé */
#ortho-view .o-tab-btn.o-tab-fiche { border-style: dashed; font-style: italic; background: var(--terra-mist); }
#ortho-view .o-tab-btn.o-tab-fiche.active { background: var(--terra); border-style: solid; }
#ortho-view .o-tab-x { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; font-size: 13px; line-height: 1; color: inherit; opacity: .55; font-style: normal; }
#ortho-view .o-tab-x:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
#ortho-view .o-tab-btn.active .o-tab-x:hover { background: rgba(255, 255, 255, .25); }
/* builder d'échéances (modal) */
.o-ech-gen { background: var(--ivory-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; }
.o-ech-gen-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.o-ech-gen-grid label { display: block; font-size: 11px; color: var(--ink-mute); font-weight: 600; margin-bottom: 3px; }
.o-ech-gen-grid input, .o-ech-gen-grid select { width: 100%; padding: 7px 8px; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--sans); font-size: 13px; background: var(--paper); }
@media (max-width: 680px) { .o-ech-gen-grid { grid-template-columns: repeat(2, 1fr); } }
.o-ech-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.o-ech-row .o-ech-d { flex: 0 0 150px; }
.o-ech-row .o-ech-m { flex: 1; }
.o-ech-row .o-ech-mo { flex: 0 0 130px; }
.o-ech-row input, .o-ech-row select { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--sans); font-size: 13px; background: var(--paper); }
.o-ech-del { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--danger); cursor: pointer; font-size: 16px; line-height: 1; }
.o-ech-del:hover { background: var(--danger-bg); border-color: var(--danger); }
/* ligne d'échéance ENCAISSÉE (verrouillée) */
.o-ech-row.locked { background: var(--sage-mist); border: 1px solid var(--sage-bg); border-radius: var(--radius); padding: 7px 10px; gap: 10px; }
.o-ech-row.locked .o-ech-lk { font-size: 13px; }
.o-ech-row.locked .o-ech-ld { width: 92px; font-weight: 600; color: var(--ink-soft); font-size: 12.5px; }
.o-ech-row.locked .o-ech-lm { flex: 1; font-weight: 700; color: var(--ink); font-family: var(--serif); font-size: 14px; }
.o-ech-row.locked .o-ech-lmo { width: 110px; font-size: 11.5px; color: var(--ink-mute); }

/* ===== Modal CONSTRUIRE L'ÉCHÉANCIER (2 étapes) ===== */
#ortho-builder-modal .ob-step { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); margin: 4px 0 10px; }
#ortho-builder-modal .ob-num { width: 24px; height: 24px; border-radius: 50%; background: var(--terra); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 12px; flex-shrink: 0; }
#ortho-builder-modal .ob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 680px) { #ortho-builder-modal .ob-grid { grid-template-columns: repeat(2, 1fr); } }
#ortho-builder-modal .fg label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
#ortho-builder-modal .fg input { width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--sans); font-size: 13px; background: var(--paper); color: var(--ink); }
#ortho-builder-modal .fg input:disabled { color: var(--ink-mute); background: var(--ivory-soft); }
#ortho-builder-modal .ob-checkrow { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--terra-mist); border: 1px solid var(--terra-bg); border-radius: var(--radius); margin-bottom: 14px; }
#ortho-builder-modal .ob-checkrow label { font-size: 13px; color: var(--ink); }
#ortho-builder-modal .ob-checkrow input[type=checkbox] { width: 18px; height: 18px; }
#ortho-builder-modal .ob-cont-amt { margin-left: auto; font-size: 12px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; }
#ortho-builder-modal .ob-cont-amt input { width: 88px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--sans); font-size: 13px; }
#ortho-builder-modal .ob-timeline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding: 12px; background: var(--ivory-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); }
#ortho-builder-modal .ob-tl { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 7px 11px; min-width: 90px; }
#ortho-builder-modal .ob-tl .nm { font-weight: 700; font-size: 12px; color: var(--terra-deep); }
#ortho-builder-modal .ob-tl .dt { font-size: 10.5px; color: var(--ink-mute); }
#ortho-builder-modal .ob-tl .mt { font-size: 11.5px; color: var(--ink); font-weight: 600; }
#ortho-builder-modal .ob-tl.cont { border-color: var(--sage); background: var(--sage-mist); }
#ortho-builder-modal .ob-tl.cont .nm { color: var(--sage-deep); }
#ortho-builder-modal .ob-tl-arrow { color: var(--ink-faint); font-size: 12px; }
#ortho-builder-modal .ob-divider { height: 1px; background: var(--rule-soft); margin: 22px 0; }
#ortho-builder-modal .ob-sem { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
#ortho-builder-modal .ob-sem-hd { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: var(--ivory-soft); cursor: pointer; }
#ortho-builder-modal .ob-sem-hd .nm { font-weight: 700; font-size: 13px; color: var(--ink); }
#ortho-builder-modal .ob-sem-hd .dt { font-size: 11.5px; color: var(--ink-mute); }
#ortho-builder-modal .ob-sem-hd .recon { margin-left: auto; font-size: 12px; font-weight: 600; }
#ortho-builder-modal .recon.ok { color: var(--sage-deep); }
#ortho-builder-modal .recon.miss { color: var(--warn-deep); }
#ortho-builder-modal .ob-sem-hd .chev { color: var(--ink-faint); font-size: 11px; }
#ortho-builder-modal .ob-sem-bd { padding: 8px 13px 12px; }
#ortho-builder-modal .ob-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
#ortho-builder-modal .ob-foot .sub { font-size: 12px; color: var(--ink-mute); }
#ortho-builder-modal .ob-sem.ob-collapsed .ob-sem-bd { display: none; }
#ortho-view .o-chip-filter { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--warn); border-radius: var(--radius-pill); background: var(--paper); color: var(--warn-deep); font-size: 13px; font-weight: 600; cursor: pointer; }
#ortho-view .o-chip-filter.on { background: var(--warn-bg); }
#ortho-view .o-chip-filter .n { background: var(--warn); color: var(--paper); border-radius: var(--radius-pill); padding: 0 6px; font-size: 11px; }
#ortho-view .o-tbl-wrap { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
#ortho-view table.o-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#ortho-view .o-tbl thead th { background: var(--ivory-soft); text-align: left; padding: 12px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); font-weight: 700; border-bottom: 1px solid var(--rule); }
#ortho-view .o-tbl tbody td { padding: 13px 16px; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); vertical-align: middle; }
#ortho-view .o-tbl tbody tr:last-child td { border-bottom: none; }
#ortho-view .o-tbl tbody tr:hover td { background: var(--ivory); }
#ortho-view .o-tbl tbody tr.clickable { cursor: pointer; }
#ortho-view tr.o-stagnant td { background: var(--warn-bg); }
#ortho-view tr.o-stagnant:hover td { background: #efd9ad; }
#ortho-view tr.o-dropped td { opacity: .6; }
#ortho-view .o-ptname { display: flex; align-items: center; gap: 10px; }
#ortho-view .o-av { width: 32px; height: 32px; border-radius: 50%; background: var(--terra-bg); color: var(--terra-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; border: 1px solid var(--terra-light); flex-shrink: 0; }
#ortho-view .o-ptname b { color: var(--ink); font-weight: 600; }
#ortho-view .o-ptname small { color: var(--ink-faint); font-size: 11px; display: block; }
#ortho-view .o-stag-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: var(--warn-deep); background: var(--paper); border: 1px solid var(--warn); border-radius: var(--radius-pill); padding: 1px 7px; width: max-content; }
#ortho-view .o-phase-pill { font-size: 11px; font-weight: 700; color: var(--sage-deep); background: var(--sage-mist); border: 1px solid var(--sage-bg); padding: 2px 8px; border-radius: var(--radius-pill); }
#ortho-view .o-rdv b { font-weight: 700; color: var(--sage-deep); font-size: 13px; }
#ortho-view .o-rdv.soon b { color: var(--warn-deep); }
#ortho-view .o-rdv small { color: var(--ink-faint); font-size: 11px; display: block; }
#ortho-view .o-rdv-none { display: inline-flex; align-items: center; gap: 5px; color: var(--danger); font-weight: 600; font-size: 12.5px; }
#ortho-view .o-rdv-none.muted { color: var(--ink-mute); }
#ortho-view .o-empty, #ortho-reglages-modal .o-empty { text-align: center; padding: 48px 20px; color: var(--ink-mute); }
#ortho-view .o-empty .ico { font-size: 34px; opacity: .5; display: block; margin-bottom: 10px; }
#ortho-view .o-skel { height: 48px; border-radius: var(--radius); background: linear-gradient(90deg, var(--ivory-soft), var(--ivory-deep), var(--ivory-soft)); background-size: 200% 100%; animation: oShimmer 1.2s infinite; margin-bottom: 8px; }
@keyframes oShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ---- Fiche ---- */
#ortho-view .o-fiche { display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; align-items: start; }
@media (max-width: 920px) { #ortho-view .o-fiche { grid-template-columns: 1fr; } #ortho-view .o-stats { grid-template-columns: repeat(2, 1fr); } }
#ortho-view .o-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px; }
#ortho-view .o-card-hd { padding: 14px 20px; border-bottom: 1px solid var(--rule-soft); display: flex; align-items: center; justify-content: space-between; background: var(--ivory-soft); }
#ortho-view .o-card-hd h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--ink); }
#ortho-view .o-card-bd { padding: 18px 20px; }
#ortho-view .o-identity { display: flex; align-items: center; gap: 14px; }
#ortho-view .o-big-av { width: 54px; height: 54px; border-radius: 50%; background: var(--terra-bg); color: var(--terra-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; border: 1px solid var(--terra-light); }
#ortho-view .o-identity .nm { font-family: var(--serif); font-size: 22px; color: var(--ink); }
#ortho-view .o-patient-link { margin-top: 14px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--sage-mist); border: 1px solid var(--sage-bg); border-radius: var(--radius); font-size: 12.5px; color: var(--sage-deep); }
#ortho-view .o-patient-link a { margin-left: auto; color: var(--terra); font-weight: 600; text-decoration: none; cursor: pointer; }
#ortho-view .o-kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin-top: 16px; font-size: 13.5px; }
#ortho-view .o-kv dt { color: var(--ink-mute); font-weight: 500; }
#ortho-view .o-kv dd { color: var(--ink); text-align: right; font-weight: 600; }
#ortho-view .o-rdv-edit { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 13px; background: var(--ivory-soft); border: 1px solid var(--rule); border-radius: var(--radius); flex-wrap: wrap; }
#ortho-view .o-rdv-edit label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
#ortho-view .o-rdv-edit input { font-family: var(--sans); font-size: 13px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
#ortho-view .o-clin-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sage-deep); background: var(--sage-mist); border: 1px solid var(--sage-bg); padding: 2px 7px; border-radius: var(--radius-pill); }
#ortho-view .o-phase-advance { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 14px; background: var(--sage-mist); border: 1px solid var(--sage-bg); border-radius: var(--radius); flex-wrap: wrap; }
#ortho-view .o-phase-advance .txt { font-size: 12.5px; color: var(--sage-deep); }
#ortho-view .o-phase-advance button { margin-left: auto; }
#ortho-view .o-roadmap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#ortho-view .o-rm { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: var(--paper); color: var(--ink-mute); white-space: nowrap; }
#ortho-view .o-rm.done { background: var(--sage-bg); border-color: var(--sage); color: var(--sage-deep); }
#ortho-view .o-rm.cur { background: var(--terra-bg); border-color: var(--terra); color: var(--terra-deep); box-shadow: 0 0 0 2px var(--terra-mist); }
#ortho-view .o-rm.suivi { border-style: dashed; background: var(--ivory); }
#ortho-view .o-rm .eu { font-size: 9px; vertical-align: super; color: var(--terra); }
#ortho-view .o-abandon { margin-top: 13px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ivory); }
#ortho-view .o-abandon .ttl { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 9px; }
#ortho-view .o-abandon .row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
#ortho-view .o-abandon select, #ortho-view .o-abandon input { font-family: var(--sans); font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
#ortho-view .o-abandon-shown { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--ivory-soft); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; }
/* ---- Stagnation banner ---- */
#ortho-view .o-stag-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 18px; border: 1px solid; }
#ortho-view .o-stag-banner.ok { background: var(--sage-mist); border-color: var(--sage-bg); color: var(--sage-deep); }
#ortho-view .o-stag-banner.alert { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-deep); }
/* ---- Échéancier (finance) ---- */
#ortho-view .o-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
#ortho-view .o-progress-top .lbl { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
#ortho-view .o-progress-top .pct { font-family: var(--serif); font-size: 22px; color: var(--sage-deep); }
#ortho-view .o-progress-bar { height: 12px; border-radius: var(--radius-pill); background: var(--ivory-deep); border: 1px solid var(--rule); overflow: hidden; }
#ortho-view .o-progress-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--sage), var(--sage-deep)); }
#ortho-view .o-progress-amt { font-size: 12.5px; color: var(--ink-mute); margin-top: 7px; }
#ortho-view .o-pay-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 18px 0; }
#ortho-view .o-pay-summary > div { padding: 13px 14px; text-align: center; border-right: 1px solid var(--rule-soft); }
#ortho-view .o-pay-summary > div:last-child { border-right: none; }
#ortho-view .o-pay-summary .v { font-family: var(--serif); font-size: 20px; color: var(--ink); }
#ortho-view .o-pay-summary .v.due { color: var(--terra-deep); }
#ortho-view .o-pay-summary .v.paid { color: var(--sage-deep); }
#ortho-view .o-pay-summary .l { font-size: 11px; color: var(--ink-mute); margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
#ortho-view .o-caution { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--terra-mist); border: 1px solid var(--terra-bg); border-radius: var(--radius); margin-bottom: 18px; font-size: 13px; color: var(--terra-deep); }
#ortho-view .o-caution .amt { margin-left: auto; font-family: var(--serif); font-size: 17px; }
#ortho-view .o-phase-group { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
#ortho-view .o-phase-hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ivory-soft); border-bottom: 1px solid var(--rule-soft); }
#ortho-view .o-phase-hd .nm { font-weight: 700; font-size: 13px; color: var(--ink); }
#ortho-view .o-phase-hd .sub { font-size: 11px; color: var(--ink-mute); margin-left: auto; }
#ortho-view .o-ech { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
#ortho-view .o-ech:last-child { border-bottom: none; }
#ortho-view .o-chk { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; background: var(--paper); font-size: 12px; cursor: pointer; flex-shrink: 0; }
#ortho-view .o-chk.on { background: var(--sage); border-color: var(--sage); color: var(--paper); }
#ortho-view .o-ech .dt { width: 92px; color: var(--ink-soft); font-weight: 600; }
#ortho-view .o-ech .mode { font-size: 11px; color: var(--ink-mute); width: 90px; }
#ortho-view .o-ech .amt { margin-left: auto; font-weight: 700; color: var(--ink); font-family: var(--serif); font-size: 15px; }
#ortho-view .o-locked { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 40px 30px; text-align: center; background: repeating-linear-gradient(45deg, var(--ivory), var(--ivory) 12px, var(--ivory-soft) 12px, var(--ivory-soft) 24px); }
#ortho-view .o-locked .ico { font-size: 26px; display: block; margin-bottom: 12px; }
#ortho-view .o-locked h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
#ortho-view .o-locked p { font-size: 13.5px; color: var(--ink-mute); max-width: 420px; margin: 0 auto; }
/* ---- Admin / permissions ---- */
#ortho-view .o-perm-list, #ortho-reglages-modal .o-perm-list { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); max-width: 720px; margin-bottom: 24px; }
#ortho-view .o-perm-row, #ortho-reglages-modal .o-perm-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--rule-soft); }
#ortho-view .o-perm-row:last-child, #ortho-reglages-modal .o-perm-row:last-child { border-bottom: none; }
#ortho-view .o-perm-info b, #ortho-reglages-modal .o-perm-info b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
#ortho-view .o-perm-info small, #ortho-reglages-modal .o-perm-info small { color: var(--ink-mute); font-size: 12px; }
#ortho-view .o-perm-tail, #ortho-reglages-modal .o-perm-tail { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#ortho-view .o-toggle { width: 44px; height: 25px; border-radius: var(--radius-pill); background: var(--ivory-deep); border: 1px solid var(--rule); position: relative; flex-shrink: 0; cursor: pointer; }
#ortho-view .o-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-sm); transition: left .2s; }
#ortho-view .o-toggle.on { background: var(--sage); border-color: var(--sage); }
#ortho-view .o-toggle.on::after { left: 21px; }
#ortho-view .o-toggle.lock { background: var(--ink-faint); border-color: var(--ink-faint); cursor: not-allowed; }
#ortho-view .o-toggle.lock::after { left: 21px; }
#ortho-view .o-sec-label, #ortho-reglages-modal .o-sec-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-weight: 700; margin: 0 0 12px; }
#ortho-view .o-note, #ortho-reglages-modal .o-note { display: flex; gap: 10px; padding: 13px 16px; background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius); font-size: 13px; color: var(--warn-deep); margin-bottom: 22px; }

/* ══ Administration → Permissions (chantier permissions 06/06) ══ */
#admin-view .perm-frontiere{display:flex;gap:10px;background:var(--danger-bg,#F7DDD5);border:1px solid var(--danger,#A6321F);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--ink-soft,#4A3D33);line-height:1.55;margin-bottom:20px;}
#admin-view .perm-frontiere b{color:var(--danger,#A6321F);}
#admin-view .perm-group{margin-bottom:24px;}
#admin-view .perm-group-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
#admin-view .perm-group-head h4{font-family:var(--serif,'Fraunces',serif);font-style:italic;font-weight:500;font-size:16px;margin:0;color:var(--ink,#2A1F18);}
#admin-view .perm-tag-ro{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--sage-bg,#E4E8DD);color:var(--sage-deep,#4F5C42);border-radius:99px;padding:2px 9px;}
#admin-view table.perm-mx{width:100%;border-collapse:collapse;background:var(--paper,#FFFCF5);font-size:13px;border:1px solid var(--rule,#D9CDB2);border-radius:8px;overflow:hidden;}
#admin-view .perm-mx th{text-align:left;padding:9px 12px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute,#8B7B6A);background:var(--ivory-soft,#F2EBDB);border-bottom:1px solid var(--rule,#D9CDB2);white-space:nowrap;}
#admin-view .perm-mx th.c,#admin-view .perm-mx td.c{text-align:center;width:100px;}
#admin-view .perm-mx td{padding:10px 12px;border-bottom:1px solid var(--rule-soft,#E8DDC4);vertical-align:middle;}
#admin-view .perm-mx tr:last-child td{border-bottom:none;}
#admin-view .perm-mx .dlabel b{display:block;font-size:13px;font-weight:600;}
#admin-view .perm-mx .dkey{font-size:10px;color:var(--ink-faint,#B5A89A);background:var(--ivory,#FAF6EE);border:1px solid var(--rule-soft,#E8DDC4);border-radius:3px;padding:1px 6px;}
#admin-view .perm-lock{font-size:10.5px;color:var(--ink-mute,#8B7B6A);}
#admin-view .perm-tgl{display:inline-block;width:36px;height:20px;border-radius:99px;background:var(--ivory-deep,#E9DFC8);border:1px solid var(--rule,#D9CDB2);position:relative;cursor:pointer;vertical-align:middle;}
#admin-view .perm-tgl::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--paper,#FFFCF5);box-shadow:0 1px 2px rgba(60,40,25,.15);transition:left .15s;}
#admin-view .perm-tgl.on{background:var(--sage,#6B7A5A);border-color:var(--sage-deep,#4F5C42);}
#admin-view .perm-tgl.on::after{left:18px;}
#admin-view .perm-chip{display:inline-block;font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 9px;margin:1px 2px;background:var(--sage-bg,#E4E8DD);color:var(--sage-deep,#4F5C42);border:1px solid var(--sage,#6B7A5A);white-space:nowrap;}
#admin-view .perm-chip.off{background:var(--danger-bg,#F7DDD5);color:var(--danger,#A6321F);border-color:var(--danger,#A6321F);}
#admin-view .perm-sec-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute,#8B7B6A);margin:26px 0 8px;}
#admin-view .perm-list{border:1px solid var(--rule,#D9CDB2);border-radius:8px;overflow:hidden;background:var(--paper,#FFFCF5);}
#admin-view .perm-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--rule-soft,#E8DDC4);font-size:13px;}
#admin-view .perm-row:last-child{border-bottom:none;}
#admin-view .perm-row.form{background:var(--ivory-soft,#F2EBDB);flex-wrap:wrap;}
#admin-view .perm-row .who{flex:1;}
#admin-view .perm-row .who b{display:block;font-size:13px;}
#admin-view .perm-row .who small{font-size:11px;color:var(--ink-mute,#8B7B6A);}
#admin-view .perm-row select{font-family:inherit;font-size:12.5px;border:1px solid var(--rule,#D9CDB2);background:var(--paper,#FFFCF5);border-radius:99px;padding:7px 13px;color:var(--ink-soft,#4A3D33);}
#admin-view .perm-muted{font-size:12px;color:var(--ink-mute,#8B7B6A);}
#admin-view .perm-locked{padding:30px;text-align:center;color:var(--ink-mute,#8B7B6A);font-size:13.5px;}

/* ============================================================
   DentalPatient — ajout d'email pour patient Doctolib (modale).
   Bandeau Doctolib + hint/verrou sous le champ email + champs
   verrouillés (disabled) visuellement atténués.
   ============================================================ */
#patient-edit-modal .pe-banner {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.45; color: var(--warn-deep);
  background: var(--warn-bg); border: 1px solid var(--warn);
  border-radius: var(--radius); padding: 9px 12px; margin-bottom: 14px;
}
#patient-edit-modal .pe-email-hint {
  margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--ink-soft);
  border-left: 2px solid var(--terra-light); padding: 2px 0 2px 10px;
}
#patient-edit-modal .pe-email-lock {
  margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); font-style: italic;
}
#patient-edit-modal input:disabled,
#patient-edit-modal textarea:disabled {
  background: var(--ivory-soft); color: var(--ink-mute);
  border-color: var(--rule-soft); cursor: not-allowed;
}

/* ============================================================
   VACANCES PROTHÉSISTE — badge liste (#admin-view) + section modale
   (#adminMemberModal) + modal d'alerte envoi (#pvAlertModal).
   ============================================================ */
#admin-view .adm-member .pv-conges { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; flex: 0 0 auto; }

#adminMemberModal .pv-section { margin-top: 4px; }
#adminMemberModal .pv-vac-empty { font-size: 12.5px; color: var(--ink-mute); padding: 6px 0; }
#adminMemberModal .pv-group-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 8px 0 6px; }
#adminMemberModal .pv-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--rule-soft); border-radius: var(--radius); background: var(--paper); margin-bottom: 6px; }
#adminMemberModal .pv-dates { font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
#adminMemberModal .pv-motif { font-size: 11px; color: var(--ink-mute); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adminMemberModal .pv-spacer { flex: 1; }
#adminMemberModal .pv-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; flex: 0 0 auto; }
#adminMemberModal .pv-tag--soon { color: var(--terra-deep); background: var(--terra-bg); }
#adminMemberModal .pv-tag--current { color: var(--sage-deep); background: var(--sage-bg); }
#adminMemberModal .pv-tag--past { color: var(--ink-faint); background: var(--ivory-deep); }
#adminMemberModal .pv-row--current { border-left: 3px solid var(--sage); }
#adminMemberModal .pv-row--soon { border-left: 3px solid var(--terra-light); }
#adminMemberModal .pv-row--past { opacity: 0.55; background: var(--ivory-soft); border-style: dashed; }
#adminMemberModal .pv-del { border: none; background: none; cursor: pointer; color: var(--ink-faint); font-size: 13px; line-height: 1; padding: 4px; border-radius: 6px; flex: 0 0 auto; }
#adminMemberModal .pv-del:hover { color: var(--danger); background: var(--danger-bg); }
#adminMemberModal .pv-past-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--ink-mute); margin: 8px 0 6px; user-select: none; }
#adminMemberModal .pv-past-toggle .chev { font-size: 10px; }
#adminMemberModal .pv-add { margin-top: 10px; padding: 11px; border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--ivory-soft); }
#adminMemberModal .pv-add-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 8px; align-items: end; }
#adminMemberModal .pv-add label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }
#adminMemberModal .pv-add input { width: 100%; padding: 7px 9px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 12.5px; background: var(--paper); font-family: 'Manrope', sans-serif; }
#adminMemberModal .pv-add input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-mist); }
#adminMemberModal .pv-err-msg { margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--danger); }
#adminMemberModal .pv-err-msg:empty { display: none; }
#adminMemberModal .pv-add-note { font-size: 12px; color: var(--ink-mute); font-style: italic; margin-top: 8px; }

/* Modal d'alerte congés à l'envoi d'une prothèse */
#pvAlertModal .agenda-modal-header { background: var(--warn-bg); }
#pvAlertModal .agenda-modal-header h2 { color: var(--warn-deep); }
#pvAlertModal .pv-alert-row { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
#pvAlertModal .pv-alert-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
#pvAlertModal .pv-alert-txt { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
#pvAlertModal .pv-alert-txt strong { color: var(--ink); }
#pvAlertModal .pv-hl { color: var(--warn-deep); font-weight: 700; }

/* ============================================================
   Liaison owner ↔ praticien (Administration) — boutons « C'est moi » /
   « Ce n'est plus moi » + marque « Vous ». (Le filtre « Mes prothèses »
   réutilise .agenda-rolefilter-band, déjà défini.)
   ============================================================ */
#admin-view .pr-claim, #admin-view .pr-unclaim {
  border-radius: var(--radius-pill); font-family: var(--sans); font-size: 11px; font-weight: 600;
  padding: 4px 11px; cursor: pointer; white-space: nowrap;
}
#admin-view .pr-claim { background: var(--terra); color: var(--paper); border: 1px solid var(--terra); }
#admin-view .pr-claim:hover { background: var(--terra-deep); }
#admin-view .pr-unclaim { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--rule); }
#admin-view .pr-unclaim:hover { border-color: var(--terra); color: var(--terra-deep); }
#admin-view .row-action-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
#admin-view .pr-you {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--terra-deep); background: var(--terra-bg); border: 1px solid var(--terra-light);
}

/* ============================================================
   Liste ÉQUIPE uniquement (.adm-roster--team) — GRILLE À COLONNES FIXES.
   🔒 SCOPÉ aux sections Équipe : les prothésistes partagent .adm-member mais
   gardent leur layout flex d'origine (structure différente : Labo, congés).
   id (flexible, prend tout l'espace libre) | couleur | rôle | compte | actions.
   Colonnes étroites au plus juste + calées à droite → nom = largeur maximale.
   ============================================================ */
#admin-view .adm-roster--team .adm-member {
  display: grid;
  /* SEULE la 1re colonne est flexible. Les autres FIXES et SERRÉES → colonnes
     alignées sur toutes les lignes/sections, et un maximum de place au nom. */
  grid-template-columns: minmax(0, 1fr) 18px 92px 132px 214px;
  align-items: center;
  column-gap: 8px;
}
#admin-view .adm-roster--team .amc-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Nom : ellipsis si très long (pas de chevauchement avec les badges). */
#admin-view .adm-roster--team .amc-id .adm-member-name {
  min-width: 0; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#admin-view .adm-roster--team .amc-swatch { display: flex; align-items: center; justify-content: center; }
#admin-view .adm-roster--team .amc-role,
#admin-view .adm-roster--team .amc-acct { display: flex; align-items: center; gap: 6px; min-width: 0; }
#admin-view .adm-roster--team .amc-role .ds-badge,
#admin-view .adm-roster--team .amc-acct .ds-badge,
#admin-view .adm-roster--team .amc-acct .pr-you { flex: 0 0 auto; }
#admin-view .adm-roster--team .adm-member-actions { justify-content: flex-end; }
/* Sous ~760px : la grille équipe redevient une pile souple. */
@media (max-width: 760px) {
  #admin-view .adm-roster--team .adm-member { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  #admin-view .adm-roster--team .amc-swatch,
  #admin-view .adm-roster--team .amc-role,
  #admin-view .adm-roster--team .amc-acct { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Bouton « contour d'alerte » (action sensible en retrait) — global */
.ds-btn.ds-btn--danger-outline {
  background: var(--paper); color: var(--danger);
  border: 1px solid var(--danger);
}
.ds-btn.ds-btn--danger-outline:hover { background: var(--danger-bg); }

/* ════════════════════════════════════════════════════════════════════════
   MODULE « Rendez-vous de contrôle » (relance) — DentalPatient
   Namespace UNIQUE prefixe rdvc (aucune collision avec .tab, .ds- ni les
   autres apps) — isolation par le prefixe (les modaux sont rendus hors #patients-tab-
   controle, donc non scopables sous l'onglet). Tous les --var sont vérifiés
   présents en prod (familles terra, sage, ink, warn, danger, ivory, rule, text,
   radius, ease-out, serif, sans, shadow, plus sage-mist et warn-deep). --m est
   un masque data-URI local par icône. Porté de la maquette relance (jalon A).
   ════════════════════════════════════════════════════════════════════════ */
.rdvc-gap-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px;
  background: var(--danger-bg); border: 1px solid var(--danger); border-left: 4px solid var(--danger);
  border-radius: var(--radius); font: 500 var(--text-sm)/1.5 var(--sans); color: var(--danger);
}
.rdvc-gap-banner svg.ico { flex: 0 0 auto; }
.rdvc-gap-banner b { font-weight: 700; }
.rdvc-gap-close {
  margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: 1px solid transparent; color: var(--danger); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all 150ms var(--ease-out);
}
.rdvc-gap-close:hover { background: var(--danger); color: var(--paper); }

/* Toast de confirmation (envoi simulé) */
.rdvc-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
  display: none; align-items: center; gap: 10px; z-index: 1200; padding: 12px 18px;
  background: var(--ink); color: var(--ivory-soft); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); font: 500 var(--text-sm)/1 var(--sans); opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.rdvc-toast.show { display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.rdvc-toast svg { color: var(--sage); }

/* Envoi manuel — toggle 2 cas (segmented) */
.rdvc-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 16px; }
.rdvc-seg button {
  background: var(--paper); border: 0; padding: 8px 16px; font: 600 var(--text-xs)/1 var(--sans);
  color: var(--ink-soft); cursor: pointer; border-right: 1px solid var(--rule); transition: all 150ms var(--ease-out);
}
.rdvc-seg button:last-child { border-right: 0; }
.rdvc-seg button.active { background: var(--terra); color: var(--paper); }

/* Sous-onglets N2 — calque #agenda-view .agenda-rdv-cat-tab (terra-mist) */
.rdvc-subtabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rdvc-subtab {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--sans);
  color: var(--ink-soft); padding: 7px 14px; background: var(--ivory-soft);
  border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  transition: all 150ms var(--ease-out);
}
.rdvc-subtab:hover { color: var(--ink); background: var(--ivory-deep); }
.rdvc-subtab.active { color: var(--terra-deep); border-color: var(--terra); background: var(--terra-mist); }
.rdvc-subbadge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--radius-pill); font: 700 11px/18px var(--sans); background: var(--terra); color: var(--paper);
}
.rdvc-subbadge--inbox { background: var(--sage); }
.rdvc-subbadge--histo { background: var(--ink-mute); }
.rdvc-subtabs-spacer { margin-left: auto; }

/* En-têtes éditoriaux de sous-onglet */
.rdvc-section-title { font: 300 italic 20px/1.1 var(--serif); color: var(--ink); margin: 0 0 4px; }
.rdvc-section-sub { font: 400 var(--text-sm)/1.5 var(--sans); color: var(--ink-mute); margin: 0 0 16px; }

/* Praticien : pastille couleur + nom */
.rdvc-prat { display: inline-flex; align-items: center; gap: 8px; }
.rdvc-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.rdvc-dot--none { background: transparent; border: 1px dashed var(--rule); box-shadow: none; }
.rdvc-prat--none { color: var(--ink-mute); }

/* Statut de relance (texte) */
.rdvc-statut-jamais { color: var(--ink-mute); font-style: italic; font-size: var(--text-sm); }
.rdvc-statut-fait { color: var(--ink-soft); font-size: var(--text-sm); }
.rdvc-statut-fait b { color: var(--terra-deep); font-weight: 600; }

/* Sélection + boutons icône (TOUJOURS visibles — pas de dépendance au hover). */
.rdvc-check { width: 16px; height: 16px; accent-color: var(--terra); cursor: pointer; vertical-align: middle; }
.rdvc-acts { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.rdvc-ico-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 16px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft);
  cursor: pointer; transition: all 150ms var(--ease-out);
}
.rdvc-ico-btn:hover { background: var(--terra); border-color: var(--terra); color: var(--paper); transform: translateY(-1px); }
.rdvc-ico-btn--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--paper); }

/* Icônes SVG en CSS (mask data-URI) — pas d'inline <svg> en <tbody> (bug WebKit). */
.rdvc-ic {
  display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.rdvc-ic--mail  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.rdvc-ic--trash { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.rdvc-ic--clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.rdvc-ic--phone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l1.5 4.5-2 1.5a11 11 0 005 5l1.5-2 4.5 1.5V20a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E"); }
.rdvc-ic--check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.rdvc-ic--send  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
.rdvc-ic--unarchive { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9'/%3E%3Cpath d='M12 18v-6M9 15l3-3 3 3'/%3E%3C/svg%3E"); }

/* Barre d'envoi groupé */
.rdvc-bulk {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px;
  padding: 11px 16px; background: var(--terra-mist); border: 1px solid var(--terra-bg); border-radius: var(--radius);
}
.rdvc-bulk-count { font: 600 var(--text-sm)/1 var(--sans); color: var(--terra-deep); }
.rdvc-bulk-actions { margin-left: auto; display: inline-flex; gap: 8px; }

/* Boîte de réception : type + suivi */
.rdvc-clicked {
  display: inline-flex; align-items: center; gap: 5px; font: 600 var(--text-xs)/1 var(--sans);
  color: var(--sage-deep); background: var(--sage-mist); border: 1px solid var(--sage-bg); padding: 3px 9px; border-radius: var(--radius-pill);
}
.rdvc-demande-cell small { display: block; color: var(--ink-mute); font-size: var(--text-xs); }

/* Filtres Historique (réutilise .patient-filters / .filter-pill via #patients-view) */
.rdvc-histo-count { font-size: 12px; color: var(--ink-mute); font-weight: 500; }

/* Lead + sched + issues + timeline (modaux) */
.rdvc-lead { font: 400 var(--text-base)/1.55 var(--sans); color: var(--ink-soft); margin: 0 0 14px; }
.rdvc-lead b { color: var(--ink); }
.rdvc-target {
  display: flex; flex-direction: column; gap: 2px; background: var(--ivory-soft);
  border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.rdvc-target .l { font: 600 10px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.rdvc-target .nom { font: 400 italic 18px/1.1 var(--serif); color: var(--ink); }
.rdvc-sched { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rdvc-sched .stock-form-field { flex: 1; min-width: 150px; }

.rdvc-issues { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.rdvc-issue {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--rule);
  border-radius: var(--radius); cursor: pointer; background: var(--paper); transition: all 150ms var(--ease-out);
}
.rdvc-issue:hover { border-color: var(--terra); background: var(--ivory-soft); }
.rdvc-issue.sel { border-color: var(--terra); background: var(--terra-mist); box-shadow: 0 0 0 3px rgba(184,89,64,0.10); }
.rdvc-issue input { margin-top: 3px; accent-color: var(--terra); }
.rdvc-issue .ti { display: block; font: 600 var(--text-sm)/1.3 var(--sans); color: var(--ink); }
.rdvc-issue .ds { display: block; font: 400 var(--text-xs)/1.4 var(--sans); color: var(--ink-mute); margin-top: 2px; }
.rdvc-issue-extra { margin: 12px 0 2px 34px; }

.rdvc-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.rdvc-fact { background: var(--ivory-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 10px 12px; }
.rdvc-fact .l { font: 600 10px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.rdvc-fact .v { font: 400 italic 17px/1.2 var(--serif); color: var(--ink); margin-top: 5px; display: block; }

.rdvc-tl-title { font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 4px 0 12px; }
.rdvc-timeline { list-style: none; margin: 0; padding: 0 0 0 7px; }
.rdvc-tl-item { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--rule-soft); }
.rdvc-tl-item:last-child { border-left-color: transparent; padding-bottom: 2px; }
.rdvc-tl-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 3px var(--terra-mist); }
.rdvc-tl-dot--ok { background: var(--sage); box-shadow: 0 0 0 3px var(--sage-bg); }
.rdvc-tl-dot--mute { background: var(--ink-faint); box-shadow: 0 0 0 3px var(--ivory-deep); }
.rdvc-tl-time { font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.rdvc-tl-label { font: 500 var(--text-sm)/1.4 var(--sans); color: var(--ink); margin-top: 3px; }
.rdvc-tl-sub { font: 400 var(--text-xs)/1.45 var(--sans); color: var(--ink-mute); margin-top: 1px; }

/* Réglages */
.rdvc-set-field { margin-bottom: 18px; }
.rdvc-range-row { display: flex; align-items: center; gap: 14px; }
.rdvc-range-row input[type=range] { flex: 1; accent-color: var(--terra); }
.rdvc-range-val { font: 400 italic 22px/1 var(--serif); color: var(--terra-deep); min-width: 96px; text-align: right; }
.rdvc-set-hint { font: 400 var(--text-xs)/1.5 var(--sans); color: var(--ink-mute); margin-top: 6px; }
.rdvc-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; font-size: 12px !important; }
.rdvc-owner-note {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px;
  background: var(--sage-mist); border: 1px solid var(--sage-bg); border-left: 3px solid var(--sage);
  border-radius: var(--radius); font: 400 var(--text-xs)/1.45 var(--sans); color: var(--ink-soft);
}
.rdvc-table-note { font: 400 var(--text-xs)/1.4 var(--sans); color: var(--ink-faint); margin-top: 8px; }

/* État « envoi programmé en attente » (distinct visuellement) */
tr.rdvc-prog-row > td { background: color-mix(in srgb, var(--terra-mist) 55%, transparent); }
/* Boîte de réception : « demande de rappel » (a_rappeler) = action active secrétaire
   → teinte AMBRE LÉGÈRE (warn) pour attirer l'œil sans fatiguer, texte ink lisible.
   PAS de rouge (danger réservé au destructif). a_cliquer_doctolib reste sage. */
tr.rdvc-rappel-row > td { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }
tr.rdvc-rappel-row:hover > td { background: color-mix(in srgb, var(--warn-bg) 75%, transparent); }
.rdvc-prog-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--terra-mist); border: 1px solid var(--terra); color: var(--terra-deep);
  border-radius: var(--radius-pill); padding: 3px 5px 3px 10px; font: 600 var(--text-xs)/1 var(--sans);
}
.rdvc-prog-badge svg { flex: 0 0 auto; }
.rdvc-prog-cancel {
  border: 1px solid var(--terra-bg); background: var(--paper); color: var(--terra-deep);
  border-radius: var(--radius-pill); padding: 2px 9px; font: 600 11px/1 var(--sans); cursor: pointer; transition: all 150ms var(--ease-out);
}
.rdvc-prog-cancel:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Marqueur « déjà appelé » (boîte de réception) */
.rdvc-called {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle;
  font: 600 11px/1 var(--sans); color: var(--warn-deep); background: var(--warn-bg);
  border: 1px solid var(--warn); border-radius: var(--radius-pill); padding: 3px 8px;
}

/* Modal envoi manuel */
.rdvc-manual-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

/* ============================================================
   IMPORT DOCTOLIB — historique des imports (#patients-view).
   Ajout DS : la « frise » de couverture n'a pas d'équivalent existant.
   Tokens prod uniquement. Le reste (stock-table, ds-badge, ds-alert,
   patient-signal, list-empty) est réutilisé tel quel.
   ============================================================ */
#patients-view .imp-block { margin-bottom: 30px; }
#patients-view .imp-block-title-new { margin-top: 30px; }
#patients-view .imp-histo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#patients-view .imp-section-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--ink); margin: 0 0 4px; }
#patients-view .imp-section-sub { font-size: 13px; color: var(--ink-mute); margin: 0 0 16px; }
#patients-view .imp-year-wrap { font-size: 12px; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 8px; }
#patients-view .imp-year-select {
  appearance: none; -webkit-appearance: none; width: auto; min-width: 90px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 99px;
  padding: 6px 14px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
#patients-view .imp-year-select:hover { border-color: var(--terracotta); }

/* Plage de RDV = info clé : serif + flèche terra. */
#patients-view .imp-range { font-family: var(--serif); font-size: 15px; color: var(--ink); white-space: nowrap; }
#patients-view .imp-range .arr { color: var(--terracotta); margin: 0 5px; font-weight: 600; }
#patients-view .imp-range--unknown { font-style: italic; color: var(--ink-mute); font-size: 13px; }
#patients-view .imp-counts { font-size: 12.5px; color: var(--ink-soft); }
#patients-view .imp-counts .warn { color: var(--warn-deep); font-weight: 600; }
#patients-view .imp-file { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }
#patients-view .imp-gap-row td { background: var(--ivory-soft); padding: 10px 14px; text-align: center; }

/* Frise de couverture 12 mois. */
#patients-view .imp-frise { display: flex; border: 1px solid var(--rule-soft); border-radius: var(--radius); overflow: hidden; background: var(--paper); margin-bottom: 8px; }
#patients-view .imp-frise-cell { flex: 1; min-width: 0; text-align: center; padding: 12px 4px 10px; border-right: 1px solid var(--rule-soft); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-mute); }
#patients-view .imp-frise-cell:last-child { border-right: none; }
#patients-view .imp-frise-cell .m { display: block; text-transform: uppercase; }
#patients-view .imp-frise-cell .tag { display: block; margin-top: 6px; font-size: 14px; }
#patients-view .imp-frise-cell.covered { background: var(--sage-bg); color: var(--sage-deep); }
#patients-view .imp-frise-cell.partial { background: var(--warn-bg); color: var(--warn-deep); }
#patients-view .imp-frise-cell.gap { background: repeating-linear-gradient(45deg, var(--danger-bg), var(--danger-bg) 6px, var(--paper) 6px, var(--paper) 12px); color: var(--danger); }
#patients-view .imp-frise-legend { font-size: 12px; color: var(--ink-mute); display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 16px; }
#patients-view .imp-frise-legend span { display: inline-flex; align-items: center; gap: 6px; }
#patients-view .imp-frise-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
#patients-view .imp-frise-legend .lg-cov { background: var(--sage); }
#patients-view .imp-frise-legend .lg-par { background: var(--warn); }
#patients-view .imp-frise-legend .lg-gap { background: var(--danger); }

/* ============================================================
   COUCHE 2 — Centre de notifications (portail + cloche)
   Repris de maquette/portail-notifs.html (validée Chrome+Safari).
   Tokens prod uniquement.
   ============================================================ */

/* Bouton « Retour au portail » refondu (pill paper+rule+shadow, hover terra-mist) */
/* « Retour au portail » — version VALIDÉE (pastille ronde terracotta + micro-label
   « RETOUR / au portail »). Composant partagé .app-header (7 apps). Fonction
   inchangée (onclick → showView portal). */
.btn-back {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft);
  padding: 5px 15px 5px 5px; border-radius: var(--radius-pill, 999px); cursor: pointer;
  font-size: 13px; font-weight: 500; font-family: var(--sans);
  box-shadow: var(--shadow-sm); transition: all .18s ease;
}
.btn-back-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--terra-mist); color: var(--terra-deep);
  font-size: 14px; line-height: 1; transition: all .18s ease;
}
.btn-back-lbl { display: inline-flex; flex-direction: column; line-height: 1.05; text-align: left; }
.btn-back-lbl small { font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.btn-back:hover { border-color: var(--terra-light); transform: translateX(-2px); box-shadow: var(--shadow-md); }
.btn-back:hover .btn-back-chip { background: var(--terra); color: var(--paper); }

/* Lisibilité (couche 2) : taglines + nom sous Bonjour remontés en --ink-soft */
.app-tagline { color: var(--ink-soft); letter-spacing: .14em; font-size: 10px; }
.portal-hello-email { color: var(--ink-soft); font-weight: 500; letter-spacing: .22em; }

/* Layout portail : colonne fixe + grille responsive auto-fill */
/* Le portail relâche le cap global main 900px → 1240px (colonne 340 + grille 3 col). */
/* Cadre éditorial du portail (refonte) : carte papier bordée + ombre, comme la
   maquette portail-final-2 — l'en-tête (.app-header) y est inclus (radius haut),
   le contenu repose sur le papier. PORTAIL UNIQUEMENT (classe posée par showView) ;
   les apps métier sont en main.main-wide et gardent leurs propres conteneurs. */
main.portal-wide {
  max-width: 1240px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Contenu portail inset dans la carte (aligné sur le padding latéral de l'en-tête). */
main.portal-wide #portal-view { padding: 4px 32px 10px; }
.portal-layout { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
#portal-view .app-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px; margin-bottom: 28px; }

/* Badge notif « iPhone » sur les cartes d'app — terra unifié, débordant le coin */
.app-card-badge {
  position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--terra); color: var(--paper);
  font-family: var(--sans); font-weight: 700; font-size: 12.5px; line-height: 1;
  border-radius: var(--radius-pill, 999px); box-shadow: 0 0 0 3px var(--paper), var(--shadow-sm);
}

/* Logos SVG charte dans monogramme : le conteneur ne doit pas masquer l'img (déjà géré
   par .app-monogram:has(.app-monogram-icon) en prod). .has-logo = idem pour notif-mono. */
.app-monogram.has-logo, .notif-mono.has-logo { background: transparent; box-shadow: none; overflow: hidden; }
.app-monogram.has-logo img, .notif-mono.has-logo img { width: 100%; height: 100%; display: block; }

/* Cloche header (toutes vues) */
.notif-bell {
  position: relative; width: 38px; height: 38px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft);
  transition: all .15s ease; padding: 0;
}
.notif-bell:hover { background: var(--ivory-deep); border-color: var(--ink-mute); color: var(--ink); }
.notif-bell svg { width: 18px; height: 18px; display: block; }
.notif-bell-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--terra); color: var(--paper); font-family: var(--sans); font-weight: 600;
  font-size: 10.5px; line-height: 1; border-radius: var(--radius-pill, 999px); box-shadow: 0 0 0 2px var(--paper);
}
.notif-bell-count.is-zero { display: none; }

/* Surfaces du centre : colonne (rail) + drawer + scrim */
.notif-rail {
  position: sticky; top: 18px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100vh - 36px);
}
.notif-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 392px; max-width: 92vw;
  background: var(--paper); border-left: 1px solid var(--rule); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  z-index: 1200; display: flex; flex-direction: column;
}
.notif-drawer.open { transform: none; }
.notif-scrim {
  position: fixed; inset: 0; background: rgba(42,31,24,.32); opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease; z-index: 1199;
}
.notif-scrim.open { opacity: 1; visibility: visible; }

.notif-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--rule-soft); }
.notif-head h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 22px; margin: 0; color: var(--ink); letter-spacing: -.01em; }
.notif-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--terra); color: var(--paper); font-size: 11px; font-weight: 600; border-radius: var(--radius-pill, 999px); }
.notif-count.is-zero { background: var(--ivory-deep); color: var(--ink-mute); }
.notif-markall { margin-left: auto; background: none; border: none; color: var(--ink-mute); font-family: var(--sans); font-size: 11.5px; font-weight: 500; cursor: pointer; padding: 4px 2px; transition: color .15s ease; }
.notif-markall:hover { color: var(--terra-deep); text-decoration: underline; }
/* « Tout effacer » : suit « Tout marquer lu » (pas de margin-left:auto, séparé par le gap). */
.notif-clear { margin-left: 0; }
.notif-clear:disabled { opacity: .4; cursor: default; text-decoration: none; }
.notif-clear:disabled:hover { color: var(--ink-mute); text-decoration: none; }
.notif-close { width: 30px; height: 30px; border: none; background: transparent; color: var(--ink-mute); font-size: 18px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.notif-close:hover { background: var(--ivory-deep); color: var(--ink); }
.notif-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.notif-card { position: relative; display: flex; gap: 12px; padding: 13px 12px 13px 14px; border-radius: var(--radius-md, 12px); background: var(--terra-mist); border: 1px solid var(--terra-bg); transition: background .15s ease, box-shadow .15s ease; animation: notifIn .22s ease; }
.notif-card.is-read { background: var(--paper); border-color: var(--rule-soft); }
.notif-card:hover { box-shadow: var(--shadow-sm); }
@keyframes notifIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.notif-card.removing { animation: notifOut .22s ease forwards; }
@keyframes notifOut { to { opacity: 0; transform: translateX(28px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -6px; } }
.notif-unread { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--terra); }
.notif-card.is-read .notif-unread { display: none; }
.notif-mono { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--n-accent, var(--terra)); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; line-height: 1; letter-spacing: -.01em; }
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-app { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--n-accent, var(--ink-mute)); margin-bottom: 3px; }
.notif-text { font-family: var(--sans); font-size: 13px; line-height: 1.42; color: var(--ink-soft); }
.notif-card.is-read .notif-text { color: var(--ink-mute); }
.notif-foot { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.notif-time { font-size: 10.5px; color: var(--ink-mute); letter-spacing: .02em; }
.notif-action { background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft); font-family: var(--sans); font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: var(--radius-pill, 999px); cursor: pointer; transition: all .15s ease; }
.notif-action:hover { background: var(--n-accent, var(--terra)); border-color: var(--n-accent, var(--terra)); color: var(--paper); }
.notif-del { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: none; background: transparent; color: var(--ink-faint); font-size: 15px; line-height: 1; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all .15s ease; }
.notif-card:hover .notif-del { opacity: 1; }
.notif-del:hover { background: var(--danger-bg); color: var(--danger); }
.notif-empty { padding: 48px 22px; text-align: center; color: var(--ink-faint); }
.notif-empty .ne-icon { font-size: 30px; opacity: .5; }
.notif-empty p { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-mute); margin: 12px 0 4px; }
.notif-empty span { font-size: 11.5px; letter-spacing: .04em; }
.rail-hint { font-size: 10px; letter-spacing: .04em; color: var(--ink-faint); padding: 9px 16px 13px; border-top: 1px solid var(--rule-soft); background: var(--ivory); }

/* Footer portail uniquement (ZB Solutions) */
.portal-footer { text-align: center; padding: 20px 0 28px; color: var(--ink-mute); font-size: 11.5px; letter-spacing: .06em; }
.portal-footer strong { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-soft); }

/* Responsive : colonne au-dessus de la grille en étroit, cloche conservée */
@media (max-width: 900px) {
  .portal-layout { grid-template-columns: 1fr; }
  .notif-rail { position: static; max-height: 520px; }
}
@media (max-width: 560px) {
  #user-email, .profile-switch { display: none; }
  .notif-bell { display: inline-flex; }
}

/* ============================================================
   PORTAIL — REFONTE (Final-2) : greeting éditorial + cartes vivantes
   (GET /me/portail-resume) + sélecteur de périmètre. Scopé #portal-view ;
   classes .pf-* / .pcard / .pc-* dédiées (aucune collision avec l'ancien
   .app-card/.app-monogram laissé en place mais non utilisé). Tokens prod.
   ============================================================ */
/* Greeting */
#portal-view .pf-greeting { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  position:relative; padding-bottom:18px; margin:6px 0 24px; border-bottom:1px solid var(--rule); }
#portal-view .pf-greeting::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--terra), transparent 70%); opacity:.4; }
#portal-view .pf-eyebrow { display:inline-block; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); margin-bottom:8px; }
#portal-view .portal-hello { font-family:var(--serif); font-style:italic; font-weight:300; font-size:38px; line-height:1.04; letter-spacing:-.02em; color:var(--ink); margin:0; }
#portal-view .pf-sub { font-size:12.5px; color:var(--ink-mute); margin-top:8px; }
/* Sélecteur de périmètre */
#portal-view .pf-scope { display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
#portal-view .pf-scope-lbl { font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
#portal-view .pf-scope-tog { display:inline-flex; border:1px solid var(--rule); border-radius:999px; padding:3px; gap:2px; background:var(--paper); }
#portal-view .pf-scope-tog button { font-size:11.5px; padding:5px 13px; border-radius:999px; border:none; background:transparent; color:var(--ink-mute); cursor:pointer; font-family:var(--sans); transition:all .15s ease; }
#portal-view .pf-scope-tog button.on { background:var(--terra-mist); color:var(--terra-deep); font-weight:600; }
#portal-view .pf-scope-tog button:disabled { opacity:.5; cursor:default; }
#portal-view .pf-scope-lock { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--rule); border-radius:999px; padding:6px 13px; background:var(--paper); font-size:12px; color:var(--ink-soft); }
#portal-view .pf-scope-lock .dot { width:7px; height:7px; border-radius:50%; background:var(--terra); }

/* Layout : grille + rail */
#portal-view .pf-layout { display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
#portal-view .pf-seclabel { position:relative; padding-bottom:11px; margin:0 0 16px; border-bottom:1px solid var(--rule-soft); }
#portal-view .pf-seclabel h3 { font-family:var(--serif); font-style:italic; font-weight:300; font-size:20px; color:var(--ink); margin:0; }
#portal-view .pf-seclabel::before { content:''; position:absolute; bottom:-1px; left:0; width:40px; height:2px; background:var(--terra); }
#portal-view .pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Carte */
#portal-view .pcard { position:relative; display:flex; flex-direction:column; gap:11px; text-align:left;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:18px 19px 16px;
  cursor:pointer; overflow:hidden; min-height:162px; font-family:var(--sans);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
#portal-view .pcard::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ac);
  opacity:.85; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
#portal-view .pcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--ac) 55%, var(--rule)); }
#portal-view .pcard:hover::before { transform:scaleX(1); }
#portal-view .pcard:hover .pc-go { opacity:1; transform:none; }
#portal-view .pcard:focus-visible { outline:2px solid var(--ac); outline-offset:2px; }
#portal-view .pc-head { display:flex; align-items:center; gap:13px; }
#portal-view .pc-mono { width:46px; height:46px; border-radius:13px; flex:0 0 auto; box-shadow:var(--shadow-sm); display:block; }
#portal-view .pc-titles { flex:1; min-width:0; }
#portal-view .pc-title { font-family:var(--serif); font-style:italic; font-weight:300; font-size:22px; line-height:1.05; letter-spacing:-.01em; color:var(--ink); }
#portal-view .pc-suffix { color:var(--ac); }
#portal-view .pc-tag { font-size:11px; color:var(--ink-mute); margin-top:1px; }
/* « Ouvrir → » : DANS LE FLUX de la carte, ancré en bas-droite (margin-top:auto).
   N'est PLUS en position:absolute → ne recouvre JAMAIS le contenu, quel que soit
   le remplissage (le contenu s'arrête au-dessus, séparé par le gap de la carte).
   Composant partagé : vaut pour les 6 cartes app. Pill paper, accent au survol. */
#portal-view .pc-go { margin-top:auto; align-self:flex-end; display:inline-flex; align-items:center; gap:4px;
  padding:4px 11px; background:var(--paper); border:1px solid color-mix(in srgb, var(--ac) 35%, var(--rule));
  border-radius:999px; box-shadow:var(--shadow-sm); font-size:11.5px; font-weight:600; color:var(--ac);
  transition:background .18s ease, color .18s ease, transform .18s ease; }
#portal-view .pcard:hover .pc-go { background:var(--ac); color:var(--paper); border-color:var(--ac); transform:translateX(2px); }
#portal-view .pc-body { display:flex; flex-direction:column; gap:8px; }
/* badge notif (réinjecté par notifRender .app-card-badge) */
#portal-view .pcard .app-card-badge { position:absolute; top:14px; right:15px; min-width:23px; height:23px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--terra); color:var(--paper);
  font-weight:700; font-size:12px; border-radius:999px; box-shadow:0 0 0 3px var(--paper), var(--shadow-sm); }

/* Lignes d'info réutilisées */
#portal-view .pf-skel { height:46px; border-radius:8px; background:linear-gradient(90deg, var(--ivory-soft), var(--ivory-deep), var(--ivory-soft)); background-size:200% 100%; animation:pfShimmer 1.2s ease-in-out infinite; }
@keyframes pfShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
#portal-view .pf-alert { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--danger); background:var(--danger-bg); padding:6px 11px; border-radius:8px; align-self:flex-start; }
#portal-view .pf-alert .d { width:6px; height:6px; border-radius:50%; background:var(--danger); }
#portal-view .pf-alert .hint { font-weight:500; color:#9a6a5c; font-size:11px; }
#portal-view .pf-warn { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#8a6010; background:var(--warn-bg); padding:6px 11px; border-radius:8px; align-self:flex-start; }
#portal-view .pf-info { font-size:12.5px; color:var(--ink-soft); }
#portal-view .pf-info b { font-family:var(--serif); font-weight:400; font-size:16px; color:var(--ink); }
#portal-view .pf-soft { font-size:11.5px; color:var(--ink-mute); }
#portal-view .pf-calm { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--sage-deep); background:var(--sage-bg); padding:5px 11px; border-radius:8px; align-self:flex-start; }
#portal-view .pf-blk-lbl { font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
#portal-view .pf-divider { height:1px; background:var(--rule-soft); margin:2px 0; }
/* Stock : 2 encadrés (Final-2) */
#portal-view .pf-statduo { display:flex; gap:10px; }
#portal-view .pf-statbox { flex:1; border-radius:10px; padding:9px 12px; border:1px solid var(--rule-soft); }
#portal-view .pf-statbox.alert { background:var(--danger-bg); border-color:#eec3b7; }
#portal-view .pf-statbox .n { font-family:var(--serif); font-weight:300; font-size:26px; line-height:1; color:var(--ink); }
#portal-view .pf-statbox.alert .n { color:var(--danger); }
#portal-view .pf-statbox .l { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }
#portal-view .pf-statbox.alert .l { color:var(--danger); }
/* Stock : aperçu nommé des prothèses en retard (calque les alertes Ortho) */
#portal-view .pf-rlist { display:flex; flex-direction:column; gap:5px; }
#portal-view .pf-rline { display:flex; align-items:baseline; gap:7px; font-size:12.5px; color:var(--ink-soft); line-height:1.3; }
#portal-view .pf-rline .pf-rdot { flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--danger); position:relative; top:-1px; }
#portal-view .pf-rline b { font-weight:600; color:var(--ink); }
#portal-view .pf-rmeta { color:var(--ink-mute); font-size:11.5px; }
#portal-view .pf-rmore { font-size:11.5px; color:var(--ink-mute); font-style:italic; padding-left:13px; }
/* Agenda : chips + bloc tâche (Final-2) */
#portal-view .pf-chips { display:flex; gap:6px; flex-wrap:wrap; }
#portal-view .pf-chip { font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--ivory-deep); color:var(--ink-soft); }
#portal-view .pf-chip.dgr { background:var(--danger-bg); color:var(--danger); }
#portal-view .pf-task { background:var(--ivory-soft); border:1px solid var(--rule-soft); border-radius:10px; padding:10px 12px; }
#portal-view .pf-task .tt { font-size:13px; font-weight:600; color:var(--ink); }
#portal-view .pf-task .tm { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
#portal-view .pf-task .who { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-soft); }
#portal-view .pf-task .who .av { width:19px; height:19px; border-radius:50%; background:var(--sage-bg); color:var(--sage-deep); font-size:8.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
#portal-view .pf-task .tp { font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--warn-bg); color:#8a6010; }
#portal-view .pf-task .tw { font-size:10.5px; color:var(--ink-mute); margin-left:auto; }
/* Devis : jauge conique — bloc jauge+texte CENTRÉ dans la carte (h. + v.) */
#portal-view #pr-devis { flex:1; justify-content:center; }
#portal-view .pf-devis-wrap { display:flex; align-items:center; justify-content:center; gap:16px; }
#portal-view .pf-gauge { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; position:relative; flex:0 0 auto; }
#portal-view .pf-gauge::before { content:''; position:absolute; inset:10px; border-radius:50%; background:var(--paper); }
#portal-view .pf-gauge .gi { position:relative; text-align:center; }
#portal-view .pf-gauge .gi b { font-family:var(--serif); font-weight:300; font-size:21px; color:var(--ink); display:block; line-height:1; }
#portal-view .pf-gauge .gi span { font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
/* Avis : étoiles */
#portal-view .pf-stars { color:var(--warn); font-size:16px; letter-spacing:2px; }
#portal-view .pf-stars .half { color:var(--ink-faint); }
#portal-view .pf-ortho-rows { display:flex; flex-direction:column; gap:7px; }

/* Rail notifs : bouton « voir plus / réduire » (aperçu plafonné) */
#portal-view .notif-more-li { list-style:none; padding:0; }
#portal-view .notif-more-btn { display:block; width:100%; text-align:center; padding:9px; margin-top:2px;
  font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--ink-mute);
  background:var(--ivory); border:1px solid var(--rule-soft); border-radius:10px; cursor:pointer; transition:all .15s ease; }
#portal-view .notif-more-btn:hover { color:var(--terra-deep); border-color:var(--terra-light); background:var(--terra-mist); }

/* Carte Administration (modeste) */
#portal-view .pcard-admin { flex-direction:row; align-items:center; gap:15px; min-height:0;
  background:linear-gradient(160deg, var(--paper), var(--ivory-soft)); margin-top:16px; padding:15px 19px; }
#portal-view .pcard-admin::before { display:none; }
#portal-view .pcard-admin:hover { transform:translateY(-2px); }
#portal-view .pca-mono { width:42px; height:42px; border-radius:12px; flex:0 0 auto; background:var(--terra); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:var(--shadow-sm); }
#portal-view .pca-main { flex:1; min-width:0; }
#portal-view .pca-title { font-family:var(--serif); font-style:italic; font-weight:300; font-size:21px; color:var(--ink); line-height:1.1; }
#portal-view .pca-sub { font-size:11.5px; color:var(--ink-mute); margin-top:2px; }
#portal-view .pca-go { color:var(--ink-faint); font-size:15px; flex:0 0 auto; transition:color .18s ease; }
#portal-view .pcard-admin:hover .pca-go { color:var(--terra); }

/* Responsive */
@media (max-width: 1040px) {
  #portal-view .pf-layout { grid-template-columns:1fr; }
  #portal-view .notif-rail { position:static; max-height:560px; }
}
@media (max-width: 680px) {
  #portal-view .pf-grid { grid-template-columns:1fr; }
  #portal-view .portal-hello { font-size:30px; }
  #portal-view .pcard-admin { flex-wrap:wrap; }
}

/* ============================================================
   MODALE AIDE (FAQ + contact) — bouton « ? » header + overlay.
   Calque la mécanique scrim/overlay du drawer notifs + le
   composant Modale DS (.modal / .modal-content / .modal-header).
   Tokens prod uniquement. Markup : index.html. Logique : app.js.
   ============================================================ */
/* Bouton Aide — même gabarit rond (38px) que .notif-bell */
.help-trigger {
  position: relative; width: 38px; height: 38px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft);
  transition: all .15s ease; padding: 0;
}
.help-trigger:hover { background: var(--ivory-deep); border-color: var(--ink-mute); color: var(--ink); }
.help-trigger svg { width: 18px; height: 18px; display: block; }

/* Voile : couleur encre brune + flou léger (= .modal prod) */
.help-scrim {
  position: fixed; inset: 0; background: rgba(42, 31, 24, .55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 1000;
}
.help-scrim.open { opacity: 1; visibility: visible; }
/* Carte papier-crème centrée (= .modal-content prod), confortable pour lire la FAQ */
.help-modal {
  position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center;
  padding: 32px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; pointer-events: none;
}
.help-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.help-card {
  display: flex; flex-direction: column; width: 100%; max-width: 880px; max-height: calc(100vh - 64px);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-14px); transition: transform .22s ease;
}
.help-modal.open .help-card { transform: none; }

/* En-tête modale (= .modal-header prod : bandeau ivory-soft + titre serif italique 24/300) */
.help-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 28px 18px; background: var(--ivory-soft); border-bottom: 1px solid var(--rule-soft); }
.help-head-txt { flex: 1 1 auto; min-width: 0; }
.help-head h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 24px; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.help-head p { font-family: var(--sans); font-size: 12.5px; color: var(--ink-mute); margin: 5px 0 0; line-height: 1.4; }
.help-close { flex: 0 0 auto; width: 30px; height: 30px; border: none; background: transparent; color: var(--ink-mute); font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.help-close:hover { background: var(--ivory-deep); color: var(--ink); }

/* Corps scrollable */
.help-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 28px 8px; }

/* Recherche (signature focus DS : halo terra-mist 3px) */
.help-search { position: relative; margin-bottom: 18px; }
.help-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.help-search input { width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--rule); border-radius: var(--radius-pill); font-size: 14px; font-family: var(--sans); background: var(--paper); color: var(--ink); transition: all .2s ease; }
.help-search input::placeholder { color: var(--ink-faint); font-style: italic; }
.help-search input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terra-mist); }

/* Sous-onglets : pills DS (= .tabs / .tab prod) */
.help-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.help-tab { background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: 9px 18px; font-family: var(--serif); font-size: 15px; font-style: normal; font-weight: 400; color: var(--ink-mute); transition: all .25s ease; cursor: pointer; white-space: nowrap; line-height: 1; }
.help-tab:hover { background: var(--ivory-deep); color: var(--ink); border-color: var(--ink-mute); transform: translateY(-1px); }
.help-tab.active { background: var(--terracotta); color: var(--paper); border-color: var(--terracotta); box-shadow: 0 6px 16px rgba(184, 89, 64, .25); font-style: italic; font-weight: 500; }

/* Accordéon Q/R */
.help-section-title { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; }
.help-item { border: 1px solid var(--rule-soft); border-radius: var(--radius-md); margin-bottom: 8px; background: var(--paper); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.help-item.open { border-color: var(--rule); box-shadow: var(--shadow-sm); }
.help-q { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: none; cursor: pointer; padding: 14px 16px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.help-q:hover { background: var(--ivory); }
.help-q-text { flex: 1 1 auto; }
.help-chev { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory-deep); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: transform .2s ease, background .15s ease; }
.help-item.open .help-chev { transform: rotate(45deg); background: var(--terra-bg); color: var(--terra-deep); }
.help-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.help-item.open .help-a { max-height: 480px; }
.help-a-inner { padding: 0 16px 16px 16px; font-family: var(--sans); font-size: 13.5px; line-height: 1.62; color: var(--ink-soft); }
/* Pastille « onglet d'origine » affichée en mode recherche à plat */
.help-origin { display: inline-block; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--app-accent, var(--ink-mute)); background: var(--ivory-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius-pill); padding: 3px 9px; margin: 0 0 8px; }
.help-noresult { text-align: center; padding: 40px 20px; color: var(--ink-faint); }
.help-noresult .hn-ic { font-size: 28px; opacity: .5; }
.help-noresult p { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-mute); margin: 12px 0 2px; }
.help-noresult span { font-size: 12px; }

/* Bloc contact (= .modal-actions DS : pied crème ivory-soft + filet) */
.help-contact { margin-top: 6px; background: var(--ivory-soft); border-top: 1px solid var(--rule-soft); padding: 22px 28px 24px; margin-left: -28px; margin-right: -28px; }
.help-contact h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--ink); margin: 0 0 4px; }
.help-contact .hc-sub { font-family: var(--sans); font-size: 12.5px; color: var(--ink-mute); margin: 0 0 16px; line-height: 1.45; }
.help-field { margin-bottom: 14px; }
.help-field label { display: block; margin-bottom: 7px; font-weight: 600; color: var(--ink-mute); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.help-field input, .help-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 14px; font-family: var(--sans); background: var(--paper); color: var(--ink); transition: all .2s ease; }
.help-field textarea { min-height: 90px; resize: vertical; }
.help-field input:focus, .help-field textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terra-mist); }
.help-send-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.help-send { display: inline-flex; align-items: center; gap: 8px; background: var(--terracotta); color: var(--paper); border: 1px solid var(--terracotta); border-radius: var(--radius); padding: 10px 18px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s ease; text-decoration: none; }
.help-send:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
.help-send svg { width: 16px; height: 16px; }
/* Repli universel — bouton ghost DS (copie presse-papiers) */
.help-copy { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .18s ease; }
.help-copy:hover { background: var(--ivory-deep); border-color: var(--ink-mute); color: var(--ink); }
.help-copy svg { width: 16px; height: 16px; }
.help-send-note { font-size: 11px; color: var(--ink-mute); font-style: italic; line-height: 1.5; margin: 12px 0 0; }

/* Responsive : modale plein écran sur mobile */
@media (max-width: 640px) {
  .help-modal { padding: 0; }
  .help-card { max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; border: none; }
  .help-head { padding: 18px 18px 14px; }
  .help-body { padding: 18px 18px 8px; }
  .help-contact { margin-left: -18px; margin-right: -18px; padding: 20px 18px 22px; }
}

/* Choix du mode de création de compte (Admin > Équipe) — invitation vs mdp manuel.
   Scopé #adminAccModeGroup pour battre `.agenda-form-group label` (sinon le texte
   des options hérite du style eyebrow MAJUSCULES + label en bloc). */
#adminAccModeGroup .adm-acc-mode { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--rule); border-radius: var(--radius); margin-top: 8px; cursor: pointer; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 13.5px; color: var(--ink); transition: all .15s ease; }
#adminAccModeGroup .adm-acc-mode:hover { background: var(--ivory); border-color: var(--ink-mute); }
#adminAccModeGroup .adm-acc-mode input { margin-top: 2px; flex: 0 0 auto; width: auto; }
#adminAccModeGroup .adm-acc-mode strong { font-weight: 600; }
#adminAccModeGroup .adm-acc-mode small { display: block; color: var(--ink-mute); font-weight: 400; font-size: 12px; margin-top: 2px; }
#adminAccModeGroup .adm-acc-mode:has(input:checked) { border-color: var(--terra); background: var(--terra-mist); }

/* Lot 3 — lien « mot de passe oublié » + message neutre sur l'écran de login */
.login-link { display: inline-block; margin-top: 14px; background: none; border: none; padding: 4px 2px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--terra-deep); cursor: pointer; transition: color .15s ease; }
.login-link:hover { color: var(--terra); text-decoration: underline; }
.login-note { margin-top: 16px; padding: 13px 15px; background: var(--sage-bg); border: 1px solid var(--rule-soft); border-radius: var(--radius); font-size: 13px; line-height: 1.55; color: var(--ink-soft); text-align: left; }