/* ════════════════════════════════════════════════════════════════════
   NutriPatient — Style éditorial (v1.16.0)
   Inspiré de l'interface MTC Patient — ivoire + vert forêt + or.
   Chargé APRÈS front.css : override les variables racine et certaines
   propriétés clés sans toucher au CSS de base.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════════════
   APP-SHELL (v1.16.1) — sidebar fixe à la MTC
   ─────────────────────────────────────────────────────────────────────
   Ne s'active que sur body.np-app-body (mode standalone). Transforme
   le wrapper .np-app-wrap en grid 2 colonnes height:100vh : sidebar
   fixe à gauche, main scrollable à droite. Le body ne scroll pas.
   ════════════════════════════════════════════════════════════════════ */
body.np-app-body {
  margin: 0; padding: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
body.np-app-body .np-front.np-app-wrap.np-layout-vertical {
  display: grid;
  grid-template-columns: var(--sidebar-w, 260px) 1fr;
  height: 100vh; height: 100dvh;
  width: 100vw;
  min-height: 0; max-height: none;
  overflow: hidden;
}
body.np-app-body.np-has-demo-banner .np-front.np-app-wrap.np-layout-vertical {
  /* Le bandeau démo prend ~40px en overlay top : on rogne la grid */
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px);
  margin-top: 40px;
}
body.np-app-body .np-sidebar {
  position: relative !important;     /* plus de sticky */
  top: auto !important;
  height: 100% !important;
  overflow: hidden !important;       /* le scroll interne se fait dans .np-sidebar-content */
  z-index: 50;
}
body.np-app-body .np-main {
  height: 100%;
  min-height: 0;                     /* indispensable en flex/grid pour permettre overflow */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Mobile : la sidebar redevient un drawer fixed (déjà géré par front.css),
   la grid passe en 1 colonne. */
@media (max-width: 767px) {
  body.np-app-body .np-front.np-app-wrap.np-layout-vertical {
    display: block;
    height: 100vh; height: 100dvh;
  }
  body.np-app-body .np-main {
    height: calc(100vh - var(--nav-h, 60px));
    height: calc(100dvh - var(--nav-h, 60px));
  }
}

/* ─── Palette éditoriale — vert forêt + or + ivoire (v1.16.3 : contraste +) */
:root {
  /* Refonte des couleurs principales */
  --np-ink:        #0F1411;   /* texte principal — encore plus dense */
  --np-ink-soft:   #3F4644;   /* texte secondaire / méta — plus contrasté */
  --np-mute:       #6E7270;   /* texte tertiaire / labels — passé de #8A8E89 */
  --np-cream:      #FBFAF5;   /* fond page principal */
  --np-cream-2:    #EFECDF;   /* fond sidebar (plus chaud, plus contrasté) */
  --np-cream-3:    #E5E1D2;   /* fond hover sidebar (plus marqué) */
  --np-forest:     #1B4A2E;   /* accent principal — vert forêt légèrement plus dense */
  --np-forest-l:   #2D6A4F;   /* hover */
  --np-forest-xl:  #DDEADE;   /* fond clair zones actives — plus visible */
  --np-gold:       #97772A;   /* doré plus saturé */
  --np-gold-soft:  #C9A862;   /* doré pâle */
  --np-line:       rgba(15, 20, 17, .14);   /* bordures fines — passées de .08 */
  --np-line-2:     rgba(15, 20, 17, .22);   /* bordures plus marquées */

  /* Override des variables existantes pour réutilisation transparente */
  --np-bg:         var(--np-cream);
  --np-white:      #ffffff;
  --np-navy:       var(--np-ink);
  --np-slate:      var(--np-ink-soft);
  --np-border:     var(--np-line);
  --np-green:      var(--np-forest);
  --np-green-l:    var(--np-forest-l);
  --np-green-xl:   var(--np-forest-xl);
  --np-teal:       var(--np-gold);
  --np-shadow:     0 0 0 1px var(--np-line);
  --np-shadow-md:  0 0 0 1px var(--np-line-2);
  --np-radius:     6px;

  /* Sidebar : ivoire + texte sombre */
  --sidebar-bg:           var(--np-cream-2);
  --sidebar-bg-hover:     var(--np-cream-3);
  --sidebar-section-color: var(--np-mute);
  --sidebar-w:            240px;
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHIE — serif sobre pour titres, sans pour le corps
   ═══════════════════════════════════════════════════════════════════ */
.np-front {
  background: var(--np-cream);
  color: var(--np-ink);
}

.np-front h1, .np-front h2, .np-front h3,
.et_pb_section .np-front h1, .et_pb_section .np-front h2, .et_pb_section .np-front h3,
.entry-content .np-front h1, .entry-content .np-front h2, .entry-content .np-front h3 {
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif !important;
  color: var(--np-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.np-front h1 { font-size: 2.4rem !important; line-height: 1.15 !important; }
.np-front h2 { font-size: 1.55rem !important; }
.np-front h3 { font-size: 1.25rem !important; }

/* Gros chiffres dans les stats : aussi en serif (resserrés v1.16.7) */
.np-stat-value {
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif !important;
  font-size: 2.6rem !important;
  font-weight: 500 !important;
  color: var(--np-forest) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

/* Labels en petites caps sobres */
.np-stat-label,
.np-card-title-eyebrow,
.np-eyebrow {
  font-size: .68rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--np-mute) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR éditoriale
   ═══════════════════════════════════════════════════════════════════ */
.np-layout-vertical .np-sidebar {
  background: var(--np-cream-2);
  border-right: 1px solid var(--np-line-2);
}

.np-sidebar-brand {
  border-bottom: 1px solid var(--np-line-2);
  padding: 12px 14px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.np-sidebar-brand-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  min-width: 0;
}
.np-sidebar-brand-icon-img {
  width: 38px; height: 38px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.np-sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.np-sidebar-brand-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--np-ink);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.np-sidebar-brand-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--np-mute);
  font-weight: 600;
}

/* Mode collapsed : icône seule centrée */
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-brand {
  padding: 12px 8px;
  justify-content: center;
}
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-brand-text {
  display: none;
}
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-brand-icon-img {
  width: 32px; height: 32px;
}

/* Bouton toggle plus explicite : icône chevron + tooltip + hover marqué */
.np-sidebar-toggle {
  background: transparent !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 6px !important;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--np-ink-soft) !important;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1rem;
  transition: background .15s, border-color .15s, color .15s;
}
.np-sidebar-toggle:hover {
  background: var(--np-cream-3) !important;
  border-color: var(--np-line-2) !important;
  color: var(--np-forest) !important;
}
.np-sidebar-toggle-icon {
  display: inline-block;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .2s;
}
/* En mode collapsed : la flèche pointe à droite */
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Sections : labels small-caps */
.np-sidebar-section-title {
  color: var(--np-mute) !important;
  font-size: .66rem !important;
  letter-spacing: .16em !important;
  font-weight: 700 !important;
  padding: 10px 18px 3px !important;
  text-transform: uppercase;
}
.np-sidebar-section {
  margin-bottom: 0 !important;
}
.np-sidebar-section + .np-sidebar-section {
  margin-top: 2px !important;
}

/* Liens de menu : tons sombres, pas de fond, accent à gauche pour actif */
.np-sidebar-link {
  color: var(--np-ink) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  padding: 5px 18px !important;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  line-height: 1.4 !important;
  gap: 10px;
}
.np-sidebar-link:hover {
  background: var(--np-cream-3) !important;
  color: var(--np-forest) !important;
}
.np-sidebar-link-active {
  background: var(--np-forest-xl) !important;
  color: var(--np-forest) !important;
  font-weight: 700 !important;
  border-left-color: var(--np-forest) !important;
}
.np-sidebar-link-icon {
  opacity: .65;
  font-size: .92em !important;
  filter: grayscale(.25);
  width: 18px; text-align: center;
  flex-shrink: 0;
}
.np-sidebar-link-active .np-sidebar-link-icon {
  opacity: 1;
  filter: none;
}

/* Footer sidebar : avatar + email + actions discrètes */
.np-sidebar-footer {
  border-top: 1px solid var(--np-line) !important;
  background: var(--np-cream-3);
  padding: 10px 0 6px !important;
}

/* v1.19.0 — Compteurs dépenses IA */
.np-sidebar-ia-counters {
  display: flex;
  gap: 6px;
  margin: 0 12px 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--np-line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color .15s, border-color .15s;
}
.np-sidebar-ia-counters:hover {
  background: rgba(255,255,255,.95);
  border-color: var(--np-forest);
}
.np-sidebar-ia-counter {
  flex: 1 1 50%;
  display: flex; flex-direction: column; gap: 1px;
  text-align: center;
}
.np-sidebar-ia-counter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--np-slate);
  font-weight: 500;
}
.np-sidebar-ia-counter-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--np-navy);
  font-variant-numeric: tabular-nums;
}
.np-sidebar-ia-counter-value small {
  font-size: 9px;
  font-weight: 500;
  color: var(--np-slate);
  margin-left: 2px;
}
/* Mode collapsed : on cache les compteurs (pas de place) */
.np-sidebar-collapsed .np-sidebar-ia-counters { display: none; }

