/* =========================================================================
   GestionCabinet — Design System
   Palette médicale sobre (bleu clinique / blanc / gris), light + dark theme.
   Toutes les anciennes classes/variables sont conservées pour ne rien casser
   sur les pages qui n'ont pas encore été redessinées.
   ========================================================================= */

:root {
  /* Couleurs de marque */
  --bleu-fonce: #0f5c74;
  --bleu: #0e7490;
  --bleu-vif: #0891b2;
  --bleu-clair: #e0f2fe;
  --bleu-clair-2: #f0f9ff;

  /* Texte / fonds neutres */
  --texte: #1e293b;
  --texte-clair: #64748b;
  --texte-discret: #94a3b8;
  --fond: #f3f6f9;
  --carte: #ffffff;
  --bordure: #e2e8f0;
  --bordure-forte: #cbd5e1;
  --surface-alt: #f8fafc;

  /* Couleurs fonctionnelles */
  --vert: #15803d;
  --vert-clair: #dcfce7;
  --rouge: #b91c1c;
  --rouge-clair: #fee2e2;
  --ambre: #b45309;
  --ambre-clair: #fef3c7;
  --gris: #475569;

  /* Géométrie */
  --rayon: 10px;
  --rayon-petit: 7px;
  --rayon-plein: 999px;
  --ombre: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 4px rgba(15, 23, 42, .04);
  --ombre-forte: 0 8px 24px rgba(15, 23, 42, .10);

  /* Layout */
  --sidebar-largeur: 252px;
  --sidebar-largeur-reduite: 72px;
  --entete-hauteur: 62px;

  --police: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  color-scheme: light;
}

/* ---- Thème sombre : déclenché soit par préférence système (si l'utilisateur
   n'a rien choisi), soit explicitement via data-theme="dark" posé par le JS. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bleu-fonce: #38bdf8;
    --bleu: #38bdf8;
    --bleu-vif: #7dd3fc;
    --bleu-clair: #0c4a6e;
    --bleu-clair-2: #082f49;
    --texte: #e2e8f0;
    --texte-clair: #94a3b8;
    --texte-discret: #64748b;
    --fond: #0b1220;
    --carte: #16202f;
    --bordure: #2a3646;
    --bordure-forte: #3c4a5e;
    --surface-alt: #1b2635;
    --vert: #4ade80;
    --vert-clair: #14361f;
    --rouge: #f87171;
    --rouge-clair: #3f1414;
    --ambre: #fbbf24;
    --ambre-clair: #3f2c06;
    --gris: #cbd5e1;
    --ombre: 0 1px 2px rgba(0, 0, 0, .35);
    --ombre-forte: 0 10px 28px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bleu-fonce: #38bdf8;
  --bleu: #38bdf8;
  --bleu-vif: #7dd3fc;
  --bleu-clair: #0c4a6e;
  --bleu-clair-2: #082f49;
  --texte: #e2e8f0;
  --texte-clair: #94a3b8;
  --texte-discret: #64748b;
  --fond: #0b1220;
  --carte: #16202f;
  --bordure: #2a3646;
  --bordure-forte: #3c4a5e;
  --surface-alt: #1b2635;
  --vert: #4ade80;
  --vert-clair: #14361f;
  --rouge: #f87171;
  --rouge-clair: #3f1414;
  --ambre: #fbbf24;
  --ambre-clair: #3f2c06;
  --gris: #cbd5e1;
  --ombre: 0 1px 2px rgba(0, 0, 0, .35);
  --ombre-forte: 0 10px 28px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu); }
hr { border: none; border-top: 1px solid var(--bordure); margin: 8px 0; }

::selection { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* Focus clavier toujours visible (accessibilité) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--bleu-vif);
  outline-offset: 2px;
}

/* =========================================================================
   Page de connexion / inscription
   ========================================================================= */
body.page-connexion {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  /* overflow-y:auto + margin:auto sur l'enfant (au lieu de align-items:center) :
     si le contenu est plus haut que l'écran, on garde le haut du formulaire
     (identifiant/mot de passe) accessible dès l'ouverture au lieu qu'il soit
     centré hors-champ et inatteignable même en faisant défiler. */
  overflow-y: auto;
  background: linear-gradient(160deg, var(--bleu-fonce), var(--bleu) 60%, var(--bleu-vif));
  padding: 20px;
}
.conteneur-connexion {
  width: 100%;
  max-width: 420px;
  margin: auto 0;
}
.carte-connexion {
  background: var(--carte);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.carte-connexion h1 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.25rem;
  color: var(--bleu-fonce);
}
/* Formulaire compact (page connexion/inscription) : moins d'espace vertical
   entre les champs pour que tout tienne sans barre de défilement sur un
   écran standard, tout en restant lisible et responsive. */
