/* Clinique Plume / Marine clair, adapte de prototypes/marque. Une seule
   teinte (--hue) colore fonds, filets, encres, accent et ombres : Otto en
   bleu (262.5), ARA en sarcelle (plus bas). L'oreille gauche reste bleue
   partout (--ear-g : couleur clinique, comme l'audiogramme). */
:root { color-scheme: light;
  --hue: 262.5;
  --bg: oklch(0.94 0.018 var(--hue));
  --surface: oklch(0.99 0.0047 var(--hue));
  --surface-2: oklch(0.95 0.0216 var(--hue));
  --line: oklch(0.89 0.0252 var(--hue));
  --line-2: oklch(0.8 0.0288 var(--hue));
  --ink: oklch(0.22 0.025 var(--hue));
  --ink-2: oklch(0.4 0.025 var(--hue));
  --ink-3: oklch(0.5 0.0225 var(--hue));
  --accent: oklch(0.43 0.14 var(--hue));
  --accent-ink: oklch(0.995 0.0024 var(--hue));
  --accent-soft: oklch(0.94 0.0286 var(--hue));
  --focus: oklch(0.49 0.14 var(--hue));
  --accent-2: oklch(0.5 0.1891 32.3);
  --accent-2-ink: oklch(0.995 0.0025 32.3);
  --accent-2-soft: oklch(0.95 0.0253 32.3);
  --chrome: oklch(0.24 0.07 var(--hue));
  --chrome-ink: oklch(0.97 0.01 var(--hue));
  --chrome-ink-2: oklch(0.8 0.035 var(--hue));
  --chrome-field: oklch(0.31 0.06 var(--hue));
  --chrome-line: oklch(0.35 0.055 var(--hue));
  --chrome-active: oklch(0.86 0.0764 32.3);
  --ok: oklch(0.5 0.11 152);
  --ok-soft: oklch(0.955 0.035 152);
  --warn: oklch(0.53 0.1169 68);
  --warn-soft: oklch(0.96 0.0424 85);
  --off: oklch(0.48 0.012 var(--hue));
  --off-soft: oklch(0.94 0.006 var(--hue));
  --bad: oklch(0.515 0.193 32.3);
  --bad-soft: oklch(0.955 0.0227 32.3);
  --bad-ink: oklch(1 0 0);
  --ear-d: oklch(0.515 0.193 32.3);
  --ear-d-soft: oklch(0.95 0.0253 32.3);
  --ear-g: oklch(0.5 0.13 262.5);
  --ear-g-soft: oklch(0.95 0.0238 262.5);
  --av-base: oklch(0.94 0.0286 var(--hue));
  --av-ink: oklch(0.4 0.09 var(--hue));
}
/* ARA (audiologie) : la même gamme en sarcelle (teinte 194), posée par
   page.html (`<html data-product="audiology">`) sur toute page de marque
   ARA, connexion comprise. Le sarcelle sort de la gamme sRGB aux chromas
   d'Otto : accent, focus et bandeau (chrome) baissent de chroma, et les
   fonds, filets et teintes douces aussi, pour rester gris clair et non
   menthe. Mêmes luminances qu'Otto sauf l'accent (0,45 : #006262, près de
   #0f6b6b). Contrastes : blanc sur accent 7,2:1, accent sur surface 7,0:1,
   sur --bg 6,0:1, sur accent-soft 6,0:1, --focus sur surface 5,6:1,
   --ink-3 sur --bg 5,0:1. Otto ne porte pas l'attribut : inchangé. */