.np-sidebar-user {
  padding: 4px 18px 6px !important;
  gap: 10px !important;
  display: flex; align-items: center;
}
.np-sidebar-user-avatar {
  background: var(--np-forest) !important;
  color: #fff !important;
  font-size: .82rem !important;
  width: 34px !important; height: 34px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.np-sidebar-user-info {
  min-width: 0;
  flex: 1;
}
.np-sidebar-user-name {
  color: var(--np-ink) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-sidebar-user-email {
  color: var(--np-mute);
  font-size: .74rem;
  font-weight: 400;
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-sidebar-logout {
  color: var(--np-mute) !important;
  padding: 7px 22px !important;
  font-size: .8rem !important;
}
.np-sidebar-logout:hover {
  color: var(--np-forest) !important;
  background: transparent !important;
}

/* v1.16.6 — Boutons footer EXPLICITES : icône + label, côte à côte */
.np-sidebar-footer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 14px 0;
}
.np-sidebar-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--np-white);
  border: 1px solid var(--np-line-2);
  color: var(--np-ink-soft);
  text-decoration: none !important;
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .005em;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
  white-space: nowrap;
}
.np-sidebar-footer-btn:hover {
  background: var(--np-forest-xl);
  border-color: var(--np-forest);
  color: var(--np-forest) !important;
}
.np-sidebar-footer-btn:active {
  transform: translateY(1px);
}
.np-sidebar-footer-btn-icon {
  font-size: .92rem;
  line-height: 1;
}
.np-sidebar-footer-btn-label {
  line-height: 1;
}
/* Variante déconnexion : ton plus discret au repos, rouge subtil au hover */
.np-sidebar-footer-btn-logout:hover {
  background: #FCEDED;
  border-color: #C84B4B;
  color: #8E2A2A !important;
}
/* Mode collapsed : seulement les icônes, en colonne */
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-footer-actions {
  grid-template-columns: 1fr;
  padding: 8px 8px 0;
}
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-footer-btn-label {
  display: none;
}
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-footer-btn {
  padding: 8px 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   ZONE PRINCIPALE
   ═══════════════════════════════════════════════════════════════════ */
.np-layout-vertical .np-main {
  background: var(--np-cream);
  padding: 36px 44px 60px !important;
}

.np-page-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  color: var(--np-ink) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em;
}
.np-page-title-eyebrow {
  font-family: 'DM Sans', sans-serif;
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--np-mute);
  font-weight: 500;
  margin-bottom: 6px;
}
.np-page-title-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  color: var(--np-ink-soft);
  font-weight: 400;
  margin: 0 0 24px;
}