.page-connexion .carte-connexion h3 {
  margin: 10px 0 4px;
  font-size: .92rem;
}
.page-connexion .carte-connexion label {
  margin-top: 7px;
  margin-bottom: 3px;
  font-size: .78rem;
}
.page-connexion .carte-connexion input[type=text],
.page-connexion .carte-connexion input[type=password],
.page-connexion .carte-connexion input[type=tel],
.page-connexion .carte-connexion input[type=number] {
  padding: 7px 10px;
}
.page-connexion .carte-connexion .champ { margin-bottom: 0; }
.page-connexion .carte-connexion .ligne-champs { gap: 12px; }
.page-connexion .carte-connexion .bouton { margin-top: 14px; }
.lien-secondaire { text-align: center; margin-top: 10px; font-size: .9rem; color: var(--texte-clair); }

/* ---- Connexion « professionnelle » : marque, champs avec icônes, option de
   mémorisation. Conserve le fond dégradé et la carte existants. ---- */
.connexion-pro { padding: 30px 32px; }
.connexion-marque { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.connexion-logo {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--bleu-fonce), var(--bleu-vif));
  box-shadow: var(--ombre);
}
.connexion-logo img { width: 100%; height: 100%; object-fit: cover; }
.connexion-marque h1 { margin: 0; font-size: 1.18rem; color: var(--texte); letter-spacing: -.01em; }
.connexion-sous-titre { margin: 2px 0 0; font-size: .78rem; color: var(--texte-clair); letter-spacing: .02em; }
.connexion-titre { margin: 0 0 2px; font-size: 1.05rem; color: var(--texte); }
.connexion-aide { margin: 0 0 14px; font-size: .85rem; color: var(--texte-clair); }
.champ-icone { position: relative; }
.champ-icone-svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--texte-discret); pointer-events: none;
}
.page-connexion .carte-connexion .champ-icone input[type=text],
.page-connexion .carte-connexion .champ-icone input[type=password] { padding-left: 38px; }
.connexion-memoire {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
  font-size: .85rem; color: var(--texte-clair); cursor: pointer; font-weight: 500;
}
.connexion-memoire input { width: auto; margin: 0; accent-color: var(--bleu); }
.connexion-bouton { width: 100%; margin-top: 14px; }

/* Écrans bas (petits laptops, fenêtre non maximisée) : on resserre encore. */
@media (max-height: 700px) {
  .carte-connexion { padding: 18px 22px; }
  .carte-connexion h1 { font-size: 1.1rem; margin-bottom: 10px; }
  .page-connexion .carte-connexion h3 { margin: 6px 0 3px; font-size: .85rem; }
  .page-connexion .carte-connexion label { margin-top: 5px; margin-bottom: 2px; font-size: .74rem; }
  .page-connexion .carte-connexion input[type=text],
  .page-connexion .carte-connexion input[type=password],
  .page-connexion .carte-connexion input[type=tel],
  .page-connexion .carte-connexion input[type=number] { padding: 5px 9px; }
  .page-connexion .carte-connexion .bouton { margin-top: 10px; padding-top: 9px; padding-bottom: 9px; }
  .lien-secondaire { margin-top: 6px; }
}

/* =========================================================================
   Application connectée : app shell (sidebar + header + contenu)
   ========================================================================= */
.app { min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-largeur);
  background: var(--bleu-fonce);
  color: #eaf6fb;
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: width .18s ease, transform .2s ease;
}
html[data-theme="dark"] .sidebar { background: #0c1826; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .sidebar { background: #0c1826; }
}

