/* Sillage — feuille de style unique. Les règles et leurs raisons sont dans DESIGN.md.
   Direction « carnet de santé » : papier, encre, tampon du vétérinaire, vignettes
   de vaccin. La couleur ne sert qu'à dire d'où vient une information (tampon
   d'une clinique ou mention au crayon du détenteur) et ce qui demande une action. */

@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/atkinson-next.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/atkinson-next-italic.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Mono'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/atkinson-mono.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/source-serif-4.woff2) format('woff2'); }

:root {
  /* Surfaces : trois niveaux, pas plus. */
  --paper: #f5f2ea;        /* fond de page : papier du carnet */
  --sheet: #fffdf8;        /* feuille posée sur le papier */
  --tint: #ece7db;         /* remplissage discret (champ, ligne survolée) */
  --rule: #d6cdbb;         /* filets */
  --rule-strong: #a99d85;  /* bordures de contrôles */
  /* Encres. Chaque texte passe 4,5:1 sur --paper et --sheet. */
  --ink: #1b2130;
  --ink-2: #434a58;
  --ink-3: #575d6a;
  /* Bleu du passeport pour animaux : marque et action principale. */
  --carnet: #1f4470;
  --carnet-hover: #173658;
  --carnet-ink: #ffffff;
  --carnet-soft: #e2e8f0;
  /* Provenance. */
  --stamp: #1e4f86;        /* tampon d'une clinique : vérifié et signé */
  --stamp-soft: #e6edf6;
  --pencil: #7a4e0c;       /* mention du détenteur : déclaré, non vérifié */
  --pencil-soft: #f6ead4;
  /* États. */
  --alert: #a3241a;        /* allergie, urgence, retard, altération */
  --alert-soft: #f8e4df;
  --ok: #2b6338;           /* à jour, intact */
  --ok-soft: #e3efe2;
  --focus: #1b5fd0;
  --shadow-pop: 0 2px 4px rgba(27, 33, 48, .08), 0 12px 32px rgba(27, 33, 48, .14);

  --font-body: 'Atkinson Hyperlegible Next', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, Menlo, monospace;
  --font-title: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Échelle typographique (1,2 environ). */
  --t-xs: .8125rem;   /* 13 px : mentions, jamais en dessous */
  --t-sm: .875rem;    /* 14 px : métadonnées */
  --t-md: 1rem;       /* 16 px : texte courant */
  --t-lg: 1.1875rem;  /* 19 px : titres de section */
  --t-xl: 1.5rem;     /* 24 px : titre secondaire */
  --t-2xl: 2rem;      /* 32 px : nom de l'animal, titre de page */

  /* Échelle d'espacement (base 4). */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 2px;  /* étiquettes, tampons */
  --r-md: 4px;  /* feuilles, champs, boutons */
  --target: 44px; /* cible tactile minimale sur écran tactile */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1814; --sheet: #23201b; --tint: #2e2a23; --rule: #3b362d; --rule-strong: #5c5547;
    --ink: #ede6d6; --ink-2: #cbc2b0; --ink-3: #b3aa97;
    --carnet: #9dbbe0; --carnet-hover: #b6cce8; --carnet-ink: #14181f; --carnet-soft: #2a3038;
    --stamp: #a5c1e6; --stamp-soft: #262c33; --pencil: #e2b46a; --pencil-soft: #352a17;
    --alert: #f2917f; --alert-soft: #3d1f1a; --ok: #8fcb98; --ok-soft: #1b3020; --focus: #8ab4ff;
    --shadow-pop: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1a1814; --sheet: #23201b; --tint: #2e2a23; --rule: #3b362d; --rule-strong: #5c5547;
  --ink: #ede6d6; --ink-2: #cbc2b0; --ink-3: #b3aa97;
  --carnet: #9dbbe0; --carnet-hover: #b6cce8; --carnet-ink: #14181f; --carnet-soft: #2a3038;
  --stamp: #a5c1e6; --stamp-soft: #262c33; --pencil: #e2b46a; --pencil-soft: #352a17;
  --alert: #f2917f; --alert-soft: #3d1f1a; --ok: #8fcb98; --ok-soft: #1b3020; --focus: #8ab4ff;
  --shadow-pop: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* --- Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: var(--t-md)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font: 600 var(--t-2xl)/1.15 var(--font-title); letter-spacing: -.01em; }