.np-page-header {
  border-bottom: 1px solid var(--np-line) !important;
  padding-bottom: 20px !important;
  margin-bottom: 28px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS — sobres, bordures fines, sans ombre
   ═══════════════════════════════════════════════════════════════════ */
.np-card {
  background: var(--np-white) !important;
  border: 1px solid var(--np-line) !important;
  border-radius: var(--np-radius) !important;
  padding: 22px 26px !important;
  margin-bottom: 18px !important;
  box-shadow: none !important;
}
.np-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--np-ink) !important;
  margin: 0 0 16px !important;
  border: none !important;
  padding: 0 !important;
}

/* Stats cards : layout horizontal serré (v1.16.7) — chiffre à gauche, label à droite */
.np-stat-card {
  background: var(--np-white) !important;
  border: 1px solid var(--np-line) !important;
  border-radius: var(--np-radius) !important;
  padding: 16px 22px !important;
  box-shadow: none !important;
  transition: border-color .15s;
  display: flex;
  align-items: center;
  gap: 18px;
}
.np-stat-card:hover {
  border-color: var(--np-line-2) !important;
}
.np-stat-card .np-stat-value {
  font-size: 2.4rem !important;
  flex-shrink: 0;
}
.np-stat-card .np-stat-label {
  flex: 1;
  text-align: left;
}
.np-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES & LISTES — séparateurs subtils, pas de fond
   ═══════════════════════════════════════════════════════════════════ */
.np-table {
  background: transparent !important;
}
.np-table th {
  background: transparent !important;
  color: var(--np-mute) !important;
  font-size: .7rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--np-line-2) !important;
  padding: 10px 12px !important;
}
.np-table td {
  border-bottom: 1px solid var(--np-line) !important;
  padding: 14px 12px !important;
  color: var(--np-ink) !important;
  font-size: .92rem !important;
}
.np-table tbody tr:last-child td {
  border-bottom: none !important;
}
.np-table tbody tr:hover {
  background: var(--np-cream) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LISTE PATIENTS RÉCENTS — avec avatar cercle initiales
   ═══════════════════════════════════════════════════════════════════ */
.np-patient-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--np-line);
  text-decoration: none;
}
.np-patient-row:last-child { border-bottom: none; }
.np-patient-row:hover .np-patient-name { color: var(--np-forest); }

.np-patient-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--np-forest-xl);
  color: var(--np-forest);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.np-patient-name {
  font-weight: 600;
  color: var(--np-ink);
  transition: color .12s;
}
.np-patient-meta {
  font-size: .8rem;
  color: var(--np-mute);
  font-family: 'DM Mono', monospace;
}
.np-patient-time {
  margin-left: auto;
  font-size: .82rem;
  color: var(--np-mute);
}