.sidebar-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  flex-shrink: 0;
}
.sidebar-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; letter-spacing: .3px;
  flex-shrink: 0;
}
.sidebar-nom { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; flex: 1; }
.sidebar-logo-image { object-fit: contain; background: #fff; padding: 3px; }
.sidebar-reduire {
  background: none; border: none; color: rgba(255,255,255,.75); cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; flex-shrink: 0; margin: 0; padding: 0;
}
.sidebar-reduire:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-reduire svg { transition: transform .18s ease; }

.lien-bouton {
  background: none; border: none; color: inherit; text-decoration: underline;
  cursor: pointer; font: inherit; padding: 0; margin: 0; border-radius: 0;
  display: inline; font-size: inherit;
}
.lien-bouton:hover { filter: none; opacity: .85; }

.bandeau-impersonation {
  background: var(--ambre); color: #1a1203; padding: 9px 14px; font-size: .8rem; margin: 0 14px 10px;
  border-radius: var(--rayon-petit); line-height: 1.4;
}
.bandeau-impersonation .lien-bouton { color: #1a1203; font-weight: 600; }

.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px; }
.sidebar-section-titre {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(234,246,251,.45); padding: 14px 10px 6px; white-space: nowrap;
}
.sidebar-liens { list-style: none; margin: 0; padding: 0; }
.sidebar-liens li a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; margin-bottom: 2px;
  color: #cfe8f2; text-decoration: none; border-radius: var(--rayon-petit);
  font-size: .89rem; white-space: nowrap; overflow: hidden;
}
.sidebar-liens li a svg { flex-shrink: 0; opacity: .85; }
.sidebar-liens li a span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-liens li a:hover { background: rgba(255,255,255,.09); color: #fff; }
.sidebar-liens li a:hover svg { opacity: 1; }
.sidebar-liens li a.actif { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.sidebar-liens li a.actif svg { opacity: 1; }

.sidebar-utilisateur {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.12); flex-shrink: 0;
}
.sidebar-utilisateur-texte { overflow: hidden; white-space: nowrap; }
.sidebar-utilisateur-nom { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.badge-role {
  display: inline-block; margin-top: 2px; background: rgba(255,255,255,.16);
  border-radius: var(--rayon-plein); padding: 1px 9px; font-size: .68rem; color: #eaf6fb;
}

.avatar-mini {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--bleu-clair); color: var(--bleu-fonce);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem;
}
.sidebar .avatar-mini { background: rgba(255,255,255,.16); color: #fff; }

.sidebar-fond {
  display: none;
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 35;
}

/* ---- Réduction (icônes seules) ---- */
html[data-sidebar="reduit"] .sidebar { width: var(--sidebar-largeur-reduite); }
html[data-sidebar="reduit"] .sidebar-nom,
html[data-sidebar="reduit"] .sidebar-section-titre,
html[data-sidebar="reduit"] .sidebar-liens li a span,
html[data-sidebar="reduit"] .sidebar-utilisateur-texte,
html[data-sidebar="reduit"] .bandeau-impersonation { display: none; }
html[data-sidebar="reduit"] .sidebar-liens li a { justify-content: center; }
html[data-sidebar="reduit"] .sidebar-entete { justify-content: center; }
html[data-sidebar="reduit"] .sidebar-reduire svg { transform: rotate(180deg); }
html[data-sidebar="reduit"] .sidebar-utilisateur { justify-content: center; }
html[data-sidebar="reduit"] .zone-principale { margin-left: var(--sidebar-largeur-reduite); }
html[data-sidebar="reduit"] .entete-titre { display: none; }

/* ---- Zone principale (header + contenu) ---- */
.zone-principale { margin-left: var(--sidebar-largeur); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .18s ease; }

.entete {
  height: var(--entete-hauteur);
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 30;
}
.entete .entete-burger { display: none; }
.entete-titre { font-size: 1.08rem; font-weight: 700; color: var(--texte); white-space: nowrap; }

.entete-recherche {
  flex: 1; max-width: 420px; margin: 0 4px 0 auto;
  position: relative; display: flex; align-items: center;
}
.entete-recherche svg { position: absolute; left: 11px; color: var(--texte-discret); pointer-events: none; }
.entete-recherche input[type=search] {
  width: 100%; padding: 8px 12px 8px 34px; margin: 0;
  border: 1px solid var(--bordure); border-radius: var(--rayon-plein);
  background: var(--surface-alt); font-size: .88rem;
}
.entete-recherche input[type=search]:focus { background: var(--carte); }

.entete-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.btn-icone {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: none;
  color: var(--texte-clair); display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin: 0; padding: 0; flex-shrink: 0;
}
.btn-icone:hover { background: var(--surface-alt); color: var(--texte); }
.icone-lune { display: none; }
html[data-theme="dark"] .icone-soleil { display: none; }
html[data-theme="dark"] .icone-lune { display: block; }

.menu-profil { position: relative; }
.profil-bouton {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  cursor: pointer; padding: 4px 6px 4px 4px; margin: 0; border-radius: var(--rayon-plein); color: var(--texte);
}
.profil-bouton:hover { background: var(--surface-alt); }
.profil-texte { text-align: left; line-height: 1.25; display: none; }
.profil-nom { font-size: .85rem; font-weight: 600; display: block; }
.profil-role { font-size: .73rem; color: var(--texte-clair); display: block; }
.profil-bouton svg.chevron { color: var(--texte-discret); }

.profil-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre-forte); min-width: 220px; padding: 6px; z-index: 50;
  display: none;
}
.profil-menu.ouvert { display: block; }
.profil-menu-entete { padding: 8px 10px 10px; border-bottom: 1px solid var(--bordure); margin-bottom: 6px; }
.profil-menu-entete .profil-nom { font-size: .88rem; }
.profil-menu a, .profil-menu button.lien-menu {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--rayon-petit); color: var(--texte);
  text-decoration: none; font-size: .87rem; background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; margin: 0;
}
.profil-menu a:hover, .profil-menu button.lien-menu:hover { background: var(--surface-alt); }
.profil-menu button.lien-menu { color: var(--rouge); }