h2 { font-size: var(--t-lg); font-weight: 700; }
h3 { font-size: var(--t-md); font-weight: 700; }
p { margin: 0; }
a { color: var(--carnet); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.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; }
.skip-link { position: absolute; left: var(--s4); top: -60px; z-index: 100; background: var(--carnet); color: var(--carnet-ink); padding: var(--s2) var(--s4); border-radius: var(--r-md); }
.skip-link:focus { top: var(--s2); }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); font-size: var(--t-sm); }
.label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s5); }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--s2) var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* --- Bandeau de démo (hors produit) et barre du produit ---------------------- */
.demo-bar { background: #1b2130; color: #f5f2ea; font-size: var(--t-sm); border-bottom: 1px solid #000; } /* même rendu en clair et en sombre */
.demo-bar-inner { max-width: 1240px; margin: 0 auto; padding: var(--s1) var(--s4); display: flex; gap: var(--s2) var(--s3); align-items: center; flex-wrap: wrap; min-height: 40px; }
.demo-bar label { display: flex; gap: var(--s2); align-items: center; min-width: 0; flex: 1 1 260px; }
.demo-bar select { min-width: 0; flex: 1; max-width: 420px; padding: 5px 8px; border-radius: var(--r-md); border: 1px solid #5d6576; background: #262d3b; color: #f5f2ea; }
.demo-bar .demo-tag { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--t-xs); color: #f0d79a; }
.demo-bar .demo-mode { color: #c9ccd3; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.topbar-inner { max-width: 1240px; margin: 0 auto; padding: var(--s2) var(--s4); display: flex; gap: var(--s3); align-items: center; min-height: 56px; }
.brand { display: flex; align-items: baseline; gap: var(--s2); color: var(--ink); background: none; border: 0; padding: var(--s1) 0; cursor: pointer; text-align: left; min-height: var(--target); }
.brand-name { font: 700 1.45rem/1 var(--font-title); color: var(--carnet); letter-spacing: -.01em; }
.brand-trail { color: var(--carnet); display: inline-flex; align-self: center; }
.brand-sub { font-size: var(--t-sm); color: var(--ink-3); }
.topbar-spacer { flex: 1; }
.topbar-who { text-align: right; line-height: 1.25; font-size: var(--t-sm); }
.topbar-who strong { display: block; font-size: var(--t-md); }
.icon-btn { position: relative; border: 1px solid var(--rule-strong); background: var(--sheet); border-radius: var(--r-md); min-width: var(--target); min-height: var(--target); cursor: pointer; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--tint); }
.badge-count { position: absolute; top: -6px; right: -6px; background: var(--alert); color: #fff; border-radius: 10px; font-size: var(--t-xs); min-width: 20px; height: 20px; padding: 0 5px; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 640px) {
  .brand-sub, .topbar-who { display: none; }
  .demo-bar label > span:first-child { display: none; }
}

/* --- Mise en page ---------------------------------------------------------- */
.shell { max-width: 1240px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--s6); }
.sidenav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; align-self: start; }
.sidenav a { text-decoration: none; padding: 9px 12px; border-radius: var(--r-md); color: var(--ink-2); display: block; border-left: 3px solid transparent; }
.sidenav a:hover { background: var(--tint); color: var(--ink); }
.sidenav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-left-color: var(--carnet); background: var(--sheet); }
.sidenav .nav-sep { height: 1px; background: var(--rule); margin: var(--s3) var(--s1); }
.sidenav .nav-group { padding: var(--s1) 12px; }
main { min-width: 0; }
main:focus { outline: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s3); }
  .sidenav { position: static; flex-direction: row; overflow-x: auto; gap: var(--s1); margin-inline: calc(-1 * var(--s4)); padding: 0 var(--s4) var(--s1); scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 85%, transparent); -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); }
  .sidenav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; min-height: var(--target); display: flex; align-items: center; }
  .sidenav a[aria-current="page"] { border-bottom-color: var(--carnet); background: none; }
  .sidenav .nav-sep, .sidenav .nav-group { display: none; }
}