/* ═══════════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════════ */
.np-btn {
  border-radius: var(--np-radius) !important;
  font-weight: 500 !important;
  font-size: .88rem !important;
  letter-spacing: .005em !important;
  padding: 9px 18px !important;
  transition: .15s !important;
}
.np-btn-primary {
  background: var(--np-forest) !important;
  color: #fff !important;
  border: 1px solid var(--np-forest) !important;
}
.np-btn-primary:hover {
  background: var(--np-forest-l) !important;
  border-color: var(--np-forest-l) !important;
}
.np-btn-secondary {
  background: transparent !important;
  color: var(--np-ink) !important;
  border: 1px solid var(--np-line-2) !important;
}
.np-btn-secondary:hover {
  background: var(--np-cream-2) !important;
  border-color: var(--np-ink-soft) !important;
  color: var(--np-forest) !important;
}
.np-btn-outline {
  background: transparent !important;
  color: var(--np-forest) !important;
  border: 1px solid var(--np-forest) !important;
}
.np-btn-outline:hover {
  background: var(--np-forest-xl) !important;
}
.np-btn-ia {
  background: var(--np-gold) !important;
  color: #fff !important;
  border-color: var(--np-gold) !important;
}
.np-btn-ia:hover {
  background: var(--np-gold-soft) !important;
  border-color: var(--np-gold-soft) !important;
}