/* ---- Cloche de notifications (en-tête) : même mécanique que le menu profil,
   avec un badge de compteur mis à jour par polling (voir notifications.js). ---- */
#btnNotifications { position: relative; }
.badge-notif {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--rayon-plein); background: var(--rouge); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
}
.notif-menu { min-width: 300px; max-width: 340px; padding: 0 0 6px; }
.notif-menu .profil-menu-entete { padding: 10px 12px; }
.notif-menu hr { margin: 4px 6px; }
.notif-menu > a { padding: 8px 12px; font-size: .82rem; color: var(--bleu); justify-content: center; }
#listeNotifications { max-height: 320px; overflow-y: auto; }
.notif-vide { padding: 18px 12px; text-align: center; color: var(--texte-clair); font-size: .85rem; }
.notif-item { padding: 9px 12px; border-bottom: 1px solid var(--bordure); }
.notif-item:last-child { border-bottom: none; }
.notif-item.non-lue { background: var(--bleu-clair-2); }
.notif-item-entete { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; }
.notif-item-entete span { color: var(--texte-discret); font-size: .74rem; white-space: nowrap; }
.notif-item-message { color: var(--texte-clair); font-size: .78rem; margin-top: 2px; }

.contenu { flex: 1; padding: 26px 30px 40px; max-width: 1240px; width: 100%; margin: 0 auto; overflow-x: auto; }

.titre-page { font-size: 1.4rem; color: var(--texte); margin: 0 0 18px; font-weight: 700; }

/* =========================================================================
   Composants
   ========================================================================= */
.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px;
  margin-bottom: 20px;
}
.carte > strong { font-size: .97rem; }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }

.grille-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .grille-deux-colonnes { grid-template-columns: 1fr; } }

.bandeau-accueil {
  background: linear-gradient(135deg, var(--bleu-fonce), var(--vert));
  color: #fff; border-radius: var(--rayon); padding: 22px 26px; margin-bottom: 22px;
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center;
}
.bandeau-accueil .bandeau-date { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.bandeau-accueil h2 { margin: 4px 0 2px; font-size: 1.3rem; }
.bandeau-accueil p { margin: 0 0 14px; opacity: .9; font-size: .88rem; }
.bandeau-accueil .bandeau-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.bandeau-accueil .bandeau-boutons .bouton, .bandeau-accueil .bandeau-boutons .horloge {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3);
}
.bandeau-accueil .bandeau-boutons .bouton:hover { background: rgba(255,255,255,.28); }
.horloge { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--rayon-petit); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; }
.bandeau-recettes { display: flex; gap: 12px; flex-wrap: wrap; }
.bandeau-recette-carte {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: var(--rayon);
  padding: 12px 18px; min-width: 150px;
}
.bandeau-recette-carte .libelle { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.bandeau-recette-carte .valeur { font-size: 1.4rem; font-weight: 700; margin-top: 2px; }
@media (max-width: 700px) { .bandeau-accueil { padding: 18px; } }

.stat-carte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px 18px; display: flex; align-items: center; gap: 14px;
}
.stat-carte-icone {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bleu-clair); color: var(--bleu-fonce);
}
.stat-carte-icone.vert { background: var(--vert-clair); color: var(--vert); }
.stat-carte-icone.ambre { background: var(--ambre-clair); color: var(--ambre); }
.stat-carte-icone.rouge { background: var(--rouge-clair); color: var(--rouge); }
.stat-carte .valeur { font-size: 1.5rem; font-weight: 700; color: var(--texte); line-height: 1.2; }
.stat-carte .libelle { color: var(--texte-clair); font-size: .8rem; margin-top: 1px; }

