/* Sahti — identité visuelle propre. Premium, aéré, très lisible au guichet comme sur téléphone.
   Propriétés logiques partout : l'interface s'inverse proprement en arabe (RTL). */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url("/fonts/noto-sans-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --nuit: #0b2545;
  --encre: #13233a;
  --encre-2: #45556b;
  --muet: #6f7f94;
  --fond: #f4f7fb;
  --fond-2: #eef3f9;
  --surface: #ffffff;
  --trait: #e2e8f1;
  --trait-fort: #cfd9e6;
  --bleu: #1366d6;
  --bleu-fonce: #0d4fac;
  --bleu-pale: #eaf2fe;
  --bleu-pale-2: #d7e6fd;
  --menthe: #0f9d74;
  --menthe-pale: #e3f6ef;
  --rouge: #c8372d;
  --rouge-pale: #fdecea;
  --ambre: #b26a00;
  --ambre-pale: #fff4e0;
  --violet: #5b45c4;
  --violet-pale: #eeebfc;
  --r-s: 8px; --r: 12px; --r-l: 18px;
  --ombre-1: 0 1px 2px rgba(15, 38, 72, .05);
  --ombre-2: 0 1px 2px rgba(15, 38, 72, .04), 0 10px 30px rgba(15, 38, 72, .07);
  --ombre-3: 0 24px 64px rgba(11, 37, 69, .22);
  --police: "Inter", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
[dir="rtl"] { --police: "Noto Sans Arabic", "Inter", Tahoma, system-ui, sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--police); color: var(--encre); background: var(--fond); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0; letter-spacing: -.02em; font-weight: 700; color: var(--nuit); }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; font-weight: 650; color: var(--nuit); letter-spacing: -.01em; }
h3 { font-size: .8rem; margin: 0 0 .75rem; color: var(--muet); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }
[dir="rtl"] h3 { text-transform: none; letter-spacing: 0; font-size: .95rem; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muet { color: var(--muet); }
.petit-texte { font-size: .82rem; }
.cache { display: none !important; }
.pile { display: flex; flex-direction: column; gap: 1.1rem; }
.ligne { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.grille2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem 1.1rem; }
.icone { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.sous-titre { color: var(--muet); margin: .25rem 0 0; font-size: .95rem; }

/* ── Champs */
label { display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; font-weight: 550; color: var(--encre-2); }
label.radio { flex-direction: row; align-items: center; gap: .5rem; color: var(--encre); font-size: .95rem; font-weight: 500; cursor: pointer; }
label.radio.gros { font-size: 1.02rem; padding: .7rem 1.1rem; border: 1.5px solid var(--trait-fort); border-radius: var(--r); background: var(--surface); min-width: 120px; transition: border-color .15s, background .15s; }
label.radio.gros:has(input:checked) { border-color: var(--bleu); background: var(--bleu-pale); color: var(--bleu-fonce); }
input, select, textarea {
  font: inherit; font-weight: 450; color: var(--encre); background: var(--surface); border: 1.5px solid var(--trait-fort); border-radius: var(--r-s);
  padding: .6rem .8rem; min-height: 44px; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #9aa8ba; }
input:hover, select:hover, textarea:hover { border-color: #b8c6d8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(19, 102, 214, .14); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(19, 102, 214, .35); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.15rem; height: 1.15rem; accent-color: var(--bleu); }

/* ── Boutons */
button, .bouton {
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 42px; padding: .5rem 1.05rem; border-radius: var(--r-s); border: 1.5px solid var(--trait-fort); background: var(--surface);
  color: var(--encre); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
button:hover, .bouton:hover { border-color: #aebdd0; background: #fbfcfe; text-decoration: none; }
button:active, .bouton:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: progress; }
.primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; box-shadow: 0 1px 2px rgba(19, 102, 214, .25); }
.primaire:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }
.primaire.danger, button.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.primaire.danger:hover { background: #a92b22; border-color: #a92b22; }
.lien { background: none; border-color: transparent; color: var(--bleu); padding-inline: .5rem; box-shadow: none; }
.lien:hover { background: var(--bleu-pale); border-color: transparent; }
.petit { min-height: 34px; padding: .25rem .75rem; font-size: .86rem; }
.grand-btn { min-height: 52px; padding: .7rem 1.5rem; font-size: 1.02rem; border-radius: var(--r); }
.btn-icone { min-height: 36px; width: 36px; padding: 0; font-size: 1.4rem; line-height: 1; background: none; border: none; color: var(--muet); border-radius: 50%; }
.btn-icone:hover { background: var(--fond-2); }
.actions { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.actions-cellule { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ── En-tête */
.entete { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--trait);
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; min-height: 68px; position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: .7rem; }
.marque strong { display: block; font-size: 1.15rem; color: var(--nuit); letter-spacing: -.02em; line-height: 1.1; }
.marque small { display: block; font-size: .76rem; color: var(--muet); font-weight: 500; white-space: nowrap; }
.marque:hover { text-decoration: none; }
.logo { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, #0b2545 0%, #1366d6 100%); display: inline-grid; place-items: center; flex: none; box-shadow: 0 6px 16px rgba(19, 102, 214, .28); }
.logo svg { width: 20px; height: 20px; stroke: #fff; }
.logo.grand { width: 64px; height: 64px; border-radius: 18px; }
.logo.grand svg { width: 34px; height: 34px; }
.nav { display: flex; gap: .15rem; flex: 1; flex-wrap: nowrap; align-self: stretch; align-items: center; overflow-x: auto; scrollbar-width: none; }
.nav a { display: inline-flex; align-items: center; gap: .45rem; color: var(--encre-2); padding: .5rem .8rem; border-radius: 999px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.nav a:hover { background: var(--fond-2); color: var(--nuit); text-decoration: none; }
.nav a.actif { background: var(--bleu-pale); color: var(--bleu-fonce); }
.compte { display: flex; align-items: center; gap: .35rem; }
.avatar-compte { display: flex; align-items: center; gap: .6rem; margin-inline-end: .4rem; }
.avatar-compte .qui { display: flex; flex-direction: column; font-size: .86rem; line-height: 1.2; text-align: start; }
.avatar-compte .qui strong { font-weight: 650; color: var(--nuit); }
.avatar-compte .qui small { color: var(--muet); }
.entete .lien { color: var(--encre-2); font-size: .86rem; }
.entete .lien:hover { color: var(--bleu-fonce); }
.principal { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.titre-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panneau { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-l); padding: 1.35rem 1.5rem; box-shadow: var(--ombre-2); }
.panneau.plat { box-shadow: var(--ombre-1); }

/* ── Avatars à initiales */
.avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: #fff; }
.avatar.petit { width: 32px; height: 32px; font-size: .78rem; }
.avatar.grand { width: 64px; height: 64px; font-size: 1.35rem; }
.av-0 { background: #1366d6; } .av-1 { background: #0f9d74; } .av-2 { background: #7a4fd6; } .av-3 { background: #d0632a; }
.av-4 { background: #0e7490; } .av-5 { background: #b8326b; } .av-6 { background: #4b6b8a; } .av-7 { background: #2f7d32; }
.avatar.medecin { background: var(--bleu-pale); color: var(--bleu-fonce); }

/* ── Connexion */
.ecran-connexion { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--surface); }
.connexion-visuel { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 10% 0%, #1d77ea 0%, transparent 60%), linear-gradient(160deg, #0b2545 0%, #0f3d78 55%, #1366d6 100%);
  color: #fff; padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.connexion-visuel::after { content: ""; position: absolute; inset-inline-end: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.connexion-visuel .marque strong { color: #fff; font-size: 1.5rem; }
.connexion-visuel .marque small { color: rgba(255, 255, 255, .75); font-size: .9rem; }
.connexion-visuel h2 { color: #fff; font-size: 2.1rem; line-height: 1.2; letter-spacing: -.03em; max-width: 30ch; margin: 2.5rem 0 1rem; font-weight: 700; }
.atouts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; max-width: 42ch; }
.atouts li { display: flex; gap: .85rem; align-items: flex-start; color: rgba(255, 255, 255, .9); }
.atouts .pastille { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; flex: none; }
.atouts strong { display: block; color: #fff; }
.connexion-pied { position: relative; z-index: 1; font-size: .82rem; color: rgba(255, 255, 255, .6); }
.connexion-formulaire { display: grid; place-items: center; padding: 2rem; }
.carte-connexion { width: min(400px, 100%); display: flex; flex-direction: column; gap: 1.25rem; }
.carte-connexion h1 { font-size: 1.75rem; }
.ecran-centre { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--fond); }
.ecran-centre .carte-connexion { background: var(--surface); padding: 2.2rem; border-radius: var(--r-l); box-shadow: var(--ombre-2); border: 1px solid var(--trait); }

/* ── Badges */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .62rem; border-radius: 999px; font-size: .76rem; font-weight: 650;
  background: var(--fond-2); color: var(--encre-2); text-decoration: none; white-space: nowrap; line-height: 1.5; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.sans-point::before { display: none; }
.badge.vert, .st-termine { background: var(--menthe-pale); color: #0b7a5a; }
.badge.rouge, .st-absent, .prio-urgence { background: var(--rouge-pale); color: var(--rouge); }
.badge.bleu, .st-arrive, .prio-nouveau { background: var(--bleu-pale); color: var(--bleu-fonce); }
.st-en_cours { background: var(--violet-pale); color: var(--violet); }
.st-annule, .badge.gris, .prio-normal, .st-prevu { background: var(--fond-2); color: var(--encre-2); }
.prio-suivi, .badge.alerte-badge { background: var(--ambre-pale); color: var(--ambre); }
a.badge:hover { text-decoration: none; filter: brightness(.97); }
.puces { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }

/* ── Alertes, toasts */
.alerte { padding: .85rem 1.05rem; border-radius: var(--r); font-size: .93rem; display: flex; gap: .7rem; align-items: flex-start; border: 1px solid transparent; }
.alerte > .icone { margin-top: .12rem; }
.alerte.err { background: var(--rouge-pale); border-color: #f6cfcb; color: #8c241c; }
.alerte.ok { background: var(--menthe-pale); border-color: #bfe8d9; color: #0a6447; }
.alerte.info { background: var(--bleu-pale); border-color: var(--bleu-pale-2); color: #0d3f86; }
.alerte.attention { background: var(--ambre-pale); border-color: #f6dfb4; color: #7a4800; flex-direction: column; gap: .4rem; }
#toasts { position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; max-width: min(420px, 90vw); }
.toast { padding: .85rem 1.1rem; border-radius: var(--r); background: var(--nuit); color: #fff; box-shadow: var(--ombre-3); font-weight: 600; display: flex; gap: .6rem; align-items: center; animation: monte .25s ease-out; }
.toast.err { background: var(--rouge); }
@keyframes monte { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Modale */
.modale-fond { position: fixed; inset: 0; background: rgba(11, 37, 69, .42); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 1rem; z-index: 50; animation: fondu .15s; }
@keyframes fondu { from { opacity: 0; } }
.modale { background: var(--surface); border-radius: 20px; width: min(540px, 100%); max-height: 92vh; overflow: auto; padding: 1.5rem 1.6rem 1.6rem; box-shadow: var(--ombre-3); animation: monte .2s ease-out; }
.modale.large { width: min(880px, 100%); }
.modale-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modale-tete h2 { margin: 0; font-size: 1.25rem; }
fieldset { border: 1px solid var(--trait); border-radius: var(--r); padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; margin: 0; }
legend { font-weight: 650; padding: 0 .35rem; color: var(--nuit); }
.ori-ligne { display: flex; flex-direction: column; gap: .35rem; }
dl.resume { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.25rem; margin: 0; }
dl.resume dt { color: var(--muet); font-size: .88rem; }
dl.resume dd { margin: 0; font-weight: 600; }
.gros-mdp { font-size: 1.35rem; letter-spacing: .06em; user-select: all; background: var(--fond-2); padding: .3rem .6rem; border-radius: var(--r-s); }

/* ── Accueil : recherche par carte (héros) */
.heros { background: linear-gradient(135deg, #0b2545 0%, #12407e 60%, #1366d6 100%); color: #fff; border-radius: 22px; padding: 2rem 2rem 2.2rem; box-shadow: var(--ombre-2); position: relative; overflow: hidden; }
.heros::after { content: ""; position: absolute; inset-inline-end: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.heros h1 { color: #fff; font-size: 1.7rem; }
.heros .sous-titre { color: rgba(255, 255, 255, .8); }
.barre-recherche { position: relative; z-index: 1; display: flex; gap: .6rem; margin-top: 1.4rem; background: #fff; border-radius: 16px; padding: .45rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.barre-recherche .champ-icone { display: flex; align-items: center; gap: .6rem; flex: 1; padding-inline-start: .8rem; color: var(--muet); }
.barre-recherche input { border: none; box-shadow: none; flex: 1; min-height: 52px; font-size: 1.25rem; padding: 0; background: transparent; }
.barre-recherche input:focus { box-shadow: none; }
.saisie-carte { font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.etat-carte { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--trait); }
.etat-carte .numero { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; color: var(--nuit); letter-spacing: .06em; }
.carte-soins { display: flex; align-items: center; gap: .9rem; }
.carte-soins .puce-carte { width: 54px; height: 38px; border-radius: 8px; background: linear-gradient(135deg, #1366d6, #0b2545); display: grid; place-items: center; color: #fff; }
.liste-patients { display: flex; flex-direction: column; gap: .6rem; }
.patient-ligne { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); padding: .9rem 1.1rem; transition: border-color .15s, box-shadow .15s; }
.patient-ligne:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-1); }
.patient-ligne.urgent { border-inline-start: 4px solid var(--ambre); }
.patient-gauche { display: flex; align-items: center; gap: .9rem; }
.patient-id { display: flex; flex-direction: column; gap: .05rem; }
.patient-id strong { font-size: 1.04rem; color: var(--nuit); font-weight: 650; }

/* ── Réservation */
.etapes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .2rem; }
.etape { display: flex; align-items: center; gap: .5rem; color: var(--muet); font-weight: 600; font-size: .9rem; }
.etape .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fond-2); color: var(--muet); font-size: .8rem; }
.etape.faite .num { background: var(--menthe); color: #fff; }
.etape.active { color: var(--nuit); }
.etape.active .num { background: var(--bleu); color: #fff; box-shadow: 0 0 0 4px var(--bleu-pale); }
.etape-sep { width: 28px; height: 2px; background: var(--trait); border-radius: 2px; }
.resume-patient { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.resume-patient strong { font-size: 1.12rem; color: var(--nuit); }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .65rem; margin-bottom: 1.1rem; }
.spec { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 64px; text-align: start; border-radius: var(--r); padding: .7rem 1rem; gap: .1rem; }
.spec small { font-weight: 500; color: var(--muet); font-size: .76rem; }
.spec.choisie { border: 2px solid var(--bleu); background: var(--bleu-pale); color: var(--bleu-fonce); padding: calc(.7rem - 1px) calc(1rem - 1px); }
.medecins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.medecin-choix { justify-content: flex-start; gap: .85rem; text-align: start; min-height: 76px; border-radius: var(--r); padding: .8rem 1rem; white-space: normal; }
.medecin-choix .infos { display: flex; flex-direction: column; gap: .05rem; }
.medecin-choix strong { color: var(--nuit); }
.medecin-choix small { font-weight: 500; color: var(--muet); }
.medecin-choix .premier { font-weight: 600; font-size: .82rem; color: var(--menthe); display: inline-flex; gap: .3rem; align-items: center; }
.medecin-choix.choisie { border: 2px solid var(--bleu); background: var(--bleu-pale); padding: calc(.8rem - 1px) calc(1rem - 1px); }
.urgence { flex-direction: row; align-items: center; gap: .5rem; color: var(--rouge); font-weight: 650; margin: .4rem 0 1.1rem; padding: .6rem .8rem; border-radius: var(--r-s); background: var(--rouge-pale); width: fit-content; }
.urgence-form { border-color: #f3c9c4; background: #fffafa; }
.agenda-semaine { border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; background: var(--surface); margin-bottom: .9rem; }
.agenda-tete { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--trait); background: #fbfcfe; gap: .5rem; flex-wrap: wrap; }
.agenda-tete strong { color: var(--nuit); }
.grille-jours { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); overflow-x: auto; }
.jour-col { display: flex; flex-direction: column; gap: .4rem; padding: .7rem .5rem 1rem; border-inline-end: 1px solid var(--trait); min-height: 160px; }
.jour-col:last-child { border-inline-end: none; }
.jour-tete { text-align: center; padding-bottom: .5rem; margin-bottom: .2rem; border-bottom: 1px dashed var(--trait); }
.jour-tete .jour-nom { display: block; font-weight: 650; color: var(--nuit); text-transform: capitalize; font-size: .9rem; }
.jour-tete .jour-date { display: block; color: var(--muet); font-size: .8rem; text-transform: capitalize; }
.jour-tete small { display: block; color: var(--muet); font-size: .72rem; font-family: var(--mono); margin-top: .1rem; }
.jour-vide { text-align: center; color: #a7b3c3; font-size: .85rem; padding-top: .6rem; }
.creneau { min-height: 38px; padding: .2rem; font-weight: 650; font-size: .92rem; border-radius: 10px; background: var(--bleu-pale); color: var(--bleu-fonce); border: none; font-variant-numeric: tabular-nums; }
.creneau:hover { background: var(--bleu); color: #fff; }
.voir-plus { width: 100%; }

/* ── Tables */
.table-defile { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-1); }
.panneau .table-defile { box-shadow: none; border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th { text-align: start; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muet); background: #fafbfd; padding: .75rem .9rem; border-bottom: 1px solid var(--trait); white-space: nowrap; font-weight: 650; }
[dir="rtl"] th { text-transform: none; letter-spacing: 0; font-size: .85rem; }
td { padding: .8rem .9rem; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
tbody tr:hover td { background: #fbfcfe; }
tr:last-child td { border-bottom: none; }
td.num { text-align: end; font-variant-numeric: tabular-nums; }
tr.inactif td { opacity: .55; }
.st-ligne-termine td, .st-ligne-annule td { color: var(--muet); }
.st-ligne-annule td { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .2); }
.cellule-patient { display: flex; align-items: center; gap: .7rem; }
.cellule-patient a { font-weight: 650; color: var(--nuit); }
.liste-simple { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.liste-simple li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .55rem .75rem; background: #fafbfd; border-radius: var(--r-s); }

/* ── Agenda du médecin */
.liste-agenda { display: flex; flex-direction: column; gap: .6rem; }
.rdv-carte { display: grid; grid-template-columns: 84px auto 1fr auto; gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); padding: .85rem 1.1rem; box-shadow: var(--ombre-1); position: relative; }
.rdv-carte::before { content: ""; position: absolute; inset-block: .7rem; inset-inline-start: 0; width: 4px; border-radius: 4px; background: var(--trait-fort); }
.rdv-carte.prio-bord-urgence::before { background: var(--rouge); }
.rdv-carte.prio-bord-suivi::before { background: var(--ambre); }
.rdv-carte.prio-bord-nouveau::before { background: var(--bleu); }
.rdv-carte.st-ligne-termine, .rdv-carte.st-ligne-absent { opacity: .62; }
.rdv-carte.st-ligne-arrive { border-color: var(--bleu-pale-2); background: linear-gradient(90deg, #f7fbff, #fff); }
.rdv-carte.st-ligne-en_cours { border-color: #d6cff7; background: linear-gradient(90deg, #faf8ff, #fff); }
.rdv-heure { font-size: 1.25rem; font-weight: 700; color: var(--nuit); font-variant-numeric: tabular-nums; }
.rdv-corps { display: flex; flex-direction: column; gap: .05rem; }
.rdv-corps a { color: var(--nuit); }

/* ── Fiche */
.fiche-tete { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.fiche-tete .id { display: flex; flex-direction: column; gap: .2rem; }
.grille-fiche { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; }

/* ── Tableau de bord */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; }
.tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-l); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; box-shadow: var(--ombre-1); }
.tuile .tuile-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bleu-pale); color: var(--bleu); margin-bottom: .2rem; }
.tuile-val { font-size: 1.85rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--nuit); letter-spacing: -.03em; line-height: 1.1; }
.tuile-lib { color: var(--muet); font-size: .86rem; font-weight: 500; }
.tuile.attention .tuile-icone { background: var(--ambre-pale); color: var(--ambre); }
.tuile.attention .tuile-val { color: var(--ambre); }
.tuile.mauvais .tuile-icone { background: var(--rouge-pale); color: var(--rouge); }
.tuile.mauvais .tuile-val { color: var(--rouge); }
.histo { display: flex; align-items: flex-end; gap: 4px; height: 200px; padding-top: .5rem; }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 6px; }
.histo-barre { width: 100%; max-width: 28px; background: var(--bleu-pale-2); border-radius: 6px 6px 2px 2px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 2px; overflow: hidden; }
.histo-plein { background: linear-gradient(180deg, #2a7cf0, var(--bleu)); }
.histo-lib { font-size: .66rem; color: var(--muet); font-family: var(--mono); margin-top: 4px; }
.legende { display: flex; gap: 1rem; font-size: .82rem; color: var(--muet); margin-top: .6rem; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.jauge-ligne { display: flex; align-items: center; gap: .6rem; }
.jauge-ligne .mono { font-size: .82rem; font-weight: 700; min-width: 3.2em; }
.jauge { background: var(--fond-2); border-radius: 999px; height: 8px; min-width: 110px; flex: 1; overflow: hidden; }
.jauge-plein { height: 100%; background: var(--menthe); border-radius: 999px; }
.jauge-plein.sature { background: var(--ambre); }
.planning-semaine td { min-width: 96px; vertical-align: top; }
.seance { background: var(--bleu-pale); color: var(--bleu-fonce); border-radius: 6px; padding: .12rem .45rem; margin-bottom: .25rem; display: inline-block; font-weight: 600; }
.note-secret { display: flex; align-items: center; gap: .5rem; color: var(--muet); font-size: .88rem; }

/* ── Convocation */
.convocation { max-width: 760px; margin: 2rem auto; background: #fff; padding: 2.2rem 2.6rem; border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-2); }
.convoc-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 2px solid var(--nuit); padding-bottom: 1.1rem; }
.convoc-col { display: flex; flex-direction: column; gap: .15rem; font-size: .92rem; }
.convoc-titre { text-align: center; margin: 1.5rem 0; font-size: 1.45rem; }
.convoc-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.convoc-corps p { margin: .35rem 0; }
.convoc-date { margin: 1.6rem 0; text-align: center; background: var(--bleu-pale); border-radius: var(--r-l); padding: 1.2rem; font-size: 1.1rem; text-transform: capitalize; color: var(--nuit); }
.convoc-heure { font-size: 2.4rem; font-weight: 800; color: var(--bleu-fonce); letter-spacing: -.02em; }
.convoc-note { font-size: .88rem; color: var(--encre-2); text-align: center; margin: .2rem 0; }
.convoc-ref { text-align: center; color: var(--muet); font-size: .78rem; margin-top: 1rem; }

@media (max-width: 980px) {
  .ecran-connexion { grid-template-columns: 1fr; }
  .connexion-visuel { padding: 2rem; min-height: auto; }
  .connexion-visuel h2 { font-size: 1.5rem; margin-top: 1.2rem; }
  .atouts { display: none; }
}
@media (max-width: 1180px) { .entete .marque small { display: none; } }
@media (max-width: 760px) {
  .entete { gap: .5rem; padding: .5rem .9rem; min-height: 0; }
  .nav { order: 3; flex: 1 1 100%; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; }
  .compte { margin-inline-start: auto; }
  .patient-ligne .actions { width: 100%; flex-wrap: nowrap; }
  .patient-ligne .actions > * { flex: 1; }
  .etat-carte > span[style] { display: none; }
  .avatar-compte .qui { display: none; }
  .principal { padding: 1.2rem .9rem 5rem; }
  .heros { padding: 1.4rem 1.1rem 1.5rem; border-radius: 18px; }
  .barre-recherche { flex-direction: column; }
  .grille-fiche, .convoc-corps { grid-template-columns: 1fr; }
  .rdv-carte { grid-template-columns: 64px 1fr; }
  .rdv-carte .actions { grid-column: 1 / -1; }
  .rdv-carte .avatar { display: none; }
  .grille-jours { grid-template-columns: repeat(7, 96px); }
}
@media print {
  .entete, #toasts, .sans-impression { display: none !important; }
  body { background: #fff; }
  .convocation { border: none; margin: 0; padding: 0; box-shadow: none; }
}