/* --- Surfaces ---------------------------------------------------------------- */
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s5); min-width: 0; }
.panel-tight { padding: var(--s3) var(--s4); }
.panel > h2 + *, .panel > .row-between:first-child + * { margin-top: var(--s1); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; padding-bottom: var(--s2); border-bottom: 2px solid var(--ink); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.page-head p { margin-top: var(--s1); }
.callout { border-left: 4px solid; padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: flex-start; background: var(--sheet); border-radius: 0 var(--r-md) var(--r-md) 0; }
.callout > svg, .callout > span:first-child { flex: none; margin-top: 3px; }
.callout.info { border-color: var(--carnet); background: var(--carnet-soft); }
.callout.warn { border-color: var(--pencil); background: var(--pencil-soft); }
.callout.danger { border-color: var(--alert); background: var(--alert-soft); }
.callout.ok { border-color: var(--ok); background: var(--ok-soft); }
.hint-list { margin: var(--s1) 0 0; padding-left: 20px; color: var(--ink-2); }
.hint-list li + li { margin-top: var(--s1); }

/* Fil du parcours de démo : discret, repliable, au-dessus du contenu. */
.demo-hint { border: 1px dashed var(--rule-strong); border-radius: var(--r-md); background: transparent; font-size: var(--t-sm); }
.demo-hint summary { cursor: pointer; padding: var(--s2) var(--s3); min-height: var(--target); display: flex; align-items: center; gap: var(--s2); list-style: none; }
.demo-hint summary::-webkit-details-marker { display: none; }
.demo-hint summary::before { content: '▸'; color: var(--ink-3); }
.demo-hint[open] summary::before { content: '▾'; }
.demo-hint .demo-body { padding: 0 var(--s3) var(--s3) calc(var(--s3) + 14px); color: var(--ink-2); }

/* --- Boutons et formulaires ---------------------------------------------------
   Quatre styles seulement : primaire, secondaire (défaut), lien, danger. */
.btn { border: 1px solid var(--rule-strong); background: var(--sheet); padding: 8px 14px; border-radius: var(--r-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-weight: 600; text-decoration: none; color: var(--ink); min-height: 40px; line-height: 1.2; }
.btn:hover { background: var(--tint); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--carnet); color: var(--carnet-ink); border-color: var(--carnet); }
.btn.primary:hover { background: var(--carnet-hover); border-color: var(--carnet-hover); }
.btn.danger { color: var(--alert); border-color: var(--alert); background: var(--sheet); }
.btn.danger:hover { background: var(--alert-soft); }
.btn.danger.solid { background: var(--alert); color: #fff; }
.btn.ghost { background: none; border-color: transparent; color: var(--carnet); padding-inline: var(--s2); text-decoration: underline; text-underline-offset: 3px; }
.btn.ghost:hover { background: var(--tint); }
.btn.small { padding: 5px 10px; font-size: var(--t-sm); min-height: 34px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after { content: ''; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .btn[aria-busy="true"]::after { animation: spin .7s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (pointer: coarse) { .btn, .btn.small { min-height: var(--target); } }

label.field { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; min-width: 0; }
.req { color: var(--alert); font-weight: 700; }
.field input, .field select, .field textarea, input.input, select.input, textarea.input {
  padding: 9px 10px; border-radius: var(--r-md); border: 1px solid var(--rule-strong); background: var(--sheet); color: var(--ink); font-size: var(--t-md); font-weight: 400; min-width: 0; width: 100%; min-height: 42px; }
.field input[aria-invalid="true"], .input[aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert); }
.field-error { color: var(--alert); font-size: var(--t-sm); font-weight: 600; }
textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3) var(--s4); }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-md); color: var(--ink); min-height: 32px; cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--carnet); }
.search-bar { display: flex; gap: var(--s2); }
.search-bar input { flex: 1; font-family: var(--font-mono); font-size: 1.125rem; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--rule-strong); background: var(--sheet); min-width: 0; min-height: 48px; }
.search-bar .btn { min-height: 48px; }

/* --- Étiquettes (remplacent les pastilles) ---------------------------------------
   Rectangulaires, toujours avec un texte explicite ; l'icône double la couleur. */
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-sm); padding: 1px 6px; font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); border: 1px solid var(--rule-strong); white-space: nowrap; line-height: 1.5; background: var(--sheet); }
.chip.verified, .chip.ok { color: var(--ok); border-color: currentColor; background: var(--ok-soft); }
.chip.declared { color: var(--pencil); border-color: currentColor; border-style: dashed; background: var(--pencil-soft); }
.chip.danger { color: var(--alert); border-color: currentColor; background: var(--alert-soft); }
.chip.info { color: var(--stamp); border-color: currentColor; background: var(--stamp-soft); }
.chip.outline { background: none; }