.alerte { padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 16px; font-size: .9rem; border: 1px solid transparent; }
.alerte-succes { background: var(--vert-clair); color: var(--vert); border-color: color-mix(in srgb, var(--vert) 25%, transparent); }
.alerte-erreur { background: var(--rouge-clair); color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 25%, transparent); }

table { width: 100%; border-collapse: collapse; background: var(--carte); border-radius: var(--rayon); overflow: hidden; }
table.simple { border: 1px solid var(--bordure); }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--bordure); font-size: .89rem; }

/* Tableau large (ex. catalogue de médicaments) : au lieu de comprimer les
   colonnes ou faire passer le contenu à la ligne sur une fenêtre étroite,
   on garde une largeur confortable et on affiche une barre de défilement
   horizontale propre au tableau (le reste de la page ne bouge pas). */
.tableau-defilement { overflow-x: auto; border-radius: var(--rayon); }
.tableau-defilement table { width: auto; min-width: 100%; }
.tableau-defilement th, .tableau-defilement td { white-space: nowrap; }
.tableau-defilement th:last-child, .tableau-defilement td:last-child { white-space: normal; }
th { background: var(--surface-alt); color: var(--texte-clair); font-weight: 600; font-size: .77rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: var(--surface-alt); }
tr:last-child td { border-bottom: none; }

form.en-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

label { display: block; font-size: .82rem; color: var(--texte-clair); margin-bottom: 5px; margin-top: 12px; font-weight: 500; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], input[type=tel], input[type=search], input[type=file], input[type=email],
input[type=time],
select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-size: .93rem; background: var(--carte); color: var(--texte); font-family: inherit;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-vif); outline-offset: 1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--texte-discret); }

.champ { margin-bottom: 4px; }
.ligne-champs { display: flex; gap: 16px; flex-wrap: wrap; }
.ligne-champs > .champ { flex: 1; min-width: 180px; }

.bouton, button, input[type=submit] {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--bleu);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--rayon-petit);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 14px;
  font-family: inherit;
  transition: background .12s ease, filter .12s ease;
}
.bouton:hover, button:hover { filter: brightness(0.92); color: #fff; }
.bouton.secondaire { background: var(--carte); color: var(--bleu); border: 1px solid var(--bordure-forte); }
.bouton.secondaire:hover { background: var(--surface-alt); color: var(--bleu-fonce); }
.bouton.danger { background: var(--rouge); }
.bouton.vert { background: var(--vert); }
.bouton.petit { padding: 6px 12px; font-size: .8rem; margin-top: 0; }
.bouton:disabled { opacity: .55; cursor: not-allowed; }

.barre-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }

.champ-erreur { color: var(--rouge); font-size: .85rem; }

.etiquette { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: var(--rayon-plein); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.etiquette-attente { background: var(--ambre-clair); color: var(--ambre); }
.etiquette-encaisse { background: var(--vert-clair); color: var(--vert); }
.etiquette-annule { background: var(--rouge-clair); color: var(--rouge); }
.etiquette-solde { background: var(--rouge-clair); color: var(--rouge); }
.etiquette-info { background: var(--bleu-clair); color: var(--bleu-fonce); }
.etiquette-neutre { background: var(--surface-alt); color: var(--texte-clair); border: 1px solid var(--bordure); }
.etiquette-urgence { background: var(--rouge); color: #fff; }

/* Liste d'attente du tableau de bord */
.tableau-file-attente td { vertical-align: middle; }
.tableau-file-attente tbody tr:nth-child(even) { background: var(--surface-alt); }
.tableau-file-attente tr.ligne-urgente { box-shadow: inset 3px 0 0 var(--rouge); }
.badge-position {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-alt); color: var(--texte-clair);
  font-size: .76rem; font-weight: 700;
}
.patient-cellule { display: flex; align-items: center; gap: 10px; }
.avatar-patient {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bleu-clair); color: var(--bleu-fonce);
  font-size: .78rem; font-weight: 700;
}
.patient-nom { font-weight: 600; }
.actions-file-attente { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--bordure); margin-bottom: 16px; overflow-x: auto; }
.onglets a { padding: 9px 16px; text-decoration: none; color: var(--texte-clair); border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: .88rem; white-space: nowrap; }
.onglets a.actif { color: var(--bleu-fonce); border-color: var(--bleu); font-weight: 600; }