/* "Voir agenda complet →" : style lien plutôt que bouton */
.np-card-link {
  font-size: .85rem;
  color: var(--np-forest);
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.np-card-link:hover {
  color: var(--np-forest-l);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   ONGLETS PATIENT — épurés, soulignement fin
   ═══════════════════════════════════════════════════════════════════ */
.np-tabs {
  border-bottom: 1px solid var(--np-line) !important;
  margin-bottom: 24px !important;
  display: flex; flex-wrap: wrap; gap: 0 !important;
}
.np-tab {
  background: transparent !important;
  color: var(--np-ink-soft) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  margin-bottom: -1px !important;
  text-decoration: none !important;
  transition: color .15s, border-color .15s;
}
.np-tab:hover {
  color: var(--np-ink) !important;
}
.np-tab-active {
  color: var(--np-forest) !important;
  border-bottom-color: var(--np-forest) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMULAIRES — bordures fines, focus discret
   ═══════════════════════════════════════════════════════════════════ */
.np-front input[type=text],
.np-front input[type=email],
.np-front input[type=number],
.np-front input[type=tel],
.np-front input[type=date],
.np-front input[type=password],
.np-front textarea,
.np-front select,
.np-form input[type=text],
.np-form input[type=email],
.np-form input[type=number],
.np-form textarea,
.np-form select {
  background: var(--np-white);
  border: 1px solid var(--np-line-2);
  border-radius: var(--np-radius);
  padding: 9px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  color: var(--np-ink);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none !important;
}
.np-front input:focus,
.np-front textarea:focus,
.np-front select:focus {
  border-color: var(--np-forest) !important;
  box-shadow: 0 0 0 3px var(--np-forest-xl) !important;
  outline: none !important;
}
.np-field label,
.np-form label {
  font-size: .76rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--np-mute) !important;
  margin-bottom: 5px !important;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   ALERTES & BADGES
   ═══════════════════════════════════════════════════════════════════ */
.np-alert {
  border-radius: var(--np-radius);
  border-width: 1px !important;
  padding: 12px 16px !important;
  font-size: .88rem !important;
  font-weight: 400 !important;
}
.np-alert-success {
  background: var(--np-forest-xl) !important;
  border-color: var(--np-forest-l) !important;
  color: var(--np-forest) !important;
}
.np-alert-error {
  background: #FCE9E9 !important;
  border-color: #C84B4B !important;
  color: #8E2A2A !important;
}
.np-alert-warning,
.np-alert-warn {
  background: #FAF3DD !important;
  border-color: var(--np-gold-soft) !important;
  color: var(--np-gold) !important;
}

.np-badge {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
}

/* ═══════════════════════════════════════════════════════════════════
   BOUTON FLOTTANT — Recherche aliment rapide (parallèle au "Snippets" MTC)
   ═══════════════════════════════════════════════════════════════════ */
.np-fab {
  position: fixed;
  right: 28px; bottom: 28px;
  background: var(--np-forest);
  color: #fff;
  padding: 12px 22px 12px 18px;
  border: none;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .005em;
  box-shadow: 0 4px 18px rgba(31, 81, 50, .25), 0 0 0 1px rgba(255,255,255,.06) inset;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  z-index: 90;
}
.np-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(31, 81, 50, .35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.np-fab-icon {
  font-size: 1.05em;
  opacity: .9;
}

/* ═══════════════════════════════════════════════════════════════════
   AGENDA — zone vide plus aérée
   ═══════════════════════════════════════════════════════════════════ */
.np-empty {
  text-align: center;
  color: var(--np-mute);
  font-style: italic;
  padding: 24px 0;
  font-size: .92rem;
}

/* ═══════════════════════════════════════════════════════════════════
   COLLAPSED MODE — ajustements
   ═══════════════════════════════════════════════════════════════════ */
.np-layout-vertical.np-sidebar-collapsed .np-sidebar {
  width: 64px;
}
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: none;
}
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-link-active {
  background: var(--np-forest-xl) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — sidebar mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .np-layout-vertical .np-main {
    padding: 20px 18px 60px !important;
  }
  .np-page-title {
    font-size: 1.8rem !important;
  }
  .np-stat-value {
    font-size: 2.6rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR mobile : assortie au reste
   ═══════════════════════════════════════════════════════════════════ */
.np-topbar {
  background: var(--np-cream-2) !important;
  color: var(--np-ink) !important;
  border-bottom: 1px solid var(--np-line);
  box-shadow: none !important;
}
.np-topbar-burger {
  color: var(--np-ink) !important;
}
.np-topbar-brand {
  color: var(--np-ink) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   "Vue patient" (np-sidebar-link-demo) — alignement v1.16.4
   Le legacy avait margin/border dashed prévus pour fond sombre :
   on neutralise pour aligner sur les autres liens du menu.
   ═══════════════════════════════════════════════════════════════════ */
.np-layout-vertical .np-sidebar-link-demo {
  border: none !important;
  border-left: 3px solid transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 5px 18px !important;
  background: transparent !important;
}
.np-layout-vertical .np-sidebar-link-demo:hover {
  background: var(--np-cream-3) !important;
  border-left-color: var(--np-mute) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RECHERCHE PRÉDICTIVE CONTEXTUELLE (.np-psearch) — v1.16.4
   Composant réutilisable, instancié par module (Patients, Aliments,
   Compléments, …). Voir assets/js/np-search.js pour le comportement.
   ═══════════════════════════════════════════════════════════════════ */
.np-psearch {
  position: relative;
}
.np-psearch-inline {
  display: flex;
  align-items: center;
}
.np-psearch-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--np-mute);
  font-size: .92rem;
  pointer-events: none;
  z-index: 1;
}
.np-psearch-input {
  width: 100%;
  padding: 9px 14px 9px 36px !important;
  font-size: .92rem !important;
  background: var(--np-white) !important;
  border: 1px solid var(--np-line-2) !important;
  border-radius: var(--np-radius) !important;
  color: var(--np-ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s;
  height: 38px;
}
.np-psearch-input::placeholder {
  color: var(--np-mute);
}
.np-psearch-input:focus {
  border-color: var(--np-forest) !important;
  box-shadow: 0 0 0 3px var(--np-forest-xl) !important;
}
.np-psearch-dropdown {
  display: none;
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--np-white);
  border: 1px solid var(--np-line-2);
  border-radius: var(--np-radius);
  box-shadow: 0 12px 32px rgba(15, 20, 17, .15), 0 2px 6px rgba(15, 20, 17, .08);
  z-index: 200;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.np-psearch-dropdown.np-psearch-open { display: block; }
.np-psearch-group { padding: 8px 0; }
.np-psearch-group + .np-psearch-group { border-top: 1px solid var(--np-line); }
.np-psearch-group-title {
  padding: 6px 14px 4px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--np-mute);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.np-psearch-group-icon {
  opacity: .6;
  filter: grayscale(.25);
  font-size: .92rem;
}
.np-psearch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none !important;
  color: var(--np-ink);
  cursor: pointer;
  transition: background .1s;
}
.np-psearch-item:hover,
.np-psearch-item-focus {
  background: var(--np-forest-xl) !important;
}
.np-psearch-item-main { flex: 1; min-width: 0; }
.np-psearch-item-label {
  font-size: .92rem;
  font-weight: 500;
  color: var(--np-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-psearch-item-sub {
  font-size: .76rem;
  color: var(--np-mute);
  font-family: 'DM Mono', monospace;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-psearch-item-badge {
  font-size: .68rem;
  background: var(--np-cream-3);
  color: var(--np-ink-soft);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.np-psearch-item mark {
  background: rgba(151, 119, 42, .25);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  font-weight: 600;
}
.np-psearch-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: .9rem;
  color: var(--np-mute);
  font-style: italic;
}
.np-psearch-empty strong {
  color: var(--np-ink);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   BOUTONS .np-btn-xs — normalisation v1.16.2
   Tous les petits boutons d'action en colonne "actions" doivent avoir
   la même hauteur, padding, font-size, alignement vertical.
   ═══════════════════════════════════════════════════════════════════ */
.np-btn-xs {
  padding: 4px 10px !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  height: 26px !important;
  min-height: 26px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

/* Variante par défaut (sans modifier) → outline gris-vert subtil */
.np-btn-xs:not(.np-btn-primary):not(.np-btn-secondary):not(.np-btn-outline):not(.np-btn-ia):not(.np-btn-danger):not(.np-btn-sage-active):not(.np-btn-warning) {
  background: var(--np-white) !important;
  color: var(--np-ink) !important;
  border: 1px solid var(--np-line-2) !important;
}
.np-btn-xs:not(.np-btn-primary):not(.np-btn-secondary):not(.np-btn-outline):not(.np-btn-ia):not(.np-btn-danger):not(.np-btn-sage-active):not(.np-btn-warning):hover {
  background: var(--np-cream-2) !important;
  border-color: var(--np-ink-soft) !important;
  color: var(--np-forest) !important;
}

/* "Partager" (état non-partagé) → outline vert subtil */
.np-btn-xs.np-btn-outline {
  background: var(--np-white) !important;
  color: var(--np-forest) !important;
  border: 1px solid var(--np-forest) !important;
  opacity: .85;
}
.np-btn-xs.np-btn-outline:hover {
  opacity: 1;
  background: var(--np-forest-xl) !important;
}

/* "Partagé" (état partagé) → vert plein */
.np-btn-xs.np-btn-sage-active,
.np-btn-sage-active.np-btn-xs {
  background: var(--np-forest) !important;
  color: #fff !important;
  border: 1px solid var(--np-forest) !important;
}
.np-btn-xs.np-btn-sage-active:hover {
  background: var(--np-forest-l) !important;
  border-color: var(--np-forest-l) !important;
}

/* "Extraire bilan" (action IA) → doré subtil */
.np-btn-xs.np-btn-ia {
  background: var(--np-gold) !important;
  color: #fff !important;
  border: 1px solid var(--np-gold) !important;
}
.np-btn-xs.np-btn-ia:hover {
  background: var(--np-gold-soft) !important;
  border-color: var(--np-gold-soft) !important;
  color: #fff !important;
}

/* "🗑" trash → bouton icône carré, rouge subtil */
.np-btn-xs.np-btn-danger {
  background: transparent !important;
  color: var(--np-mute) !important;
  border: 1px solid var(--np-line-2) !important;
  width: 26px !important;
  padding: 4px !important;
  font-size: .85rem !important;
}
.np-btn-xs.np-btn-danger:hover {
  background: #FCE9E9 !important;
  color: #8E2A2A !important;
  border-color: #8E2A2A !important;
}

/* Cellule actions : alignement et resserrement */
.np-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .np-actions { flex-wrap: wrap !important; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES — lignes plus serrées
   ═══════════════════════════════════════════════════════════════════ */
.np-table th {
  padding: 8px 10px !important;
  font-size: .68rem !important;
}
.np-table td {
  padding: 9px 10px !important;
  font-size: .88rem !important;
  vertical-align: middle !important;
}
/* Méta sous le nom du document : plus discret */
.np-table .np-meta,
.np-table small.np-meta {
  font-size: .76rem !important;
  color: var(--np-mute) !important;
  display: block;
  margin-top: 2px;
  font-weight: 400;
}
/* Empêcher les 2 lignes pour le filename : ellipsis si trop long */
.np-table-wrap {
  overflow-x: auto;
}
.np-table {
  table-layout: auto;
  min-width: 720px;
}

/* ═══════════════════════════════════════════════════════════════════
   AGENDA — modale RDV unifiée + hover overlay (v1.16.5)
   ═══════════════════════════════════════════════════════════════════ */

/* Overlay et dialog */
.np-rdv-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 20, 17, .55);
  z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px;
  overflow-y: auto;
}
.np-rdv-dialog {
  background: var(--np-white);
  border-radius: 12px;
  width: 100%;
  max-width: 580px;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  border: 1px solid var(--np-line-2);
}
.np-rdv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--np-line);
  background: var(--np-cream);
}
.np-rdv-header h3 {
  margin: 0 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.4rem !important;
  color: var(--np-ink) !important;
  font-weight: 600 !important;
}
.np-rdv-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.4rem; color: var(--np-mute);
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .15s;
}
.np-rdv-close:hover { background: var(--np-cream-3); color: var(--np-ink); }

.np-rdv-body { padding: 18px 20px; }
.np-rdv-footer {
  padding: 12px 20px;
  background: var(--np-cream);
  border-top: 1px solid var(--np-line);
  display: flex; gap: 8px; align-items: center;
}

/* Toggle Patient existant / Nouveau */
.np-rdv-mode-toggle {
  display: flex; gap: 6px;
  background: var(--np-cream-2);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.np-rdv-mode-opt {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--np-ink-soft);
  cursor: pointer;
  transition: .15s;
}
.np-rdv-mode-opt input { display: none; }
.np-rdv-mode-opt:hover { color: var(--np-ink); }
.np-rdv-mode-opt.np-rdv-mode-active {
  background: var(--np-white);
  color: var(--np-forest);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Recherche prédictive en contexte modale */
.np-psearch-modal { position: relative; }
.np-psearch-modal .np-psearch-dropdown {
  /* dans la modale, on veut que le dropdown apparaisse au-dessus
     des champs en-dessous, sans être tronqué par overflow */
  max-height: 280px;
  z-index: 9100;
}

/* Patient sélectionné (pastille) */
.np-rdv-patient-selected {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--np-forest-xl);
  border: 1px solid var(--np-forest);
  border-radius: 8px;
  margin-top: 6px;
}
.np-rdv-patient-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--np-forest);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 600;
  flex-shrink: 0;
}
.np-rdv-patient-label {
  flex: 1;
  font-size: .92rem;
  color: var(--np-ink);
}
.np-rdv-patient-clear {
  background: transparent; border: none;
  font-size: 1.2rem; cursor: pointer;
  color: var(--np-mute);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .15s;
}
.np-rdv-patient-clear:hover { background: rgba(255,255,255,.5); color: var(--np-ink); }

/* Form rows dans la modale */
.np-rdv-body .np-form-row { margin-bottom: 12px; }
.np-rdv-body .np-form-row label {
  display: block;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--np-mute);
  margin-bottom: 5px;
}
.np-rdv-body .np-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.np-rdv-body .np-input,
.np-rdv-body .np-select,
.np-rdv-body .np-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--np-line-2);
  border-radius: var(--np-radius);
  font-size: .92rem;
  background: var(--np-white);
  color: var(--np-ink);
  font-family: 'DM Sans', sans-serif;
}
.np-rdv-body .np-input:focus,
.np-rdv-body .np-select:focus,
.np-rdv-body .np-textarea:focus {
  outline: none;
  border-color: var(--np-forest);
  box-shadow: 0 0 0 3px var(--np-forest-xl);
}

/* Hover overlay sur la grille agenda — indicateur 30 min */
.np-slot-hover {
  position: absolute;
  left: 0; right: 0;
  background: rgba(27, 74, 46, .12);
  border-top: 1px solid var(--np-forest);
  border-bottom: 1px solid var(--np-forest);
  z-index: 5;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--np-forest);
  font-family: 'DM Mono', monospace;
}

/* Le .np-day-body doit être positionné pour accueillir l'overlay */
.np-day-body { position: relative; }

/* Curseur pointer sur la zone cliquable */
.np-day-body { cursor: pointer; }
.np-day-body .np-event { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════
   Items spéciaux dans la sidebar (v1.16.6)
   ═══════════════════════════════════════════════════════════════════ */

/* Item DÉSACTIVÉ — ex. "Compléments alimentaires" en attente */
.np-sidebar-link-disabled {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 5px 18px !important;
  color: var(--np-mute) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  border-left: 3px solid transparent !important;
  cursor: not-allowed !important;
  opacity: .65;
  user-select: none;
}
.np-sidebar-link-disabled:hover {
  background: transparent !important;
  color: var(--np-mute) !important;
}
.np-sidebar-link-disabled .np-sidebar-link-icon {
  opacity: .55;
  filter: grayscale(.6);
}
.np-sidebar-link-disabled .np-sidebar-link-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-sidebar-link-badge {
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--np-cream-3);
  color: var(--np-mute);
  border: 1px solid var(--np-line);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Item EXTERNE (target=_blank) — petite flèche ↗ après le label */
.np-sidebar-link-ext {
  margin-left: auto;
  font-size: .72rem;
  color: var(--np-mute);
  opacity: .7;
  flex-shrink: 0;
}
.np-sidebar-link:hover .np-sidebar-link-ext {
  opacity: 1;
  color: var(--np-forest);
}

/* En mode collapsed : on cache labels et badges */
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-link-badge,
.np-layout-vertical.np-sidebar-collapsed .np-sidebar-link-ext {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   AGENDA — Toolbar harmonisée (v1.16.7)
   Override les styles legacy pour aligner tous les boutons sur la
   palette éditoriale : forest + cream + lignes fines.
   ═══════════════════════════════════════════════════════════════════ */

.np-agenda-topbar {
  background: var(--np-white) !important;
  border-bottom: 1px solid var(--np-line) !important;
  padding: 14px 22px !important;
  gap: 10px !important;
}

/* Toggle Semaine / Mois — segmented control éditorial */
.np-agenda-views {
  display: flex !important;
  background: var(--np-cream-2) !important;
  border-radius: var(--np-radius) !important;
  padding: 3px !important;
  overflow: visible !important;
  border: 1px solid var(--np-line) !important;
}
.np-view-btn {
  padding: 6px 14px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--np-mute) !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  transition: .12s !important;
  font-family: 'DM Sans', sans-serif !important;
}
.np-view-btn:hover { color: var(--np-ink-soft) !important; }
.np-view-btn.active {
  background: var(--np-forest) !important;
  color: #fff !important;
}

/* Toggle 5 jours / 7 jours — même pattern segmented control */
.np-agenda-days-toggle {
  display: flex;
  background: var(--np-cream-2);
  border-radius: var(--np-radius);
  padding: 3px;
  border: 1px solid var(--np-line);
}
.np-agenda-days-btn {
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--np-mute);
  text-decoration: none;
  border-radius: 4px;
  transition: .12s;
  font-family: 'DM Sans', sans-serif;
}
.np-agenda-days-btn:hover { color: var(--np-ink-soft); }
.np-agenda-days-btn.active {
  background: var(--np-white);
  color: var(--np-forest);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Bouton "Connecter Google Calendar" — uniforme avec les boutons secondary */
.np-btn-gc {
  background: var(--np-white) !important;
  border: 1px solid var(--np-line-2) !important;
  color: var(--np-ink-soft) !important;
  padding: 6px 12px !important;
  border-radius: var(--np-radius) !important;
  font-size: .82rem !important;
  font-family: 'DM Sans', sans-serif !important;
}
.np-btn-gc:hover {
  border-color: var(--np-forest) !important;
  color: var(--np-forest) !important;
  background: var(--np-forest-xl) !important;
}

.np-btn-gc-sync {
  background: var(--np-white) !important;
  border: 1px solid var(--np-line-2) !important;
  color: var(--np-ink-soft) !important;
  padding: 6px 12px !important;
  border-radius: var(--np-radius) !important;
  font-size: .82rem !important;
  font-family: 'DM Sans', sans-serif !important;
}
.np-btn-gc-sync:hover {
  background: var(--np-forest-xl) !important;
  border-color: var(--np-forest) !important;
  color: var(--np-forest) !important;
}

/* Navigation calendrier (semaine prev/next, S18, Aujourd'hui) */
.np-cal-nav {
  background: var(--np-white) !important;
  border-bottom: 1px solid var(--np-line) !important;
  padding: 10px 22px !important;
  gap: 10px !important;
}
.np-nav-arrow {
  color: var(--np-mute) !important;
}
.np-nav-arrow:hover {
  background: var(--np-cream-2) !important;
  color: var(--np-forest) !important;
}
.np-cal-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.15rem !important;
  color: var(--np-ink) !important;
  font-weight: 600 !important;
}
.np-sem-num {
  font-size: .68rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--np-mute) !important;
  background: var(--np-cream-2) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-weight: 600;
  border: 1px solid var(--np-line);
}
.np-today-btn {
  border: 1px solid var(--np-line-2) !important;
  border-radius: var(--np-radius) !important;
  font-size: .82rem !important;
  color: var(--np-ink-soft) !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 5px 14px !important;
}
.np-today-btn:hover {
  border-color: var(--np-forest) !important;
  color: var(--np-forest) !important;
  background: var(--np-forest-xl) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v1.17.0 — Palette de commandes Cmd+K / Ctrl+K
   ════════════════════════════════════════════════════════════════════ */

.np-cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 17, 0.5);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  padding-top: 12vh;
}
.np-cmdk-overlay.open { display: flex; }

body.np-cmdk-open { overflow: hidden; }

.np-cmdk-modal {
  background: #fff;
  width: 100%;
  max-width: 580px;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: np-cmdk-pop 0.18s ease-out;
}
@keyframes np-cmdk-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.np-cmdk-modal .np-psearch {
  position: relative;
}
.np-cmdk-modal .np-psearch-input {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid var(--np-line, #D8D6CC) !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  font-size: 1.05rem !important;
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif !important;
  color: var(--np-ink, #0F1411);
  background: #fff !important;
  outline: none !important;
}
.np-cmdk-modal .np-psearch-input::placeholder {
  color: var(--np-mute, #6E7270);
  font-style: italic;
}
.np-cmdk-modal .np-psearch-dropdown {
  position: static !important;
  max-height: 60vh;
  overflow-y: auto;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.np-cmdk-footer {
  display: flex;
  gap: 18px;
  padding: 10px 22px;
  background: var(--np-cream, #FBFAF5);
  border-top: 1px solid var(--np-line, #D8D6CC);
  font-size: 0.78rem;
  color: var(--np-mute, #6E7270);
}
.np-cmdk-footer kbd {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  background: #fff;
  border: 1px solid var(--np-line, #D8D6CC);
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.72rem;
  color: var(--np-ink, #0F1411);
}

@media (max-width: 640px) {
  .np-cmdk-overlay { padding-top: 6vh; align-items: flex-start; }
  .np-cmdk-modal { max-width: calc(100vw - 24px); }
  .np-cmdk-footer { font-size: 0.72rem; flex-wrap: wrap; gap: 10px; }
}