/* Le tampon : provenance d'une donnée. Encre bleue et cadre net pour une clinique,
   trait pointillé et crayon pour le détenteur, rouge plein pour une altération. */
.seal { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-xs); font-weight: 700; padding: 2px 8px 2px 6px; border-radius: var(--r-sm); max-width: 100%; line-height: 1.4; }
.seal.verified { color: var(--stamp); border: 3px double currentColor; background: var(--stamp-soft); padding-block: 1px; }
.seal.declared { color: var(--pencil); border: 1.5px dashed currentColor; background: var(--pencil-soft); font-style: italic; }
.seal.altered { color: #fff; background: var(--alert); border: 1.5px solid var(--alert); }
.seal span { overflow: hidden; text-overflow: ellipsis; }
.seal svg { flex: none; }

/* --- Animaux ------------------------------------------------------------------- */
.pet-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; text-align: left; cursor: pointer; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s4); width: 100%; color: var(--ink); font-size: var(--t-md); }
.pet-card:hover { border-color: var(--carnet); }
.pet-card .pet-name { font: 600 var(--t-lg)/1.2 var(--font-title); }
.pet-card .due { font-size: var(--t-sm); color: var(--ink-2); }
.pet-card .due.overdue { color: var(--alert); font-weight: 700; }
/* La médaille : l'initiale de l'animal frappée sur une médaille de collier. */
.medal { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--carnet-soft); color: var(--carnet); border: 2px solid var(--carnet); flex: none; font: 700 1.2rem/1 var(--font-title); }
.medal.lg { width: 68px; height: 68px; font-size: 1.9rem; border-width: 3px; }
.pet-head { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; }
.pet-head .grow { flex: 1; min-width: 240px; }
.pet-head h1 { font-size: 2.25rem; }
.ident { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 3px 4px 3px 10px; flex-wrap: wrap; }
.ident strong { font-family: var(--font-mono); font-size: 1rem; letter-spacing: .02em; white-space: nowrap; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule-strong); overflow-x: auto; scrollbar-width: none; }
@media (max-width: 700px) { .tabs { mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 24px; } }
.access-note { display: flex; gap: 6px; align-items: baseline; }
.access-note > span:first-child { align-self: center; }
.alert-strip { display: flex; gap: var(--s2) var(--s5); flex-wrap: wrap; padding: var(--s2) var(--s4); background: var(--sheet); border: 1px solid var(--rule); border-left: 6px solid var(--alert); font-size: var(--t-sm); }
.alert-strip .allergy { color: var(--alert); }
.alert-strip .allergy strong { font-size: var(--t-md); }
.tabs [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--ink-2); white-space: nowrap; font-weight: 600; min-height: var(--target); margin-bottom: -1px; }
.tabs [role="tab"]:hover { color: var(--ink); background: var(--tint); }
.tabs [role="tab"][aria-selected="true"] { border-color: var(--carnet); color: var(--ink); }

/* --- Fiche de synthèse : une feuille réglée, pas une grille de cartes ------------ */
.summary { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md); }
.summary-alert { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s3) var(--s5); background: var(--alert-soft); color: var(--ink); border-bottom: 1px solid var(--rule); border-left: 6px solid var(--alert); border-radius: var(--r-md) var(--r-md) 0 0; flex-wrap: wrap; }
.summary-alert .label { color: var(--alert); }
.summary-alert strong { color: var(--alert); font-size: var(--t-lg); }
.summary-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s4); padding: var(--s3) var(--s5); border-top: 1px solid var(--rule); }
.summary-row:first-child { border-top: 0; }
.summary-alert + .summary-row { border-top: 0; }
.summary-row > .label { padding-top: 3px; }
.summary-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.summary .src { display: flex; gap: 4px; align-items: center; font-size: var(--t-xs); color: var(--ink-3); }
.summary .src.verified svg { color: var(--stamp); }
.summary .src.declared { color: var(--pencil); font-style: italic; }
.weight { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
.weight-value { font: 600 1.6rem/1 var(--font-title); }
.spark { width: 220px; max-width: 100%; height: 46px; display: block; }
@media (max-width: 560px) { .summary-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding-inline: var(--s4); } .summary-alert { padding-inline: var(--s4); } }