/* Onglet "Ordonnance" distingué des autres par un accent de couleur (demande
   explicite du client) — vert, déjà utilisé ailleurs dans l'application (recettes,
   encaissement) plutôt qu'une couleur inédite. */
.onglets a.onglet-ordonnance { color: var(--vert); }
.onglets a.onglet-ordonnance.actif { color: var(--vert); border-color: var(--vert); }

.etat-vide { color: var(--texte-clair); text-align: center; padding: 28px 16px; font-size: .9rem; }

/* Onglet "Certificat médical" : cartes de catégories cliquables (accordéon, voir
   wwwroot/js/certificat-formulaire.js) au lieu d'un sous-onglet par type. */
.grille-categories-certificats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.carte-categorie-certificat {
  display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px 16px; transition: border-color .15s, box-shadow .15s;
}
.carte-categorie-certificat:hover { border-color: var(--bleu); }
.carte-categorie-certificat[aria-expanded="true"] { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.carte-categorie-certificat .icone-categorie {
  width: 36px; height: 36px; border-radius: 9px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bleu-clair); color: var(--bleu-fonce);
}
.carte-categorie-certificat strong { display: block; font-size: .92rem; }
.carte-categorie-certificat .description-categorie { display: block; font-size: .78rem; color: var(--texte-clair); margin-top: 2px; }

.panneau-categorie-certificat {
  display: none; margin: 4px 0 16px; padding: 16px;
  background: var(--bleu-clair-2); border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.panneau-categorie-certificat.ouvert { display: block; }

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

/* Tablette : sidebar automatiquement réduite en icônes */
@media (max-width: 1080px) and (min-width: 641px) {
  .sidebar { width: var(--sidebar-largeur-reduite); }
  .sidebar-nom, .sidebar-section-titre, .sidebar-liens li a span,
  .sidebar-utilisateur-texte, .bandeau-impersonation { display: none; }
  .sidebar-liens li a, .sidebar-entete, .sidebar-utilisateur { justify-content: center; }
  .zone-principale { margin-left: var(--sidebar-largeur-reduite); }
  html[data-sidebar="reduit"] .sidebar-reduire svg { transform: none; }
  .entete-recherche { max-width: 260px; }
}

/* Mobile : sidebar en tiroir (drawer) */
@media (max-width: 640px) {
  .sidebar {
    width: min(82vw, 280px);
    transform: translateX(-100%);
  }
  .sidebar.ouverte { transform: translateX(0); box-shadow: var(--ombre-forte); }
  .sidebar-nom, .sidebar-section-titre, .sidebar-liens li a span,
  .sidebar-utilisateur-texte, .sidebar-reduire { display: revert; }
  .sidebar-reduire { display: none; }
  html[data-sidebar="reduit"] .sidebar-nom,
  html[data-sidebar="reduit"] .sidebar-section-titre,
  html[data-sidebar="reduit"] .sidebar-liens li a span,
  html[data-sidebar="reduit"] .sidebar-utilisateur-texte { display: revert; }
  html[data-sidebar="reduit"] .sidebar-liens li a,
  html[data-sidebar="reduit"] .sidebar-entete,
  html[data-sidebar="reduit"] .sidebar-utilisateur { justify-content: flex-start; }

  .sidebar-fond.ouvert { display: block; }

  .zone-principale, html[data-sidebar="reduit"] .zone-principale { margin-left: 0; }

  .entete { padding: 0 14px; gap: 8px; }
  .entete .entete-burger { display: flex; }
  .entete-titre { display: none; }
  .entete-recherche { display: none; }
  .profil-texte { display: none; }

  .contenu { padding: 16px 14px 32px; }
  .titre-page { font-size: 1.2rem; }

  .grille-cartes { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .stat-carte { padding: 12px 14px; }
  .stat-carte .valeur { font-size: 1.2rem; }

  .carte { padding: 14px; }

  .ligne-champs { flex-direction: column; gap: 0; }
  .ligne-champs > .champ { min-width: 0; }

  .barre-actions { align-items: stretch; }
  .barre-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }

  th, td { padding: 8px 9px; font-size: .82rem; }

  .notif-menu { position: fixed; left: 10px; right: 10px; top: var(--entete-hauteur); min-width: 0; max-width: none; }
}

@media (min-width: 641px) {
  .profil-texte { display: block; }
}