:root[data-product="audiology"] {
  --hue: 194;
  --bg: oklch(0.94 0.011 var(--hue));
  --surface: oklch(0.99 0.004 var(--hue));
  --surface-2: oklch(0.95 0.012 var(--hue));
  --line: oklch(0.89 0.015 var(--hue));
  --line-2: oklch(0.8 0.018 var(--hue));
  --ink: oklch(0.22 0.022 var(--hue));
  --ink-2: oklch(0.4 0.022 var(--hue));
  --ink-3: oklch(0.5 0.02 var(--hue));
  --accent: oklch(0.45 0.077 var(--hue));
  --accent-soft: oklch(0.94 0.017 var(--hue));
  --focus: oklch(0.5 0.085 var(--hue));
  --chrome: oklch(0.26 0.04 var(--hue));
  --chrome-ink: oklch(0.97 0.008 var(--hue));
  --chrome-ink-2: oklch(0.8 0.025 var(--hue));
  --chrome-field: oklch(0.32 0.042 var(--hue));
  --chrome-line: oklch(0.36 0.038 var(--hue));
  --av-base: oklch(0.94 0.017 var(--hue));
  --av-ink: oklch(0.4 0.065 var(--hue));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs, 15px)/1.5 var(--font);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:where(button, input) { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
time, .mono, .slot-time, .stat-n, .queue-count, .count { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: .94em; letter-spacing: 0; white-space: nowrap; }
[hidden] { display: none !important; }
.is-hidden { display: none !important; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:where(a, button, .slot-btn, .item, .memo) { transition: background-color 120ms, color 120ms, border-color 120ms, box-shadow 120ms; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.sprite { display: none; }
svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.skip {
  position: fixed; z-index: 100; left: 12px; top: -60px;
  padding: 10px 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
}
.skip:focus { top: 12px; }
.main:focus { outline: none; }



.brand { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; }
.brand-name b { font-weight: inherit; }

.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search input { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; outline: none; line-height: normal; }
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
.search-label { display: inline-grid; place-items: center; color: var(--ink-3); cursor: text; }

.context { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site, .me { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.me-text { display: grid; line-height: 1.2; text-align: left; }
.me-text small { color: var(--ink-3); }

.nav ul { display: flex; }
.nav a { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nav kbd { display: none; }
.nav-badge { display: inline-grid; place-items: center; min-width: 1.6em; padding: 0 .4em; border-radius: 99px; font-size: 11px; font-weight: 650; background: var(--bad); color: var(--bad-ink, #fff); line-height: 1.55; }

kbd {
  font: 500 11px/1 var(--font-mono);
  padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  color: var(--ink-2); background: var(--surface); white-space: nowrap;
}

.section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-head .more { margin-left: auto; }
.more { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.section-sub { color: var(--ink-3); }
.section-head .section-sub { margin-left: auto; }



:root {
  --preview-mode: modal;

  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-head: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Noms de personnes en gras (patiente dans sa barre, personne connectée dans la barre du
     haut) : Inter demi-gras (@font-face ci-dessous), puis la police des titres. */
  --font-name: "Inter Noms", var(--font-head);
  --fs: 14.5px;
  --rail: 236px;
  --top: 60px;
  --card: 12px;
}


/* Inter (OFL, web/fonts/), une seule graisse, 600 : le gras de Segoe UI, trop lourd et serré,
   brouillait les noms. Sous-ensemble latin + français (≈ 17 Ko), servi par le serveur à
   /static/ (la CSP refuse tout autre hôte), préchargé par page.html là où un nom s'affiche.
   swap : le nom paraît tout de suite dans la police du système, puis passe à Inter. */
@font-face { font-family: "Inter Noms"; src: url("/static/inter-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.mono { font-family: inherit; font-size: inherit; }
.device-serial .mono { font-family: var(--font-mono); font-size: .95em; }



.app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: var(--top) 1fr;
  grid-template-areas: "top top" "nav main";
  min-height: 100vh;
}

.topbar {
  grid-area: top; position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) auto; align-items: center;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 calc(100% - 112px), var(--accent-2) calc(100% - 112px));
}
.brand { height: 100%; padding: 0 20px; font: 600 15px/1 var(--font-head); letter-spacing: -.01em; color: var(--ink); }
.brand-name b { font-weight: 700; }
.brand-mark {
  width: 32px; height: 32px; padding: 4px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line-2);
}

.search {
  justify-self: center; width: min(560px, calc(100% - 48px));
  height: var(--search-h, 38px); padding: 0 8px 0 11px; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.search:hover { border-color: var(--line-2); }
.search:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search input { height: 100%; font-size: 14px; }
.search-label svg { width: 17px; height: 17px; }
.search-kbd { font-size: 10.5px; }

.context { padding: 0 16px 0 8px; gap: 4px; }
.site { height: 34px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); font-weight: 550; font-size: 13.5px; }
.site svg { width: 16px; height: 16px; color: var(--accent); }
.site:hover, .me:hover { background: var(--surface-2); }
.me { height: 42px; padding: 0 8px 0 4px; border-radius: 10px; }
.me-av { width: 32px; height: 32px; font-size: 11.5px; }
.me-text strong { font-size: 13px; font-weight: 600; }
.me-text small { font-size: 11.5px; }

.nav {
  grid-area: nav; position: sticky; top: var(--top); height: calc(100vh - var(--top));
  padding: var(--nav-pad, 14px 12px 16px); border-right: 1px solid var(--line); background: var(--surface);
}
.nav ul { flex-direction: column; gap: 2px; height: 100%; }
.nav-settings { margin-top: auto; }
.nav a { position: relative; height: var(--nav-h, 38px); padding: 0 12px; border-radius: 9px; color: var(--ink-2); font-weight: 520; }
.nav a svg { width: 18px; height: 18px; color: var(--ink-3); }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav a[aria-current]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav a[aria-current] svg { color: var(--accent); }
.nav-badge { margin-left: auto; }



.main {
  grid-area: main; width: 100%; max-width: 1380px;
  padding: var(--main-pad, 30px 40px 96px);
}

/* Pas de `grid-area` sur .hero : la page est une colonne flex (plus bas),
   et un nom de zone inconnu d'une grille de page (.lifecycle) y place le
   titre dans des pistes implicites, au milieu à droite. */
.eyebrow { font-size: 13px; font-weight: 550; color: var(--ink-3); }
.eyebrow time { color: var(--accent); }
h1 { margin-top: 4px; font: 650 var(--h1-fs, 30px)/1.15 var(--font-head); letter-spacing: -.024em; }
.lede { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.glance {
  margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card);
}
.stat { padding: 14px 20px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat dt { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.stat dd { display: grid; }
.stat-n { font: 650 22px/1.35 var(--font-head); letter-spacing: -.015em; }
.stat-sub { font-size: 12.5px; color: var(--ink-3); }
.stat-sub.bad { color: var(--bad); }
.stat:nth-child(3) .stat-n { color: var(--bad); }

h2 { font: 650 15.5px/1.3 var(--font-head); letter-spacing: -.01em; }
.count { font-size: 12px; font-weight: 650; color: var(--ink-2); background: var(--surface-2); border-radius: 99px; padding: 2px 8px; }
.more { color: var(--accent); font-size: 13.5px; font-weight: 600; border-radius: 6px; }
.more svg { width: 15px; height: 15px; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.section-sub { font-size: 13px; }

/* Pages métier : le rail, les cartes et le filet restent ceux de Plume. */
.main { display: flex; flex-direction: column; gap: var(--main-gap, 24px); min-width: 0; }
.hero { width: 100%; }
.topbar { grid-template-columns: var(--rail) minmax(220px, 1fr) auto; }
.brand-mark img { object-fit: contain; max-width: 100%; max-height: 100%; }
.search { width: min(520px, calc(100% - 32px)); }
.search-submit { display: grid; place-items: center; padding: 4px; color: var(--accent); }
.context { gap: 16px; }
.clinic-switch { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px !important; border: 1.5px solid color-mix(in oklch, var(--accent) 45%, var(--line)); border-radius: 999px !important; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 700; max-width: 340px; }
.clinic-switch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinic-switch svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.clinic-menu > summary.clinic-switch:hover, .clinic-menu[open] > summary.clinic-switch { background: color-mix(in oklch, var(--accent) 16%, var(--surface)); }
.languages { display: flex; gap: 6px; font-size: 12px; }
.languages a { padding: 4px 1px; color: var(--ink-3); }
.languages a[aria-current] { color: var(--accent); font-weight: 750; text-decoration: underline; text-underline-offset: 5px; }
.user-menu { position: relative; }
.user-menu summary { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--accent); background: var(--accent-soft); }
.user-menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: 42px; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--surface); box-shadow: 0 10px 25px #18284416; }
.menu-panel strong { display: block; margin-bottom: 12px; }
.menu-panel button { color: var(--accent); }
.card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--card); overflow: hidden; }
.card-head { padding: var(--card-head-pad, 17px 22px); border-bottom: 1px solid var(--line); }
.card-body { padding: var(--card-pad, 22px); }
.card-foot { padding: var(--card-foot-pad, 12px 22px); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--control-pad, 9px 15px); min-height: var(--control-h, 38px); border-radius: 8px; font-weight: 600; font-size: 13px; text-decoration: none; }
.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.primary:hover { background: var(--accent); filter: brightness(1.1); text-decoration: none; }
.secondary { border: 1px solid var(--line); background: var(--surface); color: var(--accent); }
.secondary:hover { background: var(--accent-soft); text-decoration: none; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; }
th { color: var(--ink-3); background: var(--surface-2); font-size: 12px; font-weight: 550; padding: var(--th-pad, 11px 22px); white-space: nowrap; }
td { border-top: 1px solid var(--line); padding: var(--td-pad, 15px 22px); font-size: 13.5px; }
tbody tr:hover, tbody tr:focus-within { background: var(--accent-soft); }
.patient-link { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--ink); }
.patient-link svg { margin-left: auto; color: var(--ink-3); width: 13px; }
.empty-state { display: grid; justify-items: center; gap: 14px; padding: 56px 24px; text-align: center; color: var(--ink-2); }
.empty-state > svg { width: 36px; height: 36px; color: var(--accent); }
.empty-state h2 { color: var(--ink); font-size: 20px; }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 22px); }
label { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; }
/* Champs de formulaire : un seul style, identique dans Chrome et Safari. On
   retire l'apparence native et on fixe la hauteur ; la hauteur de ligne égale
   à l'intérieur du champ centre le texte quel que soit le navigateur. Les
   pages ne règlent que la mise en page (largeur, marges) ou ces variables. */
:root { --field-h: 36px; --field-r: 8px; --field-px: 11px; --field-fs: 14px; }
:where(input:is(:not([type]), [type=text], [type=search], [type=number], [type=email], [type=tel], [type=url], [type=password], [type=date], [type=time], [type=datetime-local], [type=month], [type=week]), select, textarea) {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; height: var(--field-h); margin: 0;
  padding: 0 var(--field-px);
  border: 1px solid var(--line); border-radius: var(--field-r);
  background-color: var(--surface); color: var(--ink); box-shadow: none;
  font: 400 var(--field-fs)/calc(var(--field-h) - 2px) var(--font);
}
/* Chevron dessiné par nous, couleur de --ink-3 : deux traits en dégradé, car
   la politique de sécurité refuse les images data:. */
:where(select) {
  --chevron: 5px;
  padding-right: calc(var(--field-px) + 2 * var(--chevron) + 8px);
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--ink-3) calc(50% - .7px), var(--ink-3) calc(50% + .7px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--ink-3) calc(50% - .7px), var(--ink-3) calc(50% + .7px), transparent calc(50% + 1px));
  background-repeat: no-repeat;
  background-size: var(--chevron) var(--chevron);
  background-position: right calc(var(--field-px) + var(--chevron)) center, right var(--field-px) center;
  text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
:where(textarea) { height: auto; min-height: 88px; padding: 8px var(--field-px); line-height: 1.45; resize: vertical; }
:where(input:is(:not([type]), [type=text], [type=search], [type=number], [type=email], [type=tel], [type=url], [type=password], [type=date], [type=time], [type=datetime-local], [type=month], [type=week]), select, textarea):hover { border-color: var(--line-2); }
:where(input:is(:not([type]), [type=text], [type=search], [type=number], [type=email], [type=tel], [type=url], [type=password], [type=date], [type=time], [type=datetime-local], [type=month], [type=week]), select, textarea):focus { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(input:is(:not([type]), [type=text], [type=search], [type=number], [type=email], [type=tel], [type=url], [type=password], [type=date], [type=time], [type=datetime-local], [type=month], [type=week]), select, textarea):disabled { background-color: var(--surface-2); color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); opacity: 1; cursor: not-allowed; }
:where(input, textarea)::placeholder { color: var(--ink-3); opacity: 1; }
/* Safari : marges et hauteur propres aux champs date et heure. */
:where(input)::-webkit-date-and-time-value { margin: 0; min-height: 0; text-align: left; }
:where(input)::-webkit-datetime-edit, :where(input)::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:where(input)::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
:where(input)::-webkit-search-decoration { -webkit-appearance: none; }
/* Pas de flèches de nombre : Chrome et Safari ne les dessinent pas pareil. */
:where(input)::-webkit-inner-spin-button, :where(input)::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(input[type=number]) { -moz-appearance: textfield; }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); }
/* Champ sous son libellé. */
label :where(input:is(:not([type]), [type=text], [type=search], [type=number], [type=email], [type=tel], [type=url], [type=password], [type=date], [type=time], [type=datetime-local], [type=month], [type=week]), select, textarea) { margin-top: 7px; }
.public { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
.public .main { max-width: 100%; align-items: center; padding-top: 70px; }
.public .topbar { grid-template-columns: var(--rail) 1fr auto; }
.signin-intro { max-width: 500px; text-align: center; margin-bottom: 6px; }
.signin-intro > img { object-fit: contain; margin-bottom: 18px; }
.signin-intro h1 { margin-top: 12px; }
.signin-card { width: min(100%, 420px); padding: 28px; }
.signin-card h2 { margin-bottom: 24px; }
.signin-card .primary { width: 100%; margin-top: 2px; }
/* Mode dev (`/dev/login`) : comptes démo en un clic, repère de l'en-tête. */
.dev-accounts { margin-top: 20px; }
.dev-accounts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dev-accounts .secondary { width: 100%; justify-content: space-between; border-radius: 8px; }
.dev-accounts small { color: var(--ink-3); font-weight: 500; }
.dev-badge { padding: 2px 8px; border: 1px dashed var(--bad); border-radius: 999px; color: var(--bad); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.dev-badge:hover { background: var(--bad-soft); text-decoration: none; }
.error { background: var(--bad-soft); border-left: 3px solid var(--bad); color: var(--bad); padding: 12px 14px; margin-bottom: 18px; border-radius: 4px; }
.clinic-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 820px; }
.clinic-card { display: grid; gap: 20px; padding: 26px; }
.clinic-card > svg { color: var(--accent); width: 24px; height: 24px; }
.breadcrumb .more { margin-left: 0; }
.patient-header h1 { font-size: 28px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.facts dt { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.facts dd { font-weight: 550; overflow-wrap: anywhere; }
/* En-tête du dossier : trois rectangles. Coordonnées à gauche (moitié) ; à droite,
   les audiogrammes au-dessus des aides auditives. */
.patient-header { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.patient-header.no-ears { grid-template-columns: 1fr; }
/* Pas de carte englobante : chaque rectangle est sa propre carte. */
.patient-id, .ear-box { border: 1px solid var(--line); border-radius: var(--card-sm); background: var(--surface); box-shadow: var(--card-shadow); }
.patient-id { display: flex; flex-direction: column; gap: 22px; padding: 20px 22px; }
.patient-id h1 { overflow-wrap: anywhere; }
.patient-facts { align-content: start; gap: 16px 20px; }
.patient-facts > div:nth-last-child(-n+2) { grid-column: 1 / -1; }
.patient-id > .secondary { align-self: start; margin-top: auto; }
.patient-ears { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ear-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.quad { --agm-paper: var(--surface); --ear: var(--ink-3); --ear-line: var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--ear-line); border-top: 4px solid var(--ear); border-radius: calc(var(--card-sm) - 6px); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px oklch(0.3 0.04 var(--hue) / .06); transition: box-shadow .15s; }
.quad:hover { box-shadow: 0 4px 14px oklch(0.3 0.04 var(--hue) / .12); }
.quad.ear-right { --ear: #c62828; --ear-line: oklch(0.86 0.06 25); }
.quad.ear-left { --ear: #1565c0; --ear-line: oklch(0.85 0.06 255); }
/* Audiogramme : même boîte que les aides (.quad : fond blanc, filet d'oreille), hauteur fixe ; le SVG s'y ajuste sans déformation. */
.quad-audio { height: 320px; gap: 4px; padding: 8px 8px 10px; }
/* Vignette dessinée par l'éditeur d'audiogramme (shadow root, option thumbnail). */
.quad-svg { flex: 1; min-height: 0; }
.quad-svg .audiogram-thumb { height: 100%; }
.quad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; }
.quad-ear { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--ear); }
.quad-audio time { font-size: 11.5px; line-height: 1; color: var(--ink-3); }
.quad-tester { overflow: hidden; padding: 0 4px; font-size: 11.5px; line-height: 1.3; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.quad-empty { display: grid; place-items: center; flex: 1; padding: 12px; border: 1px dashed var(--ear-line); border-radius: 6px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.aid-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.aid-top small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.aid-state { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.aid-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ear); }
.aid-state.off { font-weight: 500; color: var(--ink-3); }
.aid-model { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.aid-facts { display: grid; gap: 5px; margin: 0; font-size: 12.5px; }
.aid-facts > div { display: flex; justify-content: space-between; gap: 10px; }
.aid-facts dt { color: var(--ink-3); }
.aid-facts dd { margin: 0; font-weight: 550; text-align: right; overflow-wrap: anywhere; }
.aid-facts dd.muted { font-weight: 400; color: var(--ink-3); }
.lifecycle-intro { margin: 0 0 16px; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: 0 0 12px; white-space: nowrap; color: var(--ink-2); font-size: 13.5px; }
.tabs a[aria-current] { border-bottom: 2px solid var(--accent); color: var(--accent); font-weight: 650; }
.wide { grid-column: 1 / -1; }
.help { font-size: 12px; color: var(--ink-3); margin-top: 8px; font-weight: 400; }
.memo-text { white-space: pre-wrap; color: var(--ink-2); }
.consent-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.consent-grid > div { padding: 20px 22px; border-right: 1px solid var(--line); }
.consent-grid > div:last-child { border: 0; }
h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.badge { display: inline-flex; border-radius: 5px; padding: 3px 8px; font-size: 12px; background: var(--off-soft); color: var(--off); }
.badge.granted { background: var(--ok-soft); color: var(--ok); }
.badge.withdrawn { background: var(--bad-soft); color: var(--bad); }
.history { border-top: 1px solid var(--line); }
.history summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 550; padding: 14px 22px; }
.patient-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px; max-width: 900px; }
.ear.d { color: var(--ear-d); background: var(--ear-d-soft); }
.ear.g { color: var(--ear-g); background: var(--ear-g-soft); }
@media (max-width: 1100px) {
  .main { padding: 28px 24px 60px; }
  .context { gap: 10px; }
  .clinic-switch { max-width: 220px; font-size: 14px; }
  .search-kbd { display: none; }
  .patient-header { grid-template-columns: 1fr; }
  th, td { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 820px) {
  :root { --rail: 68px; }
  .brand { justify-content: center; padding: 0; }
  .brand-name { display: none; }
  .nav { padding: 12px 10px; }
  .nav a { justify-content: center; padding: 0; height: 44px; }
  .nav a[aria-current]::before { left: -10px; }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 640px) {
  .topbar { grid-template-columns: 52px minmax(120px, 1fr) auto; }
  .clinic-switch { display: none; }
  .context { padding-right: 10px; }
  .search { width: calc(100% - 12px); }
  .main { padding: 24px 14px 50px; }
  h1 { font-size: 25px; }
  .glance { grid-template-columns: 1fr; }
  .patient-header .section-head { align-items: start; }
  .patient-header .more { margin: 8px 0 0; }
  .facts, .patient-form, .consent-grid { grid-template-columns: 1fr; }
  /* Téléphone : les deux audiogrammes côte à côte, carrés ; les aides dessous, pleine largeur. */
  .ear-box { padding: 8px; gap: 8px; }
  .ear-box-aid { grid-template-columns: 1fr; }
  .quad-audio { height: 230px; padding: 4px; }
  .quad-audio:has(.quad-empty) { height: 120px; }
  .consent-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .tabs { gap: 18px; }
  .public .main { padding-top: 40px; }
}

/* Appareils par oreille et feuille de route. */
.ear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:24px}
.ear-column{min-width:0}.ear-heading{margin:0 0 12px}.ear-heading .ear{font-size:16px;padding:7px 14px;border-radius:8px;width:auto;height:auto}
.device-card{margin-bottom:14px;overflow:hidden}.device-card .card-head{align-items:flex-start;gap:12px}.device-card h3{font-size:19px;margin:3px 0}
.device-card .facts{gap:18px 16px}.device-serial{margin:0 0 20px;display:flex;gap:12px;flex-wrap:wrap}.device-serial strong{overflow-wrap:anywhere}
.device-actions{border-top:1px solid var(--border,#e0e5eb);margin-top:18px;padding-top:14px;display:grid;gap:14px}
/* Fiche appareil : faits étiquetés, valeurs non consignées en retrait, garantie échue
   signalée d'une pastille discrète ; les dates de suivi viennent sous un filet. */
.device-record{margin-bottom:18px}.device-record dd.muted{color:var(--ink-3);font-weight:450}.device-record dd.mono{font-family:var(--font-mono);font-size:.95em;white-space:normal}
.device-dates{padding-top:16px;border-top:1px solid var(--line)}
.warranty-expired{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;color:var(--warn);background:var(--warn-soft);vertical-align:1px}
/* Une seule colonne d'oreilles sous 700 px : la fiche retrouve ses deux colonnes. */
@media(max-width:700px) and (min-width:421px){.device-card .facts.device-record{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.inline-form select{flex:1;min-width:140px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ear{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:5px;font-size:12px;font-weight:700}
.care-form{display:grid;gap:16px}.care-form label{display:grid;gap:6px;font-weight:600}.care-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.care-form .wide{grid-column:1/-1}
.care-form button{justify-self:start}
.device-history>summary{padding:16px}.device-history .device-card{margin:0 12px 12px}.device-actions summary,.note-correction summary{color:var(--primary,#24567b);cursor:pointer;font-weight:600}.device-actions details[open] summary,.note-correction[open] summary{margin-bottom:14px}
.notes-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}.note-add{position:sticky;top:24px}.note-card .card-head{gap:12px}.note-card h3{font-size:14px;margin:6px 0 0}.note-card .memo-text{margin:0 0 16px;overflow-wrap:anywhere}.note-correction{margin-top:14px}.correction-link{font-size:13px}
.badge.signed{background:#e8f3eb;color:#286441}.badge.renewal-badge{background:#fff1dc;color:#885210}.patient-link .ear{flex-shrink:0}
.device-card .card-head,.note-card .card-head{display:flex;justify-content:space-between;align-items:flex-start}
.device-card .card-head .badge,.note-card .card-head .badge{flex-shrink:0}
.correction-link a,.device-card .help a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.notes-grid{grid-template-columns:1fr}.note-add{position:static}.ear-grid{gap:14px}.device-card .facts{grid-template-columns:1fr}}
@media(max-width:700px){.ear-grid{grid-template-columns:1fr}.care-form .form-grid{grid-template-columns:1fr}}
/* Agenda : grille de quinze minutes et files de travail. */
.button-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.calendar-nav { display:flex; gap:16px; align-items:end; flex-wrap:wrap; margin-bottom:12px; }
.calendar-nav label { display:grid; gap:5px; }
.calendar-nav .button-row { margin-right:auto; align-self:center; }
.calendar-scroll { overflow-x:auto; }
.calendar-grid { display:flex; min-width:650px; }
.time-column { flex:0 0 66px; }
.staff-column { min-width:142px; flex:1 0 0; border-left:1px solid var(--line); }
.column-title { height:54px; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; font-size:13px; margin:0; background:var(--surface-2); border-bottom:1px solid var(--line); }
.time-grid { display:grid; grid-template-rows:repeat(40,28px); }
.time-grid span { font-size:11px; color:var(--ink-3); text-align:center; border-top:1px solid var(--line); padding-top:3px; }
.day-grid { display:grid; grid-template-rows:repeat(40,28px); grid-auto-columns:minmax(0,1fr); background:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,var(--line) 27px,var(--line) 28px); }
.appointment-block { display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0; margin:1px 3px; padding:5px 8px; border-radius:5px; border-left:3px solid var(--tone); background:var(--tint); color:var(--ink); font-size:11px; overflow:hidden; text-decoration:none; }
.appointment-block:hover,.appointment-block:focus-visible { outline:2px solid var(--focus); z-index:1; }
.appointment-block strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.block-time { font-variant-numeric:tabular-nums; font-weight:650; }
.block-status { font-weight:650; color:var(--tone); }
.appointment-block.span-1 { font-size:10px; padding:2px 5px; }
.appointment-block.span-1 .block-status,.appointment-block.span-1 > span:not(.block-time),.appointment-block.span-2 > span:not(.block-time):not(.block-status) { display:none; }
.appointment-block.span-2 { gap:0; font-size:10px; padding:2px 5px; }
.appointment-block.span-2 strong { font-size:11px; }
.appointment-block.walkin { border:1.5px dashed var(--tone); border-left:3px dashed var(--tone); }
.walkin-tag { display:inline-block; flex:none; margin:0 2px; padding:0 4px; border:1px dashed #9a6a00; border-radius:4px; background:#fff6e0; color:#5e4300; font-size:9.5px; font-weight:750; line-height:12px; letter-spacing:.02em; text-transform:uppercase; vertical-align:1px; white-space:nowrap; }
.appointment-block.walkin .block-time { display:flex; align-items:center; gap:4px; min-width:0; white-space:nowrap; }
.appointment-block.walkin .bt { flex:none; }
.appointment-block.walkin .walkin-tag { flex:0 1 auto; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; }
/* Court (15–30 min) : l'heure et l'étiquette, puis le nom ; l'état se tait. */
.appointment-block.walkin.span-1 .block-status, .appointment-block.walkin.span-2 .block-status, .appointment-block.walkin.span-1 .bt-end, .appointment-block.walkin.span-2 .bt-end { display:none; }
.appointment-block.walkin.span-1 .block-time { display:flex; }
.appointment-block.walkin.span-1 { gap:0; padding-top:0; padding-bottom:0; }
.appointment-block.walkin.span-1 .block-time, .appointment-block.walkin.span-1 strong { line-height:11px; }
.appointment-block.walkin.span-1 .walkin-tag { font-size:8.5px; line-height:9px; }
.detail-badges { display:inline-flex; align-items:center; gap:6px; }
.detail-badges .walkin-tag { padding:2px 7px; font-size:11px; line-height:16px; }
.walkin-create { margin-top:8px; }
.calendar-legend { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.legend-item { padding:4px 8px; border-left:3px solid var(--tone); background:var(--tint); font-size:12px; border-radius:4px; }
.tone-violet { --tone:#63449a; --tint:#efe9fa; }.tone-blue { --tone:#2859a1; --tint:#e7effc; }.tone-teal { --tone:#186e77; --tint:#e3f3f4; }.tone-green { --tone:#3d7048; --tint:#eaf3e8; }.tone-amber { --tone:#8a5c15; --tint:#fcf2dc; }.tone-red { --tone:#a53f39; --tint:#fbeae6; }.tone-pink { --tone:#98456e; --tint:#f9e9f0; }.tone-purple { --tone:#7246a2; --tint:#f2eafb; }.tone-slate { --tone:#526175; --tint:#ecf0f5; }
.appointment-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.appointment-form label { display:grid; gap:6px; }
.appointment-form .wide { grid-column:1/-1; }
.appointment-summary { border-left:4px solid var(--tone); }
.appointment-summary > * + * { margin-top:16px; }
.picker-search { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.picker-search input { flex:1; min-width:220px; }
.overlap-warning { padding:16px; border:1px solid var(--warn); border-radius:8px; background:var(--warn-soft); margin-bottom:18px; }
.agenda-timeline { list-style:none; padding:0; margin:0 0 28px; position:relative; }
.agenda-timeline::before { content:""; position:absolute; top:20px; bottom:24px; left:105px; width:1px; background:var(--line-2); }
.timeline-slot { position:relative; margin:5px 0; }
.timeline-link { display:grid; grid-template-columns:64px 18px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 18px; border-radius:9px; border:1px solid transparent; color:var(--ink); text-decoration:none; position:relative; }
.timeline-link:hover { background:var(--surface); border-color:var(--line); }
.timeline-link time { font-weight:650; font-variant-numeric:tabular-nums; }
.timeline-link small { display:block; color:var(--ink-3); font-size:12px; font-weight:400; margin-top:3px; }
.timeline-marker { width:11px; height:11px; border:2px solid var(--bg); border-radius:50%; background:var(--tone); justify-self:center; z-index:1; }
.timeline-person { min-width:0; }
.timeline-slot.past { opacity:.52; }
.timeline-slot.past:hover { opacity:.9; }
.timeline-slot.current .timeline-link { background:var(--accent-soft); border-color:var(--accent); box-shadow:0 2px 8px #203d7010; padding-bottom:18px; }
.timeline-slot.current .timeline-marker { background:var(--accent); box-shadow:0 0 0 4px #2859a124; }
.timeline-person .badge { display:inline-flex; margin:0 0 0 8px; padding:1px 7px; font-size:11px; vertical-align:2px; }
/* Deuxième ligne : pictogramme et type, puis le motif coupé sur une ligne. */
.visit-meta { display:flex; align-items:center; min-width:0; margin-top:3px; font-size:13px; color:var(--ink-3); }
.visit-kind { display:inline-flex; align-items:center; gap:5px; flex:none; font-weight:550; color:var(--ink-2); }
.visit-kind svg { width:14px; height:14px; color:var(--ink-3); }
.visit-memo { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.visit-memo::before { content:"·"; margin:0 6px; }
.visit-state { display:grid; justify-items:end; gap:4px; }
.timeline-link .visit-state small { margin:0; max-width:12em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Statut d'un rendez-vous : pastille colorée, partout où le badge sert. */
.badge[class*="status-"] { align-items:center; gap:6px; padding:4px 10px 4px 8px; font-weight:550; white-space:nowrap; }
.badge[class*="status-"]::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.status-booked { background:var(--warn-soft); color:var(--warn); }
.badge.status-confirmed { background:var(--ok-soft); color:var(--ok); }
.badge.status-in_progress { background:var(--accent); color:var(--accent-ink); }
.badge.status-attended { background:var(--accent-soft); color:var(--accent); }
.badge.status-no_show { background:var(--off-soft); color:var(--off); }
.badge.status-cancelled { background:var(--bad-soft); color:var(--bad); }
.visit-progress { position:absolute; left:129px; bottom:5px; width:calc(100% - 148px); height:3px; border:0; border-radius:6px; accent-color:var(--accent); }
.visit-progress::-webkit-progress-bar { background:var(--line); }.visit-progress::-webkit-progress-value { background:var(--accent); }
.work-queues { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.work-queue { margin:0; align-self:start; }
.work-queue .card-head { padding:16px; min-height:92px; }
.work-queue .section-head { gap:8px; margin-bottom:6px; }
.work-queue h3 { font-size:15px; }
.queue-items { list-style:none; margin:0; padding:0; }
.queue-items li + li { border-top:1px solid var(--line); }
.queue-items a { display:block; padding:12px 16px; text-decoration:none; color:var(--ink); }
.queue-items a:hover { background:var(--surface-2); }
.queue-items small { display:block; font-size:12px; color:var(--ink-3); margin-top:4px; }
.queue-more { border-top:1px solid var(--line); }.queue-more summary { padding:12px 16px; color:var(--accent); cursor:pointer; font-size:12px; }
.confirmation-list { list-style:none; padding:0; }.confirmation-list a { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; }.confirmation-list span { color:var(--ink-3); }
.record-appointments { list-style:none; padding:0; margin:0; }.record-appointments li + li { border-top:1px solid var(--line); }.record-appointments a { display:grid; grid-template-columns:190px 1fr 160px 90px; gap:16px; padding:16px 22px; align-items:center; text-decoration:none; color:var(--ink); }.record-appointments a:hover { background:var(--surface-2); }
@media(max-width:1000px) { .work-queues { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.timeline-link { grid-template-columns:56px 14px minmax(0,1fr) auto; gap:10px; padding:12px 8px; }.agenda-timeline::before { left:80px; }.record-appointments a { grid-template-columns:160px 1fr; }.queue-items a { padding:12px; }.work-queue .card-head { padding:12px; }.work-queue h3 { font-size:14px; } }
@media(max-width:650px) { .work-queues { grid-template-columns:1fr; }.timeline-link { grid-template-columns:48px 12px minmax(0,1fr) auto; }.agenda-timeline::before { left:70px; }.appointment-form { grid-template-columns:1fr; }.record-appointments a { grid-template-columns:1fr;gap:5px; } }
.row-1 { grid-row-start:1; }.span-1 { grid-row-end:span 1; }
.row-2 { grid-row-start:2; }.span-2 { grid-row-end:span 2; }
.row-3 { grid-row-start:3; }.span-3 { grid-row-end:span 3; }
.row-4 { grid-row-start:4; }.span-4 { grid-row-end:span 4; }
.row-5 { grid-row-start:5; }.span-5 { grid-row-end:span 5; }
.row-6 { grid-row-start:6; }.span-6 { grid-row-end:span 6; }
.row-7 { grid-row-start:7; }.span-7 { grid-row-end:span 7; }
.row-8 { grid-row-start:8; }.span-8 { grid-row-end:span 8; }
.row-9 { grid-row-start:9; }.span-9 { grid-row-end:span 9; }
.row-10 { grid-row-start:10; }.span-10 { grid-row-end:span 10; }
.row-11 { grid-row-start:11; }.span-11 { grid-row-end:span 11; }
.row-12 { grid-row-start:12; }.span-12 { grid-row-end:span 12; }
.row-13 { grid-row-start:13; }.span-13 { grid-row-end:span 13; }
.row-14 { grid-row-start:14; }.span-14 { grid-row-end:span 14; }
.row-15 { grid-row-start:15; }.span-15 { grid-row-end:span 15; }
.row-16 { grid-row-start:16; }.span-16 { grid-row-end:span 16; }
.row-17 { grid-row-start:17; }.span-17 { grid-row-end:span 17; }
.row-18 { grid-row-start:18; }.span-18 { grid-row-end:span 18; }
.row-19 { grid-row-start:19; }.span-19 { grid-row-end:span 19; }
.row-20 { grid-row-start:20; }.span-20 { grid-row-end:span 20; }
.row-21 { grid-row-start:21; }.span-21 { grid-row-end:span 21; }
.row-22 { grid-row-start:22; }.span-22 { grid-row-end:span 22; }
.row-23 { grid-row-start:23; }.span-23 { grid-row-end:span 23; }
.row-24 { grid-row-start:24; }.span-24 { grid-row-end:span 24; }
.row-25 { grid-row-start:25; }.span-25 { grid-row-end:span 25; }
.row-26 { grid-row-start:26; }.span-26 { grid-row-end:span 26; }
.row-27 { grid-row-start:27; }.span-27 { grid-row-end:span 27; }
.row-28 { grid-row-start:28; }.span-28 { grid-row-end:span 28; }
.row-29 { grid-row-start:29; }.span-29 { grid-row-end:span 29; }
.row-30 { grid-row-start:30; }.span-30 { grid-row-end:span 30; }
.row-31 { grid-row-start:31; }.span-31 { grid-row-end:span 31; }
.row-32 { grid-row-start:32; }.span-32 { grid-row-end:span 32; }
.row-33 { grid-row-start:33; }.span-33 { grid-row-end:span 33; }
.row-34 { grid-row-start:34; }.span-34 { grid-row-end:span 34; }
.row-35 { grid-row-start:35; }.span-35 { grid-row-end:span 35; }
.row-36 { grid-row-start:36; }.span-36 { grid-row-end:span 36; }
.row-37 { grid-row-start:37; }.span-37 { grid-row-end:span 37; }
.row-38 { grid-row-start:38; }.span-38 { grid-row-end:span 38; }
.row-39 { grid-row-start:39; }.span-39 { grid-row-end:span 39; }
.row-40 { grid-row-start:40; }.span-40 { grid-row-end:span 40; }
.row-41 { grid-row-start:41; }.span-41 { grid-row-end:span 41; }
.row-42 { grid-row-start:42; }.span-42 { grid-row-end:span 42; }
.row-43 { grid-row-start:43; }.span-43 { grid-row-end:span 43; }
.row-44 { grid-row-start:44; }.span-44 { grid-row-end:span 44; }
.row-45 { grid-row-start:45; }.span-45 { grid-row-end:span 45; }
.row-46 { grid-row-start:46; }.span-46 { grid-row-end:span 46; }
.row-47 { grid-row-start:47; }.span-47 { grid-row-end:span 47; }
.row-48 { grid-row-start:48; }.span-48 { grid-row-end:span 48; }
.row-49 { grid-row-start:49; }.span-49 { grid-row-end:span 49; }
.row-50 { grid-row-start:50; }.span-50 { grid-row-end:span 50; }
.row-51 { grid-row-start:51; }.span-51 { grid-row-end:span 51; }
.row-52 { grid-row-start:52; }.span-52 { grid-row-end:span 52; }
.row-53 { grid-row-start:53; }.span-53 { grid-row-end:span 53; }
.row-54 { grid-row-start:54; }.span-54 { grid-row-end:span 54; }
.row-55 { grid-row-start:55; }.span-55 { grid-row-end:span 55; }
.row-56 { grid-row-start:56; }.span-56 { grid-row-end:span 56; }
.row-57 { grid-row-start:57; }.span-57 { grid-row-end:span 57; }
.row-58 { grid-row-start:58; }.span-58 { grid-row-end:span 58; }
.row-59 { grid-row-start:59; }.span-59 { grid-row-end:span 59; }
.row-60 { grid-row-start:60; }.span-60 { grid-row-end:span 60; }
.row-61 { grid-row-start:61; }.span-61 { grid-row-end:span 61; }
.row-62 { grid-row-start:62; }.span-62 { grid-row-end:span 62; }
.row-63 { grid-row-start:63; }.span-63 { grid-row-end:span 63; }
.row-64 { grid-row-start:64; }.span-64 { grid-row-end:span 64; }
.appointment-block.span-1 { gap:0; padding:1px 5px; font-size:10px; line-height:12px; }
.appointment-block.span-1 strong { font-size:10px; line-height:12px; }
.appointment-block.span-1 .block-time { display:none; }
.appointment-block.span-1 > span.block-status { display:block; }
/* Facturation : montants alignés, formulaires compacts et impression sans coquille. */
.billing-summary{display:flex;justify-content:space-between;align-items:center;gap:24px}.billing-balance{font-size:32px;font-variant-numeric:tabular-nums}.billing-actions,.billing-inline{display:flex;flex-wrap:wrap;align-items:end;gap:14px}.billing-inline label,.billing-form label,.invoice-editor label{display:flex;flex-direction:column;gap:5px;font-size:13px}.billing-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:16px}.billing-forms{display:grid;gap:12px}.billing-forms summary{font-weight:600;cursor:pointer}.table-sub{display:block;font-size:12px;color:var(--muted,#607080);margin-top:4px}.num{text-align:right!important;white-space:nowrap;font-variant-numeric:tabular-nums}.invoice-paper{padding:32px}.invoice-totals{display:flex;justify-content:flex-end;gap:48px;padding:24px 0}.invoice-totals dl{min-width:220px}.invoice-edit-line{border:1px solid #dce4eb;border-radius:8px;padding:16px;margin:14px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.invoice-edit-line .wide{grid-column:1/-1}.invoice-edit-line legend{font-size:12px;color:#586a7a}#aging article{margin-bottom:16px}.billing-forms:has(:target) details:target{outline:2px solid #3d729a}body:has(.invoice-paper) .main{max-width:1400px}
@media(max-width:900px){.billing-summary{align-items:start;flex-direction:column}.billing-form,.invoice-edit-line{grid-template-columns:1fr 1fr}.invoice-paper{padding:20px}.invoice-totals{gap:20px;flex-wrap:wrap}}
@media print{.topbar,.nav,.breadcrumb,.print-hide,.skip,.invoice-editor{display:none!important}.app{display:block!important}.main{margin:0!important;padding:0!important;max-width:none!important}.invoice-paper,.card{box-shadow:none!important;border:none!important}.invoice-paper{padding:0}.table-scroll{overflow:visible}body{background:white;color:black}a{color:inherit;text-decoration:none}.invoice-paper header{border-bottom:2px solid #233f53;padding-bottom:20px}.invoice-totals{break-inside:avoid}}
.invoice-paper>header{justify-content:space-between;align-items:flex-start;margin-bottom:24px}.invoice-paper>header p{margin:6px 0}.invoice-totals .facts{display:block;min-width:290px}.invoice-totals .facts>div{display:flex;justify-content:space-between;gap:24px;margin-bottom:12px}.invoice-totals .facts>div:last-child{border-top:1px solid #dce4eb;padding-top:12px}.invoice-totals .facts:first-child{order:2}.invoice-totals .facts:last-child{order:1}.invoice-totals dd{font-variant-numeric:tabular-nums}.aging-scroll{max-height:350px}.billing-invoices .table-scroll{max-height:430px}.aging-scroll thead{position:sticky;top:0;z-index:1}.aging-scroll tfoot{position:sticky;bottom:0;background:#eef3fa}.aging-scroll tfoot th{border-top:2px solid #cad5e3;padding:14px 22px}.invoice-history summary{cursor:pointer;font-weight:600}.invoice-history li{padding:7px 0}
@media(max-width:900px){.invoice-paper>header{gap:16px;flex-wrap:wrap}.invoice-totals .facts{min-width:240px}}
@media print{.aging-scroll,.billing-invoices .table-scroll{max-height:none}}

/* Appareillage : comparaison stable, oreilles et montant patient prioritaires. */
.fitting-create > summary { padding:18px 22px; font-weight:600; cursor:pointer; }
.fitting-header { padding: 24px; }
.fitting-ears, .fitting-actions { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:18px 0; }
.fitting-ears > span { display:flex; align-items:center; gap:8px; }
.fitting-steps { display:flex; padding:0; margin:24px 0 0; list-style:none; counter-reset:step; gap:6px; }
.fitting-steps li { flex:1; font-size:12px; padding:10px 4px; border-top:3px solid var(--line, #dce3e8); }
.fitting-steps li[aria-current] { border-color:#246184; color:#145475; font-weight:700; }
.quote-sheet { margin-top:24px; }
.quote-columns { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:16px; margin:20px 0; align-items:stretch; }
.quote-option { min-width:0; overflow:hidden; }
.quote-option.chosen { border:2px solid #246184; }
.quote-option .card-head { display:block; background:#f3f7fa; }
.quote-option .card-body { padding:18px; }
.quote-option label { display:block; font-size:12px; }
.quote-option input, .quote-option select { margin-top:5px; }
.quote-line { border:0; border-top:1px solid #dce3e8; margin:18px 0; padding:12px 0 0; min-width:0; }
.quote-line legend { font-size:12px; color:#647885; }
.quote-line-fields { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:8px; margin-top:10px; }
.quote-item { padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #e1e7ec; }
.quote-item > div { display:flex; gap:8px; align-items:center; }
.quote-item strong { font-size:14px; }
.quote-item p { margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.quote-item small { font-size:11px; color:#526b7a; }
.quote-figures { margin:20px 0; font-variant-numeric:tabular-nums; }
.quote-figures > div { display:flex; justify-content:space-between; gap:8px; padding:8px 0; font-size:12px; }
.quote-figures dd { margin:0; white-space:nowrap; text-align:right; }
.quote-figures .quote-net { display:block; border-top:2px solid #dce3e8; margin-top:10px; padding-top:16px; }
.quote-net dt { font-size:13px; font-weight:600; }
.quote-net dd { text-align:left; font-size:28px; font-weight:700; color:#174d69; margin-top:5px; }
@media (max-width:900px) { .quote-columns { gap:8px; } .quote-option .card-body { padding:12px; } .quote-figures > div { display:block; } .quote-figures dd { text-align:left; } .quote-net dd { font-size:24px; } .fitting-steps li { font-size:10px; } }
@media (max-width:620px) { .quote-columns { grid-auto-flow:row; grid-template-columns:1fr; } .fitting-steps { flex-wrap:wrap; } .fitting-steps li { flex-basis:25%; } }
@media print { .no-print, .fitting-actions { display:none !important; } .quote-columns { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); } .quote-option { break-inside:avoid; } .quote-net dd { font-size:22px; } .fitting-header { padding:10px; } }
/* Commandes : même lecture par oreille, en liste et sur le bon fournisseur. */
.po-list{display:grid;gap:18px;margin:20px 0}.po-list .card-foot{display:flex;justify-content:space-between;gap:12px}.po-line{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(100px,1fr) minmax(130px,1fr);gap:18px;align-items:center;padding:14px 0}.po-line small,.po-item small{display:block;color:var(--ink-3);margin-top:5px}.po-line .ear{margin-right:8px}.po-lines .po-line+.po-line,.po-line-block+.po-line-block{border-top:1px solid var(--line)}.po-status{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:13px}.po-late{color:#a2352e}.po-cancelled{opacity:.7}.po-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}.po-facts dt{font-size:12px;color:var(--ink-3)}.po-facts dd{margin:5px 0 0}.po-memo{white-space:pre-wrap}.po-fields{display:flex;flex-wrap:wrap;gap:16px;align-items:end;margin:16px 0}.po-fields label{flex:1 1 180px;min-width:0}.po-fields label:has(textarea){flex-basis:300px}.po-fields label,.po-receipt-fields label{display:flex;flex-direction:column;gap:6px;font-size:13px}.po-fields textarea{min-height:90px}.po-price{display:flex;gap:22px;flex-wrap:wrap;color:var(--ink-3);font-size:12px;padding-bottom:14px}.po-line-block{padding:8px 0 14px}.po-line-block details{margin:4px 0}.po-header,.po-stock,.po-diff{margin-bottom:20px}.po-receipt{border:1px solid var(--line);border-radius:10px;padding:4px 18px 18px;margin:0 0 20px;min-width:0}.po-receipt legend{padding:0 8px}.po-receipt-fields{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:16px}.po-receipt-fields .check{flex-direction:row;align-items:center}.po-receipt-fields input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.po-line-block summary,.po-stock summary{cursor:pointer}.po-line-block details[open]{background:var(--bg);padding:12px;border-radius:8px}.po-diff{border-color:#6792b5}.po-header~.card{margin-bottom:20px}.po-line{overflow-wrap:anywhere}
@media(max-width:900px){.po-line{grid-template-columns:minmax(0,2fr) minmax(90px,1fr);gap:12px}.po-line>.po-status{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.po-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.po-receipt-fields{grid-template-columns:1fr;gap:14px}.po-fields{gap:12px}.po-list .section-head{align-items:flex-start}.po-list .card-foot{flex-wrap:wrap}}
@media print{.po-line{grid-template-columns:2fr 1fr 1fr}.po-line-block,.po-receipt{break-inside:avoid}.po-header{border:none}.po-price{color:#333}.po-facts{grid-template-columns:repeat(4,1fr)}}
/* Commandes : filtre (même allure que celui du catalogue), indice des
   autres onglets, total d'achat, pastille d'état (aussi dans la recherche). */
.po-filter { margin-top: 18px; }
.po-elsewhere { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.po-elsewhere a { font-weight: 600; }
.po-elsewhere strong, .po-total { font-variant-numeric: tabular-nums; }
.po-total { color: var(--ink); font-weight: 650; }
.po-list .card-foot > span { min-width: 0; }
[data-po-none] { margin-top: 18px; }
.badge.po-pill { align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.badge.po-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.po-draft { background: var(--warn-soft); color: var(--warn); }
.badge.po-sent, .badge.po-partially_received { background: var(--accent-soft); color: var(--accent); }
.badge.po-received { background: var(--ok-soft); color: var(--ok); }
.badge.po-closed { background: var(--off-soft); color: var(--off); }
.badge.po-cancelled { background: var(--bad-soft); color: var(--bad); }
.order-hits strong.mono { letter-spacing: .01em; }
.order-hits .product-hit-prices { gap: 4px 18px; }
.order-hits-more { margin: 0; padding: 12px 22px 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }

.delivery-checks { display: grid; gap: 12px; margin: 20px 0; }
.delivery-checks label { display: flex; align-items: center; gap: 10px; }
.delivery-checks input { width: auto; }
[data-delivery-checklist] .form-grid { margin-bottom: 20px; }
button:disabled { opacity: .45; cursor: not-allowed; }

.fitting-steps .step-done { border-color:var(--accent); color:var(--ink-2); }
.step-status { display:block; font-size:10px; font-weight:400; margin-top:4px; }
.fitting-abandon { margin-left:auto; color:var(--ink-3); font-size:13px; }
.receiving-table { width:100%; table-layout:fixed; font-size:12px; }
.receiving-table th, .receiving-table td { padding:10px 8px; overflow-wrap:anywhere; }
.receiving-table th:nth-child(1) { width:7%; }
.receiving-table th:nth-child(2), .receiving-table th:nth-child(3) { width:21%; }
.receiving-table th:nth-child(4) { width:8%; }
.receiving-table th:nth-child(5) { width:11%; }
.receiving-table th:nth-child(6) { width:17%; }
.receiving-table th:nth-child(7), .receiving-table th:nth-child(8) { width:7.5%; }
.receiving-table small { display:block; color:var(--ink-3); font-size:11px; }
.receiving-table { --field-px:6px; }
.receiving-table input[type=checkbox] { width:18px; height:18px; }
@media(max-width:900px) { .receiving-table th, .receiving-table td { padding:8px 4px; } .receiving-table .ear { font-size:10px; padding:3px; } }

.receiving-table + .card-foot, form:has(.receiving-table) > .card-foot { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.booking-maps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-bottom:24px; }
.booking-maps label { margin:12px 0; }
@media(max-width:650px) { .booking-maps { grid-template-columns:1fr; } }

.booking-review-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:650px) { .booking-review-list { grid-template-columns:1fr; } }

.main > .work-queue { align-self:stretch; }
.main > .work-queue .card-head { min-height:auto; }

/* Audiogramme importé : conserve son ratio dans le dossier mobile. */
.assessment-image{display:block;max-width:100%;height:auto}
/* Éditeur d'audiogramme (shadow root : seules les variables --agm-* entrent).
   Son cadre reprend le retrait des bandeaux des cartes. */
.audiogram-view { margin: 14px 0; }
.audiogram-view.audiogram-mounted { --agm-gap: var(--band-inset); }
/* Saisie manuelle : champs du test, PDF reçu à gauche et éditeur à droite
   sur grand écran, l'un sous l'autre sinon. Deux commandes : Vider, Quitter. */
.audiogram-hero { align-items: flex-end; justify-content: space-between; flex-wrap: nowrap; gap: 16px; }
.audiogram-hero > div { min-width: 0; max-width: 820px; }
@media (max-width: 700px) { .audiogram-hero { flex-wrap: wrap; } }
.audiogram-hero .primary { flex: none; }
.audiogram-entry { display: grid; gap: 18px; }
.audiogram-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; align-items: end; }
.audiogram-meta input, .audiogram-meta select { width: 100%; }
.audiogram-meta-help { grid-column: 1 / -1; margin-top: 0; }
.audiogram-upload input[type=file] { display: block; margin-top: 9px; font-size: 12.5px; max-width: 100%; }
.audiogram-upload .help { display: block; margin-top: 4px; }
.audiogram-upload input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent); font: 600 12.5px/1 var(--font); cursor: pointer; }
.audiogram-entry .form-error { margin: 0; padding: 12px 16px; border-radius: 8px; color: var(--bad); background: var(--bad-soft); font-weight: 600; }
.audiogram-workspace { display: grid; gap: 18px; min-width: 0; }
.audiogram-editor { min-width: 0; }
.audiogram-editor.audiogram-mounted { --agm-gap: var(--band-inset); }
.audiogram-pdf iframe { display: block; width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
@media (min-width: 1180px) {
  .audiogram-workspace.has-pdf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .audiogram-workspace.has-pdf .audiogram-pdf { position: sticky; top: 84px; }
  .audiogram-workspace.has-pdf .audiogram-pdf iframe { height: calc(100vh - 120px); }
}
.audiogram-confirm { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--bad); border-radius: 10px; background: var(--bad-soft); }
.audiogram-confirm p { font-weight: 600; color: var(--ink); }
.danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; min-height: 38px; border-radius: 999px; font-weight: 600; font-size: 13px; background: var(--bad); color: var(--bad-ink); border: 1px solid var(--bad); }
.danger:hover { filter: brightness(1.08); }
.audiogram-actions { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 16px; }

.document-drop { display: block; padding: 1.5rem; border: 2px dashed var(--muted, #617085); border-radius: 8px; margin: 1rem 0; }
.document-drop.dragging { background: #e9f0ff; border-color: #3e64af; }
.signature-page { max-width: 860px; margin: 2rem auto; padding: 1.5rem; background: white; }
.signature-page label { display: block; margin: 1rem 0; }
[data-signature-canvas] { display: block; width: 100%; height: auto; border: 2px solid #617085; background: white; touch-action: none; border-radius: 8px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .signature-page { margin: 0; padding: 1rem; } }

/* Entretien, prêts et stock : formulaires sans JavaScript, utilisables sur tablette. */
.lifecycle { display: grid; gap: 24px; min-width: 0; }
.lifecycle form { display: grid; gap: 14px; margin: 16px 0; }
.lifecycle .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.lifecycle label { display: grid; gap: 6px; min-width: 0; font-weight: 600; }
.lifecycle details > summary { padding: 16px; cursor: pointer; color: var(--accent); font-weight: 600; }
.lifecycle article { padding: 8px 0; scroll-margin-top: 90px; }
.lifecycle article p { margin: 10px 0; overflow-wrap: anywhere; }
.lifecycle .help, .lifecycle form > p { grid-column: 1 / -1; }
.lifecycle hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.lifecycle .form-error { padding: 16px; color: var(--bad); background: var(--bad-soft); }
@media (max-width: 700px) { .lifecycle .form-grid { grid-template-columns: 1fr; } }

/* Titres ARA : les titres de section prennent la forme des titres du rapport
   d'ARA (title_container_style, rayon 25) : un bandeau à bouts ronds, filet fin
   et ombre douce, teinté du bleu de la plume. Maquette approuvée :
   prototypes/signature/1-titres. */
:root {
  --band: color-mix(in oklch, var(--accent-soft) 80%, var(--surface));
  --band-line: color-mix(in oklch, var(--accent) 24%, var(--line));
  --band-shadow: 0 1px 2px oklch(.3 .05 var(--hue) / .10), 0 2px 8px oklch(.3 .05 var(--hue) / .08);
  /* Teintée de bleu en clair, noire et plus marquée en sombre. */
  --card-shadow:
    0 1px 2px light-dark(oklch(.3 .05 var(--hue) / .06), oklch(0 0 0 / .3)),
    0 4px 12px -2px light-dark(oklch(.3 .05 var(--hue) / .08), oklch(0 0 0 / .3)),
    0 12px 28px -8px light-dark(oklch(.3 .05 var(--hue) / .10), oklch(0 0 0 / .4));
  /* Hauteur fixe : la géométrie des coins en dépend. */
  --band-h: 44px;
  --band-inset: 12px;
  --band-r: calc(var(--band-h) / 2);
  /* Cartes concentriques à leur bandeau : l'arc du coin et le bout rond du
     bandeau partagent un centre, d'où rayon du bout + retrait + filet de 1px.
     Les blocs de chiffres et les cartes sans bandeau gardent un rayon à eux. */
  --card: calc(var(--band-r) + var(--band-inset) + 1px);
  --card-sm: 16px;
}

/* Les quatre chiffres deviennent des cartes séparées, espacées comme les files. */
.glance { gap: 16px; background: none; border: 0; border-radius: 0; }
.glance .stat { border: 1px solid var(--line); border-radius: var(--card-sm); background: var(--surface); }

/* Un peu de relief : toutes les cartes se détachent avec la même ombre. */
.card, .stat, .today { box-shadow: var(--card-shadow); }
.card { border-radius: var(--card-sm); }
.card:has(> .card-head), .card.card-body:has(> .section-head:first-child) { border-radius: var(--card); }

/* « Aujourd'hui » devient une carte, comme sur la maquette. */
.today { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card); overflow: hidden; }
.today > .card { border: 0; border-radius: 0; background: none; box-shadow: none; }
.today .agenda-timeline { margin: 2px 8px 8px; }
.today .timeline-link:hover { background: var(--surface-2); }
.today .timeline-marker { border-color: var(--surface); }

/* Titres de carte : le bandeau flotte dans la carte au lieu d'un en-tête filé.
   Un titre sur deux lignes garde le rayon du bout rond, donc reste concentrique. */
:where(.card > .card-head) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.card > .card-head:not(:has(> .section-head)),
.card-head > .section-head,
.card.card-body > .section-head:first-child,
.today > .section-head {
  min-height: var(--band-h); margin: var(--band-inset) var(--band-inset) 4px; padding: 4px 5px 4px 20px;
  border: 1px solid var(--band-line); border-radius: var(--band-r);
  background: var(--band); box-shadow: var(--band-shadow);
}
:is(.card > .card-head, .card-head > .section-head, .card.card-body > .section-head) h3 { margin-bottom: 0; }
/* Carte à remplissage intérieur : le bandeau reprend le retrait des autres. */
.card.card-body > .section-head:first-child {
  margin: calc(var(--band-inset) - 22px) calc(var(--band-inset) - 22px) 12px;
  flex-wrap: nowrap;
}

/* Files de travail : l'en-tête porte le bandeau, la précision passe dessous. */
.card > .card-head:has(> .section-head) { display: block; padding: var(--band-inset) var(--band-inset) 10px; }
.card-head > .section-head { margin: 0; flex-wrap: nowrap; }
.card-head > .section-head ~ .help { padding: 0 6px; }
/* Un tableau sous le bandeau garde un peu d'air avant sa ligne d'en-tête. */
.card > .card-head + .table-scroll { margin-top: 8px; }

h2 { font-weight: 650; letter-spacing: -.005em; }
.count { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--band-line); }
/* Liens « Voir… » en pilule au bout du bandeau. */
.section-head:not(.breadcrumb) > .more:not(.primary, .secondary), .card-head > a:last-child:not(.primary, .secondary) {
  display: inline-flex; align-items: center; margin-left: auto;
  height: 34px; padding: 0 14px; border-radius: 999px;
  color: var(--accent); font-size: 13.5px; font-weight: 600;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--band-line);
}
.section-head:not(.breadcrumb) > .more:not(.primary, .secondary):hover, .card-head > a:last-child:not(.primary, .secondary):hover {
  text-decoration: none; background: var(--accent); color: var(--accent-ink);
}

/* « Files de travail » est posé sur la page : même bandeau, pleine largeur. */
.main > section:has(> .work-queues) > .section-head {
  min-height: 46px; padding: 0 20px; margin-bottom: 14px;
  border: 1px solid var(--band-line); border-radius: 999px;
  background: var(--band); box-shadow: var(--band-shadow);
}

/* Échos plus petits du bandeau. */
.eyebrow time {
  padding: 2px 10px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--band-line);
}
.nav a { border-radius: 999px; }
.nav a[aria-current]::before { display: none; }
.nav a[aria-current] { box-shadow: inset 0 0 0 1px var(--band-line); }
.primary, .secondary, .badge { border-radius: 999px; }

@media (max-width: 640px) {
  :root { --band-inset: 10px; }
}

/* Accueil : « Aujourd'hui » et les rappels côte à côte, comme sur la maquette. */
.home-day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 24px; align-items: start; }
.reminders .card-head { padding: 0; }
/* Le menu ⋯ dépasse de la carte ; le dernier rappel garde donc lui-même l'arrondi. */
.card.reminders { overflow: visible; }
.memos > .memo:last-child { border-radius: 0 0 var(--card) var(--card); }
.memo-alert { font-size: 12px; font-weight: 650; color: var(--accent-ink); background: var(--accent); border-radius: 99px; padding: 2px 8px; }
.reminders.drop-ready { outline: 2px dashed var(--band-line); outline-offset: 3px; }
.reminders.drop-over { outline: 2px solid var(--accent); background: var(--accent-soft); }

.memo-new { padding: 0 var(--band-inset) 10px; }
/* « Nouveau » vit dans l'en-tête de la carte ; le résumé du <details> ne sert plus. */
.memo-new > summary { display: none; }
.reminders [data-memo-toggle] svg { width: 14px; height: 14px; }
.reminders .section-head > .more[aria-expanded=true] { background: var(--accent); color: var(--accent-ink); }
.add { padding: 5px 10px 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.add svg { width: 14px; height: 14px; }
.add:hover { background: var(--surface-2); color: var(--ink); }
/* « Nouveau rappel » : un panneau en retrait, trois blocs blancs (texte,
   patient, attribution) et une barre de boutons. Même pas de 8 px partout,
   champs de 32 px de haut. */
.memo-form { --memo-gap: 8px; --field-h: 32px; --field-px: 10px; --field-fs: 13.5px; display: grid; gap: var(--memo-gap); margin-top: 2px; padding: var(--memo-gap); border: 1px solid var(--line); border-radius: var(--card-sm); background: var(--surface-2); }
.memo-group { display: grid; gap: 6px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: calc(var(--card-sm) - var(--memo-gap)); background: var(--surface); }
.memo-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.memo-label small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); opacity: .85; }
.memo-label small::before { content: "· "; }
.memo-form label input, .memo-form label select, .memo-form label textarea { margin: 0; }
.memo-form textarea { min-height: 76px; }
/* Jour et heure : valeur centrée, l'icône du calendrier ne la décale pas. */
.memo-form input[type=date], .memo-form input[type=time] { text-align: center; font-variant-numeric: tabular-nums; }
.memo-form input::-webkit-date-and-time-value { text-align: center; }
.memo-form input::-webkit-calendar-picker-indicator { margin: 0 0 0 -16px; }
.memo-when { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 8px; row-gap: 10px; }
.memo-when { align-items: end; }
.memo-when label { display: grid; gap: 6px; min-width: 0; }
.memo-when .memo-for { grid-column: 1 / -1; display: grid; gap: 6px; }
.memo-for-head { display: flex; align-items: center; justify-content: space-between; min-height: 18px; }
.memo-for-head a { display: grid; place-items: center; width: 24px; height: 24px; margin: -4px -4px -4px 0; border-radius: 6px; color: var(--ink-3); }
.memo-for-head a:hover { background: var(--surface-2); color: var(--ink); }
.memo-for-head svg { width: 14px; height: 14px; }
.memo-quick { display: flex; gap: 6px; }
.memo-quick button { flex: 0 1 auto; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.memo-quick button:hover { border-color: var(--line-2); color: var(--ink); }
.memo-quick button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 480px) { .memo-when { grid-template-columns: minmax(0, 1fr); } }
.memo-submit { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.memo-submit .primary, .memo-submit .secondary { min-height: var(--field-h); padding: 0 16px; }
.memo-chip { display: flex; align-items: center; gap: 6px; height: var(--field-h); padding: 0 4px 0 12px; border-radius: 8px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--band-line); color: var(--accent); font-size: 13px; font-weight: 600; }
.memo-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-chip button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: inherit; }
.memo-chip button:hover { background: var(--surface); }
.memo-chip svg { width: 14px; height: 14px; }
.memo-search { position: relative; }
.memo-search > svg { position: absolute; left: 10px; top: calc(var(--field-h) / 2 - 7px); width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }
.memo-form .memo-search input { padding-left: 31px; }
.memo-results { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--field-h) + 4px); list-style: none; margin: 0; padding: 0; max-height: 264px; overflow: auto; border-radius: 8px; }
.memo-results:not(:empty) { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); }
.memo-results button { display: grid; gap: 1px; width: 100%; text-align: left; padding: 7px 12px; border-top: 1px solid var(--line); }
.memo-results li:first-child button { border-top: 0; }
.memo-results button:hover, .memo-results button:focus-visible { background: var(--accent-soft); }
.memo-results strong { font-size: 13px; font-weight: 600; }
.memo-results small, .memo-none { font-size: 12px; color: var(--ink-3); }
.memo-none { padding: 8px 10px; }
.reminders > .help { padding: 8px 20px 20px; font-size: 13px; }
.memo-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
@media (hover: none) { .memo-hint { display: none !important; } }
.memos:not(:empty) { border-top: 1px solid var(--line); }
.memo-hint::before { content: ""; flex: none; width: 14px; height: 10px; border: 1.5px dashed var(--line-2); border-radius: 3px; }

.memos { list-style: none; padding: 0; margin: 0; }
.memo { padding: 14px 20px; border-top: 1px solid var(--line); }
.memo:first-child { border-top: 0; }
.memo time { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.memo.due-today time { color: var(--accent); }
.memo.late time { color: var(--bad); }
.memo > p { margin-top: 3px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.memo-flag { font-size: 11.5px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin: 0 0 4px !important; }
/* Reçu et pas encore pris en charge, ou fait par un autre : à voir. */
.memo.state-incoming, .memo.state-done { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.memo.state-done .memo-flag { color: var(--ok); }
.memo.state-done { background: var(--ok-soft); box-shadow: inset 3px 0 0 var(--ok); }
.memo-patient-link { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.memo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.memo-by { font-size: 12px; color: var(--ink-3); }
.memo-actions { display: flex; align-items: center; gap: 6px; }
.memo-btn { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.memo-btn::-webkit-details-marker { display: none; }
.memo-btn:hover { background: var(--surface-2); color: var(--ink); }
.memo-btn.ok:hover { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.memo-btn.strong { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.memo-btn.bad { color: var(--bad); }
.memo-btn.bad:hover { background: var(--bad-soft); }
.memo-more { position: relative; }
.memo-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 230px; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--card-sm); background: var(--surface); box-shadow: var(--card-shadow); }
.memo-menu form { display: grid; gap: 6px; }
.memo-menu label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.memo-menu .secondary { justify-self: start; }

/* Historique des rappels. */
/* Divers : l'historique des rappels dans une carte d'une demi-largeur qui défile. */
.misc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.misc-history { display: flex; flex-direction: column; max-height: calc(100vh - 220px); min-height: 320px; }
.misc-help { padding: 0 20px 12px; }
.misc-scroll { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.misc-empty { padding: 18px 20px; color: var(--ink-3); font-size: 13px; }
.memo-history { list-style: none; padding: 0; margin: 0; display: grid; }
.memo-past { padding: 14px 20px; border-top: 1px solid var(--line); }
.memo-past:first-child { border-top: 0; }
.memo-past-patient { margin-top: 4px; font-size: 12.5px; }
@media (max-width: 1000px) { .misc-grid { grid-template-columns: minmax(0, 1fr); } }
.memo-past-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.memo-past-head time { font-size: 12.5px; font-weight: 600; }
.memo-past-body { margin-top: 8px; white-space: pre-line; overflow-wrap: anywhere; }
.memo-past.cancelled .memo-past-body { color: var(--ink-3); text-decoration: line-through; }
.memo-steps { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-3); }
.memo-steps time { font-weight: 600; }
@media (max-width: 1000px) { .home-day { grid-template-columns: 1fr; } }

/* Point médian centré entre le nom et le numéro de dossier. */
.dot { display: inline-block; width: 3px; height: 3px; margin: 0 7px; border-radius: 50%; background: currentColor; opacity: .55; vertical-align: middle; }
.timeline-person .dot { color: var(--ink-3); }
.timeline-person .file-no { font-size: 13px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Réglages des raccourcis : trois listes compactes, même style que « Nouveau rappel ». */
.memo-shortcut-form { display: grid; gap: 14px; max-width: 520px; }
.memo-shortcut-form label { display: grid; gap: 6px; font-size: 12.5px; }
.memo-shortcut-form { --field-px: 10px; --field-fs: 13.5px; }
.memo-shortcut-form select { margin: 0; }
.memo-shortcut-form .button-row { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* Réglages : page d'accueil groupée et pages de configuration. Mêmes cartes à
   bandeau, champs et boutons pilule que le reste ; on n'ajoute que la mise en
   page et quelques pièces propres (liens de réglage, faits, secret à copier). */
.settings-page { display: flex; flex-direction: column; gap: var(--main-gap, 24px); min-width: 0; }
/* Un formulaire qui regroupe plusieurs cartes : le même écart entre elles. */
.settings-page form:has(> .settings-card) { display: flex; flex-direction: column; gap: var(--main-gap, 24px); min-width: 0; }
.settings-page .lede { max-width: 72ch; }
.settings-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.settings-crumb a { color: var(--accent); font-weight: 600; }
.settings-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.settings-crumb [aria-hidden] { color: var(--line-2); }
/* Accueil : un groupe par carte, chaque réglage en ligne cliquable. */
.settings-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.settings-group-help { padding: 6px 22px 8px; font-size: 13px; color: var(--ink-3); }
.settings-links { list-style: none; margin: 0; padding: 0 var(--band-inset) var(--band-inset); display: grid; gap: 2px; }
.settings-links a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 12px; border-radius: calc(var(--card) - var(--band-inset)); color: var(--ink); text-decoration: none; }
.settings-links a:hover, .settings-links a:focus-visible { background: var(--accent-soft); text-decoration: none; }
.settings-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--band); box-shadow: inset 0 0 0 1px var(--band-line); color: var(--accent); }
.settings-icon svg { width: 18px; height: 18px; }
.settings-link-text { display: grid; gap: 2px; min-width: 0; }
.settings-link-text strong { font-size: 14px; font-weight: 650; }
.settings-link-text small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.settings-chev { width: 16px; height: 16px; color: var(--ink-3); }
.settings-links a:hover .settings-chev { color: var(--accent); }
/* Pages : contenu sous le bandeau, formulaires à libellé au-dessus du champ. */
.settings-card > .card-body { display: grid; gap: var(--settings-gap, 16px); align-content: start; padding: var(--settings-card-pad, 12px 22px 22px); }
.settings-card > .settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.settings-page label .help { display: block; margin-top: 6px; }
.settings-intro { max-width: 72ch; font-size: 13.5px; color: var(--ink-2); }
.settings-page .help { margin-top: 0; }
.settings-empty { font-size: 13.5px; color: var(--ink-3); }
.settings-stack { display: grid; gap: 18px; }
.settings-narrow { width: 100%; max-width: 640px; }
.settings-card > .memo-shortcut-form { max-width: none; }
.settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.settings-actions form { display: contents; }
.settings-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.settings-inline label { flex: 1 1 260px; min-width: 0; }
/* Bouton secondaire rouge : fond clair, pas le fond plein de `.danger`. */
.settings-page .secondary.danger { background: var(--surface); border-color: var(--line); color: var(--bad); }
.settings-page .secondary.danger:hover { background: var(--bad-soft); }
/* Faits en lecture : petit libellé gris, valeur dessous. */
.settings-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin: 0; }
.settings-facts dt { margin-bottom: 3px; font-size: 12px; color: var(--ink-3); }
.settings-facts dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.settings-page code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font: 500 12.5px/1.5 var(--font-mono); overflow-wrap: anywhere; }
/* Code ou secret affiché une seule fois : encadré à copier. */
.settings-secret { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--card-sm); background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); font-size: 13.5px; }
.settings-secret > code { display: block; padding: 10px 12px; background: var(--surface); font-size: 15px; font-weight: 650; user-select: all; }
/* Messages : erreur en rouge, confirmation en vert, même encadré. */
.settings-page .form-error, .settings-notice { padding: 12px 16px; border-radius: var(--card-sm); font-size: 13.5px; }
.settings-page .form-error { background: var(--bad-soft); color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.settings-notice { background: var(--ok-soft); color: var(--ok); font-weight: 600; box-shadow: inset 3px 0 0 var(--ok); }
/* Listes (invitations, clés) : une ligne par élément, actions au bout. */
.settings-rows { list-style: none; margin: 0; padding: 0 0 6px; }
.settings-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 22px; border-top: 1px solid var(--line); }
.settings-rows li:first-child { border-top: 0; }
.settings-row-main { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; }
.settings-row-main small { font-size: 12.5px; color: var(--ink-3); }
.settings-rows-boxed { padding: 0; border: 1px solid var(--line); border-radius: var(--card-sm); }
.settings-rows-boxed li { padding: 12px 16px; }
/* Rendez-vous en ligne (ara_ouie.html, ara_ouie_inbox.html) : sous-titres
   de section dans la carte, liste déroulante et bouton sur une ligne. */
.ara-ouie-sub { margin: 14px 0 0; padding: 12px 22px 0; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ara-ouie-map { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ara-ouie-map select { width: auto; min-width: 220px; max-width: 100%; }
.ara-ouie-map input[type="search"] { width: auto; flex: 1 1 220px; min-width: 0; }
.ara-ouie-actions { justify-content: space-between; border-top: 1px solid var(--line); }
.ara-ouie-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--warn-soft); color: var(--ink); font-weight: 500; box-shadow: inset 3px 0 0 var(--warn); }
.ara-ouie-reason { color: var(--warn) !important; font-weight: 600; }
.ara-ouie-link { flex: 1 1 100%; display: grid; gap: 10px; padding: 12px 0 0; }
.ara-ouie-link label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ara-ouie-link .settings-group-help { padding: 0; }
/* Invitations en attente (Réglages ▸ Rendez-vous en ligne, ara_ouie.html). */
.ara-invites-list li { flex-wrap: wrap; }
.ara-invites-list .settings-row-main { flex: 1 1 260px; min-width: 0; }
.ara-invites-list .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ara-invites-list .button-row form { margin: 0; }
.ara-invites-see { font-size: 12.5px; }
/* Invitation adressée à un autre courriel (ara_invite.html) : à qui elle est adressée, qui est connectée, « Changer de compte » seulement. */
.ara-invite-who { margin: 0 var(--space-3, 12px) var(--space-3, 12px); padding: 14px 16px; border: 1px solid var(--warn); border-radius: 10px; background: var(--warn-soft); color: var(--ink); }
.ara-invite-who-line { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ara-invite-who .help { margin: 0 0 12px; color: var(--ink-2); }
.ara-invite-switch { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; min-width: 0; max-width: 100%; }
.ara-invite-switch small { color: var(--ink-2); font-size: 12px; max-width: 26em; }
.ara-ouie-reviews .button-row form { display: contents; }
/* Correspondances : deux colonnes, intitulé en petites capitales. */
.settings-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.settings-columns fieldset { display: grid; gap: 14px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-columns legend { margin-bottom: 12px; padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.settings-label-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-label-line .badge { padding: 1px 8px; font-size: 11px; background: var(--warn-soft); color: var(--warn); }
/* Section repliable : le bandeau est le résumé, un chevron à droite. */
.settings-more > summary { cursor: pointer; list-style: none; }
.settings-more > summary::-webkit-details-marker { display: none; }
.settings-more > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 14px 4px auto; border-right: 1.7px solid var(--accent); border-bottom: 1.7px solid var(--accent); transform: rotate(45deg); transition: transform .15s; }
.settings-more[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
/* Repliée, le bandeau garde le même retrait dessous que dessus. Le sélecteur
   doit l'emporter sur `.card > .card-head:not(:has(> .section-head))`
   (0,3,0), qui laisse 4 px sous les bandeaux suivis d'un contenu. */
.settings-more:not([open]) > summary.card-head { margin-bottom: var(--band-inset); }
.settings-more-hint { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.settings-remote { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.settings-remote h3 small { font-weight: 500; color: var(--ink-3); }
/* Produits : « Modifier les prix » en pilule, formulaire en retrait sous la ligne. */
.settings-page td > details > summary { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--band-line); color: var(--accent); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; list-style: none; }
.settings-page td > details > summary::-webkit-details-marker { display: none; }
.settings-page td > details[open] > summary { background: var(--accent); color: var(--accent-ink); }
.settings-page td > details > form { margin-top: 10px; }
.settings-page td > details > form.appointment-form { min-width: 380px; padding: 14px; border: 1px solid var(--line); border-radius: var(--card-sm); background: var(--surface-2); }
/* Modèles d'accords : deux par rangée sur grand écran. */
.settings-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .settings-groups, .settings-templates { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 650px) {
  .settings-card > .settings-form, .settings-columns { grid-template-columns: minmax(0, 1fr); }
  .settings-card > .card-body { padding: 10px 16px 18px; }
  .settings-rows li { padding: 12px 16px; }
  .settings-group-help { padding: 6px 16px 8px; }
  .settings-links a { gap: 12px; padding: 10px 8px; }
  .settings-actions > *, .settings-actions form > * { flex: 1 1 auto; }
}

/* --- Agenda : vue Mois (début) ---
   Pas de rendez-vous dans le mois : chaque case dit qui travaille (prénoms dans
   la couleur de chacun, une étiquette seulement quand ce n'est pas l'habituel),
   l'effectif « 2 / 3 » et la part réservée (barre par pas de 5 %). Jours de
   fermeture habituels rétrécis (`sq-1` … `sq-7`, lundi = 1). Au téléphone,
   chaque case se réduit au numéro, à l'effectif et à un trait, et le résumé du
   jour choisi passe dessous. Pas de style en ligne (CSP) : tout par classes. */
/* Barre d'outils de l'agenda : ← Aujourd'hui → et « + Nouveau rendez-vous » à
   droite sur la première ligne, les filtres dessous (saut de ligne par ::after). */
.calendar-nav { row-gap:8px; }
.calendar-nav::after { content:""; order:1; flex-basis:100%; height:0; }
.calendar-nav > label, .calendar-nav > button { order:2; }
.calendar-nav .calendar-new { margin-left:auto; }
.pc-blue { --pc:#2563eb; --pc-ink:#1d4ed8; }.pc-teal { --pc:#0d9488; --pc-ink:#0f766e; }.pc-green { --pc:#16a34a; --pc-ink:#15803d; }.pc-lime { --pc:#65a30d; --pc-ink:#4d7c0f; }
.pc-amber { --pc:#d97706; --pc-ink:#b45309; }.pc-orange { --pc:#ea580c; --pc-ink:#c2410c; }.pc-red { --pc:#dc2626; --pc-ink:#b91c1c; }.pc-pink { --pc:#db2777; --pc-ink:#be185d; }
.pc-purple { --pc:#9333ea; --pc-ink:#7e22ce; }.pc-indigo { --pc:#4f46e5; --pc-ink:#4338ca; }.pc-brown { --pc:#92400e; --pc-ink:#78350f; }.pc-slate { --pc:#475569; --pc-ink:#334155; }
.month { --narrow:46px; --c1:minmax(0,1fr); --c2:minmax(0,1fr); --c3:minmax(0,1fr); --c4:minmax(0,1fr); --c5:minmax(0,1fr); --c6:minmax(0,1fr); --c7:minmax(0,1fr);
  --tier-low:oklch(0.74 0.075 var(--hue)); --tier-mid:var(--accent); --tier-high:oklch(0.6 0.15 52); }
.month.sq-1 { --c1:var(--narrow); }.month.sq-2 { --c2:var(--narrow); }.month.sq-3 { --c3:var(--narrow); }.month.sq-4 { --c4:var(--narrow); }
.month.sq-5 { --c5:var(--narrow); }.month.sq-6 { --c6:var(--narrow); }.month.sq-7 { --c7:var(--narrow); }
.month-head, .month-grid { display:grid; grid-template-columns:var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7); }
.month-head { background:var(--surface-2); border-bottom:1px solid var(--line); }
.month-head span { padding:9px 10px; font-size:11.5px; font-weight:650; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.month-head span.narrow { padding:9px 0; text-align:center; }
.month-grid { list-style:none; margin:0; padding:0; }
.month-cell { position:relative; display:flex; min-width:0; min-height:128px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.month-cell:nth-child(7n) { border-right:0; }
.month-cell:nth-last-child(-n+7) { border-bottom:1px solid var(--line); }
.month-cell.outside, .month-cell.narrow, .month-cell.closed { background:var(--surface-2); }
.month-cell.is-today { background:color-mix(in oklch, var(--accent-soft) 60%, var(--surface)); }
.month-open { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; padding:7px 8px 9px; color:var(--ink); text-decoration:none; }
.month-cell.outside .month-open { opacity:.5; }
.month-open:hover { background:color-mix(in oklch, var(--accent-soft) 55%, transparent); text-decoration:none; }
.month-open:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.month-top { display:flex; align-items:center; justify-content:space-between; gap:4px; min-width:0; padding-right:24px; }
.month-num { display:grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border-radius:999px; color:var(--ink-2); font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.month-cell.is-today .month-num { background:var(--accent); color:var(--accent-ink); }
.staffing { display:inline-block; padding:1px 7px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); font-size:11.5px; font-weight:650; line-height:17px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.month-cell:is(.closed, .narrow, .outside) .staffing { background:var(--surface); }
.staffing.staffing-short { background:var(--warn-soft); color:var(--warn); }
.staffing.staffing-none { background:var(--bad-soft); color:var(--bad); }
.month-holiday { color:var(--ink-2); font-size:12px; font-style:italic; line-height:1.3; }
.month-closed { color:var(--ink-3); font-size:12px; }
.month-people { display:flex; flex-direction:column; gap:1px; min-width:0; }
.month-person { display:flex; align-items:center; gap:5px; min-width:0; font-size:12.5px; line-height:17px; }
.month-person .dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--pc); }
.month-person .pname { flex:0 1 auto; min-width:0; overflow:hidden; color:var(--pc-ink); font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.month-person .pinit { display:none; }
.month-person .ptag { flex:0 100 auto; min-width:0; overflow:hidden; color:var(--ink-3); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.month-person.absent .dot { background:none; box-shadow:inset 0 0 0 1.5px var(--line-2); }
.month-person.absent .pname { color:var(--ink-3); font-weight:500; text-decoration:line-through; }
.month.compact .month-people { flex-direction:row; flex-wrap:wrap; gap:3px; }
.month.compact .month-person :is(.dot, .pname, .ptag) { display:none; }
.month.compact .month-person .pinit { display:inline-grid; place-items:center; min-width:25px; height:20px; padding:0 4px; border-radius:5px; background:var(--pc-ink); color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em; }
.month.compact .month-person:has(.ptag) .pinit { background:var(--surface); color:var(--pc-ink); box-shadow:inset 0 0 0 1.5px var(--pc); }
.month.compact .month-person.absent .pinit { background:none; color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-2); text-decoration:line-through; }
.month-bar { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:3px; }
.month-bar .bar { flex:1; }
.bar { display:block; min-width:0; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.bar .fill { display:block; height:100%; border-radius:3px; }
.tier-low { background:var(--tier-low); }.tier-mid { background:var(--tier-mid); }.tier-high { background:var(--tier-high); }
.month-bar .pct { min-width:32px; color:var(--ink-2); font-size:11.5px; font-weight:650; text-align:right; font-variant-numeric:tabular-nums; }
.w-0 { width:0; }.w-5 { width:5%; }.w-10 { width:10%; }.w-15 { width:15%; }.w-20 { width:20%; }.w-25 { width:25%; }.w-30 { width:30%; }
.w-35 { width:35%; }.w-40 { width:40%; }.w-45 { width:45%; }.w-50 { width:50%; }.w-55 { width:55%; }.w-60 { width:60%; }.w-65 { width:65%; }
.w-70 { width:70%; }.w-75 { width:75%; }.w-80 { width:80%; }.w-85 { width:85%; }.w-90 { width:90%; }.w-95 { width:95%; }.w-100 { width:100%; }
.month-cell.narrow .month-open { align-items:center; padding:7px 2px; }
.month-cell.narrow .month-top { flex-direction:column; padding-right:0; }
.month-cell.narrow .month-people { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:3px; }
.month-cell.narrow .month-person :is(.pname, .ptag, .pinit) { display:none; }
.month-cell.narrow :is(.month-holiday, .month-bar) { display:none; }
.month-add { position:absolute; top:6px; right:6px; z-index:1; display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:var(--accent); font-size:18px; font-weight:600; line-height:1; text-decoration:none; opacity:0; }
.month-cell:hover .month-add, .month-add:focus-visible { opacity:1; }
.month-add:hover { background:var(--accent-soft); text-decoration:none; }
.month-add:focus-visible { outline:2px solid var(--focus); outline-offset:0; }
.month-pick { display:none; }
.month-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:12px 16px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12.5px; }
.month-grid + .month-legend { border-top:0; }
.month-legend .sw { display:inline-block; width:12px; height:12px; margin-right:6px; border-radius:3px; vertical-align:-1px; }
.month-notice { margin:0 0 12px; color:var(--ink-2); }
.month-day { display:none; margin-top:12px; }
.month-day .card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.month-day .card-head h3 { margin:0; }
.month-day-body { display:grid; gap:12px; }
.month-day-body > p { margin:0; }
.month-day-people { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.month-day-people .month-person { font-size:14px; line-height:20px; }
.month-day-people .ptag { font-size:13px; }
.month-day .month-bar { padding:0; }
.month-day .month-bar .pct { min-width:0; font-size:13px; }
@media (max-width: 1100px) {
  .month-cell { min-height:116px; }
  .month-open { padding:5px 5px 7px; }
  .month-person { font-size:12px; }
}
@media (max-width: 640px) {
  .month { --narrow:28px; }
  .month-head span { padding:7px 0; text-align:center; font-size:10.5px; letter-spacing:0; }
  .month-cell { min-height:0; }
  .month-cell > :is(.month-open, .month-add) { display:none; }
  .month-pick { display:flex; flex:1; flex-direction:column; align-items:center; gap:4px; min-width:0; min-height:64px; padding:5px 2px 7px; color:var(--ink-2); text-decoration:none; }
  .month-pick:hover { text-decoration:none; }
  .month-pick:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  .month-cell.outside .month-pick { opacity:.5; }
  .month-pick-num { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
  .month-pick .staffing { padding:0 4px; font-size:10px; line-height:15px; }
  .month-pick .bar { flex:none; width:78%; height:4px; margin-top:auto; }
  .month-cell.narrow .month-pick :is(.staffing, .bar) { display:none; }
  .month-cell.is-selected .month-pick { background:var(--accent-soft); }
  .month-cell.is-selected .month-pick-num { box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); }
  .month-cell.is-today .month-pick-num { background:var(--accent); color:var(--accent-ink); }
  .month-legend { gap:6px 14px; padding:10px 12px; font-size:12px; }
  .month-day { display:block; scroll-margin-top:12px; }
  .calendar-nav .calendar-new { width:100%; text-align:center; }
}
/* --- Agenda : vue Mois (fin) --- */

/* --- Horaires (C) début ---
   Réglages « Horaires de la clinique » et grille « Horaires du personnel ».
   Couleurs des personnes : classes pc-* de la vue Mois (même palette). */
/* Semaine : un jour par ligne, bascule puis plages. */
.week-rows { display:grid; gap:6px; }
.week-row { display:grid; grid-template-columns:110px 110px minmax(0,1fr); align-items:center; gap:8px 14px; min-width:0; margin:0; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.week-row > legend { float:left; padding:0; font-size:13.5px; font-weight:650; color:var(--ink); }
.week-toggle { display:flex; align-items:center; gap:8px; font-weight:500; }
.week-slots { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-width:0; }
.week-slot { display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); }
.week-slot input { --field-h:34px; width:128px; margin:0; font-variant-numeric:tabular-nums; }
.week-slot[hidden] { display:none; }
.week-row.is-off .week-slots { opacity:.4; }
.week-more { height:30px; padding:0 12px; border:1px dashed var(--band-line); border-radius:999px; background:none; color:var(--accent); font-size:12.5px; font-weight:600; cursor:pointer; }
.week-rows.is-disabled { opacity:.45; }
/* Heure tapée au clavier (« 9 », « 930 », « 5pm ») : champ court, remis en forme en sortant. */
.week-slot input[data-clock] { width:92px; text-align:center; }
.week-slot input.is-bad { border-color:var(--bad); background:var(--bad-soft); }
/* Horaire de la clinique : un jour vide est fermé (« Ouvrir »), ouvert il a ses outils. */
.clinic-day { grid-template-columns:110px minmax(0,1fr) auto; }
.clinic-day > .day-state, .clinic-day > .week-slots { grid-column:2; grid-row:1; }
.clinic-day > .day-tools { grid-column:3; grid-row:1; }
.day-state { display:flex; align-items:center; gap:12px; }
.day-state[hidden], .day-tools[hidden], .clinic-day > .week-slots[hidden], .hours-presets[hidden] { display:none; }
.day-closed { color:var(--ink-3); font-weight:500; }
.day-open { min-height:30px; padding:4px 14px; }
.clinic-day.is-off { background:none; border-style:dashed; }
.clinic-day.is-off .week-slots { opacity:1; }
.day-tools { display:flex; align-items:center; gap:6px; }
.link-btn { padding:4px 8px; border:0; border-radius:8px; background:none; color:var(--accent); font-size:12.5px; font-weight:600; cursor:pointer; }
.link-btn:hover { background:var(--surface-2); }
.day-x { width:30px; height:30px; border:0; border-radius:50%; background:none; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; }
.day-x:hover { background:var(--bad-soft); color:var(--bad); }
.hours-presets { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
.hours-presets > span { color:var(--ink-2); font-size:13px; font-weight:600; }
.hours-presets .secondary { min-height:32px; padding:4px 12px; font-size:13px; }
.clinic-hours { margin-top:8px; }
.hours-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px 24px; margin:0; }
.hours-facts > div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.hours-facts dt { font-weight:600; }
.hours-facts dd { margin:0; color:var(--ink-2); text-align:right; }
.hours-readonly { padding:12px 16px; border-radius:var(--card-sm); background:var(--surface); box-shadow:inset 3px 0 0 var(--line-2); }
.check-line { display:flex; align-items:flex-start; gap:10px; }
.check-line input { flex:none; width:18px; height:18px; margin-top:1px; }
.check-line small { display:block; margin-top:3px; font-weight:400; }
.hours-step { max-width:280px; }
.year-nav { display:flex; gap:6px; margin-left:auto; }
.year-nav .secondary { min-height:32px; padding:4px 12px; }
.holiday-row { display:grid; grid-template-columns:minmax(150px, 220px) minmax(0, 1fr) auto; align-items:center; gap:10px 14px; width:100%; }
.holiday-date { font-size:13.5px; font-weight:600; }
.holiday-rows li > .holiday-date { flex:0 0 220px; }
.holiday-actions { display:flex; gap:8px; }
.holiday-actions .secondary { min-height:34px; padding:6px 12px; }
.settings-inline .holiday-add-date { flex:0 1 200px; }
.settings-inline.holiday-prefill label { flex:0 1 280px; }
.holiday-actions .holiday-remove { color:var(--bad); }
.holiday-actions .holiday-remove:hover { background:var(--bad-soft); }
.week-row > legend::first-letter { text-transform:uppercase; }
/* Vues de l'agenda : pilules, l'active pleine. */
.view-switch { display:flex; flex-wrap:wrap; gap:4px; align-self:flex-start; max-width:100%; padding:4px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--card-shadow); }
.view-switch a { padding:7px 14px; border-radius:999px; color:var(--ink-2); font-size:13.5px; font-weight:600; text-decoration:none; }
.view-switch a:hover { background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.view-switch a[aria-current] { background:var(--accent); color:var(--accent-ink); }
/* Grille du personnel. */
.staff-card .card-head h2 { margin-right:auto; }
.staff-nav { display:flex; gap:6px; }
.staff-nav .secondary { min-height:32px; padding:4px 12px; }
.staff-hint { margin:0 calc(var(--band-inset) + 8px) 4px; font-size:12.5px; color:var(--ink-3); }
.staff-msg { margin:4px var(--band-inset) 6px; }
.staff-warn { padding:10px 14px; border-radius:var(--card-sm); background:var(--warn-soft); color:var(--warn); font-size:13.5px; }
.staff-scroll { max-width:100%; margin:6px var(--band-inset) 0; padding-bottom:6px; overflow-x:auto; }
.staff-scroll:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.staff-grid { width:100%; border-collapse:separate; border-spacing:0; }
.staff-grid :is(th, td) { padding:2px 1px; border:0; background:none; font-size:12px; text-align:center; white-space:nowrap; }
.staff-grid tbody tr:hover, .staff-grid tbody tr:focus-within { background:none; }
.staff-grid th.day { min-width:26px; padding:0 1px 4px; color:var(--ink-3); font-weight:650; vertical-align:bottom; }
.staff-grid .wd { display:block; font-size:10px; font-weight:550; line-height:1.4; }
.staff-grid .dn { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 3px; border-radius:999px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.staff-grid th.closed .dn, .staff-grid th.narrow .dn { color:var(--ink-3); font-weight:500; }
.staff-grid th.today .dn { background:var(--accent); color:var(--accent-ink); }
.staff-grid .today { background:color-mix(in oklch, var(--accent-soft) 75%, transparent); }
.staff-grid thead .today { border-radius:8px 8px 0 0; }
.staff-grid tfoot .today { border-radius:0 0 8px 8px; }
.staff-grid .narrow { width:16px; min-width:16px; max-width:16px; }
.staff-grid th.narrow .dn { min-width:0; padding:0; font-size:10px; }
.staff-grid .staff-name { position:sticky; left:0; z-index:1; min-width:160px; max-width:200px; padding:2px 10px 2px 0; background:var(--surface); text-align:left; }
.who { display:flex; align-items:center; gap:8px; min-width:0; padding:4px 10px; border:1px solid transparent; border-radius:999px; color:var(--ink); text-decoration:none; }
a.who:hover { background:var(--accent-soft); text-decoration:none; }
a.who:focus-visible { outline:2px solid var(--focus); outline-offset:0; }
.who.is-selected { border-color:var(--accent); background:var(--accent-soft); }
.who-dot { flex:none; width:12px; height:12px; border-radius:50%; background:var(--pc); }
.who-text { display:grid; min-width:0; }
.who .nm { overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; }
.who small { overflow:hidden; text-overflow:ellipsis; font-size:11px; color:var(--ink-3); }
.staff-grid tr.first-other > * { padding-top:7px; box-shadow:inset 0 1px 0 var(--line); }
.sc { --pc-soft:color-mix(in oklch, var(--pc, #475569) 22%, var(--surface)); position:relative; display:grid; place-items:center; min-width:0; height:28px; border-radius:6px; background:color-mix(in oklch, var(--line) 30%, var(--surface)); color:var(--ink-2); font-size:11px; font-style:normal; font-weight:700; line-height:1; text-decoration:none; }
a.sc:hover { outline:2px solid var(--focus); outline-offset:-1px; text-decoration:none; }
a.sc:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.sc-full { background:var(--pc); }
.sc-am { background:linear-gradient(to bottom, var(--pc) 50%, var(--pc-soft) 50%); }
.sc-pm { background:linear-gradient(to bottom, var(--pc-soft) 50%, var(--pc) 50%); }
.sc-custom { background:var(--pc-soft); box-shadow:inset 0 0 0 2px var(--pc); }
.sc-vac { background:var(--warn-soft); color:var(--warn); }
.sc-off { background:var(--bad-soft); color:var(--bad); }
.sc-hol { background:var(--off-soft); color:var(--off); }
.sc-gone { background:repeating-linear-gradient(45deg, var(--surface-2) 0 4px, var(--line) 4px 5px); }
.sc.diff::after { content:""; position:absolute; top:3px; right:3px; width:6px; height:6px; border-radius:50%; background:var(--surface); box-shadow:0 0 0 1.5px var(--ink); }
.sc.is-selected { outline:2px solid var(--accent); outline-offset:2px; }
.narrow .sc { border-radius:4px; font-size:0; }
.narrow .sc.diff::after { top:2px; right:2px; width:5px; height:5px; }
.foot { display:block; padding:3px 0; border-radius:6px; color:var(--ink-2); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.foot.short { background:var(--warn-soft); color:var(--warn); }
.foot.none { background:var(--bad-soft); color:var(--bad); }
.narrow .foot { height:4px; padding:0; font-size:0; }
.staff-grid tfoot :is(th, td) { padding-top:8px; }
.staff-grid tfoot th { padding-left:10px; color:var(--ink-2); font-size:12.5px; font-weight:650; }
.staff-legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin:10px var(--band-inset) 0; padding:0 8px; list-style:none; font-size:12.5px; color:var(--ink-2); }
.staff-card > .staff-legend:last-child { margin-bottom:var(--band-inset); }
.staff-legend li { display:flex; align-items:center; gap:7px; }
.staff-legend .sc { width:22px; height:18px; font-size:10px; }
.staff-legend .sc.diff::after { top:2px; right:2px; width:5px; height:5px; }
/* Éditeur d'une case ou d'une personne : sous la grille, dans la carte. */
.staff-editor { display:grid; gap:14px; margin:12px var(--band-inset) var(--band-inset); padding:14px 16px 16px; border:1px solid var(--band-line); border-radius:var(--card-sm); background:var(--surface-2); scroll-margin:16px; }
.staff-editor-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.staff-editor-head h3 { margin:0; font-size:15px; }
.staff-editor-head h3:focus { outline:none; }
.staff-editor-head p { margin-top:3px; font-size:12.5px; color:var(--ink-3); }
.staff-close { display:grid; flex:none; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--ink-2); text-decoration:none; }
.staff-close:hover { background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.staff-options, .staff-hours, .staff-colour fieldset { min-width:0; margin:0; padding:0; border:0; }
.staff-options { display:flex; flex-wrap:wrap; gap:8px; }
.opt { position:relative; }
.opt input { position:absolute; width:1px; height:1px; opacity:0; }
.opt span { display:inline-flex; align-items:center; height:34px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; cursor:pointer; }
.opt span:hover { border-color:var(--accent); color:var(--accent); }
.opt input:checked + span { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.opt input:focus-visible + span { outline:2px solid var(--focus); outline-offset:2px; }
.staff-hours { display:grid; gap:8px; }
.staff-hours[hidden] { display:none; }
:is(.staff-hours, .staff-colour fieldset) > legend { margin-bottom:8px; padding:0; color:var(--ink-2); font-size:13px; font-weight:600; }
.staff-editor-fields { display:grid; grid-template-columns:minmax(0, 220px) minmax(0, 1fr); gap:14px; }
.staff-week, .staff-colour { display:grid; gap:12px; }
.staff-colour { padding-top:14px; border-top:1px solid var(--line); }
.swatches { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.swatch { position:relative; width:30px; height:30px; border-radius:50%; background:var(--pc); cursor:pointer; }
.swatch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.swatch:has(input:checked) { box-shadow:0 0 0 2px var(--surface-2), 0 0 0 4px var(--ink); }
.swatch:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:5px; }
.swatch-auto { display:inline-flex; align-items:center; gap:6px; margin-left:4px; }
@media (max-width: 640px) {
  .week-row { grid-template-columns:minmax(0, 1fr) auto; padding:8px 10px; }
  .week-row > .week-slots { grid-column:1 / -1; }
  .week-slot input { width:100px; }
  .week-slot input[data-clock] { width:84px; }
  .clinic-day { grid-template-columns:minmax(0,1fr) auto; }
  .clinic-day > .day-state, .clinic-day > .week-slots { grid-column:1 / -1; grid-row:2; }
  .clinic-day > .day-tools { grid-column:2; grid-row:1; }
  .holiday-row { grid-template-columns:minmax(0, 1fr); }
  .holiday-actions > * { flex:1 1 auto; }
  .staff-grid .staff-name { min-width:104px; max-width:116px; padding-right:6px; }
  .who { gap:6px; padding:4px 6px; }
  .who small { display:none; }
  .who .nm { font-size:12px; }
  .staff-editor { padding:12px; }
  .staff-editor-fields { grid-template-columns:minmax(0, 1fr); }
  .staff-card .card-head h2 { flex-basis:100%; }
}
/* --- Horaires (C) fin --- */
/* --- « Prendre rendez-vous » (vague 4, reception_book.html) ---
   Trois colonnes qui tiennent dans la fenêtre sans défilement de page à
   1366 × 768 : filtres (224 px), semaine + journée (le reste), patient et
   réservation (296 px). La journée prend toute la hauteur restante ; ses
   blocs sont placés par le script (top / height). Pas de style en ligne. */
.agenda-tabs { display:flex; flex-wrap:wrap; gap:4px 20px; border-bottom:1px solid var(--line); }
.agenda-tabs a { margin-bottom:-1px; padding:8px 2px; border-bottom:2px solid transparent; color:var(--ink-2); font-size:14px; font-weight:550; white-space:nowrap; text-decoration:none; }
.agenda-tabs a:hover { color:var(--accent); text-decoration:none; }
.agenda-tabs a[aria-current] { color:var(--accent); font-weight:650; border-bottom-color:var(--accent); }
.agenda-head { flex:none; display:flex; align-items:flex-end; gap:24px; }
.agenda-head h1 { margin:0 0 6px; font-size:19px; line-height:1.2; }
.agenda-head .agenda-tabs { flex:1; min-width:0; }
.main.main-fill { max-width:none; height:calc(100vh - var(--top)); padding:8px 12px 10px; gap:6px; overflow:hidden; }
/* Fenêtre moyenne : le rail se réduit aux icônes sur cette page, comme la maquette. */
@media (max-width: 1599px) {
  .app.rail-compact { --rail:68px; }
  .rail-compact .brand { justify-content:center; padding:0; }
  .rail-compact .brand-name { display:none; }
  .rail-compact .nav { padding:12px 10px; }
  .rail-compact .nav a { justify-content:center; padding:0; height:44px; }
  .rail-compact .nav a[aria-current]::before { left:-10px; }
  .rail-compact .nav-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
.rb-error { flex:none; margin:0; }
.rb { flex:1; min-height:0; display:grid; grid-template-columns:224px minmax(0, 1fr) 296px; gap:10px; }
.rb .card { border-radius:16px; box-shadow:0 2px 10px oklch(0.3 0.06 var(--hue) / .07); }
.rb-left, .rb-right { min-height:0; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:14px; }
.rb-right { gap:8px; padding:10px 12px; }
.rb-sec-row { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:4px; }
.rb-sec-row .rb-sec { margin:0; }
.rb-mid { min-width:0; min-height:0; display:flex; flex-direction:column; gap:10px; }
.rb .dot { flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pc, var(--ink-3)); }
.rb-sec { margin:0 0 5px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.rb-hint { font-size:11.5px; color:var(--ink-3); }
.rb-left-hint { margin-top:auto; }
.rb-icon { display:inline-grid; place-items:center; min-width:28px; height:26px; padding:0 8px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--accent); font-size:14px; line-height:1; text-decoration:none; }
.rb-icon:hover { border-color:var(--accent); text-decoration:none; }
.rb-btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:30px; padding:4px 12px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--accent); font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; cursor:pointer; }
.rb-btn:hover { border-color:var(--accent); text-decoration:none; }
.rb-btn.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.rb-btn-sm { min-height:26px; padding:2px 10px; }
.rb-btn-xs { min-height:20px; padding:0 8px; font-size:12px; }
.rb-chips { display:flex; flex-wrap:wrap; gap:5px; }
.rb-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font-size:12.5px; line-height:18px; white-space:nowrap; text-decoration:none; cursor:pointer; }
.rb-right .rb-chips { gap:4px; }
.rb-right .rb-chip { padding:1px 8px; font-size:12px; }
.rb-chip:hover { border-color:var(--accent); text-decoration:none; }
.rb-chip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.rb-chip.on .dot { box-shadow:0 0 0 1.5px var(--accent-ink); }
/* Petit mois. */
.rb-mini-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.rb-mini-head strong { font-size:13.5px; }
.rb-mini-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px; }
.rb-mini-wd { margin-bottom:3px; }
.rb-mini-wd span { text-align:center; font-size:10.5px; font-weight:650; color:var(--ink-3); }
.rb-mday { display:grid; place-items:center; height:26px; border:1px solid transparent; border-radius:7px; color:var(--ink); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; text-decoration:none; }
.rb-mday:hover { border-color:var(--line-2); text-decoration:none; }
.rb-mday.lvl-many { background:#b7dfc0; color:#174f25; }
.rb-mday.lvl-short { background:#f7d27a; color:#5c3a00; }
.rb-mday.lvl-full { background:#f1b8ae; color:#6e1d13; }
.rb-mday.lvl-closed { color:var(--ink-3); opacity:.7; }
.rb-mday.weekend { opacity:.55; }
.rb-mday.out { opacity:.45; }
.rb-mday.today { text-decoration:underline; text-underline-offset:3px; }
.rb-mday[aria-current] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); opacity:1; }
.rb-legend { display:flex; gap:10px; margin-top:6px; font-size:10.5px; color:var(--ink-3); }
.rb-sw { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; }
.rb-sw.lvl-many { background:#5fae72; }
.rb-sw.lvl-short { background:#e3a72a; }
.rb-sw.lvl-full { background:#d9776a; }
/* Semaine. */
.rb-week { flex:none; padding:8px 10px 10px; }
.rb-week-head { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.rb-week-head strong { font-size:13.5px; }
.rb-week-head .rb-btn { margin-left:auto; }
.rb-week-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.rb-wcard { display:flex; flex-direction:column; gap:3px; min-width:0; padding:6px 7px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.rb-wcard.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft); }
.rb-whead { display:flex; justify-content:space-between; align-items:baseline; gap:4px; min-width:0; color:var(--ink); font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
.rb-whead:hover { color:var(--accent); text-decoration:none; }
.rb-wcount { min-width:0; font-size:10.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; }
.rb-wcount.is-ok { color:#1f5e2e; }
.rb-wcount.is-none { color:#9a3b2e; }
/* Une ligne par personne : les heures qui ne tiennent pas passent dessous, cachées. */
.rb-wrow { display:flex; flex-wrap:wrap; align-items:center; gap:1px 4px; height:19px; overflow:hidden; min-width:0; font-size:11.5px; }
.rb-wrow > .dot { margin:5px 0; }
.rb-wname { flex:none; width:46px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); line-height:19px; }
.rb-wt { height:17px; margin:1px 0; padding:0 4px; border:1px solid #6db27c; border-radius:6px; background:#e5f4e8; color:#1f5e2e; font-size:11px; font-weight:650; line-height:15px; white-space:nowrap; text-decoration:none; font-variant-numeric:tabular-nums; cursor:pointer; }
.rb-wt:hover { background:#cdebd3; text-decoration:none; }
.rb-wnone { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font-size:11px; line-height:19px; }
/* « Prochaines disponibilités » se pose par-dessus la semaine, qui reste en
   place (cachée) : la boîte garde la hauteur de la semaine dans les deux états,
   et la journée dessous ne saute pas. Le plancher loge deux rangées de créneaux
   quand la semaine est courte (une seule personne). */
.rb-week-body { position:relative; min-height:94px; }
.rb-week-body.is-next > .rb-week-grid { visibility:hidden; }
.rb-next-grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(44px, 1fr)); align-content:start; gap:6px; overflow:auto; }
.rb-next-grid > .rb-hint { grid-column:1 / -1; margin:0; }
.rb-next { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1px; box-sizing:border-box; min-width:0; padding:5px 9px; border:1px solid #6db27c; border-radius:10px; background:#f1faf3; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer; }
.rb-next:hover { background:#ddf1e2; text-decoration:none; }
.rb-next strong { font-size:12.5px; white-space:nowrap; }
.rb-next span { display:flex; align-items:center; gap:5px; max-width:100%; overflow:hidden; color:var(--ink-2); font-size:11.5px; white-space:nowrap; text-overflow:ellipsis; }
/* Journée. */
.rb-day { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 10px 10px; }
.rb-day-head { flex:none; display:flex; align-items:baseline; gap:10px; margin-bottom:6px; min-width:0; }
.rb-day-head strong { font-size:15px; white-space:nowrap; }
.rb-day-head .rb-hint { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-day-body { flex:1; min-height:0; overflow:auto; }
.rb-grid { display:flex; min-height:100%; }
.rb-ruler { flex:none; position:relative; width:40px; margin-top:31px; }
.rb-ruler span { position:absolute; right:6px; transform:translateY(-50%); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rb-cols { flex:1; min-width:0; display:flex; align-self:flex-start; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.rb-col { flex:1 1 0; min-width:150px; border-right:1px solid var(--line); }
.rb-col:last-child { border-right:0; }
.rb-col.narrow { flex:0 0 40px; min-width:0; }
.rb-colhead { display:flex; align-items:center; gap:6px; height:30px; margin:0; padding:0 8px; border-bottom:1px solid var(--line); background:color-mix(in oklch, var(--pc, var(--ink-3)) 11%, var(--surface)); font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; }
.rb-colhead > span:not(.rb-cnt) { overflow:hidden; text-overflow:ellipsis; }
.rb-col.narrow .rb-colhead, .rb-pcol.narrow .rb-colhead { justify-content:center; padding:0; color:var(--pc-ink, var(--ink-2)); }
.rb-col.narrow .rb-colhead .dot, .rb-pcol.narrow .rb-colhead .dot { display:none; }
.rb-cnt { margin-left:auto; padding:1px 7px; border-radius:999px; background:#e5f4e8; color:#1f5e2e; font-size:11.5px; font-weight:650; }
.rb-colbody { position:relative; background-color:var(--surface); background-image:linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-repeat:repeat-y; }
.rb-hatch, .rb-off, .rb-col.narrow .rb-colbody { background-image:repeating-linear-gradient(135deg, #f3f5fa 0, #f3f5fa 6px, #eceff6 6px, #eceff6 12px); }
.rb-off { position:absolute; left:0; right:0; display:grid; place-items:center; color:var(--ink-3); font-size:11px; font-weight:600; }
.rb-col.narrow .rb-colbody { display:flex; align-items:center; justify-content:center; }
.rb-vert { writing-mode:vertical-rl; transform:rotate(180deg); color:#6b7389; font-size:12px; font-weight:650; letter-spacing:.03em; white-space:nowrap; }
.rb-appt { position:absolute; left:4px; right:4px; box-sizing:border-box; overflow:hidden; padding:3px 6px; border-left:3px solid var(--tone, var(--ink-3)); border-radius:6px; background:var(--tint, var(--surface-2)); color:#2a3149; font-size:11px; line-height:13px; white-space:nowrap; text-overflow:ellipsis; }
.rb-appt.status-no_show { opacity:.6; }
/* Sans dossier : contour pointillé et étiquette, lisibles même sur 15 min. */
.rb-appt.walkin { border:1.5px dashed var(--tone, var(--ink-3)); border-left-width:3px; }
.rb-appt.tight { padding-top:0; padding-bottom:0; font-size:10px; }
.rb-appt.tight .walkin-tag { font-size:8px; line-height:9px; padding:0 3px; vertical-align:1px; }
.rb-pitem.walkin { border-left-style:dashed; outline:1px dashed var(--tone, var(--ink-3)); outline-offset:-1px; }
.rb-walkin .rb-hint { margin-top:4px; }
.rb-slot { position:absolute; z-index:1; padding:0 6px; border:1px solid #6db27c; border-radius:6px; background:#e5f4e8; color:#1f5e2e; font-size:11.5px; font-weight:650; text-align:left; white-space:nowrap; overflow:hidden; font-variant-numeric:tabular-nums; cursor:pointer; }
.rb-slot:hover { background:#cdebd3; }
.rb-sel { position:absolute; z-index:2; left:4px; right:4px; overflow:hidden; padding:3px 6px; border-radius:6px; background:var(--accent); color:var(--accent-ink); box-shadow:0 2px 8px oklch(0.43 0.14 var(--hue) / .35); font-size:11px; line-height:13px; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
.rb-empty { padding:16px 4px; color:var(--ink-2); font-size:13px; }
/* Journée sans JavaScript : colonnes en liste. */
.rb-plain { display:flex; gap:8px; min-height:100%; }
.rb-pcol { flex:1 1 0; min-width:150px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.rb-pcol.narrow { flex:0 0 40px; min-width:0; }
.rb-pcol ul { margin:0; padding:6px; list-style:none; display:grid; gap:3px; }
.rb-pitem { padding:3px 6px; border-left:3px solid var(--tone, var(--ink-3)); border-radius:6px; background:var(--tint, var(--surface-2)); font-size:11px; }
.rb-pslots { display:flex; flex-wrap:wrap; gap:4px; padding:0 6px 6px; }
.rb-pslot { padding:1px 6px; border:1px solid #6db27c; border-radius:6px; background:#e5f4e8; color:#1f5e2e; font-size:11.5px; font-weight:650; text-decoration:none; }
.rb-pslot.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.rb-strip { display:flex; align-items:center; justify-content:center; min-height:240px; height:calc(100% - 30px); margin:0; background-image:repeating-linear-gradient(135deg, #f3f5fa 0, #f3f5fa 6px, #eceff6 6px, #eceff6 12px); }
/* Colonne de droite : patient, motif, créneau, note, Réserver. */
.rb .rb-inp { width:100%; min-width:0; min-height:0; height:28px; margin:0; padding:0 8px; border:1px solid var(--line-2); border-radius:9px; background-color:var(--surface); font-size:13px; line-height:26px; }
.rb select.rb-inp { padding-right:26px; }
.rb textarea.rb-inp { height:auto; padding:4px 8px; line-height:1.35; }
.rb .rb-inp:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.rb-row { display:flex; align-items:center; gap:6px; }
.rb-results { margin-top:6px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.rb-res { display:flex; justify-content:space-between; gap:6px; width:100%; margin:0; padding:6px 8px; border:0; border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12.5px; text-align:left; text-decoration:none; cursor:pointer; }
.rb-res:last-child { border-bottom:0; }
.rb-res:hover, .rb-res[aria-selected="true"] { background:var(--accent-soft); text-decoration:none; }
.rb-res > span:first-child { min-width:0; display:flex; flex-direction:column; }
.rb-res .rb-hint { white-space:nowrap; }
.rb-res-new { color:var(--accent); font-weight:650; }
.rb-chosen { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; }
.rb-chosen > div { min-width:0; display:flex; flex-direction:column; }
.rb-chosen strong { font-size:14px; }
.rb-chosen .rb-btn { margin-left:auto; }
.rb-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; }
.rb-fld { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rb .rb-fld label { margin:0; font-size:11px; font-weight:650; line-height:14px; color:var(--ink-2); }
.rb-newfile .rb-hint { margin-top:4px; }
.rb-newfile .rb-hint.bad { color:var(--bad); }
.rb-warn { margin-top:5px; padding:5px 8px; border:1px solid #e7b54a; border-radius:10px; background:#fff6e0; color:#5e4300; font-size:12px; line-height:1.35; }
.rb-warn .rb-btn { min-height:22px; margin:3px 0 0; padding:1px 9px; font-size:12px; }
.rb-custom { margin-top:6px; }
.rb .rb-dur { flex:none; width:92px; }
.rb-picked { display:flex; flex-direction:column; padding:6px 10px; border:1px solid var(--accent); border-radius:12px; background:var(--accent-soft); line-height:1.35; }
.rb-picked strong { font-size:13.5px; }
.rb-picked span { font-size:12.5px; }
/* Note : une ligne au repos, deux dès qu'on l'écrit. */
.rb .rb-note { height:28px; resize:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rb .rb-note:focus, .rb .rb-note:not(:placeholder-shown) { height:46px; overflow:auto; white-space:normal; }
.rb-foot { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.rb .rb-book { width:100%; min-height:36px; padding:8px; border-radius:999px; font-size:14.5px; }
.rb .rb-book:disabled { background:#9aa8c8; border-color:#9aa8c8; filter:none; cursor:not-allowed; }
.rb-toast { padding:6px 9px; border-radius:10px; background:#e5f4e8; color:#1f5e2e; font-size:12.5px; }
.rb-toast.bad { background:var(--bad-soft); color:var(--bad); }
.rb-toast a { color:inherit; font-weight:650; text-decoration:underline; }
.rb-js .rb-nojs { display:none; }
#rb-search { display:none; }
/* Grand écran : la journée prend la largeur gagnée. */
@media (min-width: 1700px) { .rb { grid-template-columns:240px minmax(0, 1fr) 320px; } }
/* Étroit : une seule colonne, la page défile. */
@media (max-width: 1100px) {
  .main.main-fill { height:auto; overflow:visible; }
  .rb { grid-template-columns:minmax(0, 1fr); }
  .rb-day { min-height:520px; }
}
@media (max-width: 640px) { .rb-week-grid { grid-template-columns:minmax(0, 1fr); } .rb-next-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none; grid-auto-rows:minmax(44px, auto); } .agenda-head { flex-wrap:wrap; gap:6px; } }
/* --- fin de « Prendre rendez-vous » --- */
/* --- Plusieurs cliniques (réseau) : sélecteur de l'en-tête et accès --- */
.clinic-menu { position: relative; }
.clinic-menu > summary { list-style: none; cursor: pointer; padding: 5px 8px; border-radius: 8px; }
.clinic-menu > summary::-webkit-details-marker { display: none; }
.clinic-menu > summary:hover, .clinic-menu[open] > summary { background: var(--accent-soft); }
.clinic-menu-chev { width: 12px; height: 12px; flex: none; transform: rotate(90deg); color: var(--ink-3); }
.clinic-menu[open] .clinic-menu-chev { transform: rotate(-90deg); }
.clinic-menu-panel { left: 0; right: auto; min-width: 250px; padding: 14px 10px 10px; z-index: 20; }
.clinic-menu-panel strong { margin: 0 8px 8px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.clinic-menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: min(70vh, 520px); overflow-y: auto; }
.clinic-menu-panel button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border-radius: 8px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.clinic-menu-panel button svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.clinic-menu-panel button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.clinic-menu-panel button[aria-current] { cursor: default; background: var(--accent-soft); color: var(--accent); }
.clinic-menu-panel button[aria-current] svg { color: var(--accent); }
/* ARA : partenaire de la journée, sous le lieu du jour (lieu personnel). */
.clinic-menu-panel .place-partner-head { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.clinic-menu-panel .place-partners button { font-weight: 500; padding-left: 31px; }
.access-card { display: grid; }
.access-scroll { overflow-x: auto; }
.access-table { width: 100%; border-collapse: collapse; }
.access-table th, .access-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13.5px; }
.access-table thead th { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.access-table thead small { display: block; font-weight: 500; color: var(--accent); }
.access-table tbody th { font-weight: 650; white-space: nowrap; }
.access-check { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.access-check + .access-check { margin-top: 6px; }
.access-network { color: var(--ink-2); font-size: 12.5px; }
.access-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 650; }
.access-none { color: var(--ink-3); }
.access-actions { display: flex; align-items: center; gap: 18px; padding: 16px 22px; }
.access-help { flex: 1; margin: 0; color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 640px) { .access-actions { flex-direction: column; align-items: stretch; } }
.clinic-menu-all a { display:flex; align-items:center; gap:8px; width:100%; padding:8px; border-radius:8px; color:var(--accent); font-size:13.5px; font-weight:650; text-decoration:none; }
.clinic-menu-all a svg { width:15px; height:15px; flex:none; }
.clinic-menu-all a:hover, .clinic-menu-all a[aria-current] { background:var(--accent-soft); text-decoration:none; }
.clinic-menu-all { padding-bottom:4px; margin-bottom:4px; border-bottom:1px solid var(--line); }

/* Accès par personne : liste de l'équipe à gauche, ses cliniques à droite. */
.acc-layout { display:grid; grid-template-columns:minmax(230px, 290px) minmax(0, 1fr); gap:16px; align-items:start; }
.acc-people { display:grid; grid-template-rows:auto auto minmax(0, 1fr); position:sticky; top:calc(var(--top, 64px) + 12px); max-height:calc(100vh - var(--top, 64px) - 24px); }
.acc-search { padding:12px 12px 8px; }
.acc-count { margin:0; padding:0 14px 8px; color:var(--ink-3); font-size:12px; }
.acc-list { margin:0; padding:0; list-style:none; overflow-y:auto; border-top:1px solid var(--line); }
.acc-list a { display:grid; gap:1px; padding:9px 14px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.acc-list a strong { font-size:13.5px; font-weight:650; }
.acc-list a em { font-style:normal; font-weight:500; color:var(--ink-3); }
.acc-list a span { color:var(--ink-3); font-size:12px; }
.acc-list a:hover { background:color-mix(in oklch, var(--accent-soft) 60%, transparent); text-decoration:none; }
.acc-list a[aria-current] { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.acc-list a[aria-current] strong { color:var(--accent); }
.acc-empty { padding:12px 14px; color:var(--ink-3); font-size:13px; }
.acc-person { display:grid; }
.acc-person-head { padding:16px 20px 12px; }
.acc-person-head h2 { margin:0; font-size:18px; }
.acc-person-head p { margin:2px 0 0; color:var(--ink-3); font-size:13px; }
.acc-all { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 20px 14px; padding:10px 14px 12px; border:1px dashed var(--line-2); border-radius:10px; background:var(--surface-2); }
.acc-all legend { padding:0 6px; color:var(--ink-2); font-size:12px; font-weight:650; }
.acc-all .access-check + .access-check { margin-top:0; }
.acc-role { display:flex; align-items:center; gap:8px; font-weight:600; }
.acc-role select { width:auto; min-width:150px; margin-top:0; }
.acc-all button { margin-left:auto; }
.acc-table select { width:auto; min-width:160px; }
.acc-table td { vertical-align:middle; }
.acc-table tbody th { vertical-align:middle; background:none; color:var(--ink); font-size:13.5px; white-space:normal; }
.acc-table tbody th small { display:block; color:var(--accent); font-size:11px; font-weight:500; }
.acc-table tr.is-off th { color:var(--ink-3); font-weight:600; }
.team-add { display:flex; justify-content:center; gap:6px; width:100%; }
.team-add[aria-current] { box-shadow:0 0 0 3px var(--accent-soft); }
.team-former { padding:12px 14px 6px; color:var(--ink-3); font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--line); }
.acc-list a.is-off strong { color:var(--ink-3); }
.team-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px 18px; padding:4px 20px 8px; }
.team-fields .wide { grid-column:1 / -1; }
.team-fields small { display:block; margin-top:5px; color:var(--ink-3); font-weight:400; font-size:12px; }
.team-ro { display:grid; gap:7px; align-content:start; color:var(--ink-2); font-size:13px; font-weight:600; }
.team-ro strong { padding:9px 0; color:var(--ink); font-weight:500; }
.team-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin:4px 20px 0; padding:0; list-style:none; }
.team-links a { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.team-links svg { width:16px; height:16px; }
.team-help { margin:12px 20px 0; color:var(--ink-3); font-size:12.5px; line-height:1.45; }
.team-status { margin:0 20px 10px; color:var(--ink-3); font-weight:600; }
.team-form .error { margin:0 20px 12px; }
.team-check { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); cursor:pointer; }
.team-check input { margin-top:3px; }
.team-check strong { display:block; color:var(--ink); }
.team-if-none { display:none; }
.team-form:has([name=no_access]:checked) .team-if-access { display:none; }
.team-form:has([name=no_access]:checked) .team-if-none { display:block; }
/* Équipe : la fiche, puis « Accès aux cliniques » et les autres cartes. */
.team-side { display:grid; gap:16px; align-content:start; min-width:0; }
.team-search { margin-top:8px; }
.apt-dot { display:inline-block; width:10px; height:10px; margin-right:7px; border-radius:50%; background:var(--tone); vertical-align:0; }
.apt-group { display:grid; gap:7px; color:var(--ink-2); font-size:13px; font-weight:600; }
.apt-group small { color:var(--ink-3); font-weight:400; font-size:12px; }
.apt-checks { display:flex; flex-wrap:wrap; gap:8px 22px; font-weight:500; color:var(--ink); }
.apt-checks .access-check + .access-check { margin-top:0; }
.apt-tones { display:flex; flex-wrap:wrap; gap:10px; }
.apt-tone { position:relative; width:30px; height:30px; border-radius:50%; background:var(--tone); cursor:pointer; box-shadow:0 0 0 1px color-mix(in oklch, var(--tone) 60%, white); }
.apt-tone input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.apt-tone:has(input:checked) { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--tone); }
.apt-tone:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:4px; }
.apt-moves { display:flex; flex-wrap:wrap; gap:8px; }
.apt-confirm { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 20px 14px; padding:12px 14px; border-radius:10px; background:var(--bad-soft); color:var(--bad); font-size:13px; }
.apt-confirm p { margin:0; flex:1 1 260px; }
.apt-confirm div { display:flex; gap:8px; }
.team-form fieldset.team-fields { margin:0; border:0; min-width:0; }
.team-form .access-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px 18px; }
.acc-table :is(th, td):nth-child(2), .acc-table :is(th, td):nth-child(4) { width:1%; text-align:center; }
.acc-note { color:var(--ink-3); font-size:12px; }
.acc-person-empty { padding:22px; color:var(--ink-3); }
/* Réglages › Succursales : code court à côté du nom. */
.acc-list a em.branch-code { margin-left:4px; font-size:11px; font-weight:650; letter-spacing:.04em; }
@media (max-width: 900px) {
  .acc-layout { grid-template-columns:minmax(0, 1fr); }
  .acc-people { position:static; max-height:none; }
  .acc-list { max-height:260px; }
}

/* Agenda Réseau (network.html) : semaines détaillées (2 à 4 cliniques) ou
   grille dense (5 et plus). Couleurs des personnes : .pc-* ; barres : .w-*. */
.main:has(> .net) { max-width:1600px; padding:18px 24px 64px; gap:14px; }
.net { display:grid; }
.net-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:12px 16px; border-bottom:1px solid var(--line); }
.net-nav { display:flex; align-items:center; gap:6px; }
.net-nav .secondary { min-width:38px; padding:6px 10px; font-size:15px; }
.net-nav h2 { margin:0 0 0 8px; font-size:17px; }
.net-nav h2::first-letter { text-transform:uppercase; }
.net-zoom { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.net-zoom a { padding:5px 12px; border-radius:7px; color:var(--ink-2); font-size:13px; font-weight:600; text-decoration:none; }
.net-zoom a:hover { color:var(--accent); text-decoration:none; }
.net-zoom a[aria-current] { background:var(--surface); color:var(--accent); box-shadow:0 1px 2px color-mix(in oklch, var(--ink) 14%, transparent); }
.net-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto; }
.net-tools input[type=search] { width:210px; }
.net-note a { color:var(--accent); font-weight:600; }
.net-note { margin:0; padding:7px 16px; border-bottom:1px solid var(--line); color:var(--ink-3); font-size:12.5px; }
.net-warn { color:var(--warn); }
.net-week, .net-heat { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.net-col-name { width:170px; }
.net-week col.narrow { width:40px; }
.net :is(.net-week, .net-heat) th { padding:0; text-transform:none; letter-spacing:0; }
.net-name { padding:8px 12px !important; border-right:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13px; font-weight:650; text-align:left; }
.net-name .nm { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.net-name small { display:block; color:var(--accent); font-size:11px; font-weight:500; }
.net-week + .net-week { margin-top:10px; border-top:1px solid var(--line); }
.net-week thead th { padding:7px 8px !important; border-bottom:1px solid var(--line); background:var(--surface-2); color:var(--ink-3); font-size:12px; font-weight:600; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.net-week thead th.narrow { padding:7px 0 !important; text-align:center; font-size:0; }
.net-week thead th.narrow .dn { font-size:12px; }
.net-day .dn { color:var(--ink); font-weight:700; }
.net-day.is-today { color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
.net-day.is-today .dn { color:var(--accent); }
.net-day.outside { opacity:.5; }
.net-week td { height:1px; padding:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:top; }
.net-week td:last-child { border-right:0; }
.net-week td.narrow { background:var(--surface-2); }
.net-week td.outside > * { opacity:.45; }
.nc { display:flex; flex-direction:column; gap:5px; width:100%; height:100%; min-height:68px; padding:7px 7px 8px; color:var(--ink); text-align:left; }
button.nc:hover { background:color-mix(in oklch, var(--accent-soft) 55%, transparent); }
button.nc:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.nc.is-today { background:color-mix(in oklch, var(--accent-soft) 55%, var(--surface)); }
.nc.closed { background:var(--surface-2); color:var(--ink-3); font-size:12px; font-style:italic; }
.nc .chips { display:flex; flex-wrap:wrap; gap:3px; }
.chip { display:inline-grid; place-items:center; min-width:27px; height:21px; padding:0 4px; border:1.5px solid var(--pc-ink, var(--ink-2)); border-radius:5px; background:var(--pc-ink, var(--ink-2)); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em; line-height:1; }
.chip.half { border-style:dashed; border-color:var(--pc, var(--ink-3)); background:var(--surface); color:var(--pc-ink, var(--ink-2)); }
.chip.rec { border-radius:999px; }
.nbar { display:flex; align-items:center; gap:6px; margin-top:auto; }
.nbar-track { display:block; flex:1; min-width:0; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.nbar-fill { display:block; height:100%; border-radius:3px; }
.nt-low { background:oklch(0.74 0.075 var(--hue)); }.nt-mid { background:var(--accent); }.nt-high { background:oklch(0.6 0.15 52); }
.nbar .pct { min-width:32px; color:var(--ink-2); font-size:11.5px; font-weight:650; text-align:right; font-variant-numeric:tabular-nums; }
.nshort { display:block; padding-top:3px; border-top:2px solid var(--bad); color:var(--bad); font-size:11.5px; font-weight:650; line-height:1.25; }
.net-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:10px 16px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12px; }
.net-legend .legend-chip { --pc:var(--accent); --pc-ink:var(--accent); vertical-align:middle; }
.net-legend .legend-bar { display:inline-block; width:44px; vertical-align:middle; }
.net-legend .nshort { display:inline; padding:0 0 1px; border-top:0; border-bottom:2px solid var(--bad); }
.net-legend-hint { margin-left:auto; color:var(--ink-3); }
/* Grille dense : couleur = % réservé, contour rouge = manque. */
.net-scroll { overflow-x:auto; }
.net-heat { min-width:860px; }
.net-heat col.narrow { width:16px; }
.net-heat .net-col-sum { width:136px; }
.net-heat .net-name small { display:none; }
.net-heat .net-name { position:sticky; left:0; z-index:1; padding:3px 10px !important; font-size:12.5px; line-height:1.25; }
.net-heat thead th { padding:5px 0 !important; border-bottom:1px solid var(--line); background:var(--surface-2); color:var(--ink-3); font-size:10px; font-weight:600; text-align:center; }
.net-heat thead .net-name { z-index:2; background:var(--surface-2); color:var(--ink-2); font-size:12px; }
.net-heat thead .wd { display:block; text-transform:uppercase; letter-spacing:.02em; font-size:9.5px; }
.net-heat thead .dn { display:block; font-size:12px; }
.net-heat thead .narrow .wd, .net-heat thead .narrow .dn { font-size:0; }
.net-heat thead .wkend:not(.narrow) { background:color-mix(in oklch, var(--surface-2) 70%, var(--line)); }
.net-sorts { display:block; color:var(--ink-3); font-size:10.5px; font-weight:500; }
.net-sorts a { color:var(--ink-3); }
.net-sorts a[aria-current] { color:var(--accent); font-weight:700; }
.net-heat td { padding:1.5px 1px; border-bottom:1px solid var(--line); }
.net-heat tbody tr:hover .net-name { color:var(--accent); }
.net-heat tbody tr.is-current .net-name { box-shadow:inset 3px 0 0 var(--accent); }
.hc { display:grid; place-items:center; width:100%; height:21px; border-radius:4px; color:var(--ink-2); font-size:10.5px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1; }
.h0 { background:oklch(0.97 0.008 var(--hue)); }.h1 { background:oklch(0.94 0.025 var(--hue)); }.h2 { background:oklch(0.91 0.04 var(--hue)); }
.h3 { background:oklch(0.87 0.055 var(--hue)); }.h4 { background:oklch(0.82 0.07 var(--hue)); }.h5 { background:oklch(0.76 0.085 var(--hue)); }
.h6 { background:oklch(0.68 0.105 var(--hue)); color:#fff; }.h7 { background:oklch(0.6 0.12 var(--hue)); color:#fff; }.h8 { background:oklch(0.52 0.135 var(--hue)); color:#fff; }
.h9 { background:oklch(0.43 0.14 var(--hue)); color:#fff; }
.hc.closed { background:repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--line) 4px 5px); }
td.narrow .hc.closed { background:none; }
.hc.short { box-shadow:inset 0 0 0 2px var(--bad); }
.hc.h6.short, .hc.h7.short, .hc.h8.short, .hc.h9.short { box-shadow:inset 0 0 0 2px var(--bad), inset 0 0 0 3px #fff; }
button.hc:hover { outline:2px solid var(--focus); outline-offset:0; }
.net-sum { padding:3px 8px !important; font-size:12px; text-align:right; white-space:nowrap; }
.sum-pct { display:inline-block; min-width:44px; padding:2px 6px; border-radius:5px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.sum-short { display:inline-block; width:70px; margin-left:6px; text-align:left; color:var(--bad); font-size:10.5px; font-weight:650; }
.net-heat tfoot th, .net-heat tfoot td { border-top:2px solid var(--line-2); border-bottom:0; }
.tc { position:relative; display:grid; place-items:center; height:28px; border-radius:4px; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.ts { display:inline-block; min-width:14px; padding:0 3px; border-radius:999px; background:var(--bad); color:var(--bad-ink); font-size:9px; font-weight:700; line-height:13px; text-align:center; }
.tc .ts { position:absolute; top:-5px; right:-2px; }
.net-legend .ramp { display:inline-flex; }
.net-legend .ramp i { width:14px; height:12px; }
.net-legend .ramp i:first-child { border-radius:3px 0 0 3px; }
.net-legend .ramp i:last-child { border-radius:0 3px 3px 0; }
.net-legend .sw { display:inline-block; width:14px; height:12px; margin-right:6px; border-radius:3px; vertical-align:-1px; }
.sw-short { box-shadow:inset 0 0 0 2px var(--bad); }
.sw-closed { background:repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--line-2) 3px 4px); }
.net-empty { padding:18px !important; color:var(--ink-3); text-align:center; }
@media (max-width: 1100px) {
  .net-col-name { width:130px; }
  .nc { min-height:74px; padding:5px; }
  .net-tools { margin-left:0; }
}
.nc.is-none { background:repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--surface-2) 6px 12px); }
.nnone { color:var(--ink-3); font-size:11.5px; font-style:italic; }
.hc.is-none { opacity:.35; }
/* --- fin plusieurs cliniques --- */
/* --- Agenda par rôle (vague 3) début --- */
/* Réception : « Nouveau rendez-vous » en grand dans l'en-tête de l'agenda. */
.calendar-cta { display:grid; justify-items:end; gap:4px; margin-left:auto; }
.calendar-cta .primary { min-height:46px; padding:11px 22px; font-size:15px; box-shadow:0 2px 8px color-mix(in oklch, var(--accent) 30%, transparent); }
.calendar-cta small { color:var(--ink-3); font-size:12px; }
/* Ma journée : prochains patients au-dessus de la grille ; sa colonne surlignée. */
.my-day { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:12px; padding:12px 16px; border-left:4px solid var(--accent); }
.my-day-head { display:grid; gap:2px; }
.my-day-head h2 { margin:0; font-size:16px; }
.my-day-head span { color:var(--ink-3); font-size:12px; }
.my-day-done { margin:0; color:var(--ink-2); font-size:13px; }
.my-day-list { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.my-next { display:grid; grid-template-columns:auto 1fr; column-gap:8px; min-width:150px; padding:6px 10px; border-left:3px solid var(--tone); border-radius:6px; background:var(--tint); color:var(--ink); font-size:12px; text-decoration:none; }
.my-next:hover { outline:2px solid var(--focus); text-decoration:none; }
.my-next-time { grid-row:span 2; align-self:center; font-weight:700; font-variant-numeric:tabular-nums; color:var(--tone); }
.my-next strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.my-next.is-current { box-shadow:inset 0 0 0 2px var(--tone); }
.staff-column.is-me { background:color-mix(in oklch, var(--accent-soft) 45%, transparent); }
.staff-column.is-me .column-title { background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); }
.me-badge { margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:700; }
/* Créneau vide : une couche de liens d'un quart d'heure sous les rendez-vous. */
.day-wrap { position:relative; }
.slot-layer { position:absolute; inset:0; display:grid; grid-template-rows:repeat(40,28px); }
.day-wrap .day-grid { position:relative; pointer-events:none; }
.day-wrap .appointment-block { pointer-events:auto; }
.slot-add { display:flex; align-items:center; margin:1px 3px; padding:0 8px; border-radius:5px; color:transparent; font-size:11px; font-weight:650; text-decoration:none; }
.slot-add:hover { background:var(--accent-soft); color:var(--accent); text-decoration:none; }
/* Horaires du personnel : « AM » / « PM » dans la moitié pâle de la case. */
.sc-am, .sc-pm { font-size:9px; line-height:12px; }
.sc-am { place-items:end center; }
.sc-pm { place-items:start center; }
.narrow .sc-am, .narrow .sc-pm { font-size:0; }
.staff-legend .sc-am, .staff-legend .sc-pm { font-size:7.5px; line-height:9px; }
/* --- Agenda par rôle (vague 3) fin --- */
/* --- Agenda « Aujourd'hui » (accueil, today.html) ---
   L'écran de l'accueil, ouvert toute la journée : liste des rendez-vous du
   jour (à gauche, défile seule) et l'équipe ou « Arrivée sans rendez-vous »
   (à droite). Tient dans la fenêtre à 1366 × 768 ; au-delà de 1700 px la
   note s'élargit et la colonne de droite aussi. Pas de style en ligne.
   Sans dossier : contour pointillé et étiquette (.td-nofile, .td-nofile-tag),
   même langage que le repère « Sans dossier » de la grille. */
.td-bar { flex:none; display:flex; align-items:center; gap:14px; min-width:0; }
.td-day { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.td-day strong { font-size:15px; white-space:nowrap; }
.td-live { display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.td-live i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.td-live.off i { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); }
.td-counts { display:flex; align-items:stretch; gap:6px; min-width:0; }
.td-count { display:inline-flex; align-items:baseline; gap:6px; padding:3px 11px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:600; white-space:nowrap; text-decoration:none; }
.td-count .n { color:var(--ink); font-size:18px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.2; }
.td-count:hover { border-color:var(--accent); text-decoration:none; }
.td-count.zero .n { color:var(--ink-3); font-weight:600; }
.td-count.c-waiting:not(.zero) { border-color:#e7b54a; background:#fff6e0; }
.td-count.c-waiting:not(.zero) .n { color:#6b4a00; }
.td-count.c-consult:not(.zero) .n { color:var(--accent); }
.td-count.c-done:not(.zero) .n { color:var(--ok); }
.td-count.c-no_show:not(.zero) { border-color:var(--ink-3); }
.td-count.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.td-count.on .n { color:var(--accent-ink); }
.td-count-small { align-items:center; padding:3px 9px; font-size:11.5px; }
.td-count-small .n { font-size:13px; }
.td-tools { margin-left:auto; display:flex; align-items:center; gap:8px; }
.td-walkin-open { min-height:34px; padding:6px 16px; white-space:nowrap; box-shadow:0 2px 8px color-mix(in oklch, var(--accent) 30%, transparent); }
.td-notice { flex:none; margin:0; padding:6px 10px; border-radius:10px; background:var(--accent-soft); color:var(--ink); font-size:13px; }
.td-notice.form-error { background:var(--bad-soft); color:var(--bad); font-weight:600; }
.td { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 296px; gap:10px; }
.td .card { border-radius:16px; box-shadow:0 2px 10px oklch(0.3 0.06 var(--hue) / .07); }
.td .dot { flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pc, var(--ink-3)); }
.td-list { min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.td-head, .td-row { display:grid; grid-template-columns:58px minmax(190px, 1.35fr) minmax(130px, .9fr) minmax(0, 1fr) 138px 190px; column-gap:12px; align-items:center; }
.td-head { flex:none; padding:7px 14px 6px; border-bottom:1px solid var(--line); color:var(--ink-3); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.td-rows { flex:1; min-height:0; overflow:auto; margin:0; padding:0 0 40px; list-style:none; overscroll-behavior:contain; }
.td-row { position:relative; min-height:48px; padding:6px 14px 6px 11px; border-left:3px solid transparent; border-bottom:1px solid var(--line); }
.td-row:hover { background:color-mix(in oklch, var(--accent-soft) 45%, transparent); }
.td-row.is-next { border-left-color:color-mix(in oklch, var(--accent) 55%, transparent); }
.td-row.is-consult { border-left-color:var(--accent); background:var(--accent-soft); }
.td-row.is-waiting { border-left-color:#d99a12; background:#fff6e0; }
.td-row.is-late { border-left-color:var(--bad); background:var(--bad-soft); }
.td-row.cat-done { color:var(--ink-2); }
.td-row.cat-done .td-time, .td-row.cat-done .td-who, .td-row.cat-done .td-what, .td-row.cat-done .td-note { opacity:.62; }
.td-row.cat-no_show { background:repeating-linear-gradient(135deg, var(--off-soft) 0 6px, transparent 6px 12px); }
.td-row.cat-no_show .td-name a, .td-row.cat-no_show .td-plain, .td-row.cat-cancelled .td-name a, .td-row.cat-cancelled .td-plain { text-decoration:line-through; text-decoration-color:var(--ink-3); }
.td-row.cat-cancelled { opacity:.6; }
/* Sans dossier : contour pointillé dans la ligne, et l'étiquette. */
.td-row.td-nofile::after { content:""; position:absolute; inset:3px 6px 3px 4px; border:1.5px dashed color-mix(in oklch, var(--ink-3) 70%, transparent); border-radius:10px; pointer-events:none; }
/* Même étiquette que .walkin-tag dans les grilles de l’agenda, à la taille de la liste. */
.td-nofile-tag { flex:none; display:inline-flex; align-items:center; height:19px; padding:0 7px; border:1px dashed #9a6a00; border-radius:4px; background:#fff6e0; color:#5e4300; font-size:10.5px; font-weight:750; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.td-time { display:flex; flex-direction:column; line-height:1.2; font-variant-numeric:tabular-nums; }
.td-time strong { font-size:14px; }
.td-time span { color:var(--ink-3); font-size:11.5px; }
.td-who { min-width:0; }
.td-name { display:flex; align-items:center; gap:6px; min-width:0; font-size:14px; font-weight:650; line-height:1.3; }
.td-name a, .td-plain { min-width:6ch; overflow:hidden; color:var(--ink); text-overflow:ellipsis; white-space:nowrap; }
.td-name a:hover { color:var(--accent); text-decoration:underline; }
.td-file { flex:none; color:var(--ink-3); font-size:11.5px; font-weight:500; font-variant-numeric:tabular-nums; }
.td-flags { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:3px; }
.td-flags:empty { display:none; }
.td-phone { color:var(--ink-2); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.td-chip { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); font-size:11.5px; font-weight:650; white-space:nowrap; text-decoration:none; }
.td-chip.bad { background:var(--bad); color:var(--bad-ink); }
.td-chip.warn { border:1px solid #e7b54a; background:#fff1cf; color:#6b4a00; }
.td-chip.next { background:var(--accent); color:var(--accent-ink); }
.td-chip.soft { border:1px dashed var(--line-2); background:transparent; color:var(--ink-3); font-weight:600; }
a.td-chip.soft:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
/* Adresse à compléter : la pastille s'ouvre sur un petit formulaire posé par-dessus la liste. */
.td-addr { position:relative; display:inline-block; }
.td-addr > summary { list-style:none; cursor:pointer; }
.td-addr > summary::-webkit-details-marker { display:none; }
.td-addr > summary::after { content:"›"; margin-left:5px; font-weight:800; }
.td-addr[open] > summary { box-shadow:0 0 0 2px #e7b54a; }
.td-addr[open] > summary::after { content:"⌄"; }
.td-addr-form { position:absolute; z-index:6; top:calc(100% + 6px); left:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 104px; gap:6px 8px; width:min(440px, 62vw); padding:10px 12px; border:1px solid #e7b54a; border-radius:12px; background:var(--surface); box-shadow:0 10px 28px oklch(0.3 0.06 var(--hue) / .2); }
.td-addr-hint { grid-column:1 / -1; color:var(--ink-2); font-size:11.5px; font-weight:500; line-height:1.35; }
.td-fld { display:flex; flex-direction:column; gap:2px; min-width:0; margin:0; color:var(--ink-2); font-size:11px; font-weight:650; line-height:14px; }
.td-fld-wide { grid-column:1 / -1; }
.td .td-fld input, .td .td-inp { width:100%; min-width:0; min-height:0; height:28px; margin:0; padding:0 8px; border:1px solid var(--line-2); border-radius:9px; background-color:var(--surface); color:var(--ink); font-size:13px; font-weight:400; line-height:26px; }
.td .td-fld input:focus, .td .td-inp:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.td-addr-save { grid-column:2 / -1; justify-self:end; min-height:30px; padding:4px 14px; font-size:12.5px; }
.td-what { display:flex; flex-direction:column; gap:1px; min-width:0; font-size:12.5px; line-height:1.3; }
.td-kind { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.td-pro { display:inline-flex; align-items:center; gap:5px; min-width:0; color:var(--pc-ink, var(--ink-2)); font-weight:600; white-space:nowrap; }
.td-note { display:-webkit-box; overflow:hidden; color:var(--ink-2); font-size:12px; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.td-state { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.td-pill { padding:1px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.td-pill.st-upcoming { background:var(--surface-2); color:var(--ink-2); }
.td-pill.st-waiting { background:#fff1cf; color:#6b4a00; box-shadow:inset 0 0 0 1px #e7b54a; }
.td-pill.st-consult { background:var(--accent); color:var(--accent-ink); }
.td-pill.st-done { background:var(--ok-soft); color:var(--ok); }
.td-pill.st-no_show { background:var(--ink-2); color:var(--surface); }
.td-pill.st-cancelled { background:var(--off-soft); color:var(--off); }
.td-when { color:var(--ink-3); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.td-act { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.td-act form { margin:0; }
.td-btn { display:inline-flex; align-items:center; min-height:30px; padding:4px 12px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--accent); font-size:12.5px; font-weight:650; white-space:nowrap; cursor:pointer; }
.td-btn:hover { border-color:var(--accent); }
.td-btn.is-primary { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.td-btn.is-primary:hover { filter:brightness(1.1); }
.td-btn:disabled, .td-undo:disabled { opacity:.5; cursor:progress; }
.td-undo { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line-2); border-radius:50%; background:var(--surface); color:var(--ink-2); font-size:15px; line-height:1; cursor:pointer; }
.td-undo:hover { border-color:var(--accent); color:var(--accent); }
.td-now { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; height:20px; padding:0 14px; background:var(--surface); color:var(--bad); font-size:10.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.td-now::before { content:""; flex:0 0 44px; height:2px; background:var(--bad); }
.td-now::after { content:""; flex:1; height:2px; background:var(--bad); }
.td-empty { padding:24px 16px; color:var(--ink-3); font-size:13px; }
.td-readonly { flex:none; padding:7px 14px; border-top:1px solid var(--line); color:var(--ink-3); font-size:12px; }
/* L'équipe, et le formulaire d'arrivée à sa place. */
.td-side { min-height:0; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.td-team { display:flex; flex-direction:column; gap:8px; }
.td-side-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.td-side-head h2 { margin:0; font-size:14.5px; }
.td-pros { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.td-pro-card { display:grid; gap:1px; padding:7px 10px; border:1px solid var(--line); border-left:4px solid var(--pc, var(--ink-3)); border-radius:12px; background:var(--surface); color:var(--ink); font-size:12.5px; line-height:1.35; text-decoration:none; }
.td-pro-card:hover { border-color:var(--pc); text-decoration:none; }
.td-pro-card.on { box-shadow:0 0 0 2px var(--pc); }
.td-pro-head { display:flex; align-items:center; gap:6px; min-width:0; }
.td-pro-head strong { font-size:13.5px; }
.td-pro-counts { margin-left:auto; color:var(--ink-3); font-size:11px; white-space:nowrap; }
.td-pro-state { overflow:hidden; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.st-consult .td-pro-state { color:var(--accent); }
.st-free .td-pro-state { color:var(--ok); }
.st-off .td-pro-state, .st-over .td-pro-state { color:var(--ink-3); }
.td-pro-next { overflow:hidden; color:var(--ink-2); text-overflow:ellipsis; white-space:nowrap; }
.td-pro-all { display:block; padding:4px 10px; color:var(--accent); font-size:12.5px; font-weight:650; }
.td-walkin { display:flex; flex-direction:column; gap:8px; min-height:100%; }
.td-wk-now { margin:-4px 0 0; color:var(--ink-3); font-size:12px; }
.td-wk-sec { min-width:0; margin:0; padding:0; border:0; }
.td-wk-sec legend { padding:0; }
.td-seg { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); overflow:hidden; border:1px solid var(--line-2); border-radius:10px; }
.td-seg label { position:relative; display:block; text-align:center; }
.td-seg label + label { border-left:1px solid var(--line-2); }
.td-seg input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.td-seg span { display:block; padding:5px 3px; color:var(--ink-2); font-size:11.5px; font-weight:650; line-height:1.25; }
.td-seg input:checked + span { background:var(--accent); color:var(--accent-ink); }
.td-seg input:focus-visible + span { outline:2px solid var(--focus); outline-offset:-2px; }
.td-wk-file, .td-wk-new, .td-wk-none { display:none; margin-top:7px; }
.td-walkin:has(input[name="who"][value="file"]:checked) .td-wk-file,
.td-walkin:has(input[name="who"][value="new"]:checked) .td-wk-new,
.td-walkin:has(input[name="who"][value="none"]:checked) .td-wk-none { display:block; }
.td-walkin:has(input[name="who"][value="none"]:checked) .td-wk-note { display:none; }
.td-wk-new .rb-grid2, .td-wk-none .rb-grid2 { gap:5px 8px; }
.td-wk-none .rb-hint { margin-top:4px; }
.td-found { display:grid; gap:3px; margin-top:5px; }
.td-found:empty { display:none; }
.td-res { display:flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid var(--line); border-radius:10px; font-size:12.5px; cursor:pointer; }
.td-res > span { display:flex; flex-direction:column; min-width:0; }
.td-res:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.td-res input { margin:0; accent-color:var(--accent); }
.td-kinds { display:flex; flex-wrap:wrap; gap:4px; }
.td-opt { position:relative; display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font-size:12px; line-height:19px; white-space:nowrap; cursor:pointer; }
.td-opt input { position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.td-opt:hover { border-color:var(--accent); }
.td-opt:has(input:checked) { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.td-opt:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:1px; }
.td-wk-custom { display:none; margin-top:6px; }
.td-walkin:has(input[name="kind"][value="other"]:checked) .td-wk-custom { display:flex; }
.td .td-dur { flex:none; width:88px; }
.td-wk-pros { display:grid; grid-template-columns:minmax(0, 1fr); gap:4px; }
.td-wk-pro { display:flex; min-width:0; padding:4px 9px; border-radius:10px; }
.td-wk-pro-name { flex:1 1 auto; min-width:0; overflow:hidden; font-weight:650; text-overflow:ellipsis; }
.td-wk-free { flex:none; margin-left:auto; padding-left:8px; color:var(--ok); font-size:11.5px; font-weight:650; }
.td-wk-pro.free-later .td-wk-free { color:var(--warn); }
.td-wk-pro.free-off { border-style:dashed; }
.td-wk-pro.free-off .td-wk-free { color:var(--ink-3); }
.td-wk-pro:has(input:checked) .td-wk-free { color:inherit; }
.td-wk-pro:has(input:checked) .dot { box-shadow:0 0 0 1.5px var(--accent-ink); }
.td .td-wk-note textarea { height:30px; padding:4px 8px; line-height:1.35; resize:none; }
.td .td-wk-note textarea:focus, .td .td-wk-note textarea:not(:placeholder-shown) { height:48px; }
.td-wk-foot { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.td-wk-submit { width:100%; min-height:36px; font-size:14px; }
.td-wk-msg { padding:5px 8px; border-radius:10px; background:var(--bad-soft); color:var(--bad); font-size:12.5px; }
.td-toast { position:fixed; z-index:40; bottom:18px; left:50%; display:flex; align-items:center; gap:12px; max-width:min(560px, calc(100vw - 32px)); padding:9px 14px; border-radius:12px; background:var(--chrome); color:var(--chrome-ink); box-shadow:0 10px 30px oklch(0.2 0.05 var(--hue) / .3); font-size:13px; transform:translateX(-50%); }
.td-toast.bad { background:var(--bad); color:var(--bad-ink); }
.td-toast button { color:var(--chrome-active); font-weight:700; text-decoration:underline; cursor:pointer; }
.td-js .td-nojs { display:none; }
#td-search { display:none; }
/* Moyen : la note se retire, le reste garde sa place. */
@media (max-width: 1279px) {
  .td-head, .td-row { grid-template-columns:54px minmax(170px, 1.4fr) minmax(120px, 1fr) 132px 180px; }
  .td-note, .td-head-note { display:none; }
}
@media (min-width: 1700px) {
  .td { grid-template-columns:minmax(0, 1fr) 350px; }
  .td-head, .td-row { grid-template-columns:64px minmax(230px, 1.3fr) minmax(170px, .9fr) minmax(0, 1.3fr) 150px 210px; }
  .td-row { min-height:52px; }
}
/* Étroit : une colonne, la page défile. */
@media (max-width: 1100px) {
  .td-bar { flex-wrap:wrap; }
  .td-counts { flex-wrap:wrap; }
  .td { grid-template-columns:minmax(0, 1fr); }
  .td-list { min-height:480px; }
}
@media (max-width: 760px) {
  .td-head { display:none; }
  .td-row { grid-template-columns:52px minmax(0, 1fr); row-gap:4px; }
  .td-what, .td-state, .td-act { grid-column:2; }
  .td-act { justify-content:flex-start; }
}
/* --- fin de « Aujourd'hui » --- */
/* --- Planification (agenda) début --- */
.pl { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; }
.pl .card { border-radius:16px; box-shadow:0 2px 10px oklch(0.3 0.06 var(--hue) / .07); }
.pl-error { margin:0; padding:8px 12px; border-radius:10px; color:var(--bad); background:var(--bad-soft); font-weight:600; font-size:13px; }
.pl-notice { margin:0; padding:8px 12px; border-radius:10px; background:var(--warn-soft); color:var(--ink-2); font-size:13px; }
.pl-bar { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.pl-seg { display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; background:var(--surface); }
.pl-seg a { padding:5px 12px; font-size:13px; font-weight:600; color:var(--ink-2); text-decoration:none; }
.pl-seg a.on { background:var(--accent); color:var(--accent-ink); }
.pl-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line-2); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap; text-decoration:none; cursor:pointer; }
.pl-btn:hover { border-color:var(--accent); text-decoration:none; }
.pl-btn:disabled { color:var(--ink-3); border-color:var(--line); cursor:not-allowed; opacity:.7; }
.pl-btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pl-btn.primary:disabled { background:var(--line-2); border-color:var(--line-2); color:var(--surface); }
.pl-btn.sm { padding:3px 9px; font-size:12px; }
.pl-nav { padding:3px 11px; font-size:16px; line-height:1.2; }
.pl-title { min-width:190px; text-align:center; font-size:15px; }
.pl-today { padding:4px 10px; font-size:12px; }
.pl-hours { margin-left:auto; align-self:center; }
.pl-hours svg { width:15px; height:15px; }
.pl-brushes { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-left:6px; }
.pl-brush { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line-2); background:var(--surface); border-radius:999px; padding:3px 9px 3px 4px; font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; text-decoration:none; }
.pl-brush:hover { border-color:var(--accent); text-decoration:none; }
.pl-brush.on { border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); color:var(--accent); }
.pl-sw { width:16px; height:16px; border-radius:5px; flex:none; border:1px solid #C9BEEB; background:#DCD3F5; }
.sw-morning { background:linear-gradient(to right, #DCD3F5 0 50%, #F6F8FC 50% 100%); }
.sw-afternoon { background:linear-gradient(to right, #F6F8FC 0 50%, #DCD3F5 50% 100%); }
.sw-rest { background:#F6F8FC; border-color:var(--line); }
.sw-vacation { background:repeating-linear-gradient(135deg,#EEF1F7 0,#EEF1F7 3px,#D5DCEA 3px,#D5DCEA 6px); border-color:var(--line); }
.sw-sick { background:#FBE0DC; border-color:#EBB8B0; }
.sw-training { background:#FFF1C9; border-color:#E8D48E; }
.sw-reset { background:var(--surface); border:1.5px solid var(--accent); }
.pl-hint { font-size:11.5px; color:var(--ink-3); }
.pl-strong { font-weight:650; }
.pl-bad { color:var(--bad); }
.pl-body { flex:1; min-height:0; display:flex; gap:10px; }
.pl-main { flex:1; min-width:0; padding:10px 14px 12px; overflow:auto; }
.pl-side { width:300px; flex:none; padding:12px; display:flex; flex-direction:column; gap:14px; overflow:auto; }
/* Grille de deux semaines : nom, 10 jours (12 ou 14 si la clinique ouvre la fin de semaine), heures. */
.pl-grid { display:flex; flex-direction:column; gap:4px; user-select:none; -webkit-user-select:none; min-width:720px; }
.pl-row { display:grid; gap:4px; align-items:center; }
.pl-n5 .pl-row { grid-template-columns:168px repeat(10, minmax(0, 1fr)) 60px; }
.pl-n6 .pl-row { grid-template-columns:168px repeat(12, minmax(0, 1fr)) 60px; }
.pl-n7 .pl-row { grid-template-columns:168px repeat(14, minmax(0, 1fr)) 60px; }
.pl-grid .wk2 { margin-left:10px; }
.pl-dh { font-size:12px; font-weight:700; text-align:center; line-height:14px; padding:2px 0; color:var(--ink); }
.pl-dh small { display:block; font-size:10.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-dh.is-today { color:var(--accent); }
.pl-dh.pl-right { text-align:right; }
.pl-dh.pl-left { text-align:left; padding-left:4px; }
.pl-grp { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding:8px 0 2px; }
.pl-who { display:flex; align-items:center; gap:7px; min-width:0; }
.pl-whotext { display:flex; flex-direction:column; min-width:0; }
.pl-nm { font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); text-decoration:none; }
a.pl-nm:hover { color:var(--accent); text-decoration:underline; }
.pl-nsub { font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-dot { width:9px; height:9px; border-radius:5px; flex:none; background:var(--pf-dot); }
.pf-ap { --pf-fill:#DCD3F5; --pf-ink:#3E2A84; --pf-dot:#6D4BB8; }
.pf-aud { --pf-fill:#CDEBE5; --pf-ink:#0B5A50; --pf-dot:#0F7C6E; }
.pf-rec { --pf-fill:#F7E2BE; --pf-ink:#6A4A0A; --pf-dot:#B7791F; }
.pf-other { --pf-fill:#DFE5F0; --pf-ink:#3A4360; --pf-dot:#6B7389; }
.pl-cell { position:relative; height:40px; border:0; border-radius:8px; padding:0 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:0; overflow:hidden; font:inherit; color:var(--pf-ink); background:var(--pf-fill); text-align:center; }
button.pl-cell { cursor:pointer; }
button.pl-cell:hover { filter:brightness(.95); }
button.pl-cell:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.pl-cell.st-morning { background:linear-gradient(to right, var(--pf-fill) 0 50%, #F6F8FC 50% 100%); }
.pl-cell.st-afternoon { background:linear-gradient(to right, #F6F8FC 0 50%, var(--pf-fill) 50% 100%); }
.pl-cell.st-custom { background:repeating-linear-gradient(90deg, var(--pf-fill) 0 10px, color-mix(in oklch, var(--pf-fill) 55%, #F6F8FC) 10px 14px); }
.pl-cell.st-rest { background:#F6F8FC; color:#9AA2B6; }
.pl-cell.st-vacation { background:repeating-linear-gradient(135deg,#EEF1F7 0,#EEF1F7 6px,#E3E8F2 6px,#E3E8F2 12px); color:#4A5370; }
.pl-cell.st-sick { background:#FBE0DC; color:#8A2A1D; }
.pl-cell.st-training { background:#FFF1C9; color:#6B5200; }
.pl-cell.st-holiday { background:#EEF0F5; color:#8A92A6; }
.pl-cell.st-gone { background:transparent; }
.pl-cell.is-changed { box-shadow:inset 0 0 0 2px var(--accent); }
.pl-cell.is-conflict { box-shadow:inset 0 0 0 2px var(--bad); }
.pl-cell.is-request { outline:2px dashed #D08A00; outline-offset:-2px; }
.pl-cell.is-painting { box-shadow:inset 0 0 0 2px var(--accent); filter:none; }
/* Toutes les succursales : deux succursales la même demi-journée ; présente ailleurs (Planification d'une succursale). */
.pl-cell.is-clash { background:var(--bad-soft); color:var(--bad); }
.pl-cell.is-away { color:var(--ink-3); font-style:italic; box-shadow:inset 0 0 0 1px var(--line); }
.pl-parts a { padding:3px 9px; font-size:12px; }
.pl-notice p { margin:0 0 6px; }
.pl-cl { font-size:11.5px; font-weight:700; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pl-cs { font-size:10.5px; font-weight:600; white-space:nowrap; opacity:.85; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pl-cs:empty { display:none; }
.pl-cs.bad { color:var(--bad); opacity:1; font-size:10px; letter-spacing:-.02em; }
.pl-chg { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:4px; background:var(--accent); }
.pl-warn { position:absolute; top:2px; left:4px; font-size:11px; font-weight:800; color:var(--bad); }
.pl-reqtag { position:absolute; top:4px; left:4px; width:7px; height:7px; border-radius:4px; background:#D08A00; overflow:hidden; color:transparent; font-size:0; }
.pl-hrs { font-size:12.5px; font-weight:700; text-align:right; white-space:nowrap; color:var(--ink-2); }
.pl-hrs small { display:block; font-size:10.5px; font-weight:600; color:var(--ink-3); }
.pl-hrs.tone-ok { color:var(--ok); }
.pl-hrs.tone-over { color:#B05A00; }
.pl-hrs.tone-under { color:var(--ink-3); }
.pl-cover { border-top:1px solid var(--line); margin-top:10px; padding-top:8px; display:flex; flex-direction:column; gap:4px; }
.pl-sec { margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.pl-covlbl { font-size:12px; font-weight:650; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-cov { height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; white-space:nowrap; min-width:0; overflow:hidden; }
.pl-cov.good { background:var(--ok-soft); color:var(--ok); }
.pl-cov.bad { background:var(--bad-soft); color:var(--bad); }
.pl-cov.mute { background:var(--off-soft); color:var(--ink-3); }
.pl-covbar { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; font-size:11.5px; font-weight:700; color:var(--ink-2); }
.pl-meter { display:block; width:100%; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.pl-meter i { display:block; height:100%; border-radius:3px; }
.pl-meter .tone-low { background:#6DB27C; }
.pl-meter .tone-mid { background:#D08A00; }
.pl-meter .tone-high { background:#C8372D; }
/* Mois : lecture seule, un clic ouvre les deux semaines. */
.pl-month { display:flex; flex-direction:column; gap:6px; min-height:100%; }
.pl-mrow { display:grid; gap:6px; }
.pl-n5 .pl-mrow { grid-template-columns:repeat(5, minmax(0, 1fr)); }
.pl-n6 .pl-mrow { grid-template-columns:repeat(6, minmax(0, 1fr)); }
.pl-n7 .pl-mrow { grid-template-columns:repeat(7, minmax(0, 1fr)); }
.pl-mgrid { flex:1; grid-auto-rows:minmax(104px, 1fr); }
.pl-mcell { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:6px 8px; display:flex; flex-direction:column; gap:4px; min-width:0; overflow:hidden; color:var(--ink); text-decoration:none; }
a.pl-mcell:hover { border-color:var(--accent); text-decoration:none; }
.pl-mcell.is-empty { visibility:hidden; }
.pl-mcell.is-past { opacity:.55; }
.pl-mcell.is-holiday { background:var(--off-soft); }
.pl-mcell.is-short { border-color:#E8A49D; background:#FFF7F5; }
.pl-mcell.is-today { box-shadow:inset 0 0 0 2px var(--accent); }
.pl-mtop { display:flex; justify-content:space-between; align-items:baseline; gap:4px; }
.pl-mtop strong { font-size:13.5px; }
.pl-mtop span { font-size:11px; font-weight:650; color:var(--ink-3); }
.pl-chips { display:flex; flex-wrap:wrap; gap:3px; }
.pl-chip { display:inline-flex; align-items:center; justify-content:center; height:18px; min-width:18px; padding:0 4px; border-radius:9px; font-size:10.5px; font-weight:700; background:var(--pf-fill); color:var(--pf-ink); border:1.5px solid transparent; }
.pl-chip.half { background:var(--surface); border:1.5px dashed var(--pf-dot); }
.pl-mbar { margin-top:auto; }
.pl-mprob { font-size:11px; font-weight:650; line-height:1.25; color:#A8291F; }
.pl-mok { font-size:11px; color:var(--ok); white-space:nowrap; }
.pl-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin:2px 0 0; font-size:11px; color:var(--ink-3); }
.pl-legend > span { display:inline-flex; align-items:center; gap:4px; }
/* Colonne de droite : les boutons passent à la ligne dans leur carte. */
.pl-toast { margin:0; font-size:12.5px; color:#1F5E2E; background:var(--ok-soft); border-radius:10px; padding:6px 9px; }
.pl-card { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pl-card > form { display:flex; }
.pl-status { margin:0; font-size:12.5px; font-weight:600; border-radius:10px; padding:7px 9px; background:var(--off-soft); color:var(--ink-2); }
.pl-status.on { background:var(--accent-soft); color:var(--accent); }
.pl-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.pl-actions form { display:flex; min-width:0; }
.pl-grow { flex:1 1 140px; }
.pl-wide { flex:1; padding:9px; white-space:normal; }
.pl-push { margin-left:auto; }
.pl-count { font-weight:650; color:var(--ink-3); }
.pl-list { display:flex; flex-direction:column; gap:6px; }
.pl-item { border:1px solid var(--line); border-radius:12px; padding:8px 9px; display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink); text-decoration:none; min-width:0; overflow-wrap:anywhere; }
a.pl-item:hover { border-color:var(--accent); text-decoration:none; }
.pl-item > span { font-size:11.5px; color:var(--ink-2); }
.pl-item.red { border-color:#E8A49D; background:#FDF1EF; }
.pl-item.amber { border-color:#E7B54A; background:#FFF8E6; }
.pl-item.done { background:var(--surface-2); color:var(--ink-2); }
.pl-item.blue { border-color:var(--accent); background:var(--accent-soft); }
.pl-item > .pl-impact.bad { color:#A8291F; font-weight:600; }
.pl-item > .pl-impact.good { color:var(--ok); font-weight:600; }
.pl-rule { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; }
.pl-step { display:inline-flex; align-items:center; gap:6px; }
.pl-step form { display:flex; }
.pl-step button { width:24px; height:24px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); font-weight:700; color:var(--accent); text-align:center; }
.pl-step button:hover { border-color:var(--accent); }
.pl-form { display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.pl-form label { display:flex; flex-direction:column; gap:3px; font-weight:600; color:var(--ink-2); }
.pl-form input, .pl-form select, .pl-form textarea { font:inherit; font-weight:400; color:var(--ink); padding:6px 8px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); }
.pl-form button { align-self:flex-start; }
.pl-tag { align-self:flex-start; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.pl-tag.tag-wait { background:var(--warn-soft); color:var(--warn); }
.pl-tag.tag-ok { background:var(--ok-soft); color:var(--ok); }
.pl-tag.tag-bad { background:var(--bad-soft); color:var(--bad); }
.move-badge { background:var(--bad-soft); color:var(--bad); font-weight:700; }
.appointment-block:has(> .move-badge) { position:relative; }
.appointment-block > .move-badge { position:absolute; top:3px; right:4px; padding:0 7px; font-size:10px; line-height:16px; box-shadow:0 0 0 1px var(--bad); }
.contract-line { display:grid; gap:4px; max-width:340px; margin:8px 0; font-weight:600; font-size:13px; }
.contract-line input { width:120px; padding:6px 8px; border:1px solid var(--line-2); border-radius:8px; font:inherit; }
@media (max-width: 1100px) {
  .main.main-fill .pl { flex:none; }
  .pl-body { flex-direction:column; }
  .pl-side { width:auto; }
}
@media (max-width: 640px) { .pl-title { min-width:0; } .pl-brushes { margin-left:0; } }
/* --- Planification (agenda) fin --- */

/* --- Produits : catalogue et recherche de l'en-tête --- */
.catalog-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.catalog-filter label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.catalog-filter input { flex: 1 1 260px; max-width: 420px; }
.catalog-table th small { display: block; font-weight: 400; color: var(--ink-3); }
.catalog-table td small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.catalog-table tr:target td { background: var(--accent-soft); }
.product-hits { list-style: none; margin: 0; padding: 0; }
.product-hits li { border-top: 1px solid var(--line); padding: 12px 22px; display: grid; gap: 6px; }
.product-hits a { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; color: var(--ink); font-weight: 600; }
.product-hits a svg { margin-left: auto; color: var(--ink-3); width: 13px; }
.product-hit-prices { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.product-hit-prices strong { color: var(--ink); font-weight: 600; }
/* Listes de prix : un sélecteur en pilules (comme le zoom de la
   planification), compte de produits dans chaque pilule. */
.catalog-lists { display: flex; gap: 6px; overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
.catalog-lists a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 6px 8px 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.catalog-lists a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.catalog-lists a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.catalog-lists a[aria-current] .count { background: var(--accent-ink); color: var(--accent); box-shadow: none; }
.catalog-filter .help { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.catalog-product { color: var(--ink); }
.catalog-table td .catalog-manage { min-height: 30px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
.list-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.list-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-chip strong { color: var(--ink); font-weight: 650; }
.list-chip small { color: var(--ink-3); font-weight: 500; }
.list-none { color: var(--ink-3); font-size: 12.5px; }
.product-hit-prices { gap: 4px; }
/* Ajout : un encadré par liste, ses champs côte à côte. */
.catalog-list-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; min-width: 0; margin: 0; padding: 10px 16px 16px; border: 1px solid var(--line); border-radius: var(--card-sm); }
.catalog-list-fields legend { padding: 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
/* Fiche : comparaison des listes, historique sous le formulaire. */
.catalog-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; }
.catalog-compare tbody th { background: none; color: var(--ink); font-size: 13.5px; font-weight: 650; text-align: left; }
.catalog-table td:first-child { min-width: 170px; }
.settings-inline > .settings-intro { flex: 1 1 260px; margin: 0; align-self: center; }
.catalog-compare .catalog-off td, .catalog-compare .catalog-off th { color: var(--ink-3); }
.catalog-leave { border-top: 1px solid var(--line); }
.catalog-leave label { flex: 0 1 260px; }
.catalog-history { margin: 0 22px 18px; }
.catalog-history caption { padding: 4px 0 8px; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 650px) {
  .catalog-list-fields { grid-template-columns: minmax(0, 1fr); }
  .catalog-history { margin: 0 16px 16px; }
}
/* Liste d'un payeur archivé : pilule en pointillé ; « Ajouter un payeur »
   au bout des listes. */
/* Avec les payeurs ajoutés, les listes passent à la ligne plutôt que de
   cacher la dernière (et « Ajouter un payeur ») hors de l'écran. */
.catalog-lists { flex-wrap: wrap; overflow-x: visible; }
.catalog-lists a.archived:not([aria-current]) { border-style: dashed; color: var(--ink-3); }
.catalog-lists a.catalog-add-list { gap: 6px; padding: 6px 14px 6px 11px; border-style: dashed; color: var(--accent); }
.catalog-add-list svg { width: 14px; height: 14px; }

/* --- Produits : en-tête commun de Catalogue et Inventaire --- */
/* Un seul gabarit (templates/product_tabs.html), premier enfant de .main sur
   les deux pages et hors de leur conteneur : titre et onglets ne bougent
   pas d'un pixel en passant d'un onglet à l'autre. */
.products-head { display: grid; gap: 18px; width: 100%; min-width: 0; }
.products-head h1 { margin: 0; }
/* L'onglet courant est en gras : chaque onglet réserve la largeur de son
   libellé gras (copie invisible, hauteur nulle) pour que l'autre ne glisse pas. */
.products-head .tabs a { display: inline-flex; flex-direction: column; align-items: flex-start; }
.products-head .tabs a::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 650; pointer-events: none; user-select: none; }

/* --- Inventaire : « À traiter » --- */
.stock-queue > .card-head .pl-tag { align-self: center; padding: 2px 9px; font-size: 11.5px; }
.stock-queue-group { padding: 4px 22px 10px; }
.stock-queue-group + .stock-queue-group { border-top: 1px solid var(--line); }
.stock-queue-group h3 { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.stock-queue-items { list-style: none; margin: 0; padding: 0; }
.stock-queue-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 11px 0; }
.stock-queue-items li + li { border-top: 1px solid var(--line); }
.sq-main { display: grid; gap: 3px; min-width: 0; }
.sq-main strong { font-weight: 650; overflow-wrap: anywhere; }
.sq-main small { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.stock-queue-items .pl-tag { align-self: center; padding: 2px 9px; font-size: 11.5px; white-space: nowrap; }
.stock-queue-items .sq-action { min-height: 32px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; }
.stock-queue-empty { display: flex; align-items: center; gap: 14px; }
.stock-queue-empty svg { flex: none; width: 26px; height: 26px; color: var(--ok); }
.stock-queue-empty .help { margin: 2px 0 0; }
@media (max-width: 650px) {
  .stock-queue-group { padding: 4px 16px 8px; }
  /* Téléphone : qui et quoi sur une ligne, statut et bouton dessous ; le
     bouton passe à la ligne s'il ne tient pas à côté du statut. */
  .stock-queue-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .stock-queue-items .sq-main { flex: 1 0 100%; }
  .stock-queue-items .sq-action { margin-left: auto; }
}

/* --- Réglages → Payeurs --- */
.payer-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.payer-actions > form { margin: 0; }
/* « Modifier » : même pilule que les autres détails des tableaux de réglages ;
   ouvert, le formulaire passe sous les boutons, en encadré. */
.payer-actions > details > summary { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--band-line); color: var(--accent); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; list-style: none; }
.payer-actions > details > summary::-webkit-details-marker { display: none; }
.payer-actions > details[open] > summary { background: var(--accent); color: var(--accent-ink); }
.payer-actions > details[open] { display: contents; }
.payer-actions > details > form { order: 9; flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 2px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--card-sm); background: var(--surface-2); }
.payer-actions > details > form label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; text-align: left; }
@media (max-width: 650px) { .payer-actions > details > form { grid-template-columns: minmax(0, 1fr); } }
.payer-actions .secondary { min-height: 30px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
.payers-table td small { max-width: 46ch; }

/* Réglages → Appareils mobiles (Otto Scan) : code QR toujours noir sur blanc, même en thème sombre. */
.mobile-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.mobile-qr { margin: 0; padding: 12px; background: #fff; border-radius: var(--card-sm); border: 1px solid var(--line); line-height: 0; }
.mobile-qr svg { width: 232px; height: 232px; display: block; }
/* Les icônes ont un trait (règle `svg` générale) : un module de QR n'en a pas. */
.mobile-qr svg, .mobile-qr svg * { stroke: none; }
.mobile-facts { display: grid; gap: 14px; margin: 16px 0; }
.mobile-facts dt { font-size: 12px; color: var(--ink-3); }
.mobile-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.mobile-code { font-size: 30px; font-weight: 700; letter-spacing: 0.12em; }
.mobile-table td small { display: block; color: var(--ink-3); margin-top: 3px; }
@media (max-width: 650px) { .mobile-pair { grid-template-columns: minmax(0, 1fr); justify-items: start; } .mobile-qr svg { width: 200px; height: 200px; } }
.po-mobile { list-style: none; margin: 0; display: grid; gap: 10px; }
.po-mobile li { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
/* --- Agenda : grille qui remplit l'écran (Jour, Semaine) et vue Mois ---
   Barre d'une ligne ; les lignes de 15 minutes se partagent la hauteur
   disponible (au moins 14 px) : la journée se voit sans défiler. Les traits
   viennent des cases de la couche des créneaux, l'heure pile plus marquée. */
.cal { flex:1; display:flex; flex-direction:column; gap:8px; min-height:0; }
.cal-bar { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.cal-title { min-width:150px; font-size:15px; text-align:center; }
.cal-title::first-letter { text-transform:uppercase; }
.cal-people { display:flex; flex-wrap:wrap; gap:4px; }
.cal-people a { padding:5px 11px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.cal-people a.on { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.cal-empty { margin:0 0 8px; padding:10px 14px; color:var(--ink-3); font-size:13px; }
.cal-new { margin-left:auto; min-height:36px; padding:7px 16px; font-size:13.5px; }
.cal-scroll { flex:1; min-height:0; overflow:auto; padding:0; }
.cal .calendar-grid { height:100%; }
.cal .time-column, .cal .staff-column { display:flex; flex-direction:column; }
.cal .column-title { flex:none; height:34px; padding:4px 8px; position:sticky; top:0; z-index:2; }
.cal .time-grid, .cal .day-wrap { flex:1; min-height:500px; }
.cal .day-grid > *, .cal .time-grid > * { min-height:0; overflow:hidden; }
.cal .day-wrap .day-grid { height:100%; background:none; }
.cal .time-grid span { border-top:0; padding-top:0; margin-top:-7px; font-size:11px; }
.cal .time-grid span.hour { color:var(--ink-2); font-weight:600; }
.cal .slot-add, .cal .slot-line { margin:0; border-top:1px solid color-mix(in oklch, var(--line) 55%, transparent); border-radius:0; }
.cal .slot-add.hour, .cal .slot-line.hour { border-top-color:var(--line); }
.cal .slot-add:hover { border-radius:5px; }
.cal .appointment-block { padding:1px 7px; gap:0; justify-content:flex-start; font-size:11px; line-height:1.25; }
.cal .appointment-block .walkin-tag { padding:0 4px; font-size:9px; line-height:1.3; }
.cal .ab-line { display:flex; align-items:baseline; gap:6px; min-width:0; white-space:nowrap; }
.cal .ab-line strong { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.cal .ab-sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.cal .appointment-block.span-1 .ab-sub { display:none; }
.cal .appointment-block .block-time, .cal .appointment-block strong { display:inline; }
.cal .time-grid span:first-child { margin-top:0; }
/* Grille à gauche, colonne de réservation à droite (petit mois, patient, motif, créneau, note). */
.cal-body { flex:1; min-height:0; display:flex; gap:10px; }
.cal-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:8px; }
.rb.cal-side { flex:none; width:300px; min-height:0; display:flex; flex-direction:column; gap:10px; overflow:auto; }
.cal-side .cal-mini { flex:none; padding:10px 12px; }
/* Vue Jour : les jours de la semaine, un clic pour changer de jour. */
.cal-days { flex:none; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.cal-days a { padding:6px 4px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:650; text-align:center; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-days a:hover { border-color:var(--accent); text-decoration:none; }
.cal-days a.on { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.cal-days a.closed { color:var(--ink-3); background:var(--surface-2); }
.cal-days small { font-size:10.5px; font-weight:600; opacity:.8; }
.cal-days a::first-letter { text-transform:uppercase; }
.cal-side .rb-right { flex:1 0 auto; overflow:visible; }
.cal .slot-add.picked { background:var(--accent-soft); }
.cal .cal-pick { z-index:1; display:flex; flex-direction:column; justify-content:flex-start; margin:1px 3px; padding:1px 7px; overflow:hidden; border:2px dashed var(--accent); border-radius:8px; background:color-mix(in oklch, var(--accent-soft) 85%, transparent); color:var(--accent); font-size:11px; line-height:1.25; white-space:nowrap; }
.cal .cal-pick strong { font-size:12px; }
@media (max-width: 1100px) { .cal-body { flex-direction:column; } .rb.cal-side { width:auto; overflow:visible; } }
.cal .rows-4 { grid-template-rows:repeat(4, minmax(0, 1fr)); }
.cal .rows-5 { grid-template-rows:repeat(5, minmax(0, 1fr)); }
.cal .rows-6 { grid-template-rows:repeat(6, minmax(0, 1fr)); }
.cal .rows-7 { grid-template-rows:repeat(7, minmax(0, 1fr)); }
.cal .rows-8 { grid-template-rows:repeat(8, minmax(0, 1fr)); }
.cal .rows-9 { grid-template-rows:repeat(9, minmax(0, 1fr)); }
.cal .rows-10 { grid-template-rows:repeat(10, minmax(0, 1fr)); }
.cal .rows-11 { grid-template-rows:repeat(11, minmax(0, 1fr)); }
.cal .rows-12 { grid-template-rows:repeat(12, minmax(0, 1fr)); }
.cal .rows-13 { grid-template-rows:repeat(13, minmax(0, 1fr)); }
.cal .rows-14 { grid-template-rows:repeat(14, minmax(0, 1fr)); }
.cal .rows-15 { grid-template-rows:repeat(15, minmax(0, 1fr)); }
.cal .rows-16 { grid-template-rows:repeat(16, minmax(0, 1fr)); }
.cal .rows-17 { grid-template-rows:repeat(17, minmax(0, 1fr)); }
.cal .rows-18 { grid-template-rows:repeat(18, minmax(0, 1fr)); }
.cal .rows-19 { grid-template-rows:repeat(19, minmax(0, 1fr)); }
.cal .rows-20 { grid-template-rows:repeat(20, minmax(0, 1fr)); }
.cal .rows-21 { grid-template-rows:repeat(21, minmax(0, 1fr)); }
.cal .rows-22 { grid-template-rows:repeat(22, minmax(0, 1fr)); }
.cal .rows-23 { grid-template-rows:repeat(23, minmax(0, 1fr)); }
.cal .rows-24 { grid-template-rows:repeat(24, minmax(0, 1fr)); }
.cal .rows-25 { grid-template-rows:repeat(25, minmax(0, 1fr)); }
.cal .rows-26 { grid-template-rows:repeat(26, minmax(0, 1fr)); }
.cal .rows-27 { grid-template-rows:repeat(27, minmax(0, 1fr)); }
.cal .rows-28 { grid-template-rows:repeat(28, minmax(0, 1fr)); }
.cal .rows-29 { grid-template-rows:repeat(29, minmax(0, 1fr)); }
.cal .rows-30 { grid-template-rows:repeat(30, minmax(0, 1fr)); }
.cal .rows-31 { grid-template-rows:repeat(31, minmax(0, 1fr)); }
.cal .rows-32 { grid-template-rows:repeat(32, minmax(0, 1fr)); }
.cal .rows-33 { grid-template-rows:repeat(33, minmax(0, 1fr)); }
.cal .rows-34 { grid-template-rows:repeat(34, minmax(0, 1fr)); }
.cal .rows-35 { grid-template-rows:repeat(35, minmax(0, 1fr)); }
.cal .rows-36 { grid-template-rows:repeat(36, minmax(0, 1fr)); }
.cal .rows-37 { grid-template-rows:repeat(37, minmax(0, 1fr)); }
.cal .rows-38 { grid-template-rows:repeat(38, minmax(0, 1fr)); }
.cal .rows-39 { grid-template-rows:repeat(39, minmax(0, 1fr)); }
.cal .rows-40 { grid-template-rows:repeat(40, minmax(0, 1fr)); }
.cal .rows-41 { grid-template-rows:repeat(41, minmax(0, 1fr)); }
.cal .rows-42 { grid-template-rows:repeat(42, minmax(0, 1fr)); }
.cal .rows-43 { grid-template-rows:repeat(43, minmax(0, 1fr)); }
.cal .rows-44 { grid-template-rows:repeat(44, minmax(0, 1fr)); }
.cal .rows-45 { grid-template-rows:repeat(45, minmax(0, 1fr)); }
.cal .rows-46 { grid-template-rows:repeat(46, minmax(0, 1fr)); }
.cal .rows-47 { grid-template-rows:repeat(47, minmax(0, 1fr)); }
.cal .rows-48 { grid-template-rows:repeat(48, minmax(0, 1fr)); }
.cal .rows-49 { grid-template-rows:repeat(49, minmax(0, 1fr)); }
.cal .rows-50 { grid-template-rows:repeat(50, minmax(0, 1fr)); }
.cal .rows-51 { grid-template-rows:repeat(51, minmax(0, 1fr)); }
.cal .rows-52 { grid-template-rows:repeat(52, minmax(0, 1fr)); }
.cal .rows-53 { grid-template-rows:repeat(53, minmax(0, 1fr)); }
.cal .rows-54 { grid-template-rows:repeat(54, minmax(0, 1fr)); }
.cal .rows-55 { grid-template-rows:repeat(55, minmax(0, 1fr)); }
.cal .rows-56 { grid-template-rows:repeat(56, minmax(0, 1fr)); }
.cal .rows-57 { grid-template-rows:repeat(57, minmax(0, 1fr)); }
.cal .rows-58 { grid-template-rows:repeat(58, minmax(0, 1fr)); }
.cal .rows-59 { grid-template-rows:repeat(59, minmax(0, 1fr)); }
.cal .rows-60 { grid-template-rows:repeat(60, minmax(0, 1fr)); }
.cal .rows-61 { grid-template-rows:repeat(61, minmax(0, 1fr)); }
.cal .rows-62 { grid-template-rows:repeat(62, minmax(0, 1fr)); }
.cal .rows-63 { grid-template-rows:repeat(63, minmax(0, 1fr)); }
.cal .rows-64 { grid-template-rows:repeat(64, minmax(0, 1fr)); }
.cal-outside { flex:none; font-size:13px; }
.cal-outside summary { cursor:pointer; color:var(--ink-2); }
.cal-month { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px; overflow:visible; }
.cal-mhead, .cal-mweek-in { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.cal-mhead span { padding:4px 8px; color:var(--ink-3); font-size:12px; font-weight:600; }
.cal-mgrid { flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; }
/* Rangées de même hauteur, fixes. Semaine survolée : le haut reste en
   place, le bas s'allonge par-dessus les semaines suivantes jusqu'à montrer
   tout son contenu (cases à la hauteur de la plus remplie). */
.cal-mweek { position:relative; flex:1 1 0; min-height:64px; transition:opacity .18s ease; }
.cal-mweek-in { position:absolute; inset:0 0 auto 0; height:100%; padding:0; border-radius:12px; outline:2px solid transparent; outline-offset:2px; transition:height .2s ease, box-shadow .2s ease, outline-color .2s ease, background-color .2s ease; }
/* Hauteur animée (navigateurs qui interpolent « auto ») ; sinon, sans animation. */
.cal-mgrid { interpolate-size:allow-keywords; }
.cal-mweek:hover { z-index:3; }
.cal-mweek:hover .cal-mweek-in { height:auto; min-height:100%; background:var(--accent-soft); outline-color:var(--accent); box-shadow:0 14px 28px -10px color-mix(in srgb, var(--ink) 45%, transparent); }
/* Les autres semaines s'effacent pendant qu'on en regarde une. */
.cal-mgrid:has(.cal-mweek:hover) .cal-mweek:not(:hover) { opacity:.45; }
/* Dernière semaine : rien en dessous, elle s'allonge vers le haut (bas fixe). */
.cal-mweek:last-child .cal-mweek-in { inset:auto 0 0 0; }
.cal-mweek:last-child:hover .cal-mweek-in { box-shadow:0 -14px 28px -10px color-mix(in srgb, var(--ink) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .cal-mweek, .cal-mweek-in { transition:none; } }
.cal-mday { display:flex; flex-direction:column; gap:4px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none; }
.cal-mday:hover { border-color:var(--accent); }
.cal-mday.out { opacity:.45; }
.cal-mday.closed { background:none; border-style:dashed; }
.cal-mday.today strong { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink); }
.cal-count { align-self:flex-start; padding:1px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:650; }
/* Toute la clinique : qui travaille, avec son nombre de rendez-vous. */
.cal-who { position:relative; display:flex; align-items:center; gap:6px; min-width:0; padding:2px 8px; border:1.5px solid var(--pc, var(--ink-3)); border-radius:999px; background:var(--surface); font-size:11.5px; line-height:1.25; font-weight:600; color:var(--pc-ink, var(--ink)); white-space:nowrap; overflow:hidden; }
.cal-who-fill { position:absolute; inset:0 auto 0 0; background:color-mix(in srgb, var(--pc, var(--ink-3)) 32%, var(--surface)); }
.cal-who-name, .cal-who b { position:relative; }
.cal-who-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cal-who b { margin-left:auto; font-weight:800; }
.cal-mday { gap:2px; min-height:0; overflow:hidden; }
.cal-mday > * { flex:none; }
@media (max-width: 900px) {
  .cal-new { margin-left:0; }
}
/* Panneau d'un rendez-vous dans l'agenda (templates/calendar_panel.html) :
   compact, à droite de la grille ; en bas, pleine largeur, sur écran étroit. */
.ap-panel { flex:none; width:330px; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:0; padding:0; font-size:13px; }
.ap-head { display:flex; align-items:flex-start; gap:8px; padding:10px 12px 8px 14px; border-left:4px solid var(--tone); background:var(--tint); border-radius:var(--card) var(--card) 0 0; }
.ap-who { flex:1; min-width:0; }
.ap-head h2 { margin:0; font-size:16px; line-height:1.25; overflow-wrap:anywhere; }
.ap-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:4px 0 0; color:var(--ink-2); font-size:12px; }
.ap-meta .badge { padding:1px 8px 1px 6px; font-size:11.5px; }
.ap-close { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--ink-2); font-size:14px; text-decoration:none; }
.ap-close:hover { background:var(--surface); color:var(--ink); text-decoration:none; }
.ap-msg { margin:8px 12px 0; padding:7px 10px; border-radius:8px; font-size:12.5px; }
.ap-saved { background:var(--ok-soft); color:var(--ok); font-weight:600; }
.overlap-warning.ap-msg { margin-bottom:0; }
.form-error.ap-msg { background:var(--bad-soft); color:var(--bad); font-weight:600; }
.ap-contact { display:flex; flex-direction:column; gap:7px; padding:10px 12px 4px; }
.ap-phone { font-size:15px; font-weight:650; color:var(--accent); font-variant-numeric:tabular-nums; }
.ap-phone::before { content:"☎ "; }
.ap-nophone, .ap-help { color:var(--ink-3); font-size:12.5px; margin:0; }
.ap-actions { display:flex; flex-wrap:wrap; gap:6px; }
.ap-actions .primary, .ap-actions .secondary { min-height:32px; padding:5px 12px; }
.ap-actions form { margin:0; }
.ap-when { margin:4px 12px 6px; color:var(--ink-2); line-height:1.45; }
.ap-when strong { color:var(--ink); }
.ap-kind { display:inline-flex; align-items:center; gap:5px; color:var(--ink); }
.ap-dot { flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--tone, var(--ink-3)); }
.ap-cancelled { margin:0 12px 6px; color:var(--bad); font-size:12.5px; }
.ap-sec { margin:0; padding:9px 12px; border-top:1px solid var(--line); }
.ap-label { margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.ap-states { display:flex; flex-wrap:wrap; gap:4px; }
.ap-state { display:inline-flex; align-items:center; min-height:26px; padding:2px 10px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--accent); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.ap-state:hover { border-color:var(--accent); background:var(--accent-soft); }
.ap-state.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); cursor:default; }
.ap-sec textarea { width:100%; min-height:62px; resize:vertical; font-size:13px; }
.ap-row-end { display:flex; justify-content:flex-end; margin-top:6px; }
.ap-save { min-height:32px; padding:5px 14px; }
.ap-edit { display:flex; flex-direction:column; gap:8px; }
.ap-edit .ap-label { margin:0; }
.ap-when-fields { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:6px; }
.ap-when-fields label { display:flex; flex-direction:column; gap:2px; font-size:11.5px; color:var(--ink-2); }
.ap-field { margin:0; padding:0; border:0; min-width:0; }
.ap-field legend { padding:0; margin-bottom:3px; font-size:11.5px; color:var(--ink-2); }
.ap-chips { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.ap-chip { position:relative; display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font-size:12.5px; line-height:19px; white-space:nowrap; cursor:pointer; }
.ap-chip:hover { border-color:var(--accent); }
.ap-chip input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.ap-chip:has(input:checked) { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.ap-chip:has(input:checked) .ap-dot { box-shadow:0 0 0 1.5px var(--accent-ink); }
.ap-chip:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:1px; }
.ap-min { width:64px; min-height:26px; height:26px; padding:0 6px; font-size:12.5px; }
.ap-unit { color:var(--ink-3); font-size:12px; }
.ap-cancel summary { cursor:pointer; color:var(--bad); font-weight:600; font-size:12.5px; }
.ap-cancel form { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ap-cancel label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink-2); }
.ap-cancel .danger { min-height:32px; padding:5px 14px; }
.cal .appointment-block.is-open { outline:2px solid var(--accent); outline-offset:-1px; box-shadow:0 0 0 3px var(--accent-soft); z-index:2; }
.cal-outside a.is-open { font-weight:700; }
@media (max-width: 1100px) { .ap-panel { width:auto; overflow:visible; } }

/* ---------- Fiche principale du patient : carte (à gauche des audiogrammes) ---------- */
.pid-head { display:flex; flex-direction:column; gap:4px; }
.pid-head .eyebrow { margin:0; }
.pid-name { margin:0; font-size:26px; line-height:1.15; overflow-wrap:anywhere; }
.pid-last { letter-spacing:.02em; }
.pid-ident { margin:0; color:var(--ink-2); font-weight:550; }
.pid-sub { margin:0; color:var(--ink-3); font-size:13px; }
.pid-status { display:inline-block; margin-left:6px; padding:1px 9px; border-radius:999px; font-size:12px; font-weight:650; color:var(--warn); background:var(--warn-soft); }
.patient-facts.pid-facts > div { grid-column:auto; }
.pid-facts .pid-address, .pid-facts .pid-cnesst, .pid-facts .pid-contact_person { grid-column:1 / -1; }
.pid-line { display:block; }
.pid-alert { color:var(--bad); }
.pid-chip { display:inline-block; padding:1px 10px; border-radius:999px; font-size:12.5px; font-weight:650; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-2); }
.pid-chip.alert { background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }
.pid-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }

/* ---------- Formulaire « Nouveau patient » / « Modifier la fiche » ---------- */
.pf { display:flex; flex-direction:column; gap:18px; max-width:980px; padding:24px 28px; box-sizing:border-box; min-width:0; }
@media (max-width: 700px) { .pf { padding:16px; } .pf .pf-grid, .pf .pf-addr { grid-template-columns:minmax(0, 1fr); } .pf .pf-addr .pf-fld:not(.pf-wide):not(.pf-narrow) { grid-column:auto; } }
.pf-sec { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.pf-sec > legend { font-size:15px; font-weight:700; padding:0; margin-bottom:8px; }
.pf-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 18px; align-items:start; }
.pf-addr { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pf-addr .pf-wide { grid-column:1 / -1; }
.pf-addr .pf-fld:not(.pf-wide):not(.pf-narrow) { grid-column:span 2; }
.pf-wide { grid-column:1 / -1; }
.pf-fld { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pf-fld label { font-size:13px; font-weight:600; color:var(--ink-2); margin:0; }
.pf-fld input, .pf-fld textarea { width:100%; }
.pf-out { min-height:18px; font-size:12.5px; }
.pf-ok { color:var(--ink-2); }
.pf-err { color:var(--bad); font-size:12.5px; font-weight:600; }
.pf [aria-invalid="true"] { border-color:var(--bad); box-shadow:0 0 0 1px var(--bad); }
.pf-chips { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pf-chips > legend:not(.vh) { font-size:13px; font-weight:600; color:var(--ink-2); padding:0; margin-bottom:6px; float:left; width:100%; }
.pf-chip { position:relative; display:inline-flex; align-items:center; cursor:pointer; margin:0; }
.pf-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.pf-chip > span:not(.vh) { display:inline-block; padding:5px 13px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; line-height:18px; }
.pf-chip:hover > span:not(.vh) { border-color:var(--accent); }
.pf-chip:has(input:checked) > span:not(.vh) { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pf-chip:has(input:focus-visible) > span:not(.vh) { outline:2px solid var(--focus); outline-offset:2px; }
.pf-chips-sm .pf-chip > span:not(.vh) { padding:3px 10px; font-size:12px; }
.pf-phones, .pf-cnesst { display:flex; flex-direction:column; gap:10px; }
.pf-phone { display:grid; grid-template-columns:minmax(180px, 260px) auto auto; gap:6px 14px; align-items:center; }
.pf-phone .pf-fld { grid-row:span 1; }
.pf-default { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); margin:0; }
.pf-cn { display:grid; grid-template-columns:minmax(160px, 1fr) minmax(160px, 1fr) auto; gap:6px 14px; align-items:start; }
.pf-cn .pf-remove { margin-top:22px; }
.pf-add, .pf-remove { align-self:flex-start; padding:5px 12px; border:1px dashed var(--line-2); border-radius:8px; background:var(--surface); color:var(--accent); font-weight:600; font-size:13px; cursor:pointer; }
.pf-remove { border-style:solid; color:var(--ink-2); }
.pf-add:hover, .pf-remove:hover { border-color:var(--accent); }
.pf-reason { padding:12px 14px; border:1px solid var(--warn); border-radius:10px; background:var(--warn-soft); }
.pf-dups, .pf-dup-live { padding:12px 14px; border:1px solid var(--warn); border-radius:10px; background:var(--warn-soft); }
.pf-dups ul, .pf-dup-live ul { margin:6px 0; padding-left:18px; }
.pf-dup-open { margin-left:8px; font-weight:600; }
.pf-check { display:flex; align-items:center; gap:8px; font-weight:600; margin:6px 0 0; }
.pf-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pf-foot .help { margin:0; }

/* Suggestions d'adresses (combobox) */
.pf-combo { position:relative; }
.addr-list { position:absolute; z-index:30; left:0; right:0; top:100%; margin:2px 0 0; padding:4px 0; list-style:none; background:var(--surface); border:1px solid var(--line-2); border-radius:8px; box-shadow:0 10px 28px rgb(0 0 0 / .14); max-height:290px; overflow:auto; }
.pf-combo .addr-list { top:58px; }
.addr-opt { padding:7px 12px; cursor:pointer; font-size:13.5px; }
.addr-opt[aria-selected="true"], .addr-opt:hover { background:var(--accent-soft); }

/* Création rapide depuis l'horaire */
.rb-addr { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.rb-addr .pf-combo .addr-list { top:36px; }
.rb-grid3 { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:4px 8px; }
.rb .pf-out { min-height:0; font-size:11.5px; }

@media (max-width: 760px) {
  .pf-grid, .pf-addr { grid-template-columns:1fr; }
  .pf-addr .pf-fld:not(.pf-wide):not(.pf-narrow) { grid-column:auto; }
  .pf-phone, .pf-cn { grid-template-columns:1fr; }
  .pf-cn .pf-remove { margin-top:0; }
  .rb-grid3 { grid-template-columns:1fr; }
}

/* ARA : patientes (web_ara_patients.rs, templates/ara_patient*.html). Le
   reste vient des pages patients d'Otto (.patient-header, .patient-id, .facts). */
.ara-pat-header .patient-id h2 { font-size: 15px; }
.ara-pat-extra .help { margin-top: 0; }
/* Mises à jour venues du Ouie d'un partenaire (ara_ouie_patient.rs) :
   surlignées pour la personne tant qu'elle ne les a pas vues. */
.ara-msg-list { list-style: none; margin: 0; padding: 0; }
.ara-msg { padding: 14px 22px; border-top: 1px solid var(--line); }
.ara-msg:first-child { border-top: 0; }
.ara-msg-new { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); }
.ara-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; }
.ara-msg-badge { background: var(--warn); color: var(--accent-ink); font-weight: 650; }
.ara-msg-changes { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.ara-msg-changes > div { display: contents; }
.ara-msg-changes dt { color: var(--ink-3); font-size: 12.5px; }
.ara-msg-changes dd { margin: 0; overflow-wrap: anywhere; }
.ara-msg-before { color: var(--ink-3); text-decoration: line-through; }
.ara-msg-skipped { color: var(--warn); font-weight: 600; }
@media (max-width: 560px) { .ara-msg-changes { grid-template-columns: minmax(0, 1fr); } .ara-msg-changes dd { margin-bottom: 6px; } }
.ara-pat-form { max-width: 960px; }
.ara-pat-form > .error { margin: 22px 28px 0; }
.ara-pat-group { min-width: 0; margin: 0; padding: 22px 28px 26px; border: 0; border-top: 1px solid var(--line); }
.ara-pat-form > .ara-pat-group:first-of-type { border-top: 0; }
.ara-pat-group > legend { float: left; width: 100%; margin-bottom: 16px; padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
/* Ce qui suit la légende flottante passe dessous. Sans cela, un bloc qui crée
   son propre contexte (flex, grille) se rangeait à côté d'elle, sur une
   largeur nulle, et son contenu débordait à droite, hors de vue : les cases
   de la fenêtre ASA du dossier (.ara-checks) étaient invisibles. */
.ara-pat-group > legend + * { clear: both; }
.ara-pat-grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ara-pat-grid .help { display: block; }
.ara-pat-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 28px; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 640px) {
  .ara-pat-grid { grid-template-columns: 1fr; }
  .ara-pat-group, .ara-pat-actions { padding-left: 18px; padding-right: 18px; }
  .ara-pat-form > .error { margin: 18px 18px 0; }
}
/* ARA : patientes, fin. */
/* --- ARA : horaire du jour (point 2, ara_home.html et ara_appointment.html) ---
   La grille d'Otto (.cal, .calendar-grid) par audiologiste, la ligne de
   l'heure (une couche de quarts d'heure par colonne, classes row-N et m-K
   posées par le serveur puis par ara.js) et, à droite, la liste de la
   journée avec ses passages. Pas de style en ligne (CSP). */
.ara-sched .agenda-head { align-items:baseline; gap:12px; }
.ara-sched-clinic { margin:0; color:var(--ink-3); font-size:12.5px; font-weight:600; }
.ara-date { display:inline-flex; align-items:center; gap:6px; margin:0; }
.ara-date input { min-height:0; height:30px; padding:0 8px; border-radius:999px; font-size:12.5px; }
.ara-sched .td-notice.ara-warn { background:var(--warn-soft); color:var(--warn); font-weight:600; }
.ara-sched .td-notice.ara-ouie-due { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.ara-ouie-due a { color:var(--ink); text-decoration:underline; }
.ara-now-layer { position:absolute; inset:0; z-index:1; display:grid; pointer-events:none; }
.ara-now-layer[hidden] { display:none; }
.ara-now { position:relative; }
.ara-now i { position:absolute; left:0; right:0; height:2px; margin-top:-1px; background:var(--bad); }
.staff-column:first-of-type .ara-now i::before { content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--bad); }
.ara-now .m-0 { top:0; } .ara-now .m-1 { top:6.667%; } .ara-now .m-2 { top:13.333%; } .ara-now .m-3 { top:20%; } .ara-now .m-4 { top:26.667%; }
.ara-now .m-5 { top:33.333%; } .ara-now .m-6 { top:40%; } .ara-now .m-7 { top:46.667%; } .ara-now .m-8 { top:53.333%; } .ara-now .m-9 { top:60%; }
.ara-now .m-10 { top:66.667%; } .ara-now .m-11 { top:73.333%; } .ara-now .m-12 { top:80%; } .ara-now .m-13 { top:86.667%; } .ara-now .m-14 { top:93.333%; }
.ara-sched .appointment-block.ara-current { box-shadow:inset 0 0 0 2px var(--tone); }
.ara-sched .appointment-block.ara-st-attended, .ara-sched .appointment-block.ara-st-no_show { opacity:.6; }
.ara-sched .appointment-block.ara-st-no_show strong { text-decoration:line-through; }
.ara-sched .appointment-block.ara-mirror { border:1.5px dashed var(--tone); border-left:3px solid var(--tone); background:color-mix(in oklch, var(--tint) 60%, var(--surface)); }
.ara-day { flex:none; width:360px; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.ara-day-head { flex:none; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:12px 14px 8px; border-bottom:1px solid var(--line); }
.ara-day-head h2 { margin:0; font-size:14.5px; }
.ara-rows { flex:1; min-height:0; overflow:auto; margin:0; padding:0 0 24px; list-style:none; overscroll-behavior:contain; }
.ara-row { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; column-gap:10px; align-items:start; padding:8px 12px 8px 9px; border-left:3px solid var(--tone); border-bottom:1px solid var(--line); }
.ara-row:hover { background:color-mix(in oklch, var(--accent-soft) 40%, transparent); }
.ara-row.is-current { background:var(--accent-soft); }
.ara-row.is-next { background:color-mix(in oklch, var(--accent-soft) 35%, transparent); }
.ara-row.cat-done .ara-row-time, .ara-row.cat-done .ara-row-who, .ara-row.cat-cancelled { opacity:.6; }
.ara-row.cat-cancelled .td-name, .ara-row.cat-no_show .td-name { text-decoration:line-through; text-decoration-color:var(--ink-3); }
.ara-row.is-mirror { border-left-style:dashed; }
.ara-row-time { display:flex; flex-direction:column; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums; text-decoration:none; }
.ara-row-time strong { font-size:14px; }
.ara-row-time span { color:var(--ink-3); font-size:11.5px; }
.ara-row-time:hover strong { color:var(--accent); text-decoration:underline; }
.ara-row-who { min-width:0; }
.ara-row-who .td-name { margin:0; }
.ara-row-what { margin:1px 0 0; overflow:hidden; color:var(--ink-2); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.ara-row-state { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ara-row-state .td-act { gap:4px; }
.ara-row-state .td-btn { min-height:26px; padding:2px 10px; font-size:12px; }
.ara-row-state .td-undo { width:26px; height:26px; font-size:13px; }
@media (max-width: 1100px) { .ara-day { width:auto; overflow:visible; } .ara-rows { overflow:visible; } }
/* Un rendez-vous : formulaire d'une colonne étroite, la patiente d'abord. */
.ara-appt { width:100%; max-width:880px; display:flex; flex-direction:column; gap:16px; }
.ara-appt-lede { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ara-appt-swatch { width:10px; height:10px; border-radius:3px; background:var(--tone); }
.ara-appt-error { margin:0; padding:12px 16px; border-radius:8px; background:var(--bad-soft); color:var(--bad); font-weight:600; }
.ara-who { min-width:0; margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:10px; }
.ara-who legend { padding:0; margin-bottom:8px; }
.ara-seg { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:360px; }
.ara-who-file, .ara-who-free { display:none; }
.ara-who:has(input[name="who"][value="file"]:checked) .ara-who-file { display:flex; flex-direction:column; gap:8px; }
.ara-who:has(input[name="who"][value="free"]:checked) .ara-who-free { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.ara-found { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.ara-appt-form .ara-res { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:1px solid var(--line-2); border-radius:10px; cursor:pointer; }
.ara-res:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.ara-res input { margin-top:3px; accent-color:var(--accent); }
.ara-res span { display:flex; flex-direction:column; min-width:0; }
.ara-res small { color:var(--ink-3); font-size:12px; }
.ara-open-file { margin:0; }
.ara-open-file a { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.ara-open-file svg { width:16px; height:16px; }
.ara-invite-facts { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; }
.ara-invite-facts dt { color:var(--ink-3); }
.ara-invite-facts dd { margin:0; font-weight:600; }
.ara-invite-accept { display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--line); }
.ara-ouie-advanced > summary { cursor:pointer; padding:14px 22px; font-weight:600; color:var(--ink-2); }
.ara-facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 24px; margin:0 0 18px; }
.ara-facts .wide { grid-column:1 / -1; }
.ara-facts dt { color:var(--ink-3); font-size:12px; }
.ara-facts dd { margin:3px 0 0; }
.ara-memo { white-space:pre-wrap; overflow-wrap:anywhere; }
.ara-appt-note { margin:0 0 14px; color:var(--ink-2); }
.ara-appt-status .section-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ara-appt-status h2 { margin:0; font-size:16px; }
.ara-appt-steps { justify-content:flex-start; }
.ara-cancel { margin-top:14px; }
.ara-cancel summary { cursor:pointer; color:var(--bad); font-weight:600; font-size:13px; }
.ara-cancel form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-top:10px; }
.ara-cancel label { display:grid; gap:6px; flex:1 1 260px; font-size:13px; }
.ara-cancel .secondary.danger { background:var(--surface); border-color:var(--line); color:var(--bad); }
.ara-cancel .secondary.danger:hover { background:var(--bad-soft); }
@media (max-width: 650px) { .ara-who:has(input[name="who"][value="free"]:checked) .ara-who-free, .ara-facts { grid-template-columns:1fr; } }
/* --- ARA : horaire du jour, fin --- */
/* ARA : profil du rapport (web_ara_profile.rs, templates/ara_profile.html). */
.ara-profile-images > li { flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.ara-profile-preview { display: block; max-width: 220px; max-height: 64px; margin-top: 8px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.ara-profile-upload { flex: 1 1 260px; }
.ara-profile-upload .document-drop { margin: 0 0 8px; padding: 12px; font-size: 13px; }
/* Fichier glissé : l'accent du produit (le bleu fixe d'Otto ailleurs). */
:root[data-product="audiology"] .document-drop.dragging { background: var(--accent-soft); border-color: var(--accent); }
.ara-profile-form .access-actions { padding-top: 4px; }
/* ARA : profil du rapport, fin. */

/* Alt + clic vers Réglages (src/settings_reveal.ts) : Alt seule tenue, les
   éléments réglables reçoivent un pointillé, une ⚙ (calque à part, sans
   toucher la mise en page) et la main ; infobulle et petit menu au-dessus de
   tout. Arrivée sur Réglages : le champ visé ressort un instant. */
html[data-setting-reveal] [data-setting] { outline: 2px dashed var(--accent); outline-offset: 2px; cursor: pointer; }
.setting-badges { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
/* ⚙ translucide : ce qu'elle couvre (grille de l'audiogramme, bord d'un champ) se voit au travers. */
.setting-badge { position: fixed; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in oklch, var(--accent) 58%, transparent); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 45%, transparent); color: var(--accent-ink); font-size: 12px; font-weight: 700; line-height: 1; text-shadow: 0 0 2px color-mix(in oklch, var(--accent) 80%, transparent); }
.setting-tip, .setting-menu { position: fixed; z-index: 1001; max-width: min(420px, calc(100vw - 16px)); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 25px #18284426; }
.setting-tip { display: grid; gap: 3px; padding: 8px 11px; font-size: 12.5px; pointer-events: none; }
.setting-tip small { color: var(--ink-3); font-size: 11.5px; }
.setting-menu { display: grid; gap: 2px; min-width: 240px; padding: 10px 8px 8px; }
.setting-menu strong { margin: 0 8px 6px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.setting-menu button { padding: 8px; border-radius: 6px; text-align: left; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.setting-menu button:hover, .setting-menu button:focus-visible { background: var(--accent-soft); color: var(--accent); }
.setting-target { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; animation: setting-flash 2.4s ease-out; }
@keyframes setting-flash { 0%, 30% { background: var(--accent-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .setting-target { animation: none; } }

/* ARA, pages de Réglages : « Quitter les réglages » en haut à droite (page.html, settings_exit.ts). */
.settings-exit { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 650; white-space: nowrap; }
.settings-exit:hover, .settings-exit:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.settings-exit svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 1100px) { .settings-exit { padding: 6px 10px; } .settings-exit span { display: none; } }

/* Private personal calendar, shared by Otto and ARA. */
.personal-calendar { border: 1px solid currentColor; border-radius: .6rem; padding: 1rem; margin-bottom: 1rem; }
.personal-calendar h2 { font-size: 1.05rem; margin-top: 0; }
.personal-calendar p { font-size: .85rem; }
.personal-calendar button { margin: .25rem .25rem .25rem 0; }
.personal-calendar fieldset { display: grid; gap: .4rem; border: 0; padding: .5rem 0; }
.personal-calendar label { display: flex; gap: .4rem; align-items: baseline; overflow-wrap: anywhere; }
.personal-calendar ol { padding-left: 1.2rem; max-height: 32rem; overflow: auto; }
.personal-calendar li { margin-bottom: .8rem; font-size: .8rem; overflow-wrap: anywhere; }
.personal-calendar li strong, .personal-calendar li span { display: block; }
.personal-calendar li { display: grid; gap: .25rem; padding-block: .35rem; }
.personal-calendar-event-time { line-height: 1.45; }
.personal-calendar-event-source { font-size: .75rem; opacity: .75; padding-top: .15rem; overflow-wrap: anywhere; }
.personal-calendar-overlay { display: grid; position: relative; z-index: 2; gap: .3rem; margin-top: .45rem; text-align: left; white-space: normal; min-width: 0; }
.personal-calendar-chip { display: block; padding: .4rem .5rem; border: 1px solid var(--accent-2); border-left-width: 3px; border-radius: .35rem; background: var(--accent-2-soft); color: var(--ink); font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; cursor: default; }
.personal-calendar-chip strong { font-weight: 650; }
.personal-calendar-choice { display: flex; align-items: center; gap: .4rem; }
.personal-calendar-choice input { accent-color: var(--accent); }
.personal-calendar-name { padding: .1rem .4rem; border: 1px solid var(--line); border-left: 3px solid var(--personal-calendar-color); border-radius: .3rem; background: color-mix(in srgb, var(--personal-calendar-color) 6%, var(--surface)); color: var(--ink); overflow-wrap: anywhere; }
.personal-calendar-time { display: inline-block; white-space: nowrap; }
.personal-calendar-chip.is-free { border-style: dashed; background: color-mix(in oklch, var(--accent-2-soft) 30%, var(--surface)); }
.pl-cell:has(.personal-calendar-overlay) { height: auto; align-content: start; }

/* Screen privacy: synchronous root preference + static selectors protect initial
   HTML and client-inserted surfaces before MutationObserver runs. Never blur:
   blur is reversible on hover/selection and still exposes the shape of text. */
.screen-privacy-toggle { font-size: .75rem; white-space: nowrap; }
.screen-privacy-toggle[aria-pressed="true"] { background: #164e41; color: #fff; border-color: #164e41; }
html[data-screen-private] :is([data-private], .ara-open-name, .ara-open-initials, .ara-open-ini,
.topsearch-opt strong, .topsearch-opt small, .ara-res strong, .ara-res small,
[data-memo-results] strong, [data-memo-results] small, [data-memo-chip-text],
[data-rb-chosen-name], [data-rb-chosen-sub], [data-rb-chosen-phone],
.rb-res strong, .rb-res .rb-hint, .rb-res-new, .td-res strong, .td-res .rb-hint,
[data-pf-dup] a:not(.pf-dup-open), [data-pf-dup] .muted, .ara-bar-name, [data-ara-name], [data-ara-birth], [data-ara-age],
.pid-head, .pid-facts dd, .ara-pat-facts dd, .ara-msg-changes dd,
.memo-text, .note-body, [data-rb-dup], [data-td-dup], .addr-opt, .td-pro-state, .td-pro-next, .ara-sc-text, [data-birth-out], [data-phone-out]) {
  color: transparent !important; text-shadow: none !important; position: relative;
  user-select: none; -webkit-user-select: none;
}
html[data-screen-private] :is([data-private], .ara-open-name, .ara-open-initials, .ara-open-ini,
.topsearch-opt strong, .topsearch-opt small, .ara-res strong, .ara-res small,
[data-memo-results] strong, [data-memo-results] small, [data-memo-chip-text],
[data-rb-chosen-name], [data-rb-chosen-sub], [data-rb-chosen-phone],
.rb-res strong, .rb-res .rb-hint, .rb-res-new, .td-res strong, .td-res .rb-hint,
[data-pf-dup] a:not(.pf-dup-open), [data-pf-dup] .muted, .ara-bar-name, [data-ara-name], [data-ara-birth], [data-ara-age],
.pid-head, .pid-facts dd, .ara-pat-facts dd, .ara-msg-changes dd,
.memo-text, .note-body, [data-rb-dup], [data-td-dup], .addr-opt, .td-pro-state, .td-pro-next, .ara-sc-text, [data-birth-out], [data-phone-out]) * {
  color: transparent !important; text-shadow: none !important;
}
html[data-screen-private] [data-private]::after {
  content: '•••'; color: #54616b; position: absolute; left: 0; top: 0;
  max-width: 100%; overflow: hidden; white-space: nowrap; pointer-events: none;
}
html[data-screen-private] [data-private] [data-private]::after { content: none; }
/* Keep the original title and privacy metadata; only the time occupies space. */
html[data-screen-private] [data-private-personal]::after { content: none; }
html[data-screen-private] [data-private-personal] { display: none; }
/* Google birthdays have no time: retain a small anonymous color indicator. */
html[data-screen-private] .personal-calendar-chip.is-birthday { width: .65rem; height: .65rem; min-height: 0; padding: 0; border-radius: 50%; }
/* Search text, identity fields and unstructured notes can contain any identifier.
   Values remain intact for submission; editing them safely requires privacy off. */
html[data-screen-private] :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="file"],
input[name*="birth"], input[name="dob"], textarea, [contenteditable="true"], [data-editor]) {
  color: transparent !important; text-shadow: none !important; caret-color: transparent !important;
  -webkit-text-security: disc;
}
html[data-screen-private] :is(input, textarea, [contenteditable])::selection { color: transparent; background: #ddd; }
html[data-screen-private] :is(input, textarea)::placeholder { -webkit-text-security: none; }
html[data-screen-private] :is(select[name="patient_id"], select[name="contact_id"]) { visibility: hidden; }
/* Unstructured documents/images cannot be redacted reliably. Keep their shell
   and close controls available; never alter a saved report or generated PDF. */
html[data-screen-private] :is(iframe, object, embed, .doc-preview iframe, [data-report-preview], .ara-report-preview) { visibility: hidden !important; }
html[data-screen-private] :is(.doc-preview strong, .ara-pat-audio-link img) { visibility: hidden; }
html[data-screen-private] [data-tip]::after { content: none !important; }

html[data-screen-private] :is(input[name*="birth"][type="date"], input[name="dob"], input[type="file"], .assessment-image, [data-signature-canvas]) { visibility: hidden !important; }
html[data-screen-private] :is([contenteditable="true"], [data-editor]) * { color: transparent !important; text-shadow: none !important; }
html[data-screen-private] :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], textarea) { -webkit-text-fill-color: transparent !important; }
html[data-screen-private] :is(select[name="document_id"], select[data-private-native]) { visibility: hidden; }

/* src/theme/themes.css */
/* Couleurs de l'interface : entrée « Couleurs » du menu de gauche, panneau et
   sélecteur (server/templates/theme_menu.html, theme_picker.html ; script :
   picker.ts), puis les quelques retouches propres à une gamme. Les jetons des
   gammes ne sont pas ici : scripts/build.mjs les tire de schemes.json et les
   ajoute après ce fichier, à la fin de dist/app.css. */

/* --- Entrée du menu : juste au-dessus de « Réglages », qu'elle pousse en bas
   avec elle. Même allure qu'un lien du menu ; réduite à l'icône quand le menu
   l'est (requête sur la largeur de l'entrée elle-même, quelle que soit la
   règle qui réduit le menu). --- */
.nav-theme { margin-top: auto; container-type: inline-size; }
.nav-theme + .nav-settings { margin-top: 0; }
.nav-theme-btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px;
  border-radius: 999px; color: var(--ink-2); font-weight: 520; white-space: nowrap;
}
.nav-theme-btn svg { width: 18px; height: 18px; color: var(--ink-3); }
.nav-theme-btn:hover, .nav-theme-btn[data-open] { background: var(--surface-2); color: var(--ink); }
.nav-theme-btn[data-open] { box-shadow: inset 0 0 0 1px var(--band-line); }
@container (max-width: 120px) {
  .nav-theme-btn { justify-content: center; padding: 0; height: 44px; }
}

/* --- Panneau (popover : couche du dessus). Placé par picker.ts à droite du
   bouton ; sans script, au centre de l'écran (place par défaut). --- */
.theme-pop {
  margin: 0; inset: auto; left: calc(var(--rail) + 12px); bottom: 16px;
  width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
  padding: 16px 16px 12px; border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--surface); color: var(--ink); box-shadow: var(--card-shadow), 0 18px 48px oklch(0.2 0.03 var(--hue) / .22);
}
.theme-pop[style*="top"] { bottom: auto; }
.theme-pop::backdrop { background: transparent; }
.theme-pop-title { margin: 0 0 12px; font: 650 15px/1.3 var(--font-head); color: var(--ink); }

/* --- Sélecteur --- */
.theme-picker { display: grid; gap: 14px; }
.theme-schemes { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-legend { display: block; margin: 0 0 8px; padding: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.theme-sub { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* Quatre par rangée : les sept gammes en 4 + 3, sans pastille seule. */
.theme-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.theme-swatch {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0;
  padding: 8px 6px 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms;
}
/* Le radio couvre toute la pastille : clic, focus et lecteur d'écran natifs. */
.theme-swatch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-swatch:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.theme-swatch:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
/* Choix signalé autrement que par la couleur : une coche. */
.theme-swatch:has(input:checked)::after {
  content: ""; position: absolute; top: 6px; right: 7px; width: 4px; height: 8px;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.theme-swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.theme-hint { font-size: 12px; font-weight: 450; line-height: 1.35; color: var(--ink-3); }
/* Aperçu de la gamme : son fond, une carte et une barre d'accent. */
.theme-chip {
  display: grid; align-content: space-between; width: 100%; max-width: 76px; height: 36px; padding: 5px;
  border: 1px solid var(--sw-line); border-radius: 8px; background: var(--sw-bg);
}
.theme-chip i:first-child { display: block; height: 12px; border-radius: 4px; background: var(--sw-surface); box-shadow: inset 0 0 0 1px var(--sw-line); }
.theme-chip i:last-child { display: block; width: 58%; height: 7px; border-radius: 99px; background: var(--sw-accent); }

/* Page Affichage : les intentions en clair, pastille à gauche. */
/* Trois par rangée au plus, moins quand la carte est étroite. */
.theme-picker.is-inline .theme-swatches { grid-template-columns: repeat(auto-fit, minmax(max(230px, calc((100% - 16px) / 3)), 1fr)); }
.theme-picker.is-inline .theme-swatch { grid-template-columns: 76px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 12px; text-align: left; font-size: 13.5px; }
.theme-picker.is-inline .theme-chip { grid-row: span 2; }
.theme-picker.is-inline .theme-name { align-self: end; }
.theme-picker.is-inline .theme-hint { align-self: start; }
.theme-picker.is-inline .theme-custom { max-width: 420px; }
.theme-card .help { margin: 0 0 14px; }

.theme-custom { display: grid; gap: 10px; }
.theme-custom[hidden] { display: none; }
.theme-custom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.theme-custom-head .theme-legend { margin: 0; }
.theme-reset { padding: 3px 10px; border-radius: 999px; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.theme-reset:hover { background: var(--accent-soft); }
.theme-picker:not(.is-custom) .theme-reset { visibility: hidden; }
.theme-hue { display: block; color: inherit; font-size: inherit; font-weight: inherit; }

/* Curseur de teinte : la piste montre l'accent de la gamme sur tout le cercle. */
.theme-hue input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0;
  background: transparent; cursor: pointer;
}
.theme-hue input::-webkit-slider-runnable-track { height: 12px; border-radius: 99px; background: var(--theme-track, var(--accent)); box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14); }
.theme-hue input::-moz-range-track { height: 12px; border-radius: 99px; background: var(--theme-track, var(--accent)); box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14); }
.theme-hue input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -5px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 1.5px oklch(0.2 0 0 / .6), 0 1px 4px oklch(0 0 0 / .35);
}
.theme-hue input::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 1.5px oklch(0.2 0 0 / .6), 0 1px 4px oklch(0 0 0 / .35);
}
.theme-hue input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 99px; }

/* Carré intensité × clarté : la couleur de chaque point, dans les bornes du
   contraste. Le clavier passe par les deux curseurs masqués du carré. */
.theme-pad { position: relative; height: 84px; cursor: crosshair; touch-action: none; border-radius: 10px; }
.theme-pad canvas { display: block; width: 100%; height: 100%; border-radius: 10px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14); }
.theme-pad:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.theme-pad-dot {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 1.5px oklch(0.2 0 0 / .6), 0 1px 4px oklch(0 0 0 / .35); pointer-events: none;
}

.theme-actions { display: flex; justify-content: flex-end; }
.theme-actions[hidden] { display: none; }
.theme-status { min-height: 1.35em; margin: -6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.theme-status:empty { min-height: 0; margin: 0; }
.theme-status.is-error { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .theme-swatch, .nav-theme-btn { transition: none; }
}

/* --- Contraste élevé : anneau de focus plus épais partout. --- */
:root[data-scheme="contraste"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-width: 3px; }

/* --- Nuit : les rares couleurs fixes d'app.css et du dossier qui supposent un
   fond clair (texte blanc sur une couleur que la gamme éclaircit). --- */
:root[data-scheme="nuit"] .ara-types span.is-on { color: var(--accent-ink); }
:root[data-scheme="nuit"] .ara-rb-check::after { border-color: var(--accent-ink); }
/* Couleurs des types de rendez-vous (app.css, .tone-*) : même teinte, encre
   claire et fond sombre (encre sur fond 7,3:1 au moins, texte 11:1). */
:root[data-scheme="nuit"] .tone-violet { --tone: oklch(0.8 0.1152 297.5); --tint: oklch(0.29 0.0406 297.5); }
:root[data-scheme="nuit"] .tone-blue { --tone: oklch(0.8 0.1014 258.2); --tint: oklch(0.29 0.0384 258.2); }
:root[data-scheme="nuit"] .tone-teal { --tone: oklch(0.8 0.066 205.6); --tint: oklch(0.29 0.0233 205.6); }
:root[data-scheme="nuit"] .tone-green { --tone: oklch(0.8 0.0716 149.5); --tint: oklch(0.29 0.0253 149.5); }
:root[data-scheme="nuit"] .tone-amber { --tone: oklch(0.8 0.086 72.2); --tint: oklch(0.29 0.0303 72.2); }
:root[data-scheme="nuit"] .tone-red { --tone: oklch(0.8 0.1144 26.4); --tint: oklch(0.29 0.0409 26.4); }
:root[data-scheme="nuit"] .tone-pink { --tone: oklch(0.8 0.1027 351.4); --tint: oklch(0.29 0.0363 351.4); }
:root[data-scheme="nuit"] .tone-purple { --tone: oklch(0.8 0.1236 303.5); --tint: oklch(0.29 0.0436 303.5); }
:root[data-scheme="nuit"] .tone-slate { --tone: oklch(0.8 0.0316 255.7); --tint: oklch(0.29 0.0112 255.7); }
/* Section remplie du rail du dossier (dossier.css, .ara-rb.is-filled) : même
   jaune, en sombre. */
:root[data-scheme="nuit"] .ara-rb.is-filled { border-color: oklch(0.7 0.11 88); background: oklch(0.33 0.06 95); }

/* --- Havre : la terre cuite de la palette (#d5583c) sur les aplats du second
   accent (liseré du bandeau, pastille de la patiente attendue, 3:1 au moins
   sur leurs fonds). Trop claire pour du texte sur sable (3,0:1) : --accent-2,
   qui sert aussi au texte, en est la nuance plus sombre (schemes.json). --- */
:root[data-scheme="havre"] .topbar::before { background: linear-gradient(90deg, var(--accent) 0 calc(100% - 112px), oklch(0.617 0.1638 34.1) calc(100% - 112px)); }
:root[data-scheme="havre"] .ara-open-dot { background: oklch(0.617 0.1638 34.1); }

/* src/theme/density.css */
/* Densité de l'affichage (server/src/ui_density.rs ; choix : page Affichage
   d'ARA, script density.ts). Le serveur pose `<html data-density>` :
   - `compact` : toujours serré ;
   - `comfortable` : l'apparence d'origine (aucune règle ici) ;
   - pas d'attribut (Automatique, le défaut) : serré sous le seuil ci-dessous,
     aéré au-dessus, sans script (requête média).

   Seuil d'Automatique, mesuré sur le dossier d'examen (audiogramme rempli,
   une section ouverte) : l'éditeur d'audiogramme a besoin d'environ 910 px de
   haut de fenêtre pour s'afficher à sa taille ; plus bas, il est réduit à
   l'échelle (0,82 à 1366 × 768, 0,76 à 1280 × 720) et, sous 700 px, les
   boutons ronds débordent de la scène. En largeur, sous 1280 px, la section
   et l'audiogramme se partagent moins de 1200 px. D'où : moins de 900 px de
   haut ou de 1280 px de large. Un écran 1920 × 1080 agrandi (≈ 950 px de haut
   dans le navigateur) reste aéré ; un portable 1366 × 768, 1440 × 900 ou
   1920 × 1080 à 125 % passe en serré.

   Tout passe par des variables : les règles d'app.css et de src/ara/*.css
   les lisent avec la valeur d'origine en repli (`var(--card-pad, 22px)`), si
   bien que Confortable n'a besoin d'aucune règle et reste identique. Les deux
   blocs de valeurs ci-dessous (Compact, et Automatique sous le seuil) doivent
   rester identiques : scripts/density.test.mjs le vérifie. Le texte garde sa
   taille ; seuls marges, écarts et hauteurs de barre changent, et aucune
   cible de clic ne descend sous 30 px (champs 32, boutons ronds 34). */

:root[data-density="compact"] {
  /* Coquille : barre du haut, menu, pages, cartes, tableaux, champs, boutons. */
  --top: 50px;
  --search-h: 34px;
  --nav-pad: 10px 10px 12px;
  --nav-h: 34px;
  --nav-icon-h: 38px;
  --main-pad: 18px 24px 48px;
  --main-gap: 16px;
  --h1-fs: 25px;
  --stack-gap: 14px;
  --band-h: 36px;
  --band-inset: 8px;
  --card-head-pad: 11px 16px;
  --card-pad: 16px;
  --card-foot-pad: 9px 16px;
  --settings-gap: 12px;
  --settings-card-pad: 8px 16px 16px;
  --th-pad: 8px 14px;
  --td-pad: 9px 14px;
  --field-h: 32px;
  --control-h: 32px;
  --control-pad: 5px 12px;
  /* Dossier d'examen : barre de la patiente, scène, boutons ronds, sections. */
  --ara-main-pad: 5px 8px 6px;
  --ara-gap: 5px;
  --ara-bar-h: 38px;
  --ara-bar-pad: 4px;
  --ara-stage-gap: 6px;
  --ara-rail-w: 38px;
  --ara-rb: 34px;
  --ara-rb-icon: 18px;
  --ara-rail-gap: 4px;
  --ara-rail-sep-m: 1px;
  --ara-rail-sep-p: 5px;
  --ara-win-head-pad: 4px 6px 4px 14px;
  --ara-win-gap: 12px;
  --ara-win-pad: 10px 12px 12px;
  --ara-cond-gap: 12px;
  --ara-tympa-gap: 12px;
  --ara-ear-pad: 10px 12px;
  --ara-group-pad: 10px 0 12px;
  --ara-detached-pad: 5px;
  --ara-pane-bar-h: 34px;
  /* Audiogramme (audiogram_web, présentation serrée) : ses boutons sur une
     rangée, la colonne du milieu à leur largeur, la légende à la sienne. */
  --agm-tools-wrap: nowrap;
  --agm-tool-px: 8px;
  --agm-side-w: clamp(188px, 24cqi, 214px);
  --agm-legend-w: clamp(170px, 24cqi, 214px);
  --agm-pta-merge: contents;
  --agm-pta-ears: none;
}
@media (max-width: 1279.98px), (max-height: 899.98px) {
  :root:not([data-density]) {
    /* Coquille : barre du haut, menu, pages, cartes, tableaux, champs, boutons. */
    --top: 50px;
    --search-h: 34px;
    --nav-pad: 10px 10px 12px;
    --nav-h: 34px;
    --nav-icon-h: 38px;
    --main-pad: 18px 24px 48px;
    --main-gap: 16px;
    --h1-fs: 25px;
    --stack-gap: 14px;
    --band-h: 36px;
    --band-inset: 8px;
    --card-head-pad: 11px 16px;
    --card-pad: 16px;
    --card-foot-pad: 9px 16px;
    --settings-gap: 12px;
    --settings-card-pad: 8px 16px 16px;
    --th-pad: 8px 14px;
    --td-pad: 9px 14px;
    --field-h: 32px;
    --control-h: 32px;
    --control-pad: 5px 12px;
    /* Dossier d'examen : barre de la patiente, scène, boutons ronds, sections. */
    --ara-main-pad: 5px 8px 6px;
    --ara-gap: 5px;
    --ara-bar-h: 38px;
    --ara-bar-pad: 4px;
    --ara-stage-gap: 6px;
    --ara-rail-w: 38px;
    --ara-rb: 34px;
    --ara-rb-icon: 18px;
    --ara-rail-gap: 4px;
    --ara-rail-sep-m: 1px;
    --ara-rail-sep-p: 5px;
    --ara-win-head-pad: 4px 6px 4px 14px;
    --ara-win-gap: 12px;
    --ara-win-pad: 10px 12px 12px;
    --ara-cond-gap: 12px;
    --ara-tympa-gap: 12px;
    --ara-ear-pad: 10px 12px;
    --ara-group-pad: 10px 0 12px;
    --ara-detached-pad: 5px;
    --ara-pane-bar-h: 34px;
    /* Audiogramme (audiogram_web, présentation serrée) : ses boutons sur une
       rangée, la colonne du milieu à leur largeur, la légende à la sienne. */
    --agm-tools-wrap: nowrap;
    --agm-tool-px: 8px;
    --agm-side-w: clamp(188px, 24cqi, 214px);
    --agm-legend-w: clamp(170px, 24cqi, 214px);
    --agm-pta-merge: contents;
    --agm-pta-ears: none;
  }
}

/* --- Choix de la page Affichage : trois pastilles, comme les gammes de
   couleurs (themes.css) ; le radio couvre la pastille. L'aperçu : trois
   lignes plus ou moins espacées. --- */
.density-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.density-choice {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px;
  min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.25; cursor: pointer;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms;
}
.density-choice input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.density-choice:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.density-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.density-choice:has(input:checked)::after {
  content: ""; position: absolute; top: 8px; right: 10px; width: 4px; height: 8px;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.density-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.density-chip {
  grid-row: span 2; display: flex; flex-direction: column; justify-content: center; gap: var(--chip-gap, 5px);
  height: 36px; padding: 0 7px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg);
}
.density-chip i { display: block; height: 3px; border-radius: 2px; background: var(--ink-3); }
.density-chip i:first-child { background: var(--accent); }
[data-density-choice="compact"] .density-chip { --chip-gap: 3px; }
[data-density-choice="comfortable"] .density-chip { --chip-gap: 7px; }
/* Automatique : serré à gauche, aéré à droite. */
[data-density-choice="auto"] .density-chip { --chip-gap: 4px; background: linear-gradient(90deg, var(--bg) 50%, var(--surface-2) 50%); }
.density-name { align-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.density-hint { align-self: start; font-size: 12px; font-weight: 450; line-height: 1.35; color: var(--ink-3); }
.density-card .help { margin: 0 0 14px; }
.density-picker { display: grid; gap: 12px; }
@media (max-width: 900px) { .density-choices { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .density-choice { transition: none; } }

/* Gammes de couleurs : généré par scripts/themes_css.mjs depuis src/theme/schemes.json (ne pas modifier ici). */
:root[data-scheme="sauge"] { color-scheme: light; --hue: 150; --bg: oklch(0.945 0.01 125); --surface: oklch(0.992 0.004 125); --surface-2: oklch(0.955 0.012 125); --line: oklch(0.895 0.014 125); --line-2: oklch(0.81 0.016 125); --ink: oklch(0.23 0.015 125); --ink-2: oklch(0.41 0.016 125); --ink-3: oklch(0.5 0.015 125); --off: oklch(0.48 0.01 125); --off-soft: oklch(0.94 0.005 125); --accent: oklch(0.43 0.06 150); --accent-ink: oklch(0.995 0.003 150); --accent-soft: oklch(0.94 0.02 150); --focus: oklch(0.49 0.065 150); --chrome: oklch(0.26 0.03 150); --chrome-ink: oklch(0.97 0.006 150); --chrome-ink-2: oklch(0.8 0.02 150); --chrome-field: oklch(0.32 0.03 150); --chrome-line: oklch(0.36 0.03 150); --av-base: oklch(0.94 0.02 150); --av-ink: oklch(0.4 0.05 150); }
:root[data-scheme="lin"] { color-scheme: light; --hue: 235; --bg: oklch(0.945 0.014 75); --surface: oklch(0.993 0.005 75); --surface-2: oklch(0.955 0.016 75); --line: oklch(0.895 0.018 75); --line-2: oklch(0.81 0.02 75); --ink: oklch(0.23 0.014 75); --ink-2: oklch(0.41 0.015 75); --ink-3: oklch(0.5 0.015 75); --off: oklch(0.48 0.01 75); --off-soft: oklch(0.94 0.006 75); --accent: oklch(0.43 0.075 235); --accent-ink: oklch(0.995 0.0025 235); --accent-soft: oklch(0.94 0.018 235); --focus: oklch(0.49 0.075 235); --chrome: oklch(0.27 0.035 235); --chrome-ink: oklch(0.97 0.006 235); --chrome-ink-2: oklch(0.8 0.02 235); --chrome-field: oklch(0.33 0.035 235); --chrome-line: oklch(0.37 0.03 235); --av-base: oklch(0.94 0.02 235); --av-ink: oklch(0.4 0.055 235); }
:root[data-scheme="prune"] { color-scheme: light; --hue: 325; --bg: oklch(0.945 0.012 320); --surface: oklch(0.992 0.004 320); --surface-2: oklch(0.955 0.014 320); --line: oklch(0.895 0.016 320); --line-2: oklch(0.81 0.018 320); --ink: oklch(0.23 0.02 320); --ink-2: oklch(0.41 0.02 320); --ink-3: oklch(0.5 0.018 320); --off: oklch(0.48 0.01 320); --off-soft: oklch(0.94 0.005 320); --accent: oklch(0.42 0.12 325); --accent-ink: oklch(0.995 0.003 325); --accent-soft: oklch(0.94 0.025 325); --focus: oklch(0.48 0.12 325); --chrome: oklch(0.25 0.05 325); --chrome-ink: oklch(0.97 0.008 325); --chrome-ink-2: oklch(0.8 0.03 325); --chrome-field: oklch(0.32 0.05 325); --chrome-line: oklch(0.36 0.045 325); --av-base: oklch(0.94 0.025 325); --av-ink: oklch(0.4 0.08 325); }
:root[data-scheme="havre"] { color-scheme: light; --hue: 242.3; --bg: oklch(0.905 0.0158 88); --surface: oklch(0.961 0.0083 88); --surface-2: oklch(0.935 0.012 88); --line: oklch(0.865 0.018 88); --line-2: oklch(0.78 0.022 88); --off: oklch(0.47 0.01 88); --off-soft: oklch(0.92 0.006 88); --accent-ink: oklch(0.961 0.0083 88); --chrome-ink: oklch(0.961 0.0083 88); --ink: oklch(0.273 0.0386 242.3); --ink-2: oklch(0.34 0.0518 242.3); --ink-3: oklch(0.48 0.03 242.3); --accent: oklch(0.455 0.085 242.3); --accent-soft: oklch(0.925 0.022 242.3); --focus: oklch(0.515 0.085 242.3); --chrome: oklch(0.273 0.0386 242.3); --chrome-ink-2: oklch(0.8 0.03 242.3); --chrome-field: oklch(0.34 0.0518 242.3); --chrome-line: oklch(0.39 0.05 242.3); --av-base: oklch(0.925 0.022 242.3); --av-ink: oklch(0.4 0.07 242.3); --accent-2: oklch(0.51 0.15 34.1); --accent-2-ink: oklch(0.995 0.0025 34.1); --accent-2-soft: oklch(0.93 0.03 34.1); --chrome-active: oklch(0.8 0.09 34.1); }
:root[data-scheme="contraste"] { color-scheme: light; --hue: 275; --bg: oklch(0.965 0.004 270); --surface: oklch(1 0 270); --surface-2: oklch(0.945 0.006 270); --line: oklch(0.62 0.01 270); --line-2: oklch(0.5 0.012 270); --ink: oklch(0.15 0.01 270); --ink-2: oklch(0.28 0.012 270); --ink-3: oklch(0.38 0.012 270); --off: oklch(0.38 0.01 270); --off-soft: oklch(0.93 0.004 270); --accent: oklch(0.36 0.16 275); --accent-ink: oklch(1 0 275); --accent-soft: oklch(0.93 0.03 275); --focus: oklch(0.4 0.17 275); --chrome: oklch(0.17 0.04 275); --chrome-ink: oklch(0.99 0.004 275); --chrome-ink-2: oklch(0.88 0.02 275); --chrome-field: oklch(0.25 0.04 275); --chrome-line: oklch(0.32 0.04 275); --av-base: oklch(0.93 0.03 275); --av-ink: oklch(0.32 0.1 275); }
:root[data-scheme="nuit"] { color-scheme: dark; --hue: 215; --bg: oklch(0.165 0.012 250); --surface: oklch(0.2 0.014 250); --surface-2: oklch(0.235 0.016 250); --line: oklch(0.3 0.016 250); --line-2: oklch(0.4 0.018 250); --ink: oklch(0.93 0.008 250); --ink-2: oklch(0.8 0.012 250); --ink-3: oklch(0.7 0.012 250); --off: oklch(0.68 0.01 250); --off-soft: oklch(0.28 0.008 250); --accent: oklch(0.8 0.085 215); --accent-ink: oklch(0.2 0.03 215); --accent-soft: oklch(0.3 0.045 215); --focus: oklch(0.84 0.08 215); --chrome: oklch(0.13 0.02 215); --chrome-ink: oklch(0.95 0.008 215); --chrome-ink-2: oklch(0.76 0.02 215); --chrome-field: oklch(0.2 0.025 215); --chrome-line: oklch(0.26 0.025 215); --av-base: oklch(0.32 0.045 215); --av-ink: oklch(0.88 0.05 215); --accent-2: oklch(0.76 0.1425 32.3); --accent-2-ink: oklch(0.18 0.04 32.3); --accent-2-soft: oklch(0.31 0.0722 32.3); --chrome-active: oklch(0.8 0.1156 32.3); --ok: oklch(0.8 0.11 152); --ok-soft: oklch(0.29 0.045 152); --warn: oklch(0.84 0.12 80); --warn-soft: oklch(0.31 0.05 75); --bad: oklch(0.75 0.15 32.3); --bad-soft: oklch(0.31 0.07 32.3); --bad-ink: oklch(0.18 0.04 32.3); --ear-d: oklch(0.75 0.15 32.3); --ear-d-soft: oklch(0.32 0.07 32.3); --ear-g: oklch(0.78 0.1 262.5); --ear-g-soft: oklch(0.32 0.06 262.5); }
:root[data-scheme="nuit"] .ara-audiogram, :root[data-scheme="nuit"] .ara-tympanogram, :root[data-scheme="nuit"] .audiogram-view, :root[data-scheme="nuit"] .audiogram-editor, :root[data-scheme="nuit"] .quad { color-scheme: light; --accent-2: oklch(0.5 0.1891 32.3); --accent-2-ink: oklch(0.995 0.0025 32.3); --accent-2-soft: oklch(0.95 0.0253 32.3); --chrome-active: oklch(0.86 0.0764 32.3); --ok: oklch(0.5 0.11 152); --ok-soft: oklch(0.955 0.035 152); --warn: oklch(0.53 0.1169 68); --warn-soft: oklch(0.96 0.0424 85); --bad: oklch(0.515 0.193 32.3); --bad-soft: oklch(0.955 0.0227 32.3); --bad-ink: oklch(1 0 0); --ear-d: oklch(0.515 0.193 32.3); --ear-d-soft: oklch(0.95 0.0253 32.3); --ear-g: oklch(0.5 0.13 262.5); --ear-g-soft: oklch(0.95 0.0238 262.5); --bg: oklch(0.9 0.008 250); --surface: oklch(0.93 0.006 250); --surface-2: oklch(0.9 0.01 250); --line: oklch(0.84 0.012 250); --line-2: oklch(0.76 0.015 250); --ink: oklch(0.22 0.02 250); --ink-2: oklch(0.37 0.02 250); --ink-3: oklch(0.44 0.018 250); --accent: oklch(0.42 0.08 215); --accent-ink: oklch(0.99 0.003 215); --accent-soft: oklch(0.88 0.025 215); --focus: oklch(0.46 0.08 215); --ok: oklch(0.5 0.11 152); --ok-soft: oklch(0.92 0.035 152); --agm-paper: oklch(0.95 0.004 250); --band: color-mix(in oklch, var(--accent-soft) 80%, var(--surface)); --band-line: color-mix(in oklch, var(--accent) 24%, var(--line)); --band-shadow: 0 1px 2px oklch(.3 .05 var(--hue) / .10), 0 2px 8px oklch(.3 .05 var(--hue) / .08); color: var(--ink); }
[data-swatch="marine"] { --sw-bg: oklch(0.94 0.018 262.5); --sw-surface: oklch(0.99 0.0047 262.5); --sw-line: oklch(0.8 0.0288 262.5); --sw-accent: oklch(0.43 0.14 262.5); --sw-ink: oklch(0.22 0.025 262.5); }
:root[data-product="audiology"] [data-swatch="marine"] { --sw-bg: oklch(0.94 0.011 194); --sw-surface: oklch(0.99 0.004 194); --sw-line: oklch(0.8 0.018 194); --sw-accent: oklch(0.45 0.077 194); --sw-ink: oklch(0.22 0.022 194); }
[data-swatch="sauge"] { --sw-bg: oklch(0.945 0.01 125); --sw-surface: oklch(0.992 0.004 125); --sw-line: oklch(0.81 0.016 125); --sw-accent: oklch(0.43 0.06 150); --sw-ink: oklch(0.23 0.015 125); }
[data-swatch="lin"] { --sw-bg: oklch(0.945 0.014 75); --sw-surface: oklch(0.993 0.005 75); --sw-line: oklch(0.81 0.02 75); --sw-accent: oklch(0.43 0.075 235); --sw-ink: oklch(0.23 0.014 75); }
[data-swatch="prune"] { --sw-bg: oklch(0.945 0.012 320); --sw-surface: oklch(0.992 0.004 320); --sw-line: oklch(0.81 0.018 320); --sw-accent: oklch(0.42 0.12 325); --sw-ink: oklch(0.23 0.02 320); }
[data-swatch="havre"] { --sw-bg: oklch(0.905 0.0158 88); --sw-surface: oklch(0.961 0.0083 88); --sw-line: oklch(0.78 0.022 88); --sw-accent: oklch(0.455 0.085 242.3); --sw-ink: oklch(0.273 0.0386 242.3); }
[data-swatch="contraste"] { --sw-bg: oklch(0.965 0.004 270); --sw-surface: oklch(1 0 270); --sw-line: oklch(0.5 0.012 270); --sw-accent: oklch(0.36 0.16 275); --sw-ink: oklch(0.15 0.01 270); }
[data-swatch="nuit"] { --sw-bg: oklch(0.165 0.012 250); --sw-surface: oklch(0.2 0.014 250); --sw-line: oklch(0.4 0.018 250); --sw-accent: oklch(0.8 0.085 215); --sw-ink: oklch(0.93 0.008 250); }