/* Vignette de vaccin : l'étiquette que le vétérinaire colle dans le carnet. */
.vignettes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.vignette { border-left: 4px solid var(--ok); background: var(--tint); padding: 6px 10px; min-width: 170px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.vignette.overdue { border-left-color: var(--alert); }
.vignette.due_soon { border-left-color: var(--pencil); }
.vignette-name { font-weight: 700; }
.vignette-meta { font-size: var(--t-xs); color: var(--ink-3); }

/* --- Chronologie : un registre ------------------------------------------------- */
.filters { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.filters button { border: 1px solid var(--rule-strong); background: var(--sheet); border-radius: var(--r-md); padding: 4px 10px; font-size: var(--t-sm); cursor: pointer; color: var(--ink-2); min-height: 34px; }
.filters button:hover { background: var(--tint); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
@media (pointer: coarse) { .filters button { min-height: var(--target); } }
.timeline { display: flex; flex-direction: column; }
.tl-entry { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.tl-entry:first-child { border-top: 0; }
.tl-date { color: var(--ink-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.tl-date strong { display: block; color: var(--ink); font-size: var(--t-md); }
.tl-body { min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.tl-head { display: flex; gap: var(--s2) var(--s3); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.tl-head h3 { font-size: var(--t-md); }
.tl-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.tl-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: baseline; }
.tl-item .what { min-width: 0; }
.tl-item .tl-actions { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.tl-item.superseded .what { text-decoration: line-through; color: var(--ink-3); }
.type-tag { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink-3); }
.doc-link { display: inline-flex; gap: var(--s2); align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); padding: 5px 10px; background: var(--sheet); cursor: pointer; font-size: var(--t-sm); color: var(--ink); min-height: 34px; }
.doc-link:hover { border-color: var(--carnet); background: var(--tint); }
.summary-text { color: var(--ink-2); border-left: 2px solid var(--rule-strong); padding-left: var(--s3); }
@media (max-width: 600px) {
  .tl-entry { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .tl-date strong { display: inline; margin-right: var(--s2); }
  .tl-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tl-item .tl-actions { justify-content: flex-start; }
}

/* --- Listes et tableaux -------------------------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--s3) 0; border-top: 1px solid var(--rule); display: flex; gap: var(--s2) var(--s3); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.list > li:first-child { border-top: 0; padding-top: 0; }
.list > li:last-child { padding-bottom: 0; }
.reminder .when { text-align: right; font-size: var(--t-sm); white-space: nowrap; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data caption { text-align: left; }
table.data th { text-align: left; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; border-bottom: 2px solid var(--ink); }
table.data td { padding: 9px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
/* Sur petit écran, chaque ligne devient une fiche : plus de défilement horizontal. */
@media (max-width: 640px) {
  table.data.stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data.stackable, table.data.stackable tbody, table.data.stackable tr, table.data.stackable td { display: block; width: 100%; }
  table.data.stackable tr { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
  table.data.stackable tr:last-child { border-bottom: 0; }
  table.data.stackable td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s2); }
  table.data.stackable td::before { content: attr(data-label); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-top: 2px; }
  table.data.stackable td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  table.data.stackable td[data-label=""]::before { display: none; }
}

/* --- Fiche urgence --------------------------------------------------------------- */
.sheet { border: 2px solid var(--alert); border-radius: var(--r-md); overflow: hidden; background: var(--sheet); }
.sheet-head { background: var(--alert); color: #fff; padding: var(--s3) var(--s4); display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.sheet-head h2 { font: 600 var(--t-xl)/1.2 var(--font-title); }
.sheet-head .label { color: #ffe7e2; }
.sheet-body { padding: var(--s4); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4) var(--s5); }
.sheet-body section h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: var(--s1); padding-bottom: 2px; border-bottom: 1px solid var(--rule); }
.sheet-body ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.qr-box { background: #fff; padding: 10px; border-radius: var(--r-md); display: inline-block; border: 1px solid var(--rule); }
.qr-box img, .qr-box canvas { display: block; }
.share-code { font-family: var(--font-mono); font-size: 2.4rem; letter-spacing: .25em; font-weight: 600; }

/* --- Logiciel de clinique simulé : volontairement « autre logiciel » ------------------ */
.pms { border: 1px solid #8a94a6; border-radius: 3px; background: #eef1f6; color: #1d2433; font-family: Tahoma, Verdana, sans-serif; font-size: 13px; overflow: hidden; }
.pms-title { background: #33508a; color: #fff; padding: 5px 10px; font-weight: bold; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pms-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pms input, .pms select, .pms textarea { border: 1px solid #6f7a8f; border-radius: 2px; background: #fff; color: #1d2433; padding: 4px 6px; font: inherit; width: 100%; min-width: 0; min-height: 28px; }
.pms label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pms .pms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pms button { background: #e3e7ee; border: 1px solid #6f7a8f; border-radius: 3px; padding: 6px 12px; cursor: pointer; color: #1d2433; font: inherit; }
.pms button.go { background: #2f6f2f; color: #fff; border-color: #245824; font-weight: bold; }
pre.code { background: var(--tint); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px 12px; font: .8125rem/1.45 var(--font-mono); overflow: auto; max-height: 420px; margin: 0; white-space: pre; }
pre.doc { white-space: pre-wrap; font: .9375rem/1.6 var(--font-mono); background: var(--tint); padding: var(--s4); border-radius: var(--r-md); margin: 0; }

/* --- Modale (élément <dialog> natif), toasts, notifications ---------------------- */
dialog.modal { border: 0; padding: 0; background: var(--sheet); color: var(--ink); border-radius: var(--r-md); width: min(760px, calc(100% - 24px)); max-height: calc(100% - 32px); box-shadow: var(--shadow-pop); overflow: auto; }
dialog.modal.wide { width: min(980px, calc(100% - 24px)); }
dialog.modal::backdrop { background: rgba(18, 22, 29, .5); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--sheet); z-index: 1; }
.modal-head h2 { font: 600 var(--t-xl)/1.2 var(--font-title); }
.modal-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.modal-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--rule); display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--sheet); }
@media (max-width: 560px) {
  dialog.modal, dialog.modal.wide { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; }
  .modal-body { padding: var(--s4); }
  .modal-foot { padding: var(--s3) var(--s4); }
  .modal-foot .btn { flex: 1; }
}
.toasts { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); z-index: 60; pointer-events: none; }
.toast-region { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.toast { background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r-md); box-shadow: var(--shadow-pop); max-width: 440px; pointer-events: auto; }
.toast.error { background: var(--alert); color: #fff; }
.notif-panel { position: fixed; right: 16px; top: 108px; width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); z-index: 30; }
.notif-panel h2 { font-size: var(--t-md); }
.notif { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.notif:last-child { border-bottom: 0; }
.notif.unread { border-left: 4px solid var(--carnet); }

/* --- États : vide, chargement, erreur ------------------------------------------- */
.empty { padding: var(--s5) var(--s4); color: var(--ink-2); border: 1px dashed var(--rule-strong); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.empty strong { color: var(--ink); }
.panel .empty { border: 0; padding: 0; }
.skeleton { display: flex; flex-direction: column; gap: var(--s4); }
.skeleton .bone { background: var(--tint); border-radius: var(--r-md); height: 18px; }
.skeleton .bone.title { height: 36px; width: 40%; }
.skeleton .bone.block { height: 140px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton .bone { animation: breathe 1.4s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .55; } }
  .toast { animation: rise .18s ease-out; }
  @keyframes rise { from { transform: translateY(6px); opacity: .4; } }
}
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: step; }
.step-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; counter-increment: step; padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.step-list li:first-child { border-top: 0; padding-top: 0; }
.step-list li::before { content: counter(step); font: 600 1.25rem/1 var(--font-title); color: var(--carnet); text-align: center; }
@media (max-width: 560px) { .step-list li { grid-template-columns: 28px minmax(0, 1fr); } .step-list li > .btn { grid-column: 2; justify-self: start; } }

@media print {
  .demo-bar, .topbar, .sidenav, .tabs, .btn, .filters { display: none !important; }
  .shell { display: block; padding: 0; }
  body { background: #fff; }
}
@media (max-width: 420px) { .search-bar input { font-size: 1rem; letter-spacing: -.01